Results 1 to 4 of 4

Thread: [2.2.1] Slider animation behaviour suggestion

  1. #1
    Sencha Premium User mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    3,136
    Vote Rating
    189
      0  

    Default [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 User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,752
    Vote Rating
    83
      0  

    Default

    Can you highlight your code changes in red, and removed code with strikeout?
    Longtime Sencha engineer. Now surplus to requirements apparently...

  3. #3
    Sencha Premium User mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    3,136
    Vote Rating
    189
      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,408
    Vote Rating
    9
      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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •