javascript - que - Mostrar siempre el texto de sugerencia de Control deslizante en Extjs

extjs que es

Question

En Extjs 4.1.1a, ¿Cómo mantener el tip text de tip text del control deslizante siempre visible?

Actualmente, el tip text está siendo visible cada vez que el usuario arrastra la barra del control deslizante.
Busqué en documentos pero no pude encontrar ningún concepto relacionado.

Si no está documentado o no es posible , explíqueme cómo crear el tip text manualmente. El tip text debe moverse a lo largo de la barra del control deslizante y no debe superar u ocultar ningún otro componente adyacente.

Aquí está mi código que genera un deslizador simple:

xtype:''slider'',
cls: ''sliderStyle'',
width: "80%",
id: ''slider'',
value: 6,
minValue: 1,
maxValue: 12,
useTips: true,

tipText: function(thumb){
    var months = ['''',''Jan'',''Feb'',''Mar'',''Apr'',''May'',''Jun'',''Jul'',''Aug'',''Sep'',''Oct'',''Nov'',''Dec''];
    var value = Ext.String.format(months[thumb.value]);
    return value;
},

Pregunta 2: ¿Es posible al menos mostrar el tip text la tip text cuando está sobre el control deslizante?

PD: También hice la misma pregunta aquí .

EDIT 1: También estoy moviendo la barra de búsqueda del control deslizante con dos botones adyacentes ( < y > ). Por lo tanto, se debe tener cuidado de que si muevo la barra de búsqueda con los botones adyacentes, el tip text la tip text también debería moverse.

EDIT 2: El texto de la sugerencia debe estar visible cuando se encuentre sobre el control deslizante o los botones adyacentes.

Respuesta : http://jsfiddle.net/WdjZn/1/

Answer 1

Ext.slider.Tip mantener visible la sugerencia anulando algunos controladores de eventos en Ext.slider.Tip :

Ext.define(''AlwaysVisibleTip'', {
    extend: ''Ext.slider.Tip'',

    init: function(slider) {
        var me = this;
        me.callParent(arguments);
        slider.removeListener(''dragend'', me.hide);
        slider.on({
            scope: me,
            change: me.onSlide,
            afterrender: function() {
                setTimeout(function() {
                    me.onSlide(slider, null, slider.thumbs[0]);
                }, 100);
            }
        });
    }
});

Ext.create(''Ext.slider.Single'', {
    animate: false,
    plugins: [Ext.create(''AlwaysVisibleTip'')],
    // ...
});

Mira la demostración .

Inconvenientes de mi enfoque:

1. Se basa en el método privado onSlide
2. Aplica solo al control deslizante individual
3. La navegación por teclado funciona correctamente solo si animate está configurado como false
4. setTimeout se utiliza para ajustar la posición inicial de la punta

La solución de estos inconvenientes requeriría la piratería no solo de la clase Ext.slider.Multy sino Ext.slider.Multy clase Ext.slider.Multy y probablemente de la clase Ext.slider.Thumb .

Editar

Se changecomplete evento de change changecomplete con evento de change ya que changecomplete no se slider.setValue() cuando se llama a slider.setValue() .

Se agregó una demo del control deslizante con botones adyacentes.

Edit2

tipText configuración de tipText ya no se aplica si se usa el complemento de punta personalizada. Tienes que usar la configuración getText del complemento:

Ext.create(''Ext.slider.Single'', {
    animate: false,
    plugins: [Ext.create(''AlwaysVisibleTip'',{
        getText: function(thumb) {
            var months = ['''',''Jan'',''Feb'',''Mar'',''Apr'',''May'',''Jun'',''Jul'',''Aug'',''Sep'',''Oct'',''Nov'',''Dec''];
            return Ext.String.format(months[thumb.value]);
        }
    })],
    // ...
});

Actualizado la demostración .

Answer 2

para extjs 4.2,
cambio :
slider.removeListener(''dragend'', me.hide);
a :
slider.removeListener(''dragend'', me.hide, me);