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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM