[2.2.1] Slider animation behaviour suggestion

[mankz]

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:


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

[Animal]

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

[mankz]

I used bold, not apparent enough I guess :)


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

[stever]

I used bold, not apparent enough I guess :)


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.