Javascript 始终在Extjs中显示滑块的提示文本

在Extjs 4.1.1a中，如何使滑块的

提示文本始终可见

当前，每当用户拖动滑块的条时，
提示文本
都可见。

我继续搜索，但找不到任何相关概念

如果没有文档记录或不可能，请解释如何手动创建
提示文本。
提示文本
应沿滑块条移动，且不应覆盖或隐藏任何其他相邻组件

下面是我生成一个简单滑块的代码：

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

附言：我也问了同样的问题

编辑1:我还使用两个相邻的按钮（
）移动滑块的搜索栏。因此，必须注意，如果我用相邻的按钮移动搜索栏，则
提示文本
也应移动

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

回答：
我通过覆盖
Ext.slider.tip中的一些事件处理程序，成功地使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')],
    // ...
});

看看这本书

我的方法的缺点：

它依赖于滑动的私有方法

它只适用于单滑块
只有当
animate
设置为
false
setTimeout
用于调整尖端的初始位置
修复这个缺点不仅需要破解
Ext.slider.Tip
类，还需要破解
Ext.slider.Multy
类，可能还需要破解
Ext.slider.Thumb
类

编辑
将
changecomplete
事件替换为
change
事件，因为调用
slider.setValue（）
时未触发
changecomplete

添加了一个带有相邻按钮的滑块

编辑2
如果使用自定义tip插件，则不再应用tipText
config。您必须使用插件的配置：

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

为extjs 4.2更新了。
，

更改：

slider.removeListener（'dragend'，me.hide）

致：

slider.removeListener（'dragend'，me.hide，me）
+1谢谢您的详细解释，但我无法理解：）。我现在试着去理解它。你的例子很好，但正如我在编辑中提到的，我也用两个相邻的按钮来控制酒吧。如果我在两个相邻按钮的帮助下移动该条，则提示文本不会移动。@Mr_Green，是的。我使用了
changecomplete
，而我应该使用
change
事件。编辑了答案并修复了演示。你们很接近。
提示文本始终是后退一步。我的意思是在以前的值。如果我将条形图从值
2
滑动到
32
，则
提示文本将停留在
2
，并显示值
32
@Mr_Green，这是因为滑块设置了拇指运动的动画。您必须像在我的演示中一样，使用
动画：false设置滑块。