Ext.grid.EditorGridPanel使用方法 1

首先定义一个EditorGridPanel，

var maintainceOrderGrid = new Ext.grid.EditorGridPanel( {// 创建Grid表格组件
applyTo : 'maintainorderinfo-grid-div',// 设置表格现实位置
frame : true,// 渲染表格面板
tbar : toolbar,// 设置顶端工具栏
stripeRows : true,// 显示斑马线
autoScroll : true,// 当数据查过表格宽度时，显示滚动条
store : maintainceProjectStore,// 设置表格对应的数据集
viewConfig : {// 自动充满表格
autoFill : true
},
sm : sm,// 设置表格复选框
cm : cm,// 设置表格的列
bbar : new Ext.PagingToolbar( {
pageSize : 25,
store : maintainceProjectStore,
displayInfo : true,
displayMsg : '显示第{0}条到{1}条记录,一共{2}条记录',
emptyMsg : '没有记录'
})
});

接着定义grid中用到的sm和cm，

var sm = new Ext.grid.CheckboxSelectionModel();// 创建复选择模式对象
var cm = new Ext.grid.ColumnModel( [// 创建表格列模型
new Ext.grid.RowNumberer(), sm, {
header : "维修价格",
width : 60,
dataIndex : 'price',
sortable : true,
editor : new Ext.form.NumberField( {
editable : true,
allowNegative : false,
allowBlank : false,
decimalPrecision : 2,
minValue : 0
//	,
//	maxValue : 1
})
} ]);

再定义一个保存维修价格的toolbar，用于调用保存维修价格的方法。

var toolbar = new Ext.Toolbar( [  {
text : '保存维修价格',
iconCls : 'add',
handler : setMaintaincePrice
} ]);

保存维修价格的方法如下：

function setMaintaincePrice() {//设置维修价格
var mr = maintainceProjectStore.getModifiedRecords();// 获取所有更新过的记录
var recordCount = maintainceProjectStore.getCount();// 获取数据集中记录的数量

if (mr.length == 0) {
Ext.MessageBox.alert('提示', '没有修改数据！');
}
else
{
var msgTip = Ext.MessageBox.show( {
title : '提示',
width : 250,
msg : '正在提交更改请稍后......'
});
var recordModStr = "[";// 以josn方式保存数据
for ( var i = 0; i < mr.length; i++) {
recordModStr += "{maintainceProjectId:"
+ mr[i].data["maintainceProjectId"] + ",price:"
+ mr[i].data["price"] + "}";
if (i < mr.length - 1)
recordModStr += ",";
}
recordModStr += "]";
var requestConfig = {
//url : 'material.do?method=modifyMaterialQuantity×tamp=' + new Date(),
url : 'maintianceproject.do?method=setMaintaincePrice×tamp=' + new Date(),
jsonData : recordModStr,
params : {
mlist : recordModStr
},
callback : function(options, success, reponse) {
msgTip.hide();
if (success) {
Ext.Msg.alert('提示', '保存成功');
maintainceProjectStore.commitChanges();
} else {
Ext.Msg.alert('提示', '保存失败');
}
}
}
Ext.Ajax.request(requestConfig);

}
}

这里使用了

Ext.Ajax.request(requestConfig);

Ajax动态向后台发送请求的方法。这也是ExtJs前后台传递消息的有效方法之一。

下面列出后台读取josn的方法：

private ModelAndView setMaintaincePrice(HttpServletRequest request,
HttpServletResponse response) throws IOException {
String jsonstr = request.getParameter("mlist");
// test
System.out.println(jsonstr);
jsonstr = URLDecoder.decode(jsonstr, "utf-8");
JSONArray array = JSONArray.fromObject(jsonstr);
MaintianceprojectForm[] obj = new MaintianceprojectForm[array.size()];
boolean b = false;
for (int i = 0; i < array.size(); i++) {
JSONObject jsonObject = array.getJSONObject(i);
obj[i] = (MaintianceprojectForm) JSONObject.toBean(jsonObject,
MaintianceprojectForm.class);
// test
System.out.println(obj[i].getMaintainceProjectId() + "*****"
+ obj[i].getPrice());
Maintianceproject record = new Maintianceproject();
record.setPrice(obj[i].getPrice());
b = this.getMaintianceprojectService().updateMaintaincePrice(
obj[i].getMaintainceProjectId(), record);
if (b == false)
break;
}
if (b) {
response.getWriter().write("{success:true}");
} else {
response.getWriter().write("{success:false}");
}
return null;
}