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 = ;
/*根据接收的数据构建cm和store ,这里的cm和store都是动态变化的*/
        initCm:function(){
            colMArray = [
                            new Ext.grid.RowNumberer(),
                            {
                                header : "商品编号",
                                width : ,
                                dataIndex : 'proCode',
                                sortable : true
                            },
                            {
                                header : "商品名称",
                                width : ,
                                dataIndex : 'proName',
                                sortable : true
                            },
                            {
                                header : "单位",
                                width : ,
                                dataIndex : 'unitName',
                                sortable : true
                            },
                            {
                                header : "规格",
                                width : ,
                                dataIndex : 'standard',
                                sortable : true
                            },
                            {
                                header : "净价(点击编辑)",
                                width : ,
                                dataIndex : 'netPrice',
                                sortable : true,
                                editor : new Ext.form.NumberField(
                                        {
                                            allowNegative : false,//是否允许负数
                                            allowDecimals : true,// 允许输入小数
                                            maxValue : ,
                                            nanText : '请输入有效的净价',// 无效数字提示
                                            minValue : ,// 最小值
                                            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 : ,
                                dataIndex : 'rate',
                                sortable : true,
                                editor : new Ext.form.NumberField(
                                        {
                                            allowBlank : false,
                                            allowNegative : false,
                                            allowDecimals : false,// 允许输入小数
                                            maxValue : ,
                                            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 : ,
                                dataIndex : 'netMoney',
                                sortable : true
                            }, {
                                header : "含税总价",
                                width : ,
                                dataIndex : 'totalMoney',
                                sortable : true
                            }, {
                                header : "上期含税总价",
                                width : ,
                                dataIndex : 'pretotalMoney',
                                sortable : true
                            }, {
                                header : "幅度（%）",
                                width : ,
                                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 = ; 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 : ,
                            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");
                    }
                }
            });