Добавление отступов к элементам в макете «fit» добавляет пустое пространство сверху

Я хочу создать табличную структуру в ExtJs с метками и флажками. Обычно я бы использовал панель с макетом «vbox», чтобы сложить ряд панелей с макетом «hbox». Таким образом, я получаю структуру вроде:

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

Записи загружаются динамически из источника данных. Это означает, что я не могу использовать макет таблицы, который в любом случае устарел.

Однако «vbox» недостаточно хорошо справляется с переполнением. Он просто обрезает его, хотя мне нужны полосы прокрутки. Поэтому я выбрал макет «по размеру», который в настоящее время расширяет панель «по размеру», чтобы вместить все записи. Это подойдет так же, как и полосы прокрутки, которые я, вероятно, все равно получил бы, если бы указал высоту.

Я хочу заполнить элементы вокруг элементов, и когда я добавляю это, все идет не так. Первая запись сильно увеличивается в размерах.

Размер приходит на страницу из следующего элемента:

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

У меня есть отступ 10 пикселей и 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();
                }
            }
        });