Extjs Accordion Closes All Panels Dynamically

Question

I am using Extjs 5.0.0

I have an accordion with several panels. My requirement here is to expand and collapse the panel by clicking on the title.

At the first click, it expands, which is great. clicking the same title again, I want to collapse all the panels. This opens its next panel.

I just tried to expand the hidden panel. But here the hidden panel and the next panel on the panel expand with a click.

listeners:{ afterrender: function(panel){ panel.header.el.on('click', function() { if (panel.collapsed) { Ext.getCmp('hiddenpanel').collapse(); } else { Ext.getCmp('hiddenpanel').expand(); } }); } } 

Is there any solution to solve this problem?

thanks

Answer 1

If you can open several accordion elements at the same time, enable the mutli property and set all other panels, except that the hidden panel collapsed by default, will solve the problem.

 Ext.create('Ext.panel.Panel', { title: 'Accordion Layout', width: 300, height: 300, layout: { type: 'accordion', animate: true, multi: true, }, items: [{ hidden:true, },{ title: 'Panel 1', html: 'Panel content!', collapsed: true },{ title: 'Panel 2', html: 'Panel content!', collapsed: true },{ title: 'Panel 3', html: 'Panel content!', collapsed: true }], renderTo: Ext.getBody() }); 

Jsfiddle

Edit : for versions above Ext 5.

 Ext.application({ launch: function() { Ext.create('Ext.panel.Panel', { renderTo: Ext.getBody(), autoScroll: true, defaults: { border: true, autoHeight: true, minHeight: 304, collapsed: true, titleCollapse: false }, layout: { type: 'accordion', animate: true, multi: true, fill: false }, items: [{ collapsed: false, border: 0, height: 0, minHeight: 0 }, { title: 'Panel 1' }, { title: 'Panel 2' }, { title: 'Panel 3' }, { title: 'Panel 4' }, { title: 'Panel 5' }], }); } });