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

Question

在 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：我也问过同样的问题here。

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

查看demo。

我的方法的缺点：

1. 它依赖于私有方法onSlide
2. 仅适用于单个滑块
3. 只有在animate 设置为false 时，键盘导航才能正常工作
4. setTimeout 用于调整笔尖的初始位置

修复这个缺点不仅需要破解Ext.slider.Tip 类，还需要破解Ext.slider.Multy 类，可能还有Ext.slider.Thumb 类。

编辑

将changecomplete 事件替换为change 事件，因为在调用slider.setValue() 时不会触发changecomplete。

添加了带有相邻按钮的滑块demo。

编辑2

tipText 如果使用自定义提示插件，则不再应用配置。您必须使用插件的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]);
        }
    })],
    // ...
});

更新了demo。

Answer 2

对于 extjs 4.2，
更改：
slider.removeListener('dragend', me.hide);
至：
slider.removeListener('dragend', me.hide, me);