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

Question

Я хочу создать табличную структуру в 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(); 
       } 
      } 
     }); 

Answer 1

попробовать

layout: { 
    type: 'hbox', 
    align: 'stretch' 
} 

И добавить

flex: 1 

в каждый из ваших "пунктов"

Answer 2

мне удалось это исправить! По иронии судьбы, это произошло, когда я привел страницу как можно больше к основам. Я удалил макет: «подойдет» и вообще не имел макета. Затем я добавил прокладку для панелей hbox.

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", "Relatie") %>' }), 
      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 serverMaintenanceId = rec.get('Id') == null ? null : rec.get('Id'); 
         var relationServerId = rec.get('RelationServerId'); 
         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: { type: 'hbox' }, 
          padding: 4, 
          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({ 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: 'idx_' + i, value: rec.get('Index') }), 
           new Ext.form.Hidden({ id: 'hfRelationServer_' + i, value: relationServerId }), 
           new Ext.form.Hidden({ id: 'hfServerMaintenanceId_' + i, value: serverMaintenanceId }), 
           new Ext.form.Hidden({ id: 'hfRelation_' + i, value: relationId }) 
          ] 
         })); 
        } 
        //      debugger; 
        pnlRelations.doLayout(); 
       } 
      }