5

我正在使用 ExtJS 3.3，但这也可能与其他版本有关。

我在基于 ExtJS 的 UI 中使用 Slider 控件。根据此处的“带提示的滑块”示例：http://dev.sencha.com/deploy/ext-3.3.1/examples/slider/slider，我设置了一个工具提示以在您拖动它时显示该值。 html

在我看来，有一个没有指示值是什么的滑块（或者在这种情况下直到你开始滑动它）是相当糟糕的用户体验。我想在任一端添加标签以显示滑块所代表的范围。像这样的东西：
可能的滑块标签示例

所以，当然，我想知道：标准控件本身是否可能？（我查看了文档，但没有发现任何问题）？还是有一种巧妙的方法来实现这一目标？

4

1 回答 1

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 是我用来获取正确标签值的辅助方法。

于 2012-05-10T10:59:56.457 回答