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); 
            } 
        } 
    }); 
}