0

我有两个网格嵌套在一个带有锚布局的面板中，如下所示：

var tabs = Ext.widget('tabpanel', {
    layout: 'fit',
    activeTab: 0,
    plain: true,
    margin: 1,
    items: [gridOne, gridTwo]
});

var gridOne = {
    xtype: 'grid',
    id: 'gridOne',
    collapsible: true,
    border: 1,
    anchor: '100% 50%',
    enableColumnMove: false,
    colModel: colModel,
    store: storeOne,
    listeners: {
        scope: this,
        collapse: function() {
            var obj = Ext.getCmp('gridTwo');
            Ext.apply(obj, {anchor: '100% 100%'});
            obj.doLayout()
        }
    }

};

var gridTwo = {
    xtype: 'grid',
    id: 'gridTwo',
    collapsible: true,
    border: 1,
    anchor: '100% 50%',
    enableColumnMove: false,
    colModel: colModel,
    store: storeTwo
};

正如您可能想象的那样，这是两个网格gridOne，上面放置了gridTwo. 两者都是可折叠的。正如您从中的监听器中看到的那样，当网格一折叠时gridOne，我想扩展 的高度gridTwo以占据父容器的整个高度。

监听器代码gridOne是我认为应该工作的，但事实并非如此。我也考虑过使用 Accordion 布局，但我不确定是否可以像使用 Anchor 布局那样获得两个网格相互重叠的效果。

所以我的问题归结为如何gridTwo在折叠时将高度扩展到父容器的 100% gridOne。

4

1 回答 1

0

实际上，我不会想象网格是相互重叠的。如果您使用 TabPanel 并向其添加网格，则每个网格都应位于其自己的选项卡中。如果它们重叠显示，这似乎表明您的组件配置有问题。

但是，要完成您想要的，不应该需要键入折叠/展开事件。Ext JS 已经有布局管理器可以为你做这件事。例如，如果您将网格添加到具有Ext.layout.container.VBox布局的容器或面板中，您可以在每个子项上指定 flex 属性，并精确定义该组件应占用多少可用垂直空间。好的部分是，如果您确实折叠其中一个孩子，其他孩子的 flex 配置将接管并填充空间，当组件展开时也是如此。

请务必查看文档中的布局示例，这是我整理的快速演示。

于 2013-11-03T15:28:40.317 回答