Всегда показывать текст подсказки слайдера в Extjs

В Extjs 4.1.1a Как сохранить видимость tip text ползунка?

В настоящее время tip text отображается, когда пользователь перетаскивает панель слайдера.
Я искал docs, но не смог найти никаких связанных понятий.

Если это не документировано или невозможно, пожалуйста, объясните мне, как создать tip text вручную. tip text должен перемещаться по полосе ползунка, и он не должен преодолевать или скрывать любые другие смежные компоненты.

Вот мой код, который генерирует простой слайдер:

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;
},

Вопрос 2: Возможно ли показать tip text при наведении курсора на слайдер?

PS: Я также задал тот же вопрос здесь.

EDIT 1: Я также перемещаю строку поиска ползунка с помощью двух соседних кнопок (< и >). Поэтому следует позаботиться о том, чтобы, если я перемещаю строку поиска с соседними кнопками, тогда должен также двигаться tip text.

РЕДАКТИРОВАТЬ 2: Текст подсказки должен быть виден при наведении курсора на слайдер или соседние кнопки.

Ответ: http://jsfiddle.net/WdjZn/1/

Ответы

Ответ 1

Мне удалось сохранить подсказку, переопределив некоторые обработчики событий в 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')],
    // ...
});

Просмотрите демонстрацию .

Недостатки моего подхода:

  • Он использует частный метод onSlide
  • Он применим только к одиночному слайдеру
  • Навигация по клавиатуре работает правильно, только если animate установлен на false
  • setTimeout используется для настройки начального положения наконечника

Для устранения этих недостатков потребуется взломать класс Ext.slider.Tip, но Ext.slider.Multy и, возможно, Ext.slider.Thumb.

Изменить

Заменено событие changecomplete событием change, поскольку changecomplete не запускается, когда вызывается slider.setValue().

Добавлена ​​демонстрация слайдера со смежными кнопками.

Edit2

tipText config больше не применяется, если используется настраиваемый плагин. Вы должны использовать getText config плагина:

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]);
        }
    })],
    // ...
});

Обновлена ​​демонстрационная версия .

Ответ 2

для extjs 4.2,
изменить:
slider.removeListener('dragend', me.hide);
to:
slider.removeListener('dragend', me.hide, me);