如何添加標籤到sliderfield Sencha Touch

Question

好的，所以我想要一個看起來像這樣的滑塊。

只是不知道我們可以在哪裏至少有這些分隔符分隔符？因此，如果您看到有7個分隔符，並且第一個第4個和最後一個分隔符上都有大標籤。

您將如何處理此任務？

Answer 1

沒有增加內部sliderfield標籤的方式。但是，您確實可以添加HTML以實現所需的輸出。在配置面板中，轉到HTML屬性，並添加這樣的：

<div style="padding-left:1em">|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|<div>Low&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Average &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;High </div></div> 

輸出我有：

你只需要您的文本的對齊，以playaround HTML。這將做到！

祝你好運！

Answer 2

可以創建自定義滑塊這樣

Ext.ns('Ext.ux'); 
Ext.ux.CustomSlider = Ext.extend(Object, { 
    valueTextClass: 'x-slider-value-text', 
    showSliderBothEndValue: true, 
    sliderEndValueStyle: 'color: black', 

    constructor: function(config){ 
     Ext.apply(this, config); 
     Ext.ux.CustomSlider.superclass.constructor.apply(this, arguments); 
    }, 
    init: function(parent) { 
     var me = this; 
     parent.on({ 
      painted: { 
       fn: function(component) { 
        if (me.showSliderBothEndValue) me.showSliderEndValue(this); 
        if (!this.valueTextEl) { 
         this.valueTextEl = component.element.createChild({ 
          cls: me.valueTextClass 
         }); 
        } 
       } 
      } 
     }); 
    }, 
    showSliderEndValue: function(slider) { 
     var sliderPosX = slider.getComponent().getThumb().element.getX(); 
     var thumbHeight = slider.getComponent().getThumb().element.getHeight(); 
     var sliderLength = slider.getComponent().element.getWidth(); 
     var minValueEl = slider.getComponent().element.createChild(); 
     minValueEl.setHtml(slider.getComponent().getMinValue()); 
     minValueEl.applyStyles('overflow:hidden;position:absolute'); 
     minValueEl.applyStyles(this.sliderEndValueStyle); 
     minValueEl.setLeft(14); 
     minValueEl.setTop(thumbHeight -7); 
     var maxValueEl = slider.getComponent().element.createChild(); 
     maxValueEl.setHtml(slider.getComponent().getMaxValue()); 
     maxValueEl.applyStyles('overflow:hidden;position:absolute'); 
     maxValueEl.applyStyles(this.sliderEndValueStyle); 
     maxValueEl.setLeft(sliderLength-45); 
     maxValueEl.setTop(thumbHeight - 7); 
    } 
}); 

，打造滑塊這樣

var slider = { 
    xtype: 'sliderfield', 
    flex : 6, 
    label: "Percentage", 
    name: "Percentage", 
    value : 50, 
    minValue : 0, 
    maxValue : 100, 
    labelWrap : true, 
    labelAlign : 'left', 
    increment : 10, 
    plugins: [new Ext.ux.CustomSlider({ 
     showSliderBothEndValue: true 
    })], 
    listeners: { 
     painted: function (slider) { 
      var sliderPanelItems = this.parent.getInnerItems(); 
      sliderPanelItems[1].setValue(this.getValue()); 
     }, 
     change: function (me,slider, thumb, newVal, oldVal, opts) { 
      var sliderPanelItems = this.parent.getInnerItems(); 
      sliderPanelItems[1].setValue(newVal); 
     } 
    } 
}; 

結果會是這樣

我這樣做是使用this鏈接

Answer 3

這是一個比較老的問題，但我今天面臨着同樣的需求。在GenieWanted的答案的基礎上，我來到了這一點：

... 
    { 
     xtype: 'sliderfield', 
     maxValue: 5, 
     label: 'Some data', 
     html: '<table width="100%" align="left"><tr><td width="25%">Min</td><td width="50%" align="center">Med</td><td width="25%" align="right">Max</td></tr></table>'   
    } 
... 

這工作對我非常好，並且避免瞎搞找到所需 正確的號碼。另外，我懷疑使用 的結果會因設備而異。