O'Reilly logo

Ext JS 4 Web Application Development Cookbook by Stuart Ashworth, Andrew Duncan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Simple animation of elements

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.

How to do it...

  1. Start by adding an element to the body of your HTML:
    <div id="animate"></div>
  2. 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>
  3. Inside your Ext.onReady function get the element:
    var el = Ext.get('animate');
  4. The first animation to try is puff. This effect expands the element in all directions while fading it out. Call the puff method passing in some FX options:
    el.puff({
        easing: 'easeOut',
        duration: 1000,
        useDisplay: false
    });
  5. Having ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required