読者です 読者をやめる 読者になる 読者になる

extjsのGridPanelで動的に列を追加する

extjs

最新のextjs 4ではなく3.4です。

// GridPanelを生成
var grid = new Ext.grid.GridPanel({
    // config options for GridPanel here ...
    columns: [{
        {id: 'name', header: 'Name', width: 200, sortable: true, dataIndex: 'name'},
        {id: 'email', header: 'E-mail', width: 300, dataIndex: 'email'},
        // columns..
    ]
});

// Phoneを最後に追加
var config = grid.getColumnModel().config;
config.push({id: 'phone', header: 'Phone', dataIndex: 'phone'});
grid.getColumnModel().setConfig(config, true);

ColumnModel#setConfig()を呼ばなくても、一見、追加できているように見えるがヘッダ行にカーソルをあわせた際にエラーが発生する。
また、GridPanelのコンフィグオプションで、以下のようにとしていると(両方共trueがデフォルト値)、追加後に列の配置が復元されるため、意図した位置に追加されないことがあるので配慮が必要。列の追加自体は特に問題ないのですが、ここで少しはまりました。。

enableColumnMove: true
stateful: true