동적 GridPanel

Ext.override(Ext.data.Store,{
        addField: function(field){
                if(typeof field == 'string'){
                        field = {name: field};
                }
                this.recordType.prototype.fields.replace(field);
                if(typeof field.defaultValue != 'undefined'){
                        this.each(function(r){
                                if(typeof r.data[field.name] == 'undefined'){
                                        r.data[field.name] = field.defaultValue;
                                }
                        });
                }
        },
        removeField: function(name){
                this.recordType.prototype.fields.removeKey(name);
                this.each(function(r){
                        delete r.data[name];
                });
        }
});
Ext.override(Ext.grid.ColumnModel,{
        addColumn: function(column, colIndex){
                if(typeof column == 'string'){
                        column = {header: column, dataIndex: column};
                }
                var config = this.config;
                this.config = [];
                if(typeof colIndex == 'number'){
                        config.splice(colIndex, 0, column);
                }else{
                        colIndex = config.push(column);
                }
                this.setConfig(config);
                return colIndex;
        },
        removeColumn: function(colIndex){
                var config = this.config;
                this.config = [config[colIndex]];
                config.remove(colIndex);
                this.setConfig(config);
        }
});
Ext.override(Ext.grid.GridPanel,{
        addColumn: function(field, column, colIndex){
                if(!column){
                        if(field.dataIndex){
                                column = field;
                                field = field.dataIndex;
                        } else{
                                column = field.name || field;
                        }
                }
                this.store.addField(field);
                this.colModel.addColumn(column, colIndex);
        },
        removeColumn: function(name, colIndex){
                this.store.removeField(name);
                if(typeof colIndex != 'number'){
                        colIndex = this.colModel.findColumnIndex(name);
                }
                if(colIndex >= 0){
                        this.colModel.removeColumn(colIndex);
                }
        }
});

var grid = new Ext.grid.GridPanel({
        store: new Ext.data.SimpleStore({
                fields: ['A', 'B'],
                data: [['ABC', 'DEF'], ['GHI', 'JKL']]
        }),
        columns: [
                {header: 'A', dataIndex: 'A'},
                {header: 'B', dataIndex: 'B'}
        ]
});
new Ext.Viewport({
        layout: 'fit',
        items: grid
});
grid.addColumn('C');
grid.addColumn({name: 'D', defaultValue: 'D'}, {header: 'D', dataIndex: 'D'});
grid.removeColumn('B');