Ajout de champs d'étiquettes à l'aide de la boucle (ExtJs 2.3.0)

Question

J'ai un panneau FormPanel comme suit-

var theForm = new Ext.form.FormPanel({ 
      layout: 'tableForm', 
      border: false, 
      itemId: 'theForm', 
      layoutConfig: { columns: 5 }, 
      defaults: { border: false, layout: 'form' }, 
      items: [ 
       { xtype: 'label', text: 'Row 1' }, 
       { xtype: 'label', text: '' }, 
       { xtype: 'label', text: '' }, 
       { xtype: 'label', text: '' }, 
       { xtype: 'label', text: '' }, 

       { xtype: 'label', text: 'Row 2' }, 
       { xtype: 'label', text: '' }, 
       { xtype: 'label', text: '' }, 
       { xtype: 'label', text: '' }, 
       { xtype: 'label', text: '' }, 

       //.... And so on 
      ] 
}) 

Cela fonctionne bien et ajoute des lignes au panneau. Les textes d'étiquettes vides sont générés en charge. Comme vous pouvez le voir il peut y avoir des centaines de lignes avec la même mise en page (sauf col1) et je ne veux pas répéter cette mise en page 100 fois.

Y a-t-il quelque chose comme ajouter des contrôles en utilisant une boucle ou quelque chose comme ça? Alors que je n'ai pas à répéter ça. Y a-t-il un moyen pour que je puisse ajouter ces 4 colonnes.

J'ai essayé d'utiliser theForm.add({ xtype: 'label', text: '' }); mais cela ne fonctionne pas.

Answer 1

Eh bien, ce que vous avez essayé devrait fonctionner. Je ne l'ai jamais entendu parler d'une mise en page « Tableform » bien, peut-être que ce qui brise est votre forme ...

Voici un exemple qui fonctionne (voir this fiddle):

var form = new Ext.form.FormPanel({ 
    layout: 'table', 
    border: false, 
    layoutConfig: { columns: 5 }, 
    defaults: { border: false, layout: 'form' } 
}); 

for (var i=0; i<100; i++) { 
    form.add({xtype: 'label', text: '#' + i}); 
} 

form.render(Ext.getBody()); 

Pour un code plus propre, vous pouvez aussi ce code par encapsulation overridding la méthode initComponent, que tous les composants ext hériteront:

new Ext.form.FormPanel({ 
    renderTo: Ext.getBody(), 
    layout: 'table', 
    border: false, 
    layoutConfig: { columns: 5 }, 
    defaults: { border: false, layout: 'form' }, 
    initComponent: function() { 
     var items = []; 
     for (var i=0; i<100; i++) { 
      items.push({xtype: 'label', text: '#' + i}); 
     } 
     this.items = items; 

     // call overridden method 
     Ext.form.FormPanel.prototype.initComponent.apply(this, arguments); 

     // once initialized, you can add some more... 
     this.add({xtype: 'label', text: 'last'}); 
    } 
});