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

Posted 2023-02-26

【中文标题】Extjs 手风琴动态关闭所有面板

【英文标题】：Extjs accordion close all panel dynamically

【发布时间】：2014-09-18 05:31:13

【问题描述】：

我正在使用 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();
          
        );
    

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

谢谢

【问题讨论】：

请提供一个小提琴，以便其他人更好地理解您的问题。

您指的是面板标题还是手风琴标题？

Alex，我想要面板标题来获得该功能。

那么，您想在单击任何面板标题时折叠所有面板吗？提供一下你当前的代码？

我尝试了一把小提琴。但它没有 Ext 5.0 库。

【参考方案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'
            ],
        );    
    
);

【讨论】：

他想在点击手风琴标题时折叠所有面板。

隐藏面板是我以前用过的一个技巧，但在 4.2.2 或更高版本中似乎不起作用。

隐藏该项目似乎会使手风琴表现得好像它不存在一样。我正在使用这个丑陋的解决方法（零高度项），直到找到我感觉良好的解决方案：collapsed: false,height: 0

此问题还有其他解决方案吗？

@AtmiyaDas2014 编辑了答案。可能对你有帮助。