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

Review: working with pinned handles and preserved ratios - 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
 

Before I start out discussing how to build draggable containers and adding transparent handles to them, it would be helpful to recall a couple of hands-on examples developed in the previous tutorial. The first one was focused on demonstrating how to use the Ext JS library to display pinned handles around a targeted div, and the second one simply illustrated how to preserve the width/height ratio of the div in question as it was being resized. 

That being said, here are the two practical examples mentioned above: 

(example on building a resizable div with pinned handles)

 

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

width: 350,

height: 150,

minWidth: 100,

minHeight: 50

});

});

</script>

</head>

<body>

<h1>Example on creating a resizable container with pinned 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>

 

 

(example on building a resizable div with preserved ratio)

 

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

 

As I said before, the first of the above code samples shows how to incorporate pinned handles into a simple resizable div, while the second one uses the "preserveRatio" argument that belongs to the already-referenced "Resizable" class to create a container whose width/height ratio is maintained as the element is being resized. 

Both cases demonstrate in a nutshell how easy it is to modify both the visual appearance and behavior of a given div, since this customization process is merely reduced to passing the proper incoming argument to the "Resizable" class. Period. 

At this point, the two examples listed previously should be pretty familiar to you, so it's time to continue exploring a few other features of the Ext JS library that pertain to building resizable web page elements. 

As I anticipated in the introduction, Ext JS allows you to create resizable containers whose handles can be turned transparent as the element is being resized across the web page. Thus, in the next section, I'm going to show you how to achieve this process by using an additional input argument of the familiar "Resizable" class. 

To see how these resizing handles will be created, click on the link that appears below and read the next few lines. 



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