11

在 Extjs 4.1.1a 中，如何保持tip text滑块的始终可见？

目前，tip text只要用户拖动滑块的栏，就可以看到 。
我在文档上搜索但找不到任何相关概念。

如果它没有记录或不可能，那么请解释我如何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：我在这里也问了同样的问题。

编辑 1： 我还用两个相邻的按钮（<和>）移动滑块的搜索栏。因此，必须注意，如果我用相邻的按钮移动搜索栏，那么tip text也应该移动。

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

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

4

2 回答 2

9

我设法通过覆盖以下事件处理程序来保持提示可见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因为在被调用changecomplete时不会触发。slider.setValue()

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

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

更新了演示。

于 2013-03-06T13:45:30.857 回答
2

对于 extjs 4.2，
将 : 更改
slider.removeListener('dragend', me.hide);
为 :
slider.removeListener('dragend', me.hide, me);

于 2013-10-21T19:28:00.480 回答