徐孟加最新动态-ExtJS GridPanel的ColumnModel 动态加载

发布时间：2017-09-14 所属栏目：重新启动处于挂起状态

一 : ExtJS GridPanel的ColumnModel 动态加载

var colM = "company,id,flyline"; var colMArr = colM.split(","); var colLength = colMArr.length; var colMArray = new Array(); for(var i=0; i<colLength; i++) {  colMArray[i] = {header:colMArr[i],width: 75,dataIndex:fieldArray[i]}  //此处的fieldArray[i]是fields的数据 } //然后colMarray数组即是我们要动态构造的那个ColumnModel的参数，此处的动态的意 //思是colM可以从request中获取,然后用来动态创建header即表头信息，同 //理dataIndex也是一样的 var column = new Ext.grid.ColumnModel(colMArray); //然后GridPanel中的制定cm属性值为column即可

var storeCpye = new Ext.data.GroupingStore({  proxy : new Ext.data.HttpProxy({  url : 'cxgl_cpye.app?dateTime=' + new Date().getTime() + '&subTranCode=list'  }),  reader : new Ext.data.JsonReader({  root : 'hstamcx',  totalProperty : "results",  fields : ["khbh","bankacc","fundacc","dxjgdm","cpdm","tazh"]  }), sortInfo : {  field : 'cpdm',  direction : 'DESC'  },  groupField : 'cpdm' }); var colMArray = new Array(); colMArray = [{header : "产品代码", dataIndex : "cpdm", width : 100},  {header : "代销机构代码", dataIndex : "dxjgdm", width : 100},  {header : "客户编号", dataIndex : "khbh", width : 100},  {header : "理财账号", dataIndex : "bankacc", width : 100}, {header : "客户资金账号", dataIndex : "fundacc", width : 100} var colQd = new Ext.grid.ColumnModel(colMArray);  // GRID定义 var gridCpye = new Ext.grid.GridPanel({  id : 'cpye_grid',  title:'[产品余额]查询',  height : 800,  stripeRows : true,  bodyStyle : 'width:100%',  disableSelection : true,  cm : colQd,  viewConfig : {  forceFit : false  },  store : storeCpye,  iconCls : 'details',  animCollapse : true,  trackMouseOver : false,  loadMask : {  msg : '正在加载[产品余额]信息，请稍侯……'  },  //selModel : smQd,  selModel : new Ext.grid.RowSelectionModel({singleSelect:true}),  tbar : ['-',new Ext.form.Label({  text : '产品代码:'  }),new Ext.form.TextField({  id : 'cpdm',  name : 'cpdm',  width : 130  }),'-',new Ext.form.Label({  text : '代销机构代码:'  }), new Ext.form.TextField({  id : 'dxjgdm',  name : 'dxjgdm',  width : 130  }), '-', {  pressed : true,  text : '&nbsp;&nbsp;查&nbsp;&nbsp;&nbsp;&nbsp;询&nbsp;&nbsp;&nbsp;&nbsp;',  iconCls : 'yes',  handler : selinfo  },'-',new Ext.Toolbar.Fill(),'-',new Ext.form.Label({  text : ' 查询方式: '  }),new Ext.form.Radio({  id:"cpdm_radio", name : "select_method", inputValue : "cpdm desc,dxjgdm desc",  checked : true, boxLabel : " 产 品&nbsp;&nbsp;" }), new Ext.form.Radio({  id:"dxjgdm_radio", name : "select_method", inputValue : "dxjgdm desc,cpdm desc",  boxLabel : "代销机构&nbsp;&nbsp;"  }),'-'  ],  bbar : new Ext.PagingToolbar({  pageSize : 20,  store : storeCpye,  displayInfo : true,  emptyMsg : '没有记录'  }) }); function selinfo(){  var cpdm_sel = Ext.get("cpdm").getValue();  var dxjgdm_sel = Ext.get("dxjgdm").getValue();  var select_method_sel = Ext.get("cpdm_radio").getValue();  if(document.getElementById("dxjgdm_radio").checked){  select_method_sel = Ext.get("dxjgdm_radio").getValue();  colMArray[0] = {header : "代销机构代码", dataIndex : "dxjgdm", width : 100};  colMArray[1] = {header : "产品代码", dataIndex : "cpdm", width : 100};  }else{  colMArray[0] = {header : "产品代码", dataIndex : "cpdm", width : 100};  colMArray[1] = {header : "代销机构代码", dataIndex : "dxjgdm", width : 100};  }  var params = {};  params.cpdm_sel = cpdm_sel;  params.dxjgdm_sel = dxjgdm_sel;  params.select_method_sel = select_method_sel;  //params.whereStr = " and feetype in ('1','2')";  storeCpye.baseParams = params;  colQd = new Ext.grid.ColumnModel(colMArray);  //gridCpye.reconfigure(storeCpye,colQd),  storeCpye.load({  callback : function(r, options, success) {  if (success == true){  gridCpye.reconfigure(storeCpye,colQd);  }else if (success == false) {  Ext.Msg.alert("错误", storeCpye.reader.jsonData.msg);  }  }  }); }

扩展：extjs grid column / extjs4 grid column / extjs grid addcolumn

二 : gridpanel动态重新加载columnModel与store

gridpanel动态重新加载columnModel与store

其实很简单的,主要就是以下三项.

//重新绑定grid

this.grid.reconfigure(newStore,newExt.grid.ColumnModel(cm1));

//重新绑定分页工具栏

this.pagingBar.bind(newStore);

//重新加载数据集

newStore.load({params:{start:0,limit:10}});

61阅读

徐孟加最新动态-ExtJS GridPanel的ColumnModel 动态加载