Erstellen Sie ein dynamisches Gitter in extjs

Question

Ich muss ein dynamisches gridpanel in extjs erstellen. Ich benutze eine Aktionsspalte dafür:

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

Jetzt muss ich die Spalten für dieses Raster erstellen. Die Spalten, die ich machen muss, sind im rec.get ('ResultFields'). Wenn ich die console.log verwende, sehe ich das im Firebug:

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

Wie kann ich Spalten damit erstellen?

Answer 1

Was scheint ein Problem zu sein?

Wenn Sie Informationen zu Spalten erhalten, bevor Sie ein Raster erstellen, erstellen Sie Array oder Spalten basierend auf dem Array Ihrer Felder. Etwas wie folgt aus:

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

Und dann benutzen Sie einfach, dass _cols beim Erstellen von Raster.