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

Life's a drag

There are clearly two parts to creating a working drag-and-drop feature—the dragging, and the dropping. As these are two separate operations, we'll handle them separately for our simple use case.

Sourcing a solution

The first part we need to look at is the drag action. Ext will enable this using the Ext.dd.DragSource, which actually makes the whole thing a breeze. Assume that you've got a<div> element on your page with an ID, dragMe:

new Ext.dd.DragSource("dragMe");

That's all you need to get up and running!

Sourcing a solution

Try running this code and grab hold of your element. You can now drag it around the page, but there's a little bit more to it than that. Ext JS provides a few extra features by default which will be demonstrated by this code.

Approximating

When you begin dragging the element, you'll see that you don't actually drag the full element as you would in some drag-and-drop implementations that you might have seen. Instead...