Home arrow JavaScript arrow Working with Draggable Elements and Transparent Handles with the Ext JS Library

Working with Draggable Elements and Transparent Handles with the Ext JS Library

When it comes to building full-blown web-based interfaces, Ext JS is quite possibly one of the most powerful libraries available nowadays. It's equipped with an impressive set of JavaScript classes that allow you to create all sorts of clever things, ranging from simple yet professional message windows, to desktop-like data grids and shadowed drop-down menus. This third part of a three-part series covers just one of its features, which lets you give interesting abilities to containers.

TABLE OF CONTENTS:
  1. Working with Draggable Elements and Transparent Handles with the Ext JS Library
  2. Review: working with pinned handles and preserved ratios
  3. Modifying the look and feel of resizable containers
  4. Creating draggable containers in a simple fashion
By: Alejandro Gervasio
Rating: starstarstarstarstar / 5
April 06, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Introduction 

Among the dynamic modules that comprise the Ext JS framework, there's one that might be particularly interesting to you. It presents an easy learning curve and can be used for extending the behavior of server-side applications. In this case, I'm talking about its "Resizable" class, which is useful for building containers that can be dynamically resized and dragged across a web document. 

In the two previous episodes of this series, I explained how to create this kind of container, and also discussed in detail how to customize the look of the handles displayed around these web page elements. Indeed, the Ext JS library offers a decent level of customization when it comes to defining the visual aspect of resizing handles; it's possible to display then in a pinned fashion, and even make them completely transparent. 

And now that I spoke about creating transparent resizing handles, in this last installment I'm going to discuss how to create these elements around resizable containers, and how to turn them into fully-draggable web page elements. 

Having already outlined the goals of this tutorial of the series, it's time to learn to master the aforementioned features offered by the Ext JS framework. Let's continue this educational journey right now! 



 
 
>>> More JavaScript Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: