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

The first step: defining a target div within a web page - 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

One good way to start explaining how to build a resizable container using the Ext JS library is by defining a rudimentary web page, which will include the container in question, represented as a single div. Then, with this markup available for testing purposes, I'll proceed to turn the sample div into a resizable element through Ext JS.  

Now, it's time to list the definition of this basic web page, which 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>Basic example on creating a resizable container</title>

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

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

Quite possibly, the above web document is the simplest one that you'll ever code, but don't feel concerned about this for the moment. The only thing that you should take into account is that this web document includes a single div, in this specific case identified as "resizable." Period.  

Now that there's a div waiting to be manipulated via JavaScript, it's time to go one step further and learn how it to turn it into a resizable container using the Ext JS library. The full details of this process will be discussed in the next section, so click on the link displayed below and keep reading. 



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