Question

我有一个Form面板，里面有一个网格。我希望网格占用可用空间并附加一个滚动条，如果这个空间不足以容纳所有数据。但这不起作用，网格随着每个新数据的增长而增长，并且在没有任何滚动条的情况下也会变得不可见。如何将此设置配置为如上所述？

以下是带网格的表单：

{
    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

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

});

Answer 2

您可以尝试使用此代码。主要思想是表格具有anchor layout而网格面板具有anchor: 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);
}

}）;

Answer 3

使表单面板布局合适

将表单中的网格扩展到全高

3 个答案: