关于Ext的EditorGridPanel实时修改数据后保存到数据库
直接上代码：
MoneyGridPanel=Ext.extend(Ext.grid.EditorGridPanel,{
queryTypeCmb:null,
constructor:function(){
this.queryTypeCmb=new Ext.form.ComboBox({
triggerAction:"all",
mode:"local",
displayField:"type",
value:"全部",
store:new Ext.data.JsonStore({
data:[{type:"全部"},{type:"收入"},{type:"支出"}],
fields:["type"]
}),
listeners:{
"select":{
fn:this.onSelectQueryType,
scope:this
}
}
});
MoneyGridPanel.superclass.constructor.call(this,{
renderTo:Ext.getBody(),
id:"moneyGridPanel",
autoHeight:true,
frame:true,
width:400,
tbar:[{
text:"保存",
handler:this.onSaveButtonClick,
scope:this
},"-",{
text:"添加",
handler:this.onInsertButtonClick,
scope:this
},"-",{
text:"删除",
handler:this.onDeleteButtonClick,
scope:this
},"-","查看类型",{xtype: 'tbspacer'}, this.queryTypeCmb],
sm: new Ext.grid.RowSelectionModel({
singleSelect:true
}),
store:new Ext.data.JsonStore({
pruneModifiedRecords:true,//这个很重要,可以使每次commitChanges后重新计算 getModifiedRecords()
url:"Moneyaction_moneyInfoShow.action",
fields:["id","type","money"],
autoLoad:true
}),
columns:[{
header:"类型",
dataIndex:"type",
editor:new Ext.form.ComboBox({
triggerAction:"all",
mode:"local",
displayField:"type",
store:new Ext.data.JsonStore({
data:[{type:"收入"},{type:"支出"}],
fields:["type"]
})
})
},{
header:"金额",
dataIndex:"money",
editor : new Ext.form.NumberField({
maxValue:10000,
minValue:1
})
}]
});
},
onSelectQueryType:function(_combo){
var queryType=_combo.getValue();
if(queryType=="全部"){
this.getStore().clearFilter();
}else{
this.getStore().filter("type",queryType);
}
},
onSaveButtonClick:function(){
//后台更新
var recs=this.getStore().getModifiedRecords();//这个记录数会被保持到store下次load之前
alert("被修改记录的个数"+recs.length)
//后台得到整条记录
if(recs.length==0){
return
}else{
var tempUpdate=[];
var tempInsert=[];
for(var i=0;i<recs.length;i++){
if(recs[i].get("id")!=""){
tempUpdate.push(recs[i].data);
}else{
tempInsert.push(recs[i].data);
}
}
if(tempUpdate.length>0){
this.updateMoneyInfo(tempUpdate);
}
if(tempInsert.length>0){
this.insertMoneyInfo(Ext.util.JSON.encode(tempInsert));
}
}
},
completeUpdate:function(){
this.getStore().commitChanges();
this.onSelectQueryType(this.queryTypeCmb);
},
onInsertButtonClick:function(){
var rec=new Ext.data.Record({
id:"",
type:"",
money:""
});
this.getStore().add(rec);
rec.set("type","收入");
rec.set("money",1);
this.startEditing(this.getStore().getCount()-1,0);
},
onDeleteButtonClick:function(){
if(this.getSelectionModel().getCount()==0){
Ext.Msg.show({
title : "系统提示",
msg : "请您选择您要删除的信息",
buttons : Ext.Msg.OK,
icon : Ext.Msg.INFO
});
}else{
Ext.Msg.confirm("系统询问","您确定要删除选中的记录吗?",this.OnRemoveQuestion,this);
}
},
OnRemoveQuestion:function(_btn){
if(_btn=="yes"){
var rec=this.getSelectionModel().getSelected();
var moneyInfoId=rec.get("id");
if(moneyInfoId!=""){//判断是否是删除的刚添加且未保存的数据,如果是只在客户端删除就可以
alert("服务器端删除");
var msgTip = Ext.MessageBox.show({
title:'提示',
width : 250,
msg:'正在更新信息请稍后......'
});
Ext.Ajax.request({
url : 'Moneyaction_moneyInfoDelete.action',
params : {moneyInfoId : moneyInfoId},
method : 'POST',
success : function(response,options){
msgTip.hide();
var result = Ext.util.JSON.decode(response.responseText);
if(result.success){
//服务器端数据成功更新后，同步更新 客户端列表中的数据
Ext.getCmp("moneyGridPanel").removeMoneyInfo();//怎么不用调组件直接调方法啊？？
}else{
Ext.Msg.alert('提示 ','更新信息失败！');
}
},
failure : function(response,options){
msgTip.hide();
Ext.Msg.alert('提示','更新信息 请求失败！');
}
});
}else{
alert("只在客户端删除");
Ext.getCmp("moneyGridPanel").removeMoneyInfo();//怎么不用调组件直接调方法啊？？
}
}
},
insertMoneyInfo:function(_moneyInfo){
var msgTip = Ext.MessageBox.show({
title:'提示',
width : 250,
msg:'正在更新信息请稍后......'
});
Ext.Ajax.request({
url : 'Moneyaction_moneyInfoAdd.action',
params : {moneyInfo : _moneyInfo},
method : 'POST',
success : function(response,options){
msgTip.hide();
var result = Ext.util.JSON.decode(response.responseText);
if(result.success){
//服务器端数据成功更新后，同步更新客户端列表中的数据
//将刚插入的数据进行commit和filter
Ext.getCmp("moneyGridPanel").completeUpdate();// 怎么不用调组件直接调方法啊？？
//reload的目的是将刚插入的记录从数据库中重新调，这样可以将没有id的记录附上id
Ext.getCmp("moneyGridPanel").getStore().reload();
}else{
Ext.Msg.alert('提示','添加信息失败！');
}
},
failure : function(response,options){
msgTip.hide();
Ext.Msg.alert('提示','添加信息请求失败！');
}
});
},
removeMoneyInfo:function(){
this.getStore().remove(this.getSelectionModel().getSelected());
},
updateMoneyInfo:function(tempUpdate){
var moneyInfo=Ext.util.JSON.encode(tempUpdate);
var msgTip = Ext.MessageBox.show({
title:'提示',
width : 250,
msg:'正在更新信息请稍后......'
});
Ext.Ajax.request({
url : 'Moneyaction_moneyInfoUpdate.action',
params : {moneyInfo : moneyInfo},
method : 'POST',
success : function(response,options){
msgTip.hide();
var result = Ext.util.JSON.decode(response.responseText);
if(result.success){
//服务器端数据成功更新后，同步更新客户端列表中的数据
Ext.getCmp("moneyGridPanel").completeUpdate();// 怎么不用调组件直接调方法啊？？
Ext.Msg.alert('提示','更新信息成功。');
}else{
Ext.Msg.alert('提示','更新信息失败！');
}
},
failure : function(response,options){
msgTip.hide();
Ext.Msg.alert('提示','更新信息请求失败！');
}
});
}
});
（转自：http://cache.baiducontent.com/c?m=9d78d513d98101e804ba837f7d498a304200db346ac0d1653f83c215d3321a564616f4ba5435117495853b3015e80902e5aa7034751421c486d5d81480ee8528588b2335671cf1104f8c04f88f15798467c907b5fa04b7e4ad678eef9480990f02d750047c8af18f5c0b13ca6df31635e0a29a4b165a11b8ed3462e2&p=93769a46dc8115e905a6c4710d16d423&newp=9b759a45d6c05add0be297745f59a5295c5bc4387ebad6167ccfe1&user=baidu&fm=sc&query=pruneModifiedRecords%3Atrue&qid=&p1=16）