在extjs中創建一個動態網格

Question

我需要在extjs中創建一個動態網格面板。我使用這個動作列：

handler: function(view, rowIndex, colIndex, item, e) 
{ 
    var tabs = Ext.getCmp('northPanel'); 
    var rec = view.getStore().getAt(rowIndex); 

    modelFactory(rec.get('Reference'), rec.get('ResultFields')); 

    console.log(rec.get('ResultFields')); 
    console.log('start adding tab'); 
    tabs.add({ 
     title: 'Report: ' + rec.get('Reference'), 
     closable: true,  
     dockedItems: [ 
     { 
      xtype: 'toolbar', 
      dock: 'top', 
      items: [ 
      { 
       xtype: 'tbfill' 
      }, 
      { 
       xtype: 'button', 
       text: 'Export report' 
      }, 
      { 
       xtype: 'button', 
       text: 'Refresh data' 
      } 
      ] 
     } 
     ], 
     xtype: 'tabpanel', 
     items: [ 
     { 
      xtype: 'gridpanel', 
      title: 'Gridview', 
      forceFit: true, 
      store: ND.store, 
      columns: [ ] 
     } 
     ]  
    }); 

    console.log('tab created'); 
}, 

現在我需要創建此網格的列。我需要做的列在rec.get（'ResultFields'）中。當我使用console.log我看到這個在螢火蟲︰

[Object { name="currentSimAllocationByCcu", type="textfield", format=null}, Object { name="wanNumber", type="textfield", format=null}, Object { name="carrierName", type="textfield", format=null}, Object { name="dataPackageName", type="textfield", format=null}, Object { name="simIccid", type="textfield", format=null}, Object { name="expiryTime", type="textfield", format=null}, Object { name="bytesRx", type="textfield", format=null}, Object { name="bytesTx", type="textfield", format=null}] 

我如何創建這個列？

Answer 1

什麼似乎是一個問題？

如果您在創建網格之前獲取有關列的信息 - 然後根據您的字段數組創建數組或列。類似這樣的：

var _cols = [], 
    _flds = rec.get('ResultFields'); 

Ext.Array.each(_flds, function(f) { 
    _cols.push(Ext.create('Ext.grid.column.Column', { 
     text: f.get('name'), 
     dataIndex: f.get('name') 
    })); 
}); 

然後在創建網格時使用_cols。