ExtJS4面板布局问题：无需height属性实现Grid与Toolbar合理排布

我来帮你搞定这个布局难题！核心是让第二个标签页的容器正确利用ExtJS的布局系统，自动分配Toolbar和Grid的空间，完全不需要手动设置height属性。

正确的实现思路 #

你需要给第二个标签对应的容器（Panel）做以下关键配置：

• 给该容器设置layout: 'fit'：这个布局会让容器内的单个子组件填满容器的可用空间，同时会自动为dockedItems预留出对应的空间，完美适配你的需求。
• 将Toolbar配置为该容器的dockedItems（比如设置dock: 'bottom'），这样Toolbar会固定在容器底部，不会被Grid覆盖。
• 把GridPanel作为该容器的唯一items子组件，Grid会自动填充除了Toolbar之外的所有剩余区域。

示例代码参考 #

Ext.create('Ext.window.Window', {
    title: '你的窗口',
    width: 800,
    height: 600,
    layout: 'fit', // 让TabPanel填满整个Window空间
    items: [{
        xtype: 'tabpanel',
        items: [
            // 第一个标签页：带5个输入框的表单
            {
                title: 'Tab 1',
                xtype: 'form',
                padding: 10,
                items: [
                    { xtype: 'textfield', fieldLabel: '输入框1' },
                    { xtype: 'textfield', fieldLabel: '输入框2' },
                    { xtype: 'textfield', fieldLabel: '输入框3' },
                    { xtype: 'textfield', fieldLabel: '输入框4' },
                    { xtype: 'textfield', fieldLabel: '输入框5' }
                ]
            },
            // 第二个标签页：包含Grid和底部Toolbar的容器
            {
                title: 'Tab 2',
                xtype: 'panel',
                layout: 'fit', // 关键配置：让Grid自动填充剩余空间
                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'bottom', // 固定在容器底部
                    items: [
                        { text: '操作按钮1' },
                        { text: '操作按钮2' }
                    ]
                }],
                items: [{
                    xtype: 'grid',
                    columns: [
                        { text: '列1', dataIndex: 'col1', flex: 1 },
                        { text: '列2', dataIndex: 'col2', flex: 1 }
                    ],
                    store: Ext.create('Ext.data.Store', {
                        fields: ['col1', 'col2'],
                        data: [
                            { col1: '数据1', col2: '内容A' },
                            { col1: '数据2', col2: '内容B' },
                            { col1: '数据3', col2: '内容C' }
                        ]
                    })
                }]
            }
        ]
    }]
}).show();

为什么你之前的尝试会出问题？ #

• 当你给TabPanel设置layout: 'fit'时，TabPanel默认的card布局（用来切换标签页）会被覆盖，导致标签页功能失效，所以看起来像是TabPanel被移除了。
• 当你只给GridPanel设置layout: 'fit'时，GridPanel的高度没有被父容器约束，只会显示默认的几行内容，Toolbar自然就跟在Grid下方，无法固定。

替代方案：使用VBox布局 #

如果你不想用fit布局，也可以用vbox布局实现同样的效果：
给第二个标签的容器设置如下配置：

layout: {
    type: 'vbox',
    align: 'stretch' // 让子组件横向铺满容器宽度
},
items: [
    {
        xtype: 'grid',
        flex: 1 // 关键：让Grid占据所有剩余垂直空间
    },
    {
        xtype: 'toolbar',
        flex: 0 // 固定Toolbar的高度，不参与空间分配
    }
]

这种方式下，Grid的flex:1会让它自动填充Toolbar之外的所有垂直空间，同样不需要手动设置height。

内容的提问来源于stack exchange，提问作者Tad