添加标签字段

Question

我有一个FormPanel中如下 -

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 
      ] 
}) 

这种运作良好，并添加行的面板。加载时生成空标签文本。 正如你所看到的，可以有100个具有相同布局的行（col1除外），我不想重复这个项目布局100次。

有没有像通过使用循环或其他东西添加控件的东西。所以我不必重复这一点。 有什么办法可以添加这4列。

我试过使用theForm.add({ xtype: 'label', text: '' }); 但它不起作用。

Answer 1

那么，你已经尝试过应该工作。我从来没有听说过“tableForm”的布局，虽然，也许这就是伤了你的形式...

这里有一个工作的例子（见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()); 

更清洁的代码，你也可以通过覆盖initComponent方法来封装该代码，即所有Ext组件继承：

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'}); 
    } 
});