Home arrow JavaScript arrow Page 3 - Building Resizable Containers with the Ext JS Library

Using the Ext JS JavaScript package: converting a static div into a resizable element - JavaScript

In this three-part series of articles I will use a hands-on approach to explain how to construct different kinds of resizable divs with the Ext JS library. If you're thinking of implementing resizable containers on your web site, you should find this series particularly helpful; more than likely it will save you a great deal of time and aggravation.

TABLE OF CONTENTS:
  1. Building Resizable Containers with the Ext JS Library
  2. The first step: defining a target div within a web page
  3. Using the Ext JS JavaScript package: converting a static div into a resizable element
  4. Enhancing the behavior of resizable containers
By: Alejandro Gervasio
Rating: starstarstarstarstar / 5
March 23, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

In reality, converting a div or any other web page element into a resizable container using Ext JS is simply a matter of working with an instance of its "Resizable" JavaScript class. As you'll see in a moment, this class not only allows you to make a div resizable, but it permits you to customize easily the behavior and appearance of the element itself. 

To demonstrate how the div created in the previous section can be resized by dragging and dropping its borders, below I included a brand new code sample that shows this process in a simple manner. Take a look at it, please: 

<!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>Basic example on creating a resizable container</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', {

width: 350,

height: 150,

minWidth: 100,

minHeight: 50

});

});

</script>

</head>

<body>

<h1>Basic example on creating a resizable container</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 you can see, the above example shows how to convert the sample div into a container that can be resized dynamically by dragging and dropping its boundaries. As I stated before, this process is easily performed, thanks to the functionality given by the "resizable" class bundled with Ext JS.  

In this particular case, after the web page finishes loading, all of the Ext JS dependencies are included and the "Resizable" class is instantiated with some custom parameters, such as the width and height of the targeted div, which is targeted via its ID attribute. Logically, the beauty of this example relies on its ability to implement dynamic behavior on a given container, while the markup remains completely untouched. Pretty nice, huh? 

Here's a graphic that shows how the div can be resized when dragging its borders:

 

 

Provided that you've grasped the logic that stands behind building resizable divs with the Ext JS library, it's time to explore a few more features offered by its "Resizable" class.  

Therefore, in the forthcoming section I'll be explaining how to wrap the contents of a div while it's being resized, which will be very simple to learn for you, trust me.  

Click on the link below and read the following segment. 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: