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

Extjs手风琴动态关闭所有面板

1 个答案: