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

Enhancing the behavior of resizable containers - 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 the segment that you just read, you hopefully learned how to build a basic resizable container using the "Resizable" class that comes bundled with Ext JS. However, if you try this example on your browser, you'll see that the contents of the containers do not wrap as it's being resized, which can be pretty annoying.  

Fortunately, it's possible to fix this issue quickly by specifying an additional "wrap: true" argument for the "Resizable" class. The code sample that demonstrates the functionality of this parameter is listed below:  

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

dynamic: true,

width: 350,

height: 150,

minWidth: 100,

minHeight: 50

});

});

</script>

</head>

<body>

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

It's that simple. As I said before, now all of the contents included in the container will be neatly wrapped as the element is being resized, in this way improving its behavior. Try it out and see for yourself how well the previous example works.  

Finally, feel free to tweak all of the code samples developed in this article, so you can get a better understanding of how to build resizable web page containers with the Ext JS library. Fun is already guaranteed!  

Final thoughts 

In this first installment of the series, I walked you through building some simple resizable containers with the Ext JS JavaScript framework. Indeed, this process is unobtrusive and easy to follow. Nonetheless, Ext JS allows us to customize many other aspects of resizable elements, such as the visual appearance of the handles displayed around a div. 

Thus, in the next article I'll be discussing how to created pinned handles for a specific div. Now that you've been warned about the topics that will be covered in the upcoming part of the series, you can't miss it!  



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