5

私は ExtJS 3.3 を使用していますが、これは他のバージョンにも関連している可能性があります。

ExtJS ベースの UI で Slider コントロールを使用しています。ここの「Slider with Tip」の例のように、ドラッグすると値が表示されるようにツールチップを設定しました: http://dev.sencha.com/deploy/ext-3.3.1/examples/slider/slider. html

値が何であるかを示すスライダーがない (または、この場合はスライドを開始するまで) スライダーを使用するのは、UX が非常に貧弱であるように私には思えます。スライダーが表す範囲を示すために、両端にラベルを追加したいと思います。このようなもの：
考えられる Slider ラベルの例

もちろん、私は疑問に思っています:これは標準コントロール自体で可能ですか? （私はドキュメントを見ましたが、何も飛び出していませんでした）？またはこれを達成するきちんとした方法はありますか？

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 に答える