您的位置:首页 > Web前端 > JavaScript

ExtJS GridPanel的ColumnModel 动态加载

2013-09-13 17:49 316 查看
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);
}
}
});
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: