Working with Draggable Elements and Transparent Handles with the Ext JS Library - Modifying the look and feel of resizable containers (
Page 3 of 4 )
In the previous section, you recalled how to create a couple of resizable divs by using the "Resizable" class that comes with the Ext JS framework. Now I'm going to show you how to create the same kind of container, but this time its handles won't be displayed as the element is resized across the web page.
Achieving this is really simple; it only requires passing yet another parameter to the "Resizable" class, in a manner similar to the examples developed earlier. In summary, the source code that constructs a resizable container whose handles are transparent 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>Example on creating a resizable container with transparent handles</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,
transparent: true,
dynamic: true,
preserveRatio: true,
width: 350,
height: 150,
minWidth: 100,
minHeight: 50
});
});
</script>
</head>
<body>
<h1>Example on creating a resizable container with transparent handles</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 I explained in the beginning of this section, adding transparent handles to a resizable container is only a matter of assigning a "true" value to the corresponding "transparent" incoming argument, and then the "Resizable" class takes care of everything else.
In addition, if you have any possible doubts about how the previous code sample works, try it out with your own browser and you'll see that the handles will become transparent elements.
Having already explained how to build resizable containers whose handles aren't displayed on screen, it's time to explore yet another handy feature offered by Ext JS's resizing module. In this case, I'm going to show you how to convert a resizable div into a fully-draggable web page element. This behavior can be fairly useful when developing desktop-like web-based user interfaces.
The full details of this topic will be covered in the section to come. Thus, go ahead and read it. It's only one click away.
/ 4 
