Enhancing the behavior of resizable containers - 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 the segment that you just read, you hopefully learned how to build a basic resizable container using the "Resizable" class that comes bundled with Ext JS. However, if you try this example on your browser, you'll see that the contents of the containers do not wrap as it's being resized, which can be pretty annoying.

Fortunately, it's possible to fix this issue quickly by specifying an additional "wrap: true" argument for the "Resizable" class. The code sample that demonstrates the functionality of this parameter is listed below:

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

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

It's that simple. As I said before, now all of the contents included in the container will be neatly wrapped as the element is being resized, in this way improving its behavior. Try it out and see for yourself how well the previous example works.

Finally, feel free to tweak all of the code samples developed in this article, so you can get a better understanding of how to build resizable web page containers with the Ext JS library. Fun is already guaranteed!

Final thoughts

In this first installment of the series, I walked you through building some simple resizable containers with the Ext JS JavaScript framework. Indeed, this process is unobtrusive and easy to follow. Nonetheless, Ext JS allows us to customize many other aspects of resizable elements, such as the visual appearance of the handles displayed around a div.

Thus, in the next article I'll be discussing how to created pinned handles for a specific div. Now that you've been warned about the topics that will be covered in the upcoming part of the series, you can't miss it!