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 : ' 查 询 ', 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 : " 产 品 " }), new Ext.form.Radio({ id:"dxjgdm_radio", name : "select_method", inputValue : "dxjgdm desc,cpdm desc", boxLabel : "代销机构 " }),'-' ], 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); } } }); }