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列删除


一开始的时候columns配置一个空的,gridPane({columns:[{}]})然后调用这个方法gridPanel.reconfigure(gridPanel.store, Ext.grid.ColumnModel colModel ) ;后面这个是你动态组装出来的ColumnModel这就OK了
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值