Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Extjs accordion close all panel dynamically

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

like image 893
Jeff Johny Avatar asked Oct 31 '22 17:10

Jeff Johny


1 Answers

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'
            }],
        });    
    }
});
like image 147
Gilsha Avatar answered Nov 09 '22 09:11

Gilsha