Question

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

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
};

正如您可能想象的那样，这两个网格在{{1}}之上gridOne布局。两者都是可折叠的。正如您在gridTwo中的监听器中所看到的，我想扩展gridOne的高度，以便在网格1折叠时占据父容器的整个高度。

gridTwo中的监听器代码是我认为应该有效的，但事实并非如此。我也想过使用Accordion布局，但我不确定我是否可以像使用Anchor布局那样在两个网格之间产生效果。

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

Answer 1

实际上，我不认为这些网格是彼此重叠的。如果您正在使用TabPanel并向其添加网格，则每个网格都应位于其自己的选项卡中。如果它们彼此重叠显示，则表明您的组件配置存在问题。

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

请务必查看文档中的layout examples以及我放在一起的here's a quick demo。

ExtJS 4.2面板在折叠时刷新

1 个答案: