本文的重點

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中-->storevar lista = listaskOrg[i];var askOrgCode = lista["askOrgCode"];var askOrgName = lista["askOrgName"];myaddfield = {name : askOrgCode};myfields.push(myaddfield);//并遍歷構建colMArray---->cmvar 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");}}});

總結

以上是生活随笔為你收集整理的Ext.grid.EditorGridPanel点击单元格改变数据,动态添加列的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。