아래 코드에 항목을 동적으로 추가하십시오.

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