Building Resizable Containers with the Ext JS Library - The first step: defining a target div within a web page (
Page 2 of 4 )
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Basic example on creating a resizable container</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #eee;
}
h1{
font: bold 16pt Arial, Helvetica, sans-serif;
color: #000;
}
p{
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>
<div id="resizable">
<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.
