3. Ext JS Tutorial - Animation

Last updated Apr 7th, 2019 | Page history | Improve this page | Report an issue

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

Budget

$306 per month—let's make that $500!

Learn more

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.