为布局中的元素添加内边距'在顶部添加空白空间

我想在ExtJs中创建一个带有标签和复选框的表状结构。通常，我会使用布局为"vbox"的面板来堆叠一系列布局为"hbox"的面板。这样我就得到了这样的结构:

vbox
|
'|/ 
John Doe [] [] [] [] <- hbox
Jane Doe [] [] [] [] <- hbox

记录是从数据源动态加载的。这意味着我不能使用"表"布局，这是不赞成的。

然而，'vbox'不能很好地处理溢出。它只是剪辑它，虽然我想要滚动条。所以我选择布局'fit'，它目前扩展'fit'面板，因此它容纳所有的记录。这和滚动条一样好，如果我指定了高度，我可能会得到滚动条。

我想在元素周围填充，但当我添加它时，它会出错。第一个记录的大小急剧扩大。

页面的大小来自以下元素:

div class="x-panel-body x-panel-body-noheader x-box-layout-ct" id="ext-gen82" style="width: 1621px; height: 2680px;"

我有一个10px的填充和135条记录，所以看起来高度是134倍的填充在两个方向。

我试图保留'vbox'面板并将其包裹在'fit'面板中，但这仍然会产生空白并破坏布局。

我有一个类似的问题在应用程序的其他地方，我已经工作了很多天了。我将非常感谢任何帮助!

代码如下

        var pnlRelations = new Ext.Panel({
            autoScroll: true,
            frame: true,
            id: 'pnlRelations',
            title: 'Servers',
            renderTo: 'pnlServers',
            layout: 'fit',                
            items: [
            ],
            buttons: [
                { text: 'Opslaan', handler: submit }
            ]
        });
        var storeServerMaintenance = new Ext.data.Store({
            id: 'storeServerMaintenance',
            autoLoad: true,
            proxy: new Ext.data.HttpProxy({ url: '<%= Url.Action("ListMaintenanceServer", "Maintenance") %>' }),
            reader: new Ext.data.JsonReader({
                    //                totalProperty: 'records',
                    idProperty: 'Id',
                    root: 'rows'
                },
                <%= ServerMaintenanceListItem.ToColumnModel() %>
            ),
            /*remoteSort: true*/
            listeners: {
                load: function (store, records, ops) {
                    nrOfRecords = records.length;
                    for (var i = 0; i < records.length; i++) {
                        var rec = records[i];
                        var serverId = rec.get('Id') == null ? null : rec.get('Id');
                        var relationId = rec.get('RelationId') == null ? null : rec.get('RelationId');
                        var q1 = rec.get('Q1') != null && rec.get('Q1');
                        var q2 = rec.get('Q2') != null && rec.get('Q2');
                        var q3 = rec.get('Q3') != null && rec.get('Q3');
                        var q4 = rec.get('Q4') != null && rec.get('Q4');
                        pnlRelations.add(new Ext.Panel({
                            layout: 'hbox',
                            //                                defaults: { margins: 10 },
                            style:{padding:'10px'},
                            items: [
                                new Ext.form.Label({ html: rec.get('RelationName'), width: labelWidth }),
                                new Ext.form.Label({ html: rec.get('Name'), width: labelWidth }),
                                new Ext.form.Label({ id: 'idx_' + i, html: '' + rec.get('Index'), width: boxWidth }),
                                new Ext.form.Checkbox({ id: 'cbQ1_' + i, width: boxWidth, checked: q1 }),
                                new Ext.form.Checkbox({ id: 'cbQ2_' + i, width: boxWidth, checked: q2 }),
                                new Ext.form.Checkbox({ id: 'cbQ3_' + i, width: boxWidth, checked: q3 }),
                                new Ext.form.Checkbox({ id: 'cbQ4_' + i, width: boxWidth, checked: q4 }),
                                new Ext.form.Hidden({ id: 'hfServer_' + i, value: serverId }),
                                new Ext.form.Hidden({ id: 'hfRelation_' + i, value: relationId })
                            ]
                        }));
                    }
                    //                        debugger;
                    pnlRelations.doLayout();
                }
            }
        });