Accordion layout question

[prem1er]

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
},
items:[{
title: 'Test',
xtype: 'form',
defaultType: 'textfield' ...
},{
title: 'Test1',
xtype: 'form',
defaultType: 'textfield' ...
}]...

[scottmartin]

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
}
});

[prem1er]

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.

[prem1er]

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.

[scottmartin]

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.

[prem1er]

Got it. Thanks for the help.