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