View Full Version : Accordion layout question

6 Mar 2014, 7:45 AM
Hi. I'm using the an accordion layout in a panel. I would like disable both the title collapse and the collapse tool and control the functionality from a button within the child components. Basically perform a validation of a form once the button is clicked and then expand the next item. Can this be accomplished? TIA

extend: 'Ext.panel.Panel',
renderTo: 'cart-table',
height: 350,
layout: {
type: 'accordion',
hideCollapseTool: true,
titleCollapse: false,
animate: true
title: 'Test',
xtype: 'form',
defaultType: 'textfield' ...
title: 'Test1',
xtype: 'form',
defaultType: 'textfield' ...

6 Mar 2014, 8:08 AM
You would need to override the default behavior in Ext.layout.container.Accordion :: beforeRenderItems

If you set hideCollapseTool to false, it changes the titleCollapse behavior

Ext.define('Ext.layout.container.override.Accordion', {
override: 'Ext.layout.container.Accordion',

beforeRenderItems: function (items) {
// make changes

7 Mar 2014, 5:23 AM
Thanks for the response. I don't see much documentation on overriding layouts. I have extended components before and created them from a controller by

var foo = Ext.create('my.extended.cmp');

But I'm not really sure about how to properly use the layout once it is overridden. How do I then add it as a layout type to my panel? Any help or a link to some docs would be appreciated. Thanks.

7 Mar 2014, 5:33 AM
Nevermind. I worked it out. I wasn't understanding that by overriding the accordion layout I was changing the functionality every time I used layout: 'accordion'. I created a seperate override file and included it in my page. Thanks for the help. Now just need to figure out how to actually achieve the functionality.

7 Mar 2014, 5:36 AM
The section to be concerned with in beforeRenderItems is

if (comp.collapsible) {
if (hasCollapseFirst) {
comp.collapseFirst = collapseFirst;
if (me.hideCollapseTool) {
comp.hideCollapseTool = me.hideCollapseTool;
comp.titleCollapse = true;
} else if (me.titleCollapse && comp.titleCollapse === undefined) {
// Only force titleCollapse if we don't explicitly
// set one on the child panel
comp.titleCollapse = me.titleCollapse;

Simply copy the entire function, make changes the to the code and then use the override. It will change the default behavior and override it with the changes.

7 Mar 2014, 5:55 AM
Got it. Thanks for the help.