サブ列が動的に追加されました[ExtJS]

Question

サブ列を動的に追加しようとしていますが、今まで成功していませんでした。 （私のために良いではありません）非動的な方法：

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

ダイナミック（私が試した、少なくとも何）：

サブ列は動的な方法ヘッダはメインカラムのために作成されているが、

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 

を上がりません't。私は警告を受ける：

XTemplate evaluation exception: rootHeaderCt.grid is undefined 

誰かが私の間違いを指摘できますか？おそらく、これを達成するより良い方法がありますか？

Answer 1

グリッド列を動的に作成する場合は、グリッドreconfigureを使用できます。

例）以下の列を動的に作成する場合。

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

第1位。列を作成します。 JSON配列を作成するだけです。

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位。それを再設定します。この作品

grid.reconfigure(grid.store, columnsArray); 

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