在 Extjs 4.1.1a 中,如何保留 tip text
slider 的始终可见?
目前,tip text
每当用户拖动 slider 的栏时都可见。
我搜索了docs但找不到任何相关概念。
如果没有记录或不可能,请向我解释如何创建 tip text
手动。 tip text
应该沿着 slider 的条移动,并且它不应该超过或隐藏任何其他相邻的组件。
这是我生成一个简单 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;
},
问题 2:是否至少可以显示 tip text
当鼠标悬停在 slider 上时?
PS:我也问了同样的问题here .
编辑 1: 我还使用两个相邻的按钮(<
和 >
)移动 slider 的搜索栏。所以,必须注意,如果我用相邻的按钮移动搜索栏,那么 tip text
也应该移动。
编辑 2:将鼠标悬停在 slider 或相邻按钮上时,提示文本应该可见。
最佳答案
我通过覆盖 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 .
我的方法的缺点:
- 依赖私有(private)方法
onSlide
- 仅适用于单个 slider
- 仅当
animate
设置为false
时,键盘导航才能正常工作 setTimeout
用于调整提示的初始位置
解决这个缺点不仅需要破解 Ext.slider.Tip
类,还需要破解 Ext.slider.Multy
类,可能还需要破解 Ext.slider.Thumb
类。
编辑
将 changecomplete
事件替换为 change
事件,因为在调用 slider.setValue()
时不会触发 changecomplete
.
已添加 demo带有相邻按钮的 slider 。
编辑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]);
}
})],
// ...
});
更新了 demo .
关于javascript - 在 Extjs 中始终显示 Slider 的提示文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15198053/