Displaying Pinned Handles with Resizable Containers with the Ext JS Library - Using the preserve ratio feature to enhance the behavior of resizable containers (
Page 4 of 4 )
Preserving the proportions of a resizable container is a must when it will house images within a web document. Fortunately, it seems that the developers standing behind Ext JS also thought the same way and included in the “Resizable” class a useful parameter called “preservedRatio.”
By inputting this argument into the class in question, you can create a resizable container that will obviously preserve its width/height ratio, certainly a feature found in most graphic editing applications.
The following code sample demonstrates the usage of this handy parameter. Have a look at it:
<!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>Example on creating a resizable container with pinned handles (preserved ratio)</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', {
wrap: true,
pinned:true,
dynamic: true,
preserveRatio: true,
width: 350,
height: 150,
minWidth: 100,
minHeight: 50
});
});
</script>
</head>
<body>
<h1>Example on creating a resizable container (preserved ratio)</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>
See how simple and quick it is to create a resizable div with a preserved ratio? I bet you do! However, don’t take my word for it; try the previous example on your own browser. Believe me, you’ll be very pleased to see how well it works.
Finally, with this last example I’m concluding this second tutorial of this series on building resizable containers with the Ext JS framework. As usual with many of my articles on web development, feel free to edit all of the code samples developed in this article to help you start incorporating these dynamic elements in your own web site.
Final thoughts
In this second part of the series, I explained how to incorporate pinned handles into a targeted container using the Ext JS JavaScript library. In addition, you learned how to preserve the width/height ratio on these dynamic containers.
In the forthcoming article, I’ll be discussing the creation of containers whose handles are simply…transparent. Pretty interesting, right? If you wish to learn how this can be achieved with Ext JS, then don’t miss the next part!
