在下面的代碼中動態添加項目

Question

下面是我用來將自定義單元格組件添加到容器的代碼。在這裏，我手動添加組件，但在我的真實應用程序中，它只會在客戶端瀏覽器中知道需要添加多少組件。所以有可能以某種方式動態添加這些組件，而不是像我這樣手動添加它。

Ext.define('TableRow',{ 
     extend: 'Ext.container.Container', 
     alias: 'widget.tablerow', 
     width: '100%', 
     layout: { 
      type: 'table', 
      columns: totalColumnsToDraw 
     }, 
     items:[ 
      {xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'}, 
      {xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'}, 
      {xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'}, 
      {xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'} 
     ] 
     }); 

Answer 1

您可以覆蓋類的initComponent功能，並建立項目動態數組有：

Ext.define('TableRow',{ 
    extend: 'Ext.container.Container', 
    alias: 'widget.tablerow', 
    width: '100%', 
    layout: { 
     type: 'table', 
     columns: totalColumnsToDraw 
    }, 
    numberOfCells: 10, // default number of cells, can be set on instantiation 
    initComponent: function() { 
     this.items = []; 

     for (var i = 0; i < this.numberOfCells; i++) { 
      this.items.push({xtype: 'cell'}); 
     } 

     this.callParent(); 
    } 
}); 

// create component with 50 cells 
Ext.create('TableRow', { 
    numberOfCells: 50 
});