Ext.layout.AccordionLayout

Ext.layout.AccordionLayout

Messing with creating custom layouts and why not use CSS3, I have stumbled accross a demo of an accordion style menu (http://www.paulrhayes.com/experiments/accordion/) and Bucs in the forum has been waiting for Sencha to create it but it peaked my interest also. So here it is!

Mitchell, so sorry I haven't responded earlier to this, been under more tight deadlines. This is a great start on a sorely needed accordion and I definitely appreciate you efforts on this.

I haven't have time to play with this other than poking on the demo for a few minutes. Seems like you can only open a panel level one time. In other words, you cannot open, close, then open the same panel again, not sure if that is a bug or by design.

The reason this control is so valuable on the mobile is because navigating a lot of vertical content can get very cluttered, very quickly...especially when you need to present a lot of options. The ability to collapse this info down until needed really makes the usability of vertical content much more pleasurable for the the user.

Again, I haven't looked at the config options yet, but hopefully the control does not need to have a predefined height, or require a 'fit' layout. Reason is that most pages will need to have page footers or other content below the accordion that will need to get pushed down with the accordion opens. Not sure if the control has to be defined in a panel of a certain height and then it slides open to fit that predefined height or what.

Also, can you config the panel sections from a store or programmatically by chance?

Anyway, very good start and thanks for your effort on this! Hope to get into this soon as I really need this functionality in a lot of projects

There is a config option ("allowCollapse") that if set to true will allow all items to be collapsed. If false, one item will always be expanded.

Bug fix that wouldn't allow an item to be clicked on multiple times!

Did a bug fix to calculate the size of each item when expanded. This was bugging me and turned out to be a simple fix.

Also have 4 events to be more like other layouts: beforeactivate, activate, beforedeactivate, deactivate. Pretty self explanatory

**NOTE** Since you can collapse all items, they may stack up and go off screen. If you make the parent Panel vertically scrollable, it will scroll to the others as expected. Will scroll when one is expanded too. There is a minHeight config that defaults to 150px.