Ext grid 超级强大的动态添加字段、列扩展

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);
　　 }
　　 }
　　});
　　
　　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);
　　 }
　　 }
　　});
　　
　　
　　-------------------------------------------------------------------
　　
　　使用方法：Java代码
　　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');
　　
　　
　　-------------------------------------------------------------------
　　
　　
　　grid.addColumn('C'); //添加C列，空数据
　　grid.addColumn({name: 'D', defaultValue: 'D'}, {header: 'D', dataIndex: 'D'});//添加D列，有D数据
　　grid.removeColumn('B');//把之前的B列删除

 

 

 

 

 

 

 

 

 

 

 

 

 

Ext 动态添加grid 列数

ext 2008-07-18 15:00:53 阅读593 评论3   字号：大中小 订阅

在做报表的时候，需要将grid的列数做成活的，列数有数据库里的字段确定，这据需要将grid的列数做成动态的，经过多次实验已成，如下：

后台返回的json:

                {'action':true,'message':'error!','data':[
                {'number':'1','text1': '3','info1': '4','special1': '5'}
                ],'columModle':[
                {'header': '序号','dataIndex': 'number','width':40},
                {'header': '编码','dataIndex': 'text1'},
                {'header': '名称','dataIndex': 'info1'},
                {'header': '金额','dataIndex': 'special1'}
                ],'fieldsNames':[{name: 'number'},
                {name: 'text1'}, {name: 'info1'},
                {name: 'special1'}]}



            var cm = new Ext.grid.ColumnModel(json.columModle);
            var ds = new Ext.data.JsonStore({
            data:json.data,
            fields:json.fieldsNames
            });
                                       
            var grid = new Ext.grid.GridPanel({
            region: 'center',
            split: true,
            border:false,
            cm:cm,
            ds:ds
            });
            grid.render(document.body);
           
            new Ext.Viewport({
              layout: 'border',
              split: true,
              items: [grid]
            });




对于Ext动态grid这个问题，好多人都问过我，还有就是如何做多行表头，就是表头有两行以上，其中一列跨下边几列，对于多行表头的问题在这一会半会会说不清楚，只能告诉大家需要自己写插件。咱们还是说说动态表头的问题。
简单的说就是：从后台拼出json字符串--->前台取得字符串，并转化为json----->根据json创建grid
1.从后台拼出json字符串
               “{'action':true,'message':'error!','data':[
                {'number':'1','text1': '3','info1': '4','special1': '5'}
                ],'columModle':[
                {'header': '序号','dataIndex': 'number','width':40},
                {'header': '编码','dataIndex': 'text1'},
                {'header': '名称','dataIndex': 'info1'},
                {'header': '金额','dataIndex': 'special1'}
                ],'fieldsNames':[{name: 'number'},
                {name: 'text1'}, {name: 'info1'},
                {name: 'special1'}]}”
2.前台取得字符串，并转化为json
                               Ext.Ajax.request({
                                url: '自己的url',
                                params: 'method=自己的方法',
                                method: 'POST',
                                success: function(rs,request){
                                    var result = rs.responseText;//拿到结果集，此时为字符串
                                    var json = Ext.util.JSON.decode(result);//将字符串转换为json类型
                                },
                                failure: function(rs,request){
                                }
                            });
3.根据json创建grid
                               Ext.Ajax.request({
                                url: '自己的url',
                                params: 'method=自己的方法',
                                method: 'POST',
                                success: function(rs,request){
                                    var result = rs.responseText;//拿到结果集，此时为字符串
                                    var json = Ext.util.JSON.decode(result);//将字符串转换为json类型
                                    var cm = new Ext.grid.ColumnModel(json.columModle);
                                    var ds = new Ext.data.JsonStore({
                                          data:json.data,
                                          fields:json.fieldsNames
                                        });
                                      
                                    var grid = new Ext.grid.GridPanel({
                                            region: 'center',
                                            split: true,
                                            border:false,
                                            cm:cm,
                                            ds:ds
                                            });
                                   // grid.render(document.body);
          
                                  new Ext.Viewport({
                                          layout: 'border',
                                          split: true,
                                          items: [grid]
                                    });
                                },
                                failure: function(rs,request){
                                }
                            });

注意的地方：首先grid必须在sucsess方法里实例，否则会报错，json数据也只在sucess方法里起作用。Ext的灵魂就是json很多控件都可以用以上方法实现。