我怎樣才能標籤添加到ExtJS的滑塊控制的兩端？

我使用ExtJS的3.3，但是這可能是有關其他的版本。我怎樣才能標籤添加到ExtJS的滑塊控制的兩端？

我正在使用基於ExtJS的-UI Slider控件。我有一個工具提示設置，以顯示拖動它時的值，如下面的「帶提示的滑塊」示例所示：http://dev.sencha.com/deploy/ext-3.3.1/examples/slider/slider.html

在我看來，用戶體驗非常差，沒有指示什麼值是（或者在這種情況下，直到你開始滑動它）。我想添加標籤到任一端來顯示滑塊所代表的範圍。事情是這樣的：
Example of possible Slider labels

所以，當然，我想知道：這可能與標準控制自己？（我看着在文檔，但沒有跳出我）？或有沒有一個完美的方式來實現這一目標？

來源

2012-05-04 David

我不認爲這個出來的方塊，但你可以將其創建爲滑塊擴展，而不要麻煩得多。 – AMember

這裏是我去要做到這一點：

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是一種輔助方法，我用獲得正確的標籤值。

來源

2012-05-10 10:59:56 AMember

感謝您的回答，我的回覆慢對不起（已在其他項目中）。不幸的是，我不認爲你的解決方案給了我我所追求的。我想要有2個靜態文本片段，每個滑塊的每一端向用戶指示可能值的範圍。這應該獨立於現場標籤和在任何階段彈出的工具提示。在我看來，您的代碼會在滑塊值發生更改時使該字段的標籤更改。 – David

這是正確的，但它也可以通過移除更改事件並防止測試設置爲靜態... – AMember

可能是因爲我沒有正確實現您的代碼，您在哪裏使用this.timeSliderLabel和this.timeSliderHintLabel ？（它沒有在你的答案中顯示）。 – David

我怎樣才能標籤添加到ExtJS的滑塊控制的兩端？

回答

相關問題