Review: building simple resizable containers using Ext JS - JavaScript

As a web designer, you know that building resizable divs for a web site can be a pretty challenging task, particularly if you’re planning to do this from scratch. There’s no need to reinvent the wheel, though, since there are a few handy JavaScript frameworks available nowadays, such as Ext JS and jQuery, that allow you to create this class of dynamic containers in a truly painless fashion. So if you’re interested in learning how to incorporate dynamic resizing capabilities into certain containers on your web site using the Ext JS package, then this series of articles might be what you’re looking for.

TABLE OF CONTENTS:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

March 30, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

Considering the possibility that you haven’t had the chance to read the introductory part of this series, where I discussed the creation of a couple of basic resizable divs with the Ext JS library, below I listed for you the full source code corresponding to these concrete examples, so you can study them in detail. Here they are:

(example on building a resizable div without wrapping capabilities)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Basic example on creating a resizable container</title>

body{

padding: 0;

margin: 0;

background: #eee;

}

h1{

font: bold 16pt Arial, Helvetica, sans-serif;

color: #000;

}

font: 9pt Arial, Helvetica, sans-serif;

color: #000;

}

#resizable{

width: 350px;

padding: 10px;

background: #9cf;

}

</style>

// build resizable container when web page is loaded

Ext.onReady(function(){

var resDiv= new Ext.Resizable('resizable', {

width: 350,

height: 150,

minWidth: 100,

minHeight: 50

});

</script>

</head>

<body>

<h1>Basic example on creating a resizable container</h1>

<p>These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container. These are the contents of a resizable container.</p>

</div>

</body>

</html>

(example on building a resizable div with added wrapping capabilities)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Example on creating a resizable container with pinned handles and wrapping</title>

body{

padding: 0;

margin: 0;

background: #eee;

}

h1{

font: bold 16pt Arial, Helvetica, sans-serif;

color: #000;

}

font: 9pt Arial, Helvetica, sans-serif;

color: #000;

}

#resizable{

width: 350px;

padding: 10px;

background: #9cf;

}

</style>

// build resizable container when web page is loaded

Ext.onReady(function(){

var resDiv= new Ext.Resizable('resizable', {

wrap: true,

dynamic: true,

width: 350,

height: 150,

minWidth: 100,

minHeight: 50

});

</script>

</head>

<body>

<h1>Example on creating a resizable container with pinned handles and wrapping</h1>

</div>

</body>

</html>

As I said before, the first of the above code examples demonstrates how to construct a basic resizable div using the aforementioned “Resizable” class, while the second case is a bit more complex and shows how to enhance the behavior of the initial div by incorporating into this element some neat wrapping capabilities.

In both examples, it’s clear to see how easy it is to build containers that can be resized by dragging their respective borders. Nonetheless, if you try out these code samples on your browser, you’ll realize that the boundaries of the containers are only displayed as long as it’s being resized across the web document.

However, Ext JS permits us to modify easily this behavior to show constantly pinned handles around a selected div. So if you’re feeling curious and want to learn how to incorporate these improved handles into a given container, in the following segment I’ll be developing for you a new code sample that will show you how to achieve this in a simple manner.

Now, jump ahead and read the next few lines, please.

Next: Adding pinned handles to enhance the visual aspect of resizable containers >>