ExtJS 4 将网格的高度拉伸到父组件

Question

我正在尝试将 xtype: 'grid1' 的高度拉伸到其父元素（选项卡面板上的选项卡）。

这是我的代码：

Ext.define('My.view.Example', {
    extend: 'Ext.tab.Panel',
    region: 'center',
    id: 'objectsManageArea',
    items: [{
        title: "Tab 1",
        items: [
            {
                border: false,
                items: [
                    {
                        xtype: 'panel',
                        layout: {
                            type: 'vbox',
                            align: 'stretch'
                        },
                        border: false,
                        items: [
                            {
                                xtype: 'grid1',
                                flex: 1
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        title: "Tab 2",
        items: [
            {
                xtype: 'panel',
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                border: false,
                items: [
                    {
                        xtype: 'panel',
                        layout: {
                            type: 'vbox',
                            align: 'stretch'
                        },
                        flex: 1,
                        border: false,
                        items: [
                            {
                                xtype: 'grid2',
                                flex: 1
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        layout: {
                            type: 'vbox',
                            align: 'stretch',
                            pack: 'center'
                        },
                        items: [
                            {
                                xtype: 'button',
                                iconCls: 'icon-greater-than',
                                margin: '0 5 5 5'
                            },
                            {
                                xtype: 'button',
                                iconCls: 'icon-less-than',
                                margin: '0 5 0 5'
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        layout: {
                            type: 'vbox',
                            align: 'stretch'
                        },
                        flex: 1,
                        border: false,
                        items: [
                            {
                                xtype: 'treegrid1',
                                flex: 1
                            }
                        ]
                    }
                ]
            }
        ]
    }]
});

在 'Tab 2' 上（带有网格、带有两个按钮的面板和树形网格）一切正常，但在 'Tab 1' 上，嵌套的 xtype: 'grid1' 设置为其内容的高度。我用 vbox 尝试了各种版本，但没有任何效果。可能是什么问题？

Answer 1

你想要layout: 'fit'。来自 docs：这是包含单个项目的布局的基础 class，该项目会自动扩展以填充布局的容器。

但是，我建议您尽量避免过度嵌套组件。在您的选项卡 1 配置中，网格可以是选项卡本身，并且在这种情况下会自动填充整个 space。您可以对选项卡 2 中的树面板执行相同的操作。

参见 jsFiddle here。选项卡 1 只是一个网格，就像选项卡本身一样。选项卡 2 是一个带有 layout: 'fit' 的常规面板，带有一个网格，因为它是单个项目。