Building Resizable Containers with the Ext JS Library

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.

Introduction 

When it comes to building a maintainable, highly-modular web site, it’s necessary to divide it in three well-differentiate layers, which are known popularly as structure, presentation and behavior. Naturally, this trusted approach permits you to easily decouple the modules that comprise the site, facilitating any further update or modification that might be required within each of the core layers. 

What’s more, by using this multi-layered model, it is quite simple to add and extend the behavior of different elements of a web page, without having to mess up the web document’s markup with ugly, inline JavaScript code. All of these benefits can be equally appreciated when implementing simple or complex behaviors. 

Of course, if you’re planning to develop a small JavaScript application whose purpose will be displaying a few tool tips next to certain elements of a web document, that would be relatively easy to implement. Things can get more complicated though, when it comes to converting specific divs into draggable and resizable containers. To accomplish this in an unobtrusive way, you may have to build a more complex and time-consuming JavaScript program. 

However, there’s no need to reinvent the wheel; if you need to create resizable divs, you can use a third-party JavaScript framework like Ext JS library, which will make this process a no-brainer. In case you didn’t know, Ext JS comes packaged with a robust module that will let you build draggable and resizable containers with extreme ease and a high level of customization.  

Now, it’s time to start learning the basics of building resizable containers with the Ext JS JavaScript package. Let’s begin this educational journey now! 

{mospagebreak title=The first step: defining a target div within a web page}

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. 

{mospagebreak title=Using the Ext JS JavaScript package: converting a static div into a resizable element}

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.  

{mospagebreak title=Enhancing the behavior of resizable containers} 

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!  

[gp-comments width="770" linklove="off" ]

chat sex hikayeleri Ensest hikaye