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.