PDA

View Full Version : Accordion-Vbox custom hybrid layout



tot2ivn
23 Aug 2010, 6:36 AM
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 the rest of other expanded panels will take up the available space accordingly.

This is how the layout looks like
22106

Check out the demo and source code here (http://iamtotti.com/blog/2010/08/extjs-accordion-vbox-custom-hybrid-layout). :D


Cheers ~o)


Totti

Animal
23 Aug 2010, 6:46 AM
Yes, vbox is a good basis for an accordion. I suggested to the dev team that the 4.0 accordion layout class could just be a vbox subclass with a bit of extra functionality... great minds think alike eh?

tot2ivn
23 Aug 2010, 7:42 AM
Yes, vbox is a good basis for an accordion. I suggested to the dev team that the 4.0 accordion layout class could just be a vbox subclass with a bit of extra functionality... great minds think alike eh?

Wow, great to know you had the same idea. Yeah, I think this should be soon included in the code base. :)

dcoan
4 Sep 2010, 9:30 AM
very nice indeed.

ikovaltaras
22 Oct 2010, 3:33 PM
is there something for GWT?

tot2ivn
23 Oct 2010, 1:30 AM
@dcoan: Thank you for the thumb up ! :)
@ikovaltaras: Unfortunately, no. I wrote this for my ExtJS-based project only.

andrew_j_m
28 Jan 2011, 9:53 AM
I had problems with collapsed panels getting pushed off the screen when other panels contained tbars and/or bbars.
Here's a fix for it:

Change line 143 from: var h = box.height - comp.header.getHeight();
to: var h = box.height - comp.getFrameHeight();

Other than that it's a great plugin and has come in quite handy, thanks!

tot2ivn
16 Feb 2011, 1:53 AM
I had problems with collapsed panels getting pushed off the screen when other panels contained tbars and/or bbars.
Here's a fix for it:

Change line 143 from: var h = box.height - comp.header.getHeight();
to: var h = box.height - comp.getFrameHeight();

Other than that it's a great plugin and has come in quite handy, thanks!

Thanks for the noted fix, Andrew !

AkshayL
26 Mar 2011, 8:22 AM
Hey,
Yes you are right. I agree VBoxLayout can be a way.

I am also facing similar problem.
Please go to: [/URL][URL]http://www.sencha.com/forum/showthread.php?127771-How-to-set-different-heights-of-accordion-panel-on-single-and-double-clicks&p=584614#post584614 (http://www.sencha.com/forum/showthread.php?127771-How-to-set-different-heights-of-accordion-panel-on-single-and-double-clicks&p=584614#post584614)

I am using ExtGWT.

Please guide me if you get the solution.

Many thanks in advance.

- Akshay.

wawrek
16 Jun 2011, 1:13 AM
What is the best way to make an accordion layout from an hbox?
It would have been a very useful feature.