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