給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
});
}
}
})
}
}
},