在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：当滑块或相邻按钮上悬停时,提示文本应该可见.
解决方法
我通过覆盖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.
