具有不同高度的 ExtJS 手风琴 GridPanels答案

【问题标题】：ExtJS accordion GridPanels with different height具有不同高度的 ExtJS 手风琴 GridPanels
【发布时间】：2014-03-19 18:02:32
【问题描述】：

我有一个可容纳 3 个 GridPanel 的手风琴面板。第一次显示页面时，前两个面板展开，最后一个面板折叠。

是否可以让第一个 GridPanel 比其他两个稍微大一点？

@lmno：

xtype: 'container',
flex: 2,
layout: { type: 'accordion', border: false, multi: true },
items: [
    { xtype: 'myGrid' },
    { xtype: 'pendingGrid' }
]

您可以将Ext.layout.container.Accordion 的multi 属性设置为true 以启用多个手风琴项同时打开。

之后，您可以使用collapsed 和collapsible Grid 属性。

【问题讨论】：

您的手风琴有 2 个开放式面板的示例吗？我的印象是，当一个容器打开时，手风琴会关闭其他容器。
好的，我明天发，我刚下班。

标签： extjs extjs4

【解决方案1】：

这个问题的答案是使用手风琴父容器的fill 属性。然后子项可以使用 flex 属性或以其他方式指定它们的高度。

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.layout.container.Accordion-cfg-fill

【讨论】：

【解决方案2】：

这是专门为当你想实现这个但也有 multi:true

 layout: {
                type: 'accordion',
                animate: true,
                multi: true,
                fill: false
            },
            items: [{
                title: 'Panel 1',
                html: 'Panel content!', flex: 2 // or height
            }, {
                title: 'Panel 2',
                html: 'Panel content!', flex: 1
            }, {
                title: 'Panel 3',
                html: 'Panel content!', flex: 1
            }],

取自煎茶论坛https://www.sencha.com/forum/showthread.php?283045-How-to-have-Grids-under-accordion-panel-with-different-height （无论如何发布代码以防将来链接损坏。）

【讨论】：