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

为主列创建动态方式标题，但子列不是。我收到警告：

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

第一。创建列。只需创建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);

第二。重新配置它。

grid.reconfigure(grid.store, columnsArray);

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

动态添加子列[ExtJS]

1 个答案: