ExtJS Accordion-Vbox custom hybrid layout

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

Download the source

You’re welcome if having any feedback. :)



, , , ,

  • marko

    Very nice layout customization!
    You might want to correct a little typo in your examples page: The xtype you defined is ‘ux.accordionvbox’ but in the code example you say it is ‘ux.accordionfit’.

    • admin

      Thanks for your interest and correction, Marko. Fixed the typo.

  • Jond

    This rocks. I was going to attempt to do the same thing but I found this. Im going to give it a shot let you know how it works out.

    • Jond

      I found a bug. if the panel has a toolbar your heights do not calculate properly because you are
      only subtracting the header. I guess the toolbar can be considered another header..

      Here is how i fixed it. Within the resizeChildComponents function i added.

      if ( comp.tbar )
      h -= comp.tbar.getHeight();

      • admin

        Hey Jond, thanks for trying out !!
        And thanks for pointing out the bug too ! Yeah, I think I forgot about checking for the toolbar.. which is another kinda header.
        Will update the code.


        • Jond

          How hard do you think it would be to have a SplitRegion also?

          • admin

            Can you elaborate more on the idea ? You mean initially the panel sizes are handled by the layout.. but afterwards, users can resize them using SplitRegion ?

  • Jerod

    Hey Totti! I think this is exactly what I need, but the project I’m working on isn’t open source – any way you’d consider a dual GPL/BSD license (or something similar?)

    Thanks for the effort regardless!

    • admin

      @Jerod: Thanks for your interest man. My initial intention actually was just to share with everyone so dual-license probably is a good idea !

  • pamelablalock

    This is really helpful. Thanks. I have fit panels with grids inside the accordions. While the panel resizes and expands when other panels are collapsed, the grid does not expand. It looks like the code is resizing the children, but my grids aren’t changing. Any ideas?

  • Great work!!!
    I adopt this extension but one problem.
    The child component such as grid, toolbar did not resize when parent panel resize.

    How to fix this?

    • Thanks for pointing out the bug. Would be nice if you can provide a demo of the bug. I’m looking into this issue.. :)

  • gabriel

    Hi Totti,

    I’ve sent you demo by email.
    I’m wondering it’s delivered or not.

    Thanks in advance.

  • je

    Hi Totti,
    it’s a good layout and I’d like to use it, but I have a little problem. When I use IE v8, it’s very slow and the panels are resizing slowly.The animation doesn’t work. Using other browser (Mozilla and Chrome)works correctly. Do you have any ideas? Thanks in advance.

    • Hi,
      Most likely that there are too many nested components inside your main resizing panel.
      It usually runs perfect for me with 1 or 2 sub-panels (Grid / DataView) inside the main resizing panel, even w IE8.

  • tmaler

    This is a great plugin. Has anyone updated the code to get it to work in EXT 4. Thanks

  • tmaler

    Sorry for the double comment post. But i was wondering if anyone else was able to get this working in Ext 4. Thanks

    • @tmaler: as far as I know, no one has converted this into an ExtJS 4 component.