Building Resizable Containers with the Ext JS Library - Using the Ext JS JavaScript package: converting a static div into a resizable element (
Page 3 of 4 )
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">
<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>
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<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>
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">
// 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>
<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>
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.
