Dev Blog

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.