1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    2
    Vote Rating
    0
    fonoro is on a distinguished road

      0  

    Default Unanswered: Showing thumb values on Ext JS Slider

    Unanswered: Showing thumb values on Ext JS Slider


    I need some insight on how to go about fixing a shortcoming in Ext.slider.Multi. I would like to display the values of the thumbs. One option would be to display a label below the thumbs, like this:

    option_1.png


    the other, displaying the tooltip with the value permanenlty, not just on mouse click.


    option_2.png
    Any ideas?

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,912
    Answers
    655
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You would have to override the slider and the tip .. for example, this will stop the tip from hiding, but you will have to correct the issue of dragging the other thumb stealing the other tip.

    Starting point ...

    Code:
    Ext.override(Ext.slider.Tip, {
        
        init: function(slider) {
            var me = this,
                align,
                offsets;
            
            if (!me.position) {
                me.position = slider.vertical ? me.defaultVerticalPosition : me.defaultHorizontalPosition;
            }
                
            switch (me.position) {
                case 'top':
                    offsets = [0, -10];
                    align = 'b-t?';
                    break;
                case 'bottom':
                    offsets = [0, 10];
                    align = 't-b?';
                    break;
                case 'left':
                    offsets = [-10, 0];
                    align = 'r-l?';
                    break;
                case 'right':
                    offsets = [10, 0];
                    align = 'l-r?';
            }
            
            if (!me.align) {
                me.align = align;
            }
            
            if (!me.offsets) {
                me.offsets = offsets;
            }
    
            slider.on({
                scope    : me,
                dragstart: me.onSlide,
                drag     : me.onSlide,
          //      dragend  : me.hide,
                destroy  : me.destroy
            });
        },    
        
    });
    
    Ext.create('Ext.slider.Multi', {
        width: 200,
        values: [25, 75],
        increment: 5,
        minValue: 0,
        maxValue: 100,
    
        constrainThumbs: false,
        renderTo: Ext.getBody()
    });
    Scott.

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    2
    Vote Rating
    0
    fonoro is on a distinguished road

      0  

    Default


    Thank you Scott. In the end, i went the other route and implemented "Option 1". The tool-tips take too much space above the slider and need a lot of code to work smoothly.

    This is how I did it. I am sure it can be improved, but I guess the concept should be useful to someone else.

    I added this two listeners of the slider:

    Code:
    afterrender: function(t, options) {
        for(i=0; i<t.thumbs.length; i++){
            var thumbElId = t.thumbs[i].el.id;
            Ext.DomHelper.append(thumbElId,
                {
                tag: 'div',
                    id: 'thumb-label-'+i,
                    cls: 'thumb-label',
                    html: t.thumbs[i].value,
                }
            );
        }
    },
    change: function(t, options) {
        for(i=0; i<t.thumbs.length; i++){
            var thumbLabelElId = 'thumb-label-'+i;
            Ext.DomHelper.overwrite(thumbLabelElId,
                {
                tag: 'div',
                    id: 'thumb-label-'+i,
                    cls: 'thumb-label',
                    html: t.thumbs[i].value,
                }
            );
            Ext.get(thumbLabelElId).applyStyles("margin-left:0%");
        }
    }
    and this to the stylesheet:

    Code:
    .thumb-label {
        margin-top: 18px;
        margin-left: -50%;
    }

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi