extjs - 将表单内的网格扩展到全高

Question

我有一个带有网格的表单面板。我希望网格占用可用空间并在该空间不足以容纳所有数据时附加一个滚动条。但这不起作用，网格只会随着每个新数据而增长，并且也会在没有任何滚动条的情况下增长到看不见的地方。我怎样才能配置这个集合以像上面描述的那样运行？

这是带有网格的表单:

{
    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*/ ]

    }]
}

Answer 1

使用垂直盒布局:

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

});