HomeJavaScript Displaying Pinned Handles with Resizable Containers with the Ext JS Library
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!
JavaScript 
