Jump to main content Jump to doc navigation

3. Ext JS Tutorial - Animation

Other versions: 2.x (current) — Other languages: EN RU — Found a problem? Please edit this page or report an issue.

Animations

Once again, we include the required JS and CSS:

<link  rel="stylesheet" type="text/css" href="manager/assets/ext3/resources/css/ext-all.css" />
<script type="text/javascript" src="manager/assets/ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="manager/assets/ext3/ext-all.js"></script>

And then we add some controls that will perform a simple animation that will resize a div:

    <script type="text/javascript">
        Ext.onReady(function() {
            var myDiv1 = Ext.get('div1');
            myDiv1.setSize(350,350, {duration: 1, easing:'bounceOut'});
        });
    </script>

To get the div ready and make our animation easier to see, we need to provide some styling:

    <style type="text/css">
        .myDiv {
            border: 1px solid #AAAAAA;
            background: yellow;
            width: 200px;
            height: 35px;
        }
    </style>

Finally, actually create the div down in your HTML body:

<div id="div1" class="myDiv"></div>

When your finished, this page should look something like this:

<html>
    <title>My Ext JS Test Page : Animations</title>
    <link  rel="stylesheet" type="text/css" href="manager/assets/ext3/resources/css/ext-all.css" />
    <script type="text/javascript" src="manager/assets/ext3/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="manager/assets/ext3/ext-all.js"></script>
    <script type="text/javascript">

        Ext.onReady(function() {
            var myDiv1 = Ext.get('div1');
            myDiv1.setHeight(200);
            myDiv1.setSize(350,350, {duration: 1, easing:'bounceOut'});
        });
    </script>

    <style type="text/css">
        .myDiv {
            border: 1px solid #AAAAAA;
            background: yellow;
            width: 200px;
            height: 35px;
        }
    </style>
    <body>
        <h1>Animations</h1>

        <div id="div1" class="myDiv"></div>

    </body>
</html>

When you view this in a browser, you should see your div grow in size to become a square.

Other Commands

You can also use the setHeight or setWidth methods, e.g.:

myDiv1.setHeight(200);

Easing

One of the keys to this trick is the "easing" property. The available easing options depend on which library is loaded, but here is a short list of easing options that are available

Easing Type Description
easeNone Uniform speed between points.
easeIn Begins slowly and accelerates towards end. (quadratic)
easeOut Begins quickly and decelerates towards end. (quadratic)
easeBoth Begins slowly and decelerates towards end. (quadratic)
easeInStrong Begins slowly and accelerates towards end. (quartic)
easeOutStrong Begins quickly and decelerates towards end. (quartic)
easeBothStrong Begins slowly and decelerates towards end. (quartic)
elasticIn Snap in elastic effect.
elasticOut Snap out elastic effect.
elasticBoth Snap both elastic effect.
backIn Backtracks slightly, then reverses direction and moves to end.
backOut Overshoots end, then reverses and comes back to end.
backBoth Backtracks slightly, then reverses direction, overshoots end, then reverses and comes back to end.
bounceIn Bounce off of start.
bounceOut Bounces off end.
bounceBoth Bounces off start and end.
  1. Ext JS Tutorial - Message Boxes
  2. Ext JS Tutorial - Ajax Include
  3. Ext JS Tutorial - Animation
  4. Ext JS Tutorial - Manipulating Nodes
  5. Ext JS Tutorial - Panels
  6. Ext JS Tutoral - Advanced Grid
  7. Ext JS Tutorial - Inside a CMP