动态GridPanel

最新推荐文章于 2024-04-17 00:45:00 发布

原创最新推荐文章于 2024-04-17 00:45:00 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种通过ExtJS自定义方法来增强GridPanel组件的功能，包括动态添加和删除字段及列的方法实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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');