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

в Extjs 4.1.1 a, Как сохранить tip text слайдера всегда видно?

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

если это не задокументировано или невозможно, тогда, пожалуйста, объясните мне, как создать tip text вручную. The 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 тоже должен двигаться.

EDIT 2: текст подсказки должен быть виден при наведении курсора на ползунок или соседние кнопки.

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

10
extjs extjs-mvc extjs4 extjs4.1 javascript

2 ответов

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

Проверьте демо.

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

  1. он полагается на частный метод onSlide
  2. это применимо только к одному слайдеру
  3. клавиатура навигация работает правильно, только если animate установлено значение false
  4. setTimeout используется для того, чтобы отрегулировать начальное положение совет

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

редактировать

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

добавил демо слайдера со смежными кнопками.

Edit2

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

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

обновил демо.

9

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

2