Extjs手風琴動態關閉所有面板

Question

我正在使用Extjs 5.0.0

我有一個帶有許多面板的手風琴。 這里我的要求是通過單擊標題來展開和折疊面板。

在第一次點擊它擴展，這沒關系。 再次點擊相同的標題我想折疊所有面板。 在這里打開下一個面板。

我只是嘗試通過擴展一個隱藏的面板。 但是這里隱藏的面板和點擊面板的下一個面板都得到了擴展。

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

有沒有解決這個問題的方案？

謝謝

Answer 1

如果您可以一次打開多個手風琴項目，啟用mutli屬性並設置除默認情況下折疊的隱藏面板以外的所有其他面板將解決此問題。

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

編輯 ：對於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'
            }],
        });    
    }
});