javascript - 在 Extjs 中始终显示 Slider 的提示文本

Question

在 Extjs 4.1.1a 中，如何保留 tip text slider 的始终可见？

目前，tip text每当用户拖动 slider 的栏时都可见。
我搜索了docs但找不到任何相关概念。

如果没有记录或不可能，请向我解释如何创建 tip text手动。 tip text应该沿着 slider 的条移动，并且它不应该超过或隐藏任何其他相邻的组件。

这是我生成一个简单 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;
},

问题 2:是否至少可以显示 tip text当鼠标悬停在 slider 上时？

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

编辑 1: 我还使用两个相邻的按钮(< 和 >)移动 slider 的搜索栏。所以，必须注意，如果我用相邻的按钮移动搜索栏，那么 tip text也应该移动。

编辑 2:将鼠标悬停在 slider 或相邻按钮上时，提示文本应该可见。

回答: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. 依赖私有(private)方法onSlide
2. 仅适用于单个 slider
3. 仅当 animate 设置为 false 时，键盘导航才能正常工作
4. setTimeout 用于调整提示的初始位置

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

编辑

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

已添加 demo带有相邻按钮的 slider 。

编辑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 .