Extend a grid within a form to full height

extjs, extjs4

Solution

Use a vbox layout:

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

});

Problem

I have a Form panel with a grid in it. I want that the grid consumes the available space and appends a scrollbar if this space is not enough for all the data. But that does not work, the grid just grow with each new data and will also grow out of sight without any scrollbar. How can I configure this set to behave like described above? Here is the form with the grid: ``` { 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*/ ] }] } ```

Original source