PDA

View Full Version : Animated Ext.window resize



nidea123
12 May 2010, 8:30 AM
Hi, I am wondering if is possible to enable or set a property to add a resize animation on a Ext.window....


Thanks.

Animal
12 May 2010, 11:26 AM
Ext.override(Ext.Window, {
defaultScaleCfg: {
duration: .25,
easing: 'easeNone'
},

scale: function(w, h) {
var a = Ext.lib.Anim.motion(this.el, Ext.apply({
height: {to: h},
width: {to: w}
}, this.scaleCfg, this.defaultScaleCfg));
a.onTween.addListener(function(){
if (this.fixedCenter) {
this.center();
}
this.syncSize();
this.syncShadow();
}, this);
a.animate();
}
});

realjax
20 Jul 2010, 11:40 PM
This sounds great!
However, Animals override seems to work only on decreasing a window.. when I increase it, window stays orginal size and only the shadow area increasing to the right size ( running 3.2.1)

Any idea's ??

Animal
20 Jul 2010, 11:43 PM
Works for me. I just pasted this into the Firebug console command line and ran it.



Ext.override(Ext.Window, {
defaultScaleCfg: {
duration: .25,
easing: 'easeNone'
},

scale: function(w, h) {
var a = Ext.lib.Anim.motion(this.el, Ext.apply({
height: {to: h},
width: {to: w}
}, this.scaleCfg, this.defaultScaleCfg));
a.onTween.addListener(function(){
if (this.fixedCenter) {
this.center();
}
this.syncSize();
this.syncShadow();
}, this);
a.animate();
}
});
w = new Ext.Window({height:100,width:100});
w.show();
(function(){
w.scale(200, 200);
}).defer(2000);

realjax
21 Jul 2010, 12:59 AM
great.

I'll have a look at the scale() method in Fx

Thanks.

Ps. I tried uploading an image to show you what happens when I run in firebug, but after 17 attempts with the new ultra-cool-slikkest-ever-nifty-attachment-manager that comes with this foprum I gave up.

Animal
21 Jul 2010, 1:12 AM
Are you saying the above code snippet does not work for you?

What Ext version? What browser version?

realjax
21 Jul 2010, 1:22 AM
allright attempt 18:

21549

Ran your code in firebug's console against the docs ( which appear to run on 3.2.1)

Animal
21 Jul 2010, 1:29 AM
OK, I do see that now. It seems to be a 3.2.1 issue.

I'm running on the 3.3 branch out of SVN.

So you only have a very short wait until you can have it working! ;)

realjax
21 Jul 2010, 1:39 AM
;) allright.

Thanks for your time (and the code!)

realjax
23 Jul 2010, 1:19 AM
Animal FYI,

I created a build on the 3.3 branch and it indeed works on this build. Thing is, it seems duration (0.25) is not taken into account and it looks like it always defaults to the 1 (second) set in the init method of Ext.lib.AnimBase.

Animal
23 Jul 2010, 2:24 AM
I got it wrong where the duration and easing specs go.



Ext.override(Ext.Window, {
scale: function(w, h, duration, easing) {
var a = Ext.lib.Anim.motion(this.el, {
height: {to: h},
width: {to: w}
}, duration, easing);
a.onTween.addListener(function(){
if (this.fixedCenter) {
this.center();
}
this.syncSize();
this.syncShadow();
}, this);
a.animate();
}
});
w = new Ext.Window({height:100,width:100});
w.show();
(function(){
w.scale(200, 200, 2, 'easeBoth');
}).defer(2000);

realjax
23 Jul 2010, 3:05 AM
Nice, works pretty smooth. All animations seem to run smoother, or isit me?
Can't wait for 3.3!

Thanks.

anupkshah
17 Jan 2012, 10:11 AM
That's a nice snippet Animal. One thing I noticed is that once the animation has finished, if you resize the window (e.g. make it smaller) the shadow stays where it is, and resizing the height is just slightly messed up. Width seems okay. (I'm testing it on ExtJs 3.4 - seen it on both Chrome and Firefox latest)