javascript - 如何将高度设置为 ExtJs Grid？

Question

我有以下结构：

TabPanel->FormPanel->Grid

我想将网格的高度设置为 formpanle 上的所有可用空间。如果我layout:在 FormPanle 第一个文本字段中说 fit`，则获取 formpanel 的所有空间。如何做我想要的？

表单面板：

var search = new Ext.FormPanel({
                labelAlign: 'top',
                frame:true,
                title: 'Поиск',
                //layout:'fit',
                viewConfig:{ forceFit: true },
                //bodyStyle:'padding:5px 5px 0',

网格面板：

var searchTab = new Ext.grid.GridPanel({
    store: searchStore,
    region: 'center',
    cm: searchCm, 
    layout:'fit',
    selModel: new Ext.grid.RowSelectionModel(),
    stripeRows : true,
    height: 390,
    autoExpandColumn:'expColumn',
    loadMask: true,
    id: 'searchTab',
    title:'Найденные объекты',
    autoScroll: true,

Answer 1

用户borderLayout 并在2 Region.North 和center 中划分。在北部区域添加顶部面板内容，在中心区域添加网格。

layout: 'border',
        items: [{
            title: 'North Region is resizable',
            region: 'north',     // position for region
            xtype: 'panel',
            height: 100
        },{
            title: 'Center Region',
            region: 'center',     // center region is required, no width/height specified
            xtype: 'panel',
            layout: 'fit',
            items: {
                new Ext.grid.GridPanel({
                    store: searchStore,
                    region: 'center',
                    cm: searchCm, 
                    layout:'fit',
                    selModel: new Ext.grid.RowSelectionModel(),
                    stripeRows : true,
                    height: 390,
                    autoExpandColumn:'expColumn',
                    loadMask: true,
                    id: 'searchTab',
                    title:'????????? ???????',
                    autoScroll: true
                })
            }
        }]

Answer 2

修复文本字段的高度和网格面板的 Try height:'100%'。Sushant Jain 的解决方案很好，但如果你想让网格占据剩余区域，那么也可以考虑 height:'100%' 。region: 'center' 有助于占据北部区域的剩余区域，但如果您固定高度或宽度，即使中心区域扩展以占据剩余区域网格面板也将保持在固定高度。