我使用的是ExtJS 3.3,但这也可能与其他版本有关。
我在基于ExtJS的UI中使用Slider控件。我有一个工具提示设置为在您拖动它时显示值,根据此处的“Slider with Tip”示例:http://dev.sencha.com/deploy/ext-3.3.1/examples/slider/slider.html
在我看来,如果没有指示值是什么(或者在这种情况下直到你开始滑动它)的滑块是非常差的用户体验。我想在任一端添加标签以显示滑块所代表的范围。这样的事情:
所以,当然,我想知道:这可能与标准控件本身有关吗?(我查看了文档,但没有任何内容跳出来)?或是否有一种巧妙的方法来实现这一目标?
答案 0 :(得分:3)
我打算这样做:
var tip = new Ext.slider.Tip({
getThumbText: this.getThumbText,
getText: function (thumb) {
return '<b>' + this.getThumbText(thumb.value) + '<b>';
}
});
this.timeSliderLabel = new Ext.form.Label({
text: Nipendo.Localization.HistorySlider + ': ',
style: 'margin:3px 5px 0px 5px;'
});
this.timeSlider = new Ext.Slider({
width: 214,
value: 1,
increment: 1,
minValue: 1,
maxValue: 13,
plugins: tip
});
this.timeSlider.on('change', function (slider, newValue, thumb) {
this.timeSliderHintLabel.setText(this.getThumbText(thumb.value), false);
this.onSearchClick();
}, this);
this.timeSliderHintLabel = new Ext.form.Label({
html: String.format('(1 {0})', Nipendo.Localization.OneMonthBack),
style: 'margin:3px 5px 0px 5px;'
});
更新:
布局可以像这样使用:
config = config.apply({
layout: 'column',
defaults: {
layout: 'form'
},
items: [
this.timeSliderLabel,
this.timeSlider,
this.timeSliderHintLabel
]
}, config)
其中getThumbText是一个帮助方法,用于获取正确的标签值。