始终在Extjs中显示Slider的提示文字

Question

在Extjs 4.1.1a中,如何保持tip text滑块始终可见？

目前,tip text只要用户拖动滑块的条,就可以看到它.
我搜索了文档,但找不到任何相关的概念.

如果没有记录或不可能,请解释我如何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:我在这里也问了同样的问题.

编辑1: 我也用两个相邻的按钮(<和>)移动滑块的搜索条.所以,必须注意的是,如果我用相邻的按钮移动搜索条,那么它tip text也应该移动.

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

答案:http://jsfiddle.net/WdjZn/1/

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

看看演示.

我的方法的缺点:

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.你必须使用插件的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]);
        }
    })],
    // ...
});

更新了演示.