ExtJs has two well-known layouts called Accordion and Vbox.
Basically, in a vertical list of panels, AccordionLayout manages multiple Panels in an expandable accordion style such that only one Panel can be expanded at any given time. Each Panel has built-in support for expanding and collapsing.
VboxLayout, on the other hand, arranges items vertically down a Container. This layout optionally divides available vertical space between child items containing a numeric flex configuration.
From the need of one of my projects, I came up with a custom hybrid layout between Accordion and Vbox.. that allows multiple panels to be collapsed at a time but the sizes of other expanded panels are automatically resized according to the new empty space available.
This is a very practical layout when you have a long vertical panel consisting of different sub-panels. Users can selectively collapse some unused panels, and all of the other expanded panels will take up the available space accordingly.
Main configuration follows the API doc of VboxLayout.
You can check out the demo and comparison between layouts here.
Extension tested working on IE6+, FF3, Safari 4, Chrome, and Opera 10.54+ with ExtJS 3.2.1
You’re welcome if having any feedback. :)
Cheers,
Totti