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,653
    Answers
    619
    Vote Rating
    402
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar