The first step: defining a target div within a web page - 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

One good way to start explaining how to build a resizable container using the Ext JS library is by defining a rudimentary web page, which will include the container in question, represented as a single div. Then, with this markup available for testing purposes, I'll proceed to turn the sample div into a resizable element through Ext JS.

Now, it's time to list the definition of this basic web page, which looks like this:

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

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

Quite possibly, the above web document is the simplest one that you'll ever code, but don't feel concerned about this for the moment. The only thing that you should take into account is that this web document includes a single div, in this specific case identified as "resizable." Period.

Now that there's a div waiting to be manipulated via JavaScript, it's time to go one step further and learn how it to turn it into a resizable container using the Ext JS library. The full details of this process will be discussed in the next section, so click on the link displayed below and keep reading.

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