Comment ajouter des étiquettes à sliderfield Sencha Touch

Question

Ok, donc je voudrais avoir un curseur qui ressemble à celui-ci.

Vous ne savez pas où nous pouvons au moins avoir ces séparateurs délimiteurs? Donc, si vous voyez il y a 7 délimiteurs et nous avons de grandes étiquettes sur le premier 4ème et le dernier délimiteur.

Comment aborderiez-vous cette tâche?

Answer 1

Il n'y a pas moyen d'ajouter une étiquette à l'intérieur sliderfield. Cependant, vous pouvez en effet ajouter du HTML pour obtenir la sortie requise. Sur le panneau de configuration, allez à la propriété HTML, et d'ajouter quelque chose comme ceci:

<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> 

La sortie que j'ai:

Vous avez juste besoin playaround avec l'alignement de votre texte le HTML. Cela fera l'affaire!

Bonne chance!

Answer 2

Vous pouvez créer personnalisé curseur comme celui-ci

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

Et créer curseur comme celui-ci

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

Le résultat sera comme celui-ci

Je l'ai fait en utilisant this lien

Answer 3

C'est un peu vieille question, mais j'ai été confronté à la même nécessité aujourd'hui. S'appuyant sur la réponse de GenieWanted, je suis venu à ceci:

... 
    { 
     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>'   
    } 
... 

qui fonctionne très bien pour moi, et évite de déconner pour trouver le bon nombre de   nécessaire. En outre, je soupçonne que les résultats varient d'un appareil à l'autre en utilisant  .