Extjs4---用RowEditing对数据进行增加，修改
给grid添加RowEditing:
[javascript]
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
pluginId:'rowEditing',
saveBtnText: '保存',
cancelBtnText: "取消",
autoCancel: false,
clicksToEdit:2<span style="white-space:pre"> </span>//双击进行修改
})
然后在grid里面配置即可：
[javascript]
plugins: [
rowEditing
],
1、增加：
给“增加”添加点击事件，点击时，在store中添加一个新的record，并调用startEdit(0,0)方法，参数表示编辑第一行，也就是刚添加的新行
[javascript]
'center button[id = addContact]':{
click:function(){
//得到通讯录的store，并添加一个新的空行
var contactStore = Ext.getStore('ContactStore');
var contactModel = Ext.create('MS.model.Contact',{});
contactStore.insert(0,contactModel);
//得到rowEditing添加事件
var rowEditing = Ext.getCmp('contactGridpanel').editingPlugin;
rowEditing.startEdit(0,0);
}
},
然后在输入信息即可
2、修改：
当点击“修改”时，找到选择的列，或者双击某列时进行修改
[javascript]
'center button[id = updateContact]':{
click:function(){
//得到rowEditing添加事件
var rowEditing = Ext.getCmp('contactGridpanel').editingPlugin;
var data = Ext.getCmp("contactGridpanel").getSelectionModel().getSelection();
if(data.length == 0) {
Ext.MessageBox.alert(
'提示',
'请在您要修改的行前面打勾，或者直接双击您想修改的行！'
);
}else{
rowEditing.startEdit(data[0].index,0);
}
}
},
3、保存
不管是添加还是修改，保存用的事件是grid的edit事件
[javascript]
edit:function(editor,e,eOpts){
// "添加" 当id为空时，表示添加新的联系人
if(id == ''){
//执行操作
var myMask = new Ext.LoadMask(Ext.getBody(), {
msg: '正在添加，请稍后...',
removeMask: true //完成后移除
});
myMask.show();
//获取uuid
var id = UUID.prototype.createUUID();
//获取record
var formData = e.record.getData();
Ext.Ajax.request({
url: 'add',
params: {
id:id
//参数
},
success: function(response){
var result = Ext.decode(response.responseText).result;
if(result.succeed){
e.record.set(id,uuid);
//页面效果，提交数据
e.record.commit();
//重新排序，防止出现错位现象
Ext.getStore('ContactStore').sort('id', 'DESC');
//隐藏等待提示框
myMask.hide();
Ext.Msg.show({
title:'操作提示',
msg: result.msg,
buttons: Ext.Msg.YES,
icon: Ext.Msg.WARNING
});
}else{
myMask.hide();
Ext.Msg.show({
title:'操作提示',
msg: result.msg,
buttons: Ext.Msg.YES,
icon: Ext.Msg.WARNING
});
}
}
});
}else{
// "修改" 当id不为空时，表示修改联系人信息
var myMask = new Ext.LoadMask(Ext.getBody(), {
msg: '正在修改，请稍后...',
removeMask: true //完成后移除
});
myMask.show();
var formData = e.record.getData();
Ext.Ajax.request({
url: 'update',
params: {
id:formData.id
},
success: function(response){
var result = Ext.decode(response.responseText).result;
if(result.succeed){
e.record.commit();
Ext.getStore('ContactStore').sort('id', 'DESC');
//隐藏
myMask.hide();
Ext.Msg.show({
title:'操作提示',
msg: result.msg,
buttons: Ext.Msg.YES,
icon: Ext.Msg.WARNING
});
}else{
myMask.hide();
Ext.Msg.show({
title:'操作提示',
msg: result.msg,
buttons: Ext.Msg.YES,
icon: Ext.Msg.WARNING
});
}
}
})
}
}
}
