javascript - Extjs Accordion 动态关闭所有面板

Question

我正在使用 Extjs 5.0.0

我有一个带有多个面板的 Accordion 。在这里，我的要求是通过单击标题来展开和折叠面板。

在第一次点击时它展开了，没关系。再次单击相同的标题时，我想折叠所有面板。在这里打开下一个面板。

我刚刚尝试展开一个隐藏面板。但是这里隐藏的面板和点击面板的下一个面板都会展开。

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

有什么办法可以解决这个问题吗？

谢谢

Answer 1

如果您可以一次打开多个 Accordion 项目，启用 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'
            }],
        });    
    }
});