Extjs4---用RowEditing对数据进行增加，修改

我的小站：http://lc448986375.gicp.net，希望与大家学习交流

给grid添加RowEditing:

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {pluginId:'rowEditing',saveBtnText: '保存',        cancelBtnText: "取消",        autoCancel: false,            clicksToEdit:2//双击进行修改        })

然后在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                         });                        }                    }                })                }            }            },