ExtJS 4.x animations


This is a collection of references to information about using Animations in ExtJS. These capabilities seem similar to the type of functionality in jQuery or Mootools. I found it a little confusing in part because the animation classes and methods in 4.x are quite different to those in 3.4 but also because components and elements have similar but different capabilities and working out when to animate the component and when to animate the element is not always clear to me.

The first thing I had to be clear about is that components are not elements. An element is the rendering of a component in Html. Ultimately, everything is an animation of an element but, I think, the distinction between component and element helps keep the use of the different animation options clear.

Element animations are documented on the Sencha web site. Element animations are implemented by this mixin.

In principle, any component derived from Ext.AbstractComponent can be animated using the ‘animate’ method. This function takes a configuration object as a parameter to drive the animation. For example

mycomponent.animate({
	to:
	{
		delay: 1000,
		height: 300,
		width: 300
	},
	duration: 2000,
	callback: function()
	{
		console.log("Finished 1")
	},
	listeners:
	{
		beforeanimate: function() { console.log("beforeanimate") },
		afteranimate : function() { console.log("afteranimate") }
	}
});

However, not all options work so well. in the example above, the background color cannot be animated using the component.animate function. Instead, its necessary to grab the element (using the component.el property) and use the animate function of the element. In general, animating the underlying element seems to work much better so it’s hard to see why the component supports an animation function.

However, in this forum post I reported that not all methods behaved as expected: in this case the scale function of the Window class. In reply one of the developers showed that animations to change the height, width and position of a component can be accomplished correctly using an animate function.

The element class also exposes useful methods able to animate movement of the element: setVisible(), hide(), show(), setX(), setY(), setXY(), setHeight(), setWidth(), setSize(). Each method takes an argument which, if supplied, is either true/false or a configuration object to provide animation control.

Information and Links

Join the fray by commenting, tracking what others have to say, or linking to it from your blog.


Other Posts

Write a Comment

Take a moment to comment and tell us what you think. Some basic HTML is allowed for formatting.

Reader Comments

The Ext.util.Animate docs have this pertinent info regarding this topic:

“Note that Components have a limited subset of what attributes can be animated such as top, left, x, y, height, width, and opacity (color, paddings, and margins can not be animated).”

They may say that but it’s not all correct. As I observe in the post:

“…not all options work so well. in the example above, the background color cannot be animated using the component.animate function. Instead, its necessary to grab the element (using the component.el property) and use the animate function of the element.”

So while the document is not wrong, nor is it complete in explaining how user can use alternative methods to animate, for example, color (and the other properties you list).