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。

我的方法的缺点：

它依赖私有方法onSlide
仅适用于单个滑块
仅当animate设置为false
setTimeout用于调整提示的初始位置

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

修改

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

添加了demo滑块和相邻按钮。

EDIT2

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]); } })], // ... });配置。您必须使用插件的getText配置：

{{1}}

更新了demo。

Answer 2

表示extjs 4.2，
改变：
slider.removeListener('dragend', me.hide);
至：
slider.removeListener('dragend', me.hide, me);

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

2 个答案:

修改

EDIT2