3. Ext JS Tutorial - Animation
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
- 7. Ext JS Tutoral - Advanced Grid
- 8. Ext JS Tutorial - Inside a CMP
Suggest an edit to this page on GitHub (Requires GitHub account. Opens a new window/tab).