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.

TABLE OF CONTENTS:

By: Alejandro Gervasio

Poor Best

Rating:

/ 5

March 23, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

Introduction

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!

Next: The first step: defining a target div within a web page >>