Wie kann ich Etiketten an beiden Enden eines ExtJS Slider-Steuerelements hinzufügen?

Question

Ich verwende ExtJS 3.3, aber dies könnte auch für andere Versionen relevant sein.

Ich verwende ein Slider-Steuerelement in einem ExtJS-basierten UI. Ich habe einen Tooltip eingerichtet, um den Wert zu zeigen, wie Sie es ziehen, wie pro die "Slider mit Tipp" Beispiel hier: http://dev.sencha.com/deploy/ext-3.3.1/examples/slider/slider.html

Ein Schieberegler, bei dem nicht angezeigt wird, welche Werte er hat (oder in diesem Fall erst, wenn man ihn zu schieben beginnt), scheint mir eine ziemlich schlechte UX zu sein. Ich würde gerne Beschriftungen an beiden Enden hinzufügen, um den Bereich anzuzeigen, den der Schieberegler darstellt. Etwas wie dieses:

Da frage ich mich natürlich: Ist dies mit der Standardsteuerung selbst möglich? (Ich habe in den Dokumenten nachgesehen, aber mir ist nichts aufgefallen)? oder Gibt es eine elegante Möglichkeit, dies zu erreichen?

Answer 1

Hier ist, wie ich es gemacht habe:

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;'
    });

UPDATE:

Das Layout könnte wie folgt verwendet werden:

 config = config.apply({
     layout: 'column',
     defaults: {
         layout: 'form'
     },
     items: [
         this.timeSliderLabel,
            this.timeSlider,
            this.timeSliderHintLabel
     ]
 }, config)

Wo getThumbText eine Hilfsmethode ist, die ich verwende, um den richtigen Beschriftungswert zu erhalten.