1. #1
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,761
    Vote Rating
    108
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default [2.2.1] Slider animation behaviour suggestion

    [2.2.1] Slider animation behaviour suggestion


    I noticed that when doing processing on a Slider 'changecomplete' event, the event handler interferes with the slider animation and it sometimes doesn't animate at all, other times it just stutters. Maybe the event could be fired after the animation has finished? Maybe the behaviour could be configurable?

    This override does the trick:

    Code:
    Ext.override(Ext.Slider, {
        setValue : function(v, animate, changeComplete){
            v = this.normalizeValue(v);
            if(v !== this.value && this.fireEvent('beforechange', this, v, this.value) !== false){
                this.value = v;
                this.moveThumb(this.translateValue(v), 
                               animate !== false, 
                               function() {
                                   this.fireEvent('change', this, v);
                                   if(changeComplete) {
                                       this.fireEvent('changecomplete', this, v);
                                   }
                               }, this);
            }
        }
    });
    
    Ext.override(Ext.Slider, {
        moveThumb: function(v, animate, cb, scope){
            if(!animate || this.animate === false){
                this.thumb.setLeft(v);
                if (cb){
                    cb.call(scope || this);
                }
            }else{
                this.thumb.shift({
                    left: v, 
                    stopFx: true, 
                    duration:.35,
                    callback : cb,
                    scope : scope || this
                });
            }
        }
    });
    
    Ext.Slider.Vertical.moveThumb = function(v, animate, cb, scope){
        if(!animate || this.animate === false){
            this.thumb.setBottom(v);
            if (cb){
                cb.call(scope || this);
            }
        }else{
            this.thumb.shift({
                bottom: v, 
                stopFx: true, 
                duration:.35,
                callback : cb,
                scope : scope || this
            });
        }
    };

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Can you highlight your code changes in red, and removed code with strikeout?

  3. #3
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,761
    Vote Rating
    108
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


    I used bold, not apparent enough I guess

    Code:
    Ext.override(Ext.Slider, {
        setValue : function(v, animate, changeComplete){
            v = this.normalizeValue(v);
            if(v !== this.value && this.fireEvent('beforechange', this, v, this.value) !== false){
                this.value = v;
                this.moveThumb(this.translateValue(v), 
                               animate !== false, 
                               function() {
                                   this.fireEvent('change', this, v);
                                   if(changeComplete) {
                                       this.fireEvent('changecomplete', this, v);
                                   }
                               }, this);
            this.fireEvent('change', this, v);
                    if(changeComplete) {
                         this.fireEvent('changecomplete', this, v);
            } 
            }
        }
    });
    
    Ext.override(Ext.Slider, {
        moveThumb: function(v, animate, cb, scope){
            if(!animate || this.animate === false){
                this.thumb.setLeft(v);
                if (cb){
                    cb.call(scope || this);
                }
            }else{
                this.thumb.shift({
                    left: v, 
                    stopFx: true, 
                    duration:.35,
                    callback : cb,
                    scope : scope || this
                });
            }
        }
    });
    
    Ext.Slider.Vertical.moveThumb = function(v, animate, cb, scope){
        if(!animate || this.animate === false){
            this.thumb.setBottom(v);
            if (cb){
                cb.call(scope || this);
            }
        }else{
            this.thumb.shift({
                bottom: v, 
                stopFx: true, 
                duration:.35,
                callback : cb,
                scope : scope || this
            });
        }
    };

  4. #4
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,407
    Vote Rating
    6
    stever will become famous soon enough stever will become famous soon enough

      0  

    Default


    Quote Originally Posted by mankz View Post
    I used bold, not apparent enough I guess

    Code:
    Ext.override(Ext.Slider, {
        setValue : function(v, animate, changeComplete){
            v = this.normalizeValue(v);
            if(v !== this.value && this.fireEvent('beforechange', this, v, this.value) !== false){
                this.value = v;
                this.moveThumb(this.translateValue(v), 
                               animate !== false, 
                               function() {
                                   this.fireEvent('change', this, v);
                                   if(changeComplete) {
                                       this.fireEvent('changecomplete', this, v);
                                   }
                               }, this);
            this.fireEvent('change', this, v);
                    if(changeComplete) {
                         this.fireEvent('changecomplete', this, v);
            } 
            }
        }
    });
    
    Ext.override(Ext.Slider, {
        moveThumb: function(v, animate, cb, scope){
            if(!animate || this.animate === false){
                this.thumb.setLeft(v);
                if (cb){
                    cb.call(scope || this);
                }
            }else{
                this.thumb.shift({
                    left: v, 
                    stopFx: true, 
                    duration:.35,
                    callback : cb,
                    scope : scope || this
                });
            }
        }
    });
    
    Ext.Slider.Vertical.moveThumb = function(v, animate, cb, scope){
        if(!animate || this.animate === false){
            this.thumb.setBottom(v);
            if (cb){
                cb.call(scope || this);
            }
        }else{
            this.thumb.shift({
                bottom: v, 
                stopFx: true, 
                duration:.35,
                callback : cb,
                scope : scope || this
            });
        }
    };
    I'll have to give this a try. The slider animation has always caused problems for me so I always disable it.

Thread Participants: 2