如何将标签添加到 ExtJS Slider 控件的任一端?
Posted
技术标签:
【中文标题】如何将标签添加到 ExtJS Slider 控件的任一端?【英文标题】:How can I add labels to either end of a ExtJS Slider control? 【发布时间】:2012-05-04 00:01:12 【问题描述】:我使用的是 ExtJS 3.3,但这也可能与其他版本有关。
我在基于 ExtJS 的 UI 中使用 Slider 控件。根据此处的“带提示的滑块”示例,我设置了一个工具提示以在您拖动它时显示该值:http://dev.sencha.com/deploy/ext-3.3.1/examples/slider/slider.html
在我看来,有一个没有指示值是什么的滑块(或者在这种情况下直到你开始滑动它)是相当糟糕的用户体验。我想在任一端添加标签以显示滑块所代表的范围。像这样:
所以,当然,我想知道:标准控件本身有可能吗?(我查看了文档,但没有发现任何问题)?或有没有一种巧妙的方法来实现这一点?
【问题讨论】:
我不认为这是开箱即用的,但您可以将其创建为滑块扩展,而不会有太多麻烦。 【参考方案1】:我打算这样做:
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 是我用来获取正确标签值的辅助方法。
【讨论】:
感谢您的回答,对于我的缓慢回复感到抱歉(在另一个项目中)。不幸的是,我认为您的解决方案无法满足我的需求。我想要 2 个静态文本,滑块的每一端都有一个,向用户指示可能值的范围是什么。这应该独立于字段标签和在任何阶段弹出的工具提示。在我看来,您的代码使字段的标签随着滑块值的变化而变化。 这是正确的,但它也可以是静态的,通过删除更改事件并阻止测试集...... 可能是我没有正确实现你的代码,你在哪里使用this.timeSliderLabel和this.timeSliderHintLabel? (它没有显示在你的答案中)。 我添加了一个布局示例。只需创建一个列布局并在滑块的任一侧插入标签。您也可以将其包装为单个控件...以上是关于如何将标签添加到 ExtJS Slider 控件的任一端?的主要内容,如果未能解决你的问题,请参考以下文章