Question

我有以下结构：

TabPanel->FormPanel->Grid

enter image description here

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

FormPanel中：

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

的GridPanel：

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

修复textfield的高度，尝试高度：gridpanel的'100％'。 Sushant Jain的解决方案很好，但也适用于高度：'100％'如果你想让网格占据剩余区域。区域：'中心'有助于占据北部地区的剩余区域，但如果你固定高度或宽度，即使中心区域扩展占据左侧区域，网格面板将保持固定高度。

如何设置ExtJs Grid的高度？

2 个答案: