Làm cách nào để thêm nhãn vào một trong hai đầu của điều khiển ExtJS Slider?

Question

Tôi đang sử dụng ExtJS 3.3 nhưng điều này có thể liên quan đến các phiên bản khác.

Tôi đang sử dụng điều khiển Thanh trượt trong giao diện người dùng dựa trên ExtJS. Tôi có một chú giải công cụ được thiết lập để hiển thị giá trị khi bạn kéo nó, theo ví dụ "Slider with Tip" ở đây: http://dev.sencha.com/deploy/ext-3.3.1/examples/slider/slider.html

Dường như tôi là UX khá nghèo để có một thanh trượt không có dấu hiệu cho thấy giá trị là (hoặc trong trường hợp này không phải cho đến khi bạn bắt đầu trượt nó). Tôi muốn thêm nhãn vào một trong hai đầu để hiển thị phạm vi mà thanh trượt đại diện. Một cái gì đó như thế này:

Vì vậy, tất nhiên, tôi tự hỏi: Đây có phải là có thể với các tiêu chuẩn kiểm soát bản thân? (Tôi nhìn vào tài liệu, nhưng không có gì nhảy ra khỏi tôi)? hoặc là có một cách gọn gàng để đạt được điều này?

Answer 1

Đây là tôi đã đi về để làm điều đó:

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:

Cách bố trí có thể được sử dụng như thế này:

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

đâu getThumbText là một phương pháp helper tôi sử dụng để có được giá trị nhãn chính xác.