Sub-Spalte dynamisch hinzugefügt [ExtJS]

Question

Ich versuche, Sub-Spalte dynamisch hinzuzufügen, aber ich war bisher nicht erfolgreich. Nicht-dynamische Art und Weise (was nicht gut für mich ist):

columns: [{ 
    ... 
}, { 
    text: 'Main column', 
    columns: [{ 
     //Sub column 1 
    }, { 
     //sub column 2 
    }, { 
... 

Dynamisch (zumindest, was ich versuchte):

var mainColumn = Ext.create('Ext.grid.column.Column',{ 
    text: groups[i] 
}); 

var subColumn = Ext.create('Ext.grid.column.Column',{ 
    text: "Dummy "+i, 
    sortable: false 
}); 

var subHeader = Ext.create('Ext.grid.header.Container'); 
subHeader.insert(0, subColumn); 

mainColumn.insert(0, subHeader); 
grid.headerCt.insert(index, grp); //grid here is Ext.grid.panel 

dynamisch-Header wird für Hauptspalte erstellt, aber Unter Spalten aren t. Ich bekomme eine Warnung:

XTemplate evaluation exception: rootHeaderCt.grid is undefined 

Kann jemand meine Fehler aufzeigen? Vielleicht gibt es einen besseren Weg, dies zu erreichen?

Answer 1

Wenn Sie Rasterspalten dynamisch erstellen möchten, können Sie die Rastermethode reconfigure verwenden.

Ex) Wenn Sie unterhalb Spalten dynamisch erstellen möchten.

columns: [ 
    { text: 'Name', dataIndex: 'name' }, 
    { text: 'Email', dataIndex: 'email', flex: 1 }, 
    { text: 'Phone', columns: [ 
     { text: 'Name', dataIndex: 'name' }, 
     { text: 'Email', dataIndex: 'email', flex: 1 } 
     ] 
    } 
], 

1st. Erstellen Sie Spalten. Erstellen Sie einfach JSON-Array.

var columnsArray = []; 
var subColumns = []; 
var maincol1 = { text: 'Name', dataIndex: 'name' }; 
var maincol2 = { text: 'Email', dataIndex: 'email' }; 
var maincol3 = { text: 'Phone'}; 

var subcol1 = { text: 'Name', dataIndex: 'name' }; 
var subcol2 = { text: 'Email', dataIndex: 'email', flex: 1 }; 
subColumns.push(subcol1); 
subColumns.push(subcol2); 

maincol3.columns = subColumns; 

columnsArray.push(maincol1); 
columnsArray.push(maincol2); 
columnsArray.push(maincol3); 

2. Konfigurieren Sie es neu.

grid.reconfigure(grid.store, columnsArray); 

https://fiddle.sencha.com/#fiddle/17lg