Building Resizable Containers with the Ext JS Library - Enhancing the behavior of resizable containers (
Page 4 of 4 )
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!
