始终在Extjs中显示Slider的提示文本 [英] Always show the tip text of Slider in Extjs

问题描述

目前，每当用户拖动滑块的栏时，提示文本正在显示。

我在 $ b。/ / / / / / api / Ext.slider.Singlerel =nofollow> docs ，但找不到任何相关的概念。
$ b

如果没有记录或不可能，请说明如何手动创建提示文本。 提示文本应沿着滑块的栏移动，不应克服或隐藏任何其他相邻的组件。

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

  xtype ：'slider'，
 cls：'sliderStyle'，
 width：80％，
 id：'slider'，
 value：6，
 minValue： 1，
 maxValue：12，
 useTips：true，
 
 tipText：function（thumb）{
 var months = [''，'Jan'，'Feb ， '月'， '月'， '五一'， '君'， '月'， '月'， '月'， '月'， '月'， '月']; 
 var value = Ext.String.format（months [thumb.value]）; 
返回值; 
}，
  

问题2：至少可以显示提示文本当滑块滑动时

PS：我也问同样的问题 这里 。

编辑1：我也是用两个相邻的按钮移动滑块的搜索栏< 和> ）。所以，必须注意，如果我用相邻的按钮移动搜索栏，那么提示文本也应该移动。

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

答案： http://jsfiddle.net/WdjZn/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（{
范围：我，
更改：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. 它依赖于私有方法 onSlide


2. 仅适用于单个滑块


3. 键盘导航只有在 animate 设置为 false


4. setTimeout 用于调整提示的初始位置

解决这个缺点将不仅需要黑客攻击 Ext.slider.Tip 类，而且 Ext.slider.Multy 类可能 Ext.slider.Thumb class。

编辑

已替换 changecomplete 事件与更改事件为 changecomplete code> slider.setValue（）被调用。

添加 d

Edit2

tipText config不再应用，如果使用自定义提示插件。您必须使用 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 （month [thumb.value]）; 
} 
}）]，
 // ... 
}）; 
  

更新了演示。

In Extjs 4.1.1a, How to keep the tip text of the slider always visible?

Currently, the tip text is being visible whenever the user drags the bar of the slider.
I searched on docs but couldn't find any related concepts.

If it is not documented or not possible, then please explain me how to create the tip text manually. The tip text should move along the bar of the slider and it should not overcome or hide any other adjacent components.

Here is my code which generates a simple 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;
},

Question 2: Is it atleast possible to show the tip text when hovered on the slider?

PS: I also asked the same question here.

EDIT 1: I am also moving the seek bar of the slider with two adjacent buttons (< and >). So, care must be taken that if I move the seek bar with the adjacent buttons then the tip text should also move.

EDIT 2: The tip text should be visible when hovered on the slider or the adjacent buttons.

Answer: http://jsfiddle.net/WdjZn/1/

解决方案

I've managed to keep tip visible by overriding some event handlers in 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')],
    // ...
});

Check out the demo.

Drawbacks of my approach:

1. It relies on private method onSlide
2. It applicable only to single slider
3. Keyboard navigation works properly only if animate is set to false
4. setTimeout is used in order to adjust initial position of the tip

Fixing this drawbacks would require hacking not only the Ext.slider.Tip class but Ext.slider.Multy class and probably Ext.slider.Thumb class.

Edit

Replaced changecomplete event with change event as changecomplete is not fired when slider.setValue() is called.

Added demo of slider with adjacent buttons.

Edit2

tipText config is no longer applied if custom tip plugin is used. You have to use getText config of the plugin:

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

Updated the demo.

这篇关于始终在Extjs中显示Slider的提示文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！