Displaying Pinned Handles with Resizable Containers with the Ext JS Library - Review: building simple resizable containers using Ext JS (
Page 2 of 4 )
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.
