Displaying Pinned Handles with Resizable Containers with the Ext JS Library

As a web designer, you know that building resizable divs for a web site can be a pretty challenging task, particularly if you’re planning to do this from scratch. There’s no need to reinvent the wheel, though, since there are a few handy JavaScript frameworks available nowadays, such as Ext JS and jQuery, that allow you to create this class of dynamic containers in a truly painless fashion. So if you’re interested in learning how to incorporate dynamic resizing capabilities into certain containers on your web site using the Ext JS package, then this series of articles might be what you’re looking for.

Welcome to the second part of a series focused on building resizable containers with the Ext JS library. Made up of four approachable tutorials, this series teaches you with numerous code samples how to create containing elements that can be completely resized and dragged across a web page.  

This is a good time to review the topics that were discussed in the last article. In that part of the series, I explained how to work with the “Resizable” class provided by the Ext JS framework to build a couple of divs which could be dynamically resized.  

In addition, I discussed the use of the “wrap” argument that belongs to the class. As you’ll recall, it was used for wrapping correctly the contents of a div while this element was being resized. In reality, customizing both the behavior and visual appearance of resizable containers with Ext JS is reduced to a process of feeding its “Resizable” class with the proper incoming arguments. That’s about it. 

Nevertheless, Ext JS offers plenty of room when it comes to working with its resizable module. Therefore, in this second installment of the series, I’ll be explaining how to enhance the look of the handles that are displayed around a selected div, so you can learn a bit more about how to customize the container’s visual presentation. 

Now, it’s time to finish with the preliminaries and continue exploring the resizing capabilities given by the Ext JS library. Let’s jump in! 

{mospagebreak title=Review: building simple resizable containers using Ext JS} 

Considering the possibility that you haven’t had the chance to read the introductory part of this series, where I discussed the creation of a couple of basic resizable divs with the Ext JS library, below I listed for you the full source code corresponding to these concrete examples, so you can study them in detail. Here they are: 

(example on building a resizable div without wrapping capabilities)

 

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

 

 

(example on building a resizable div with added wrapping capabilities)

 

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

 

As I said before, the first of the above code examples demonstrates how to construct a basic resizable div using the aforementioned “Resizable” class, while the second case is a bit more complex and shows how to enhance the behavior of the initial div by incorporating into this element some neat wrapping capabilities.  

In both examples, it’s clear to see how easy it is to build containers that can be resized by dragging their respective borders. Nonetheless, if you try out these code samples on your browser, you’ll realize that the boundaries of the containers are only displayed as long as it’s being resized across the web document. 

However, Ext JS permits us to modify easily this behavior to show constantly pinned handles around a selected div. So if you’re feeling curious and want to learn how to incorporate these improved handles into a given container, in the following segment I’ll be developing for you a new code sample that will show you how to achieve this in a simple manner.  

Now, jump ahead and read the next few lines, please. 

{mospagebreak title=Adding pinned handles to enhance the visual aspect of resizable containers} 

Adding pinned handles to a resizable container is a pretty straightforward task that can be tackled with minor hassles. It only requires that you feed the “Resizable” class that you learned before an additional input argument, not surprisingly called “pinned.” 

However, this is only boring theory that needs to be made real with practice, right? Thus, below I set up a new example that illustrates how to add pinned handles to a selected div. 

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

As I stated before, the pinned handles are added to the resizable div by specifying a “pinned: true” parameter within the “Resizable” class, a procedure represented fairly clearly by the above code sample. 

Apart from studying how this particular example works, you may want to look at the following screen capture. It shows how the pinned handles are displayed all the time around the container, regardless of whether or not the element is being resized:

 

So far, so good. At this point, you hopefully learned how to create neat pinned handles on all of the boundaries of a resizable container. What comes next? Well, as you may have noticed, all the examples developed so far create resizable divs that don’t preserve their width/height ratio. Obviously, keeping the proportional aspect of the divs can be really useful, not to say mandatory, particularly when working with resizable images.  

Considering this requirement, in the last section of this tutorial I’ll be explaining how to build resizable containers that will be capable of preserving their width/height ratio.  

This topic will be discussed in depth in the segment to come. To learn more about it, click on the link below and keep reading. 

{mospagebreak title=Using the preserve ratio feature to enhance the behavior of resizable containers} 

Preserving the proportions of a resizable container is a must when it will house images within a web document. Fortunately, it seems that the developers standing behind Ext JS also thought the same way and included in the “Resizable” class a useful parameter called “preservedRatio.” 

By inputting this argument into the class in question, you can create a resizable container that will obviously preserve its width/height ratio, certainly a feature found in most graphic editing applications. 

The following code sample demonstrates the usage of this handy parameter. Have a look at it: 

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

 

See how simple and quick it is to create a resizable div with a preserved ratio? I bet you do! However, don’t take my word for it; try the previous example on your own browser. Believe me, you’ll be very pleased to see how well it works. 

Finally, with this last example I’m concluding this second tutorial of this series on building resizable containers with the Ext JS framework. As usual with many of my articles on web development, feel free to edit all of the code samples developed in this article to help you start incorporating these dynamic elements in your own web site.  

Final thoughts 

In this second part of the series, I explained how to incorporate pinned handles into a targeted container using the Ext JS JavaScript library. In addition, you learned how to preserve the width/height ratio on these dynamic containers. 

In the forthcoming article, I’ll be discussing the creation of containers whose handles are simply…transparent. Pretty interesting, right? If you wish to learn how this can be achieved with Ext JS, then don’t miss the next part!

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

chat sex hikayeleri Ensest hikaye