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

给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   
                                        });  
                                    }  
                                }  
                            })  
                        }  
                    }  
                }

 

发表评论