Using the Ext JS JavaScript package: converting a static div into a resizable element - JavaScript

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

In reality, converting a div or any other web page element into a resizable container using Ext JS is simply a matter of working with an instance of its "Resizable" JavaScript class. As you'll see in a moment, this class not only allows you to make a div resizable, but it permits you to customize easily the behavior and appearance of the element itself.

To demonstrate how the div created in the previous section can be resized by dragging and dropping its borders, below I included a brand new code sample that shows this process in a simple manner. Take a look at it, please:

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

As you can see, the above example shows how to convert the sample div into a container that can be resized dynamically by dragging and dropping its boundaries. As I stated before, this process is easily performed, thanks to the functionality given by the "resizable" class bundled with Ext JS.

In this particular case, after the web page finishes loading, all of the Ext JS dependencies are included and the "Resizable" class is instantiated with some custom parameters, such as the width and height of the targeted div, which is targeted via its ID attribute. Logically, the beauty of this example relies on its ability to implement dynamic behavior on a given container, while the markup remains completely untouched. Pretty nice, huh?

Here's a graphic that shows how the div can be resized when dragging its borders:

Provided that you've grasped the logic that stands behind building resizable divs with the Ext JS library, it's time to explore a few more features offered by its "Resizable" class.

Therefore, in the forthcoming section I'll be explaining how to wrap the contents of a div while it's being resized, which will be very simple to learn for you, trust me.

Click on the link below and read the following segment. It's only one click away.

Next: Enhancing the behavior of resizable containers >>