始终显示Extjs中滑块控件的提示文本

Question

在 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：我还使用两个相邻按钮（<和>）移动滑块的滑块。因此，如果我使用相邻按钮移动滑块，则必须注意tip text也应该移动。

编辑2：当悬停在滑块或相邻按钮上时，应该显示提示文本。

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

- Mr_Green

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事件，因为当调用slider.setValue()时，changecomplete不会触发。

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

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

更新了演示。

- Molecular Man

---

您的示例很好，但正如我在我的编辑中提到的那样，我还使用两个相邻的按钮控制该条形。如果我通过两个相邻的按钮移动条形，则提示文本不会移动。 - Mr_Green

@Mr_Green，是的。我使用了changecomplete，而我应该使用change事件。编辑了答案并修复了演示。 - Molecular Man

抱歉，当我添加了animate:false之后，它开始正常工作了。谢谢。 - Mr_Green

如何从控制器动态添加“提示文本”值？我的意思是，在我帖子中的上述代码中，我想从控制器端添加config的“提示文本”。请告诉我如何做到这一点？ - Mr_Green

我仍然找不到错误，但由于您的fiddle运行良好，我决定将您的解决方案标记为答案。感谢您的帮助。 - Mr_Green

Answer 2

针对 ExtJS 4.2 版本，
更改为：
slider.removeListener('dragend', me.hide, me);
而非：
slider.removeListener('dragend', me.hide);

- MarcAndre