Home arrow JavaScript arrow Page 3 - Working with Draggable Elements and Transparent Handles with the Ext JS Library

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:
  1. Working with Draggable Elements and Transparent Handles with the Ext JS Library
  2. Review: working with pinned handles and preserved ratios
  3. Modifying the look and feel of resizable containers
  4. Creating draggable containers in a simple fashion
By: Alejandro Gervasio
Rating: starstarstarstarstar / 5
April 06, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
 

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. 



 
 
>>> More JavaScript Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: