跟我一起学extjs5(39--单个模块的设计[7数据的增加修改删除])

跟我一起学extjs5(39--单个模块的设计[7数据的增加修改删除])

从后台取得数据已经可以了，下面对记录的新增、修改和删除进行前后台的互动改造。首先将新增和修改在行内进行，也就是都是在grid上进行。
在grid上可以编辑行，需要在initComponent中增加一个plugins的修改，将原来cellEditing的删除掉，加入rowEditing:

// 可以在grid中进行行编辑的设置
		this.rowEditing = new Ext.grid.plugin.RowEditing({
					clicksToEdit : 2
				});
		this.plugins = [this.rowEditing];
		this.selType = 'rowmodel';
		this.on('edit', function(editor, e) {
					// 每一行编辑完保存之后，都提交数据
					e.grid.getStore().sync();
					e.record.commit();
				});

由于现在需要手动提交数据，因此将GridStore.js中的 autoSync 改为 false，不自动提交数据。

还需要修改ToolbarController.js，将AddRecord函数修改如下：

// 新增一条记录
	addRecord : function(button) {
		var grid = this.getView().down('modulegrid');
		var model = Ext.create(grid.getStore().model);
		model.set(model.idProperty, null); // 设置主键为null,可自动增加
		// 插入空记录到第一条
		grid.getStore().insert(0, model);
		// 编辑第一条
		grid.rowEditing.startEdit(model);
	}

上面二个修改过后，来看一下具体的修改和新增的过程。
1、数据的修改，在grid中双击第一条记录，进入修改模式，将记录修改好，接“Update”进行更新。



下面来看看保存过程：按下更新按钮后，会执行store.sync()，将修改过的数据保存至后台。产生的链接为： http://localhost:8888/app/rest/module/update.do/10?_dc=1413266767696&moduleName=_ModuleGroup,后面跟的参数为主键以及修改过的数据，不修改的字段不加入。


后台java的spring mvc 会解析发送过来的修改请求执行相应的Controller，在ModuleService中update函数里会做如下操作：
1､根据参数中的moduleName来判断修改的是哪个模块的记录；
2､根据主键取得该记录，并保存为oldRecord；
3､再次根据主键取得该记录,保存为newRecord，将修改过的字段用反射的方式进行修改；
4、查看配置文件，查看该模块是否有beforeUpdate的逻辑验证函数，如果有，将修改前的oldRecord和修改后的newRecord记录作为参数传递给该函数。如果不许修改，则返回不许修改的理由，允许修改了，继续往下执行。
5、检查其他配置的约束条件。
6､将newRecord数据保存至数据库。
7､将修改记录写入日志文件。
8､查看配置文件，查看该模块是否有afterUpdate的逻辑验证函数，如果有则执行。
9、由于可能有某些字段是计算字段或者是在触发器中修改过的字段会改变，因此重新从数据库中读取该记录，将数据组织好以后以送回前台。

在保存数据的时候，如果有数据库的异常，也要进行处理，简单的异常是主键重复，或者唯一值约束的冲突，这些也有一套方法来自动判断是哪个字段唯一值约束冲突，并能将正确的信息返回给前台。
以上基本为数据保存时候的一个简单流程。

2､数据的新增。在toolbar中按下“新增按钮”，会在Grid中的第一条新增一条空记录，并且处于修改状态，在修改了各字段值之后，可进行保存。



新增记录保存过后，会生成如下url: http://localhost:8888/app/rest/module/create.do?_dc=1413268186362&moduleName=_ModuleGroup
对应的传送的参数：



记录新增过程在实际的执行过程中要比修改复杂，首先是新增的时候要加入缺省值：
1､加入字段中自定义的缺省值；
2､加入导航中选择的相应字段的缺省值;
3、如果此模块的父模块的限定值，那就要加入此父模块的字段值；
4､到后台去取得其他缺省值。（以上步骤现在都没有加入）

记录新增的后台处理方式和修改的类似。要去查找有否beforeInsert和afterInsert的逻辑操作，最后写入数据库。

3､单条记录的删除。选中一条记录，然后按上面的“删除”，或者把此记录拖动到“删除按钮上”，就会显示如下的提示：



按“是”后，将会发送删除的url如下：

Request URL:
http://localhost:8888/app/rest/module/remove.do/01?_dc=1413268927399&moduleName=_ModuleGroup
Request Method:

DELETE

跟在后面的参数为：



删除完成后，将记录从grid中移除。（多条记录的删除后台还没加入处理函数）

注：以上的各种操作都没有加入后台操作异常处理的代码。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
＊＊＊＊在测试中发现新增第二条记录后保存后，发现第一条记录又生成了一个update的请求，需要去找找原因。

.....查找中，测试中......

20分钟后，

修改Grid.js中的函数如下，就正常了：

this.on('edit', function(editor, e) {
					// 每一行编辑完保存之后，都提交数据
					e.grid.getStore().sync({
								callback : function() {
									 e.record.commit();
								}
							});
				});

由于是异步执行，需要在sync的回调函数中执行model.commit，这样暂时就没问题了。