Book Image

Learning Ext JS

By : Colin Ramsay, Shea Frederick, Steve 'Cutter' Blades
Book Image

Learning Ext JS

By: Colin Ramsay, Shea Frederick, Steve 'Cutter' Blades

Overview of this book

<p>As more and more of our work is done through a web browser, and more businesses build web rather than desktop applications, users want web applications that look and feel like desktop applications. Ext JS is a JavaScript library that makes it (relatively) easy to create desktop-style user interfaces in a web application, including multiple windows, toolbars, drop-down menus, dialog boxes, and much more. Both Commercial and Open Source licenses are available for Ext JS.<br /><br />Ext JS has the unique advantage of being the only client-side UI library that also works as an application development library. Learning Ext JS will help you create rich, dynamic, and AJAX-enabled web applications that look good and perform beyond the expectations of your users.<br /><br />From the building blocks of the application layout, to complex dynamic Grids and Forms, this book will guide you through the basics of using Ext JS, giving you the knowledge required to create rich user experiences beyond typical web interfaces. It will also provide you with the tools you need to use AJAX, by consuming server-side data directly into the many interfaces of the Ext JS component library.</p>
Table of Contents (16 chapters)
15
Index

Elemental

As we've seen, the Ext.Element is the key to using Ext.Fx. It's important that, when rolling your own custom versions of Ext JS, you make sure that you include Ext.Fx if you want to be able to use its methods for Ext.Element. However, even when used stand-alone, Ext.Element has a number of methods all of its own that can provide some interesting possibilities for animation.

Making a move

There are many methods on Ext.Element that can be used to manipulate a target element, but some of them have a free extra. Pass in a true value as the last parameter, and the manipulation will be animated.

Ext.get('target').moveTo(300, 500, true);

In this case, the target element will move to a location 300 pixels from the left and 500 from the top of the viewport. But, because of this last parameter, it will not simply jump to that location, but will smoothly transition to the specified point.

In addition to simply passing in true as the third parameter, we can pass in a full...