Home arrow JavaScript arrow Building Resizable Containers with the Ext JS Library

Building Resizable Containers with the Ext JS Library

In this three-part series of articles I will use a hands-on approach to explain how to construct different kinds of resizable divs with the Ext JS library. If you're thinking of implementing resizable containers on your web site, you should find this series particularly helpful; more than likely it will save you a great deal of time and aggravation.

  1. Building Resizable Containers with the Ext JS Library
  2. The first step: defining a target div within a web page
  3. Using the Ext JS JavaScript package: converting a static div into a resizable element
  4. Enhancing the behavior of resizable containers
By: Alejandro Gervasio
Rating: starstarstarstarstar / 5
March 23, 2009

print this article



When it comes to building a maintainable, highly-modular web site, it's necessary to divide it in three well-differentiate layers, which are known popularly as structure, presentation and behavior. Naturally, this trusted approach permits you to easily decouple the modules that comprise the site, facilitating any further update or modification that might be required within each of the core layers. 

What's more, by using this multi-layered model, it is quite simple to add and extend the behavior of different elements of a web page, without having to mess up the web document's markup with ugly, inline JavaScript code. All of these benefits can be equally appreciated when implementing simple or complex behaviors. 

Of course, if you're planning to develop a small JavaScript application whose purpose will be displaying a few tool tips next to certain elements of a web document, that would be relatively easy to implement. Things can get more complicated though, when it comes to converting specific divs into draggable and resizable containers. To accomplish this in an unobtrusive way, you may have to build a more complex and time-consuming JavaScript program. 

However, there's no need to reinvent the wheel; if you need to create resizable divs, you can use a third-party JavaScript framework like Ext JS library, which will make this process a no-brainer. In case you didn't know, Ext JS comes packaged with a robust module that will let you build draggable and resizable containers with extreme ease and a high level of customization.  

Now, it's time to start learning the basics of building resizable containers with the Ext JS JavaScript package. Let's begin this educational journey now! 

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

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- 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: