Home arrow JavaScript arrow 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.

  1. Displaying Pinned Handles with Resizable Containers with the Ext JS Library
  2. Review: building simple resizable containers using Ext JS
  3. Adding pinned handles to enhance the visual aspect of resizable containers
  4. Using the preserve ratio feature to enhance the behavior of resizable containers
By: Alejandro Gervasio
Rating: starstarstarstarstar / 2
March 30, 2009

print this article



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! 

>>> More JavaScript Articles          >>> More By Alejandro Gervasio

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates


Dev Shed Tutorial Topics: