A Sencha Touch application is built using the elements, represented by Ext.Element
, and every element of it can be animated. In this recipe, we will see how to animate an element, what are the available types of animations, and how to change the animation properties.
Make sure that you have set up your development environment by following the recipes outlined in Chapter 1.
Create a new folder named ch07
in the same folder where we had created ch01
and ch02
folders. We will be using this new folder to keep the code.
Carry out the following steps:
Create and open a new file named
ch07_01.js
and paste the following code into it:Ext.setup({ onReady: function() { var pnl = new Ext.Panel({ renderTo: Ext.getBody(), style: 'background-color:gold;', height: 100, width: 100, }); Ext.Anim.run(pnl.getEl(), 'cube', { }); } });
Update the
index.html
file.Deploy and access it from the browser or the device of your choice.