extjsのGridPanelで動的に列を追加する
最新の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