javascript – 总是在Extjs中显示Slider的提示文本

在Extjs 4.1.1a中,如何保持滑块的提示文本始终可见？

目前,当用户拖动滑块的条时,提示文本是可见的.
我在docs搜索,但找不到任何相关的概念.

如果没有记录或不可能,请说明如何手动创建提示文本.尖端文本应沿滑块的杆移动,不应克服或隐藏任何其他相邻的部件.

这是我的代码,它生成一个简单的滑块：

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：在滑块上悬停时,是否至少可以显示提示文本？

PS：我也问了同样的问题here.

编辑1：我还用两个相邻的按钮(&)移动滑块的搜索栏.所以,必须注意,如果我用相邻的按钮移动搜索条,则提示文本也应该移动.

编辑2：当滑块或相邻按钮上悬停时,提示文本应该可见.

答：http://jsfiddle.net/WdjZn/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')],// ...
});

查看demo.

我的方法的缺点：

它依赖于onSlide的私有方法
>仅适用于单个滑块
>只有当animate设置为false时,键盘导航才能正常工作
> setTimeout用于调整提示的初始位置

解决这个缺点将需要黑客攻击不仅Ext.slider.Tip类,而且Ext.slider.Multy类和Ext.slider.Thumb类.

编辑

当使用slider.setValue()被调用时,将changecomplete事件替换为changecomplete更改事件不会触发.

添加了demo的滑块与相邻的按钮.

EDIT2

如果使用自定义提示插件,tipText配置将不再应用.你必须使用getText配置的插件：

Ext.create('Ext.slider.Single',plugins: [Ext.create('AlwaysVisibleTip',{
        getText: function(thumb) {
            var months = ['','Dec'];
            return Ext.String.format(months[thumb.value]);
        }
    })],// ...
});

更新了demo.