在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;
- },
PS：我也问了同样的问题here.
编辑1：我还用两个相邻的按钮(&)移动滑块的搜索栏.所以,必须注意,如果我用相邻的按钮移动搜索条,则提示文本也应该移动.
编辑2：当滑块或相邻按钮上悬停时,提示文本应该可见.
答：http://jsfiddle.net/WdjZn/1/
@H_502_21@解决方法
我通过覆盖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类.
编辑
当使用slider.setValue()被调用时,将changecomplete事件替换为changecomplete更改事件不会触发.
EDIT2
如果使用自定义提示插件,tipText配置将不再应用.你必须使用getText配置的插件：
- Ext.create('Ext.slider.Single',plugins: [Ext.create('AlwaysVisibleTip',{
- getText: function(thumb) {
- var months = ['','Dec'];
- return Ext.String.format(months[thumb.value]);
- }
- })],// ...
- });
更新了demo.
@H_502_21@ @H_502_21@