Modifying the look and feel of resizable containers with transparent handles - JavaScript

When it comes to building full-blown web-based interfaces, Ext JS is quite possibly one of the most powerful libraries available nowadays. It's equipped with an impressive set of JavaScript classes that allow you to create all sorts of clever things, ranging from simple yet professional message windows, to desktop-like data grids and shadowed drop-down menus. This third part of a three-part series covers just one of its features, which lets you give interesting abilities to containers.

TABLE OF CONTENTS:

By: Alejandro Gervasio

Poor Best

Rating:

/ 5

April 06, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

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

<head>

<title>Example on creating a resizable container with transparent handles</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>

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

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

Next: Creating draggable containers in a simple fashion >>