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