Ext.grid.EditorGridPanel點擊單元格改變數據,動態添加列

本文的重點

1、NumberField的listeners事件並不是很有效的驗證，那麼我又重新寫了它的監聽事件
2、grid的動態添加列的方法思路
    2-1:首先store是需要動態變化的
    2-2:其次cm也是要動態變化的
    2-3:grid 有個grid.reconfigure(store,cm);方法可以重新綁定cm和store

js代碼

var itemId = 0;
/*根據接收的數據構建cm和store ,這裏的cm和store都是動態變化的*/
        initCm:function(){
            colMArray = [
                            new Ext.grid.RowNumberer(),
                            {
                                header : "商品編號",
                                width : 30,
                                dataIndex : 'proCode',
                                sortable : true
                            },
                            {
                                header : "商品名稱",
                                width : 40,
                                dataIndex : 'proName',
                                sortable : true
                            },
                            {
                                header : "單位",
                                width : 20,
                                dataIndex : 'unitName',
                                sortable : true
                            },
                            {
                                header : "規格",
                                width : 40,
                                dataIndex : 'standard',
                                sortable : true
                            },
                            {
                                header : "淨價(點擊編輯)",
                                width : 30,
                                dataIndex : 'netPrice',
                                sortable : true,
                                editor : new Ext.form.NumberField(
                                        {
                                            allowNegative : false,//是否允許負數
                                            allowDecimals : true,// 允許輸入小數
                                            maxValue : 1000000,
                                            nanText : '請輸入有效的淨價',// 無效數字提示
                                            minValue : 0,// 最小值
                                            listeners : {
                                                "focus" : function(field) {
                                                    isvalid = true;
                                                },
                                                "valid" : function(field) {
                                                    if (field.getValue() == "") {
                                                        isvalid = false;
                                                    }
                                                },
                                                "invalid" : function(field, msg) {
                                                    isvalid = false;
                                                },
                                                "change" : function(field, newValue,
                                                        oldValue) {
                                                    if (isvalid) {
                                                        Ext.Ajax
                                                                .request({
                                                                    url : ctx
                                                                            + '/priceManage_PriceManage_changeNetPrice',
                                                                    method : 'POST',
                                                                    params : {
                                                                        itemId : itemId,
                                                                        netPrice : newValue
                                                                    },
                                                                    success : function(
                                                                            response) {
                                                                        var res = Ext.util.JSON
                                                                                .decode(response.responseText);
                                                                        if (res.flag == false) {
                                                                            repair
                                                                                    .error("數據更新失敗!");
                                                                        }
                                                                    },
                                                                    failure : Ext.emptyFn
                                                                });
                                                    } else {
                                                        repair.error("輸入值非法!");
                                                    }

                                                }

                                            }
                                        })
                            },
                            {
                                header : "增值稅專用發票稅率(%)(點擊編輯)",
                                width : 70,
                                dataIndex : 'rate',
                                sortable : true,
                                editor : new Ext.form.NumberField(
                                        {
                                            allowBlank : false,
                                            allowNegative : false,
                                            allowDecimals : false,// 允許輸入小數
                                            maxValue : 100,
                                            listeners : {
                                                "focus" : function(field) {
                                                    isvalid = true;
                                                },
                                                "valid" : function(field) {
                                                    if (field.getValue() == "") {
                                                        isvalid = false;
                                                    }
                                                },
                                                "invalid" : function(field, msg) {
                                                    isvalid = false;
                                                },
                                                "change" : function(field, newValue,
                                                        oldValue) {
                                                    if (isvalid) {
                                                        Ext.Ajax
                                                                .request({
                                                                    url : ctx
                                                                            + '/priceManage_PriceManage_changeRate',
                                                                    method : 'POST',
                                                                    params : {
                                                                        itemId : itemId,
                                                                        rate : field
                                                                                .getValue()
                                                                    },
                                                                    success : function(
                                                                            response) {
                                                                        var res = Ext.util.JSON
                                                                                .decode(response.responseText);
                                                                        if (res.flag == false) {
                                                                            repair
                                                                                    .error("數據更新失敗!");
                                                                        }
                                                                    },
                                                                    failure : Ext.emptyFn
                                                                });
                                                    } else {
                                                        repair.error("輸入值非法!");
                                                    }

                                                }
                                            }
                                        })
                            }, {
                                header : "增值稅金",
                                width : 30,
                                dataIndex : 'netMoney',
                                sortable : true
                            }, {
                                header : "含稅總價",
                                width : 30,
                                dataIndex : 'totalMoney',
                                sortable : true
                            }, {
                                header : "上期含稅總價",
                                width : 30,
                                dataIndex : 'pretotalMoney',
                                sortable : true
                            }, {
                                header : "幅度（%）",
                                width : 30,
                                dataIndex : 'extend',
                                sortable : true
                            }

                    ];

            Ext.Ajax.request({
                url : ctx + '/priceManage_PriceManage_getItemsByPriceCode',
                async : false,
                params : {
                    priceCode : priceCode,
                },
                success : function(response, options) {
                    var res = Ext.util.JSON.decode(response.responseText);
                    listaskOrg = res.listaskOrg;
                    storeRoot = res;
                    totalCount = res.totalCount;
                    myfields = [ // 接收的參數
                    {
                        name : 'itemId'
                    }, {
                        name : 'proCode'
                    }, {
                        name : 'proName'
                    }, {
                        name : 'standard'
                    }, {
                        name : 'unitName'
                    }, {
                        name : 'netPrice'
                    }, {
                        name : 'rate'
                    }, {
                        name : 'netMoney'
                    }, {
                        name : 'totalMoney'
                    }, {
                        name : 'pretotalMoney'
                    }, {
                        name : 'extend'
                    }, {
                        name : 'pretotalMoney'
                    } ];
                    for ( var i = 0; i < listaskOrg.length; i++) {//對從後臺獲取的lostaskOrg進行遍歷，添加到myfields中-->store

                        var lista = listaskOrg[i];
                        var askOrgCode = lista["askOrgCode"];
                        var askOrgName = lista["askOrgName"];

                        myaddfield = {
                            name : askOrgCode
                        };
                        myfields.push(myaddfield);

                        //並遍歷構建colMArray---->cm
                        var nowColumn = {
                            header : askOrgName,
                            width : 40,
                            dataIndex : askOrgCode
                        };
                        colMArray.push(nowColumn);
                    }
                    cm = new Ext.grid.ColumnModel(colMArray);
                }
            });

            store = new Ext.data.JsonStore({
                data : storeRoot,
                root : "root",
                autoLoad : true,
                totalProperty : "totalCount",
                fields : myfields
            });
        },
//我們要用到的EditorGridPanel
grid = new Ext.grid.EditorGridPanel({
                id : 'grid',
                store : store,
                border : false,
                margins : '5 5 5 5',
                autoHeight : true,
                cm : cm,
                viewConfig : {
                    forceFit : true
                },
                stripeRows : true,// 斑馬線效果
                loadMask : repair.gridLoadMaskConfig(),// 遮罩效果
                listeners : {
                    "rowclick" : function(grid, rowIndex, e) {
                        rowRecord = store.getAt(rowIndex);
                        itemId = rowRecord.get("itemId");
                    }
                }
            });