Добавлен динамический динамический столбец [ExtJS]

Question

Я пытаюсь добавить динамический столбец, но пока я не был успешным. Non-динамический способ (что не очень хорошо для меня):

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

Dynamic (по крайней мере то, что я пробовал):

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 

Динамический заголовок пути создан для основной колонны, но к югу колонны Арен «т. Я получаю предупреждение:

XTemplate evaluation exception: rootHeaderCt.grid is undefined 

Может ли кто-нибудь указать на мои ошибки? Может быть, есть лучший способ добиться этого?

Answer 1

Если вы хотите динамически создавать столбцы сетки, вы можете использовать метод сетки reconfigure.

Ex) Если вы хотите динамически создавать столбцы ниже.

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 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-й. Переконфигурируйте его.

grid.reconfigure(grid.store, columnsArray); 

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