Always show the tip text of Slider in Extjs

问题

In Extjs 4.1.1a, How to keep the tip text of the slider always visible?

Currently, the tip text is being visible whenever the user drags the bar of the slider.
I searched on docs but couldn't find any related concepts.

If it is not documented or not possible, then please explain me how to create the tip text manually. The tip text should move along the bar of the slider and it should not overcome or hide any other adjacent components.

Here is my code which generates a simple slider:

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

~~Question 2: Is it atleast possible to show the tip text when hovered on the slider?~~

PS: I also asked the same question here.

EDIT 1: I am also moving the seek bar of the slider with two adjacent buttons (< and >). So, care must be taken that if I move the seek bar with the adjacent buttons then the tip text should also move.

EDIT 2: The tip text should be visible when hovered on the slider or the adjacent buttons.

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

回答1:

I've managed to keep tip visible by overriding some event handlers in 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')],
    // ...
});

Check out the demo.

Drawbacks of my approach:

It relies on private method onSlide
It applicable only to single slider
Keyboard navigation works properly only if animate is set to false
setTimeout is used in order to adjust initial position of the tip

Fixing this drawbacks would require hacking not only the Ext.slider.Tip class but Ext.slider.Multy class and probably Ext.slider.Thumb class.

Edit

Replaced changecomplete event with change event as changecomplete is not fired when slider.setValue() is called.

Added demo of slider with adjacent buttons.

Edit2

tipText config is no longer applied if custom tip plugin is used. You have to use getText config of the plugin:

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

Updated the demo.