ExtJS 4将网格的拉伸高度转换为父组件

Question

我试图将xtype: 'grid1'的高度拉伸到其父元素（tabpanel上的标签）。

这是我的代码：

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

开启标签2＆＃39; （带网格，面板有两个按钮和treegrid）一切正常，但是在标签1＆＃39;嵌套xtype: 'grid1'设置为其内容的高度。我尝试了各种版本的vbox，但没有任何作用。可能是什么问题？

Answer 1

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

但是，我建议您尽量避免过度嵌套组件。在Tab 1配置中，网格可以是标签本身，并且在这种情况下将自动填充整个空间。您可以使用选项卡2中的treepanel执行相同的操作。

参见jsFiddle here。选项卡1只是一个网格作为选项卡本身。标签2是一个常规面板，layout: 'fit'带有一个网格作为单个项目。