3

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

这是带有网格的表格：

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

    }]
}
4

3 回答 3

4

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

});
于 2013-07-30T11:25:02.373 回答
0

你可以试试这段代码。主要思想是 form hasanchor layout和 gridpanelanchor: 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);
}

});

于 2013-07-30T11:02:36.127 回答
-1

使表单面板布局适合

于 2013-07-30T09:06:24.577 回答