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

我试图将

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”（带有网格、带有两个按钮的面板和treegrid）上，一切正常，但在“Tab 1”上嵌套的

xtype:“grid1”

设置为其内容的高度。我用vbox尝试了各种版本，但都不管用。有什么问题吗？

您想要

布局：“适合”

。来自：这是布局的基类，其中包含自动展开以填充布局容器的单个项

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

---

见jsFiddle。选项卡1与选项卡本身一样只是一个网格。选项卡2是一个常规面板，具有

布局：'fit'

，其中网格是单个项目。

嵌套过度。只需将网格设置为选项卡，就不需要在额外的面板中设置网格。