Как добавить ярлыки на любой конец элемента управления ExtJS Slider?

Question

Я использую ExtJS 3.3, но это может иметь отношение и к другим версиям.

Я использую элемент управления ползунком в пользовательском интерфейсе на основе ExtJS. У меня есть всплывающая подсказка, отображающая значение при его перетаскивании, как показано на примере «Слайдер с подсказкой»: http://dev.sencha.com/deploy/ext-3.3.1/examples/slider/slider.html

Мне кажется, что у меня очень плохой UX, чтобы иметь слайдер без указания того, что значения (или в этом случае не до тех пор, пока вы не начнете перемещать его). Я хотел бы добавить ярлыки в любой конец, чтобы показать диапазон, который представляет слайдер. Что-то вроде этого:

Так что, конечно, я задаюсь: Возможно ли это с самим стандартным контролем? (Я смотрел в документах, но ничего не выскочил на меня)? или есть ли опрятный способ достижения этого?

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

UPDATE:

Схема может быть использована, как это:

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

Где getThumbText это вспомогательный метод я использую чтобы получить правильное значение метки.