`
gxh04007101
  • 浏览: 15144 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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了
分享到:
评论

相关推荐

    Ext grid 动态添加字段、列扩展

    Ext grid 动态添加字段、列扩展, 如何动态添加或者删除一个grid的列

    Ext Js权威指南(.zip.001

    10.1.7 锁定列的运行流程:ext.grid.lockable与ext.grid.lockingview / 516 10.2 使用grid / 520 10.2.1 最简单的grid / 520 10.2.2 列的配置项 / 521 10.2.3 自定义单元格的显示格式 / 523 10.2.4 通过列对象...

    Ext 学习中文手册

    动态添加菜单按钮到Toolbar 61 更方便的是 61 下一步是 62 模板(Templates)起步 62 第一步 您的HTML模板 62 第二步,将数据加入到模板中 62 下一步 63 学习利用模板(Templates)的格式化功能 63 正式开始 63 下...

    EXT简体中文参考手册(PDF&CHM电子档)

    动态添加菜单按钮到Toolbar 61 更方便的是 61 下一步是 62 模板(Templates)起步 62 第一步 您的HTML模板 62 第二步,将数据加入到模板中 62 下一步 63 学习利用模板(Templates)的格式化功能 63 正式开始 63 下...

    EXT 中文帮助手册

    定义数据(Data Definition) 51 步骤二 列模型(Column Model) 52 Grid组件的简易分页 53 Grid数据 53 怎么做一个分页的Grid 54 分页栏Toolbar 55 EXT Menu组件 55 创建简易菜单 56 各种...

    EXT 中文手册

    定义数据(Data Definition) 51 步骤二 列模型(Column Model) 52 Grid组件的简易分页 53 Grid数据 53 怎么做一个分页的Grid 54 分页栏Toolbar 55 EXT Menu组件 55 创建简易菜单 56 各种...

    ExtJSWeb应用程序开发指南(第2版)

    6.14 Ext.KeyMap提供更灵活强大的对按键的处理方法 6.14.1 构造函数 6.14.2 给对象添加键盘绑定 6.14.3 废弃已绑定到KeyMap的配置 6.14.4 将KeyMap或废弃的配置重新生效 6.14.5 获取当前KeyMap配置是否为有效 ...

    ExtAspNet_v2.3.2_dll

    +修正动态创建Grid列的BUG(feedback:gxpan)。 -增加示例(data/grid_dynamic_columns.aspx)。 -修正Form不能自适应浏览器大小的改变(feedback:kaywood)(WorkItem#6309)。 -增加重载方法Alert.Show(message, ...

    extjs实现选择多表自定义查询功能 前台部分(ext源码)

    主要使用的技术: 1、extjs2.0,整体框架 2、RemoteCheckboxGroup.js ,用于动态生成表字段(供查询结果使用) 3、Ext.ux.grid.RowActions.js,用于grid行扩展(上移下移删除等) 4、Datetime.js,用于时间选择 5、...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    +修正动态创建Grid列的BUG(feedback:gxpan)。 -增加示例(data/grid_dynamic_columns.aspx)。 -修正Form不能自适应浏览器大小的改变(feedback:kaywood)(WorkItem#6309)。 -增加重载方法Alert.Show(message, ...

Global site tag (gtag.js) - Google Analytics