Extjs accordion close all panel dynamically

Question

I am using Extjs 5.0.0

I have an accordion with a number of panels. Here my requirement is to expand and collapse panel by clicking on the title.

On the first click it expanded, that's fine. while again clicking on the same title i want to collapse all the panels. Here its opening the very next panel.

I just tried by expanding a hidden panel. But here both hidden panel and the next panel to the clicked panel get expanded.

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

Please provide a fiddle so that others could understand your issue better. — Foreever
So, you want to collapse all panels on clicking any panel header? Provide a fiddle with your current code? — Foreever

Gilsha Gilsha · Accepted Answer · 2014-09-23T08:56:28

If you are okay with opening multiple accordion items at a time, enable mutli property and set all other panels except the hidden panel collapsed by default will resolve the issue.

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'
            }],
        });    
    }
});

Extjs accordion close all panel dynamically

1 Answers