View Full Version : Zoom animation for Panels

26 May 2009, 7:14 PM
Hi All

ExtJS newbie here. From what I've seen so far, it's an excellent framework, beautiful internally and externally. Almost good enough to get me to give up native app development forever!

I've been playing around with the Portal sample for a project I'm working on. I'm wondering how to animate the opening of a portlet, which appears to just be a simple subclass of Panel, with a sort of zooming out rectangle animation. Ditto for the closing.

I know that Ext.Fx and Ext.Element have support for animation, but don't know how to correlate ExtJS elements and components. I also know that Ext.Window has an animateTarget, but Panel doesn't appear to have it. Other than digging into the animateTarget code, any suggestions?

Glen Low
Pixelglow Software

26 May 2009, 11:31 PM
You will have to animate the underlying Element yourself, and use the animation's onTween event to synchronize the state of the Panel with the state of its Element.

I have a Window resizing anmation which shows you the kind of thing you need to do.

Ext.override(Ext.Window, {
scale: function(w, h) {
var a = Ext.lib.Anim.motion(this.el, {height: {to: h}, width: {to: w}});
if (this.fixedCenter) {
}, this);
}, this, {single: true});

It's not the total answer, but I think it's the principle you need to follow.

27 May 2009, 12:18 AM
OK, uh, thanks...

Where can I find documentation on the Animation classes? In particular, what is the role of onTween?

Glen Low
Pixelglow Software

27 May 2009, 12:49 AM
onTween is an event which fires between "frames" of the animation.

The Ext.lib classes are not documented.

IMHO, they should be, but that's a matter for Ext.

Ext.lib.Anim is based on YAHOO.util.Anim, so you could have a look at their docs for some more info.

27 May 2009, 9:29 AM
to be honest, depending on the complexity, things will be really slow on most browsers that have slow DOM manipulation engines.