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()
});

杰斯小提琴

编辑：对于 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'
            }],
        });    
    }
});