Animating elements can be achieved easily with Ext JS. This recipe will demonstrate adding simple animations and transitions to an element or Ext JS component.
Start by adding an element to the body of your HTML:
<div id="animate"></div>
Now style the DIV to help us see the animations working:
<style type="text/css"> #animate { margin: 50px auto; width: 200px; background-color: #444; height: 200px; } </style>
Inside your
Ext.onReady
function get the element:var el = Ext.get('animate');
The first animation to try is
puff
. This effect expands the element in all directions while fading it out. Call thepuff
method passing in someFX
options:el.puff({ easing: 'easeOut', duration: 1000, useDisplay: false });
Having seen the box 'puff' we can substitute the method for one of the many other pre-defined animations. Remove or comment-out
el.puff()
:/* el.puff({ easing: 'easeOut', duration: 1000...