Extjs 将窗体内的格线延伸到全高

我有一个表格面板，里面有一个网格。我希望网格消耗可用空间，如果这个空间不够容纳所有数据，则附加一个滚动条。但这不起作用，网格只是随着每一个新数据的增长而增长，并且在没有任何滚动条的情况下也会增长到看不见的程度。如何将此集合配置为如上所述的行为

以下是带有网格的表格：

{
    xtype: 'form',
    plain: true,
    autoScroll: true,
    border: 0,
    bodyPadding: 5,
    // which layout would I use Here? I tried anchor and vbox already
    layout: '???'
    items: [{
        xtype: 'hidden',
        name: 'SomeHidden'
    }, {
        xtype: 'hidden',
        name: 'SomeHiddenId'
    }, {
        xtype: 'fieldcontainer',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [ /*The form fields*/ ]
    }, {
        // --> this grid should consume all available space 
        // and append a scrollbar if the content still grows to much
        xtype: 'grid',
        hidden: this.stepIdent == 3,
        autoScroll: true,
        store: Ext.StoreMgr.lookup('JournalStore'),
        features: [{
            ftype: 'summary'
        }],
        columns: [ /*col data*/ ]

    }]
}

---

将表单面板布局设置为合适的

您可以尝试以下代码。主要思想是表单具有

锚定布局

，gridpanel具有

锚定：0 0

，用于垂直和水平拉伸网格

Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',

height: 294,
width: 458,
title: 'My Form',

initComponent: function() {
    var me = this;

    Ext.applyIf(me, {
        items: [
            {
                xtype: 'gridpanel',
                anchor: '0 0',
                title: 'My Grid Panel',
                columns: [
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'string',
                        text: 'String'
                    },
                    {
                        xtype: 'numbercolumn',
                        dataIndex: 'number',
                        text: 'Number'
                    },
                    {
                        xtype: 'datecolumn',
                        dataIndex: 'date',
                        text: 'Date'
                    },
                    {
                        xtype: 'booleancolumn',
                        dataIndex: 'bool',
                        text: 'Boolean'
                    }
                ]
            }
        ]
    });

    me.callParent(arguments);
}

}))

使用vbox布局：

Ext.require('*');

Ext.onReady(function() {

    var store = new Ext.data.Store({
        fields: ['name'],
        data: []
    });

    new Ext.form.Panel({
        width: 400,
        height: 600,
        renderTo: Ext.getBody(),
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            fieldLabel: 'Field 1',
            xtype: 'textfield'
        }, {
            fieldLabel: 'Field 2',
            xtype: 'textfield'
        }, {
            fieldLabel: 'Field 3',
            xtype: 'textfield'
        }, {
            fieldLabel: 'Field 4',
            xtype: 'textfield'
        }, {
            flex: 1,
            xtype: 'gridpanel',
            store: store,
            columns: [{
                flex: 1,
                dataIndex: 'name'
            }]
        }] 
    });

    var i = 0;
    setInterval(function(){
        store.add({
            name: 'Item ' + (++i)
        });
    }, 1000);

});

---

fit layout只支持一个孩子（更多的是分层），在我的例子中，我有一个窗口，可以将表单包装起来并调整到全屏大小，但无论如何，这帮助我解决了这个问题！！谢谢