给grid添加RowEditing:
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', { pluginId:'rowEditing', saveBtnText: '保存', cancelBtnText: "取消", autoCancel: false, clicksToEdit:2<span style="white-space:pre"> </span>//双击进行修改 })
然后在grid里面配置即可:
plugins: [ rowEditing ],
1、增加:
给“增加”添加点击事件,点击时,在store中添加一个新的record,并调用startEdit(0,0)方法,参数表示编辑第一行,也就是刚添加的新行
'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、修改:
当点击“修改”时,找到选择的列,或者双击某列时进行修改
'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事件
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 }); } } }) } } }