ExtJS MVC框架搭建（三）

本教程是这 “ExtJS MVC框架搭建（二）”之上 完成增删改功能

一、完成用户修改功能

1）在app/view/user/ 目录下，新建 Edit.js（用于编辑用户列表）

Edit.js 内容如下：

Ext.define('OA.view.user.Edit', {
	extend: 'Ext.window.Window',
	alias: "widget.useredit",       // 给试图界面取个别名，在别的地方会用到（如：控制器）
	title: '编辑用户',
	
	layout: 'fit',
	autoShow: true,                // 创建 window 组件时自动显示
	
	initComponent: function(){
		this.items = [{
			xtype: 'form',
			items: [{
				xtype:'textfield',
				name: 'name',            //表单中字段属性名字要与 列表中（List.js）的一致
				fieldLabel: "姓名"
			}, {
				xtype:'textfield',
				name: 'email',
				fieldLabel: "电子邮件"
			}]
		}];
		
		this.buttons = [{
			text:'保存',
			action: 'save'
		}, {
			text:'取消',
			scope: this,            //这里的 this 代表的是这个 window 窗口
			handler: this.close
		}];
		
		this.callParent(arguments);
	}
	
	
});

2）向 控制器（app/controller/Users.js）中注册 Edit.js试图对象。

3）双击列表中的数据后，显示 编辑窗口，并且回显数据

实现效果如图：

修改控制器（app/controller/Users.js） 代码如下：

Ext.define('OA.controller.Users', {
	extend: 'Ext.app.Controller',
	
	models: [
		'User'
	],
	
	stores: [
		'Users'			//先向 控制器中注册 store组件， 然后在 view层才可以使用这个 store存储的数据
	],
	
	views: [
		'user.List',
		'user.Edit'
	],
	
	init: function(){
		this.control({
			'viewport > userlist': {
				itemdblclick: this.editUser
			}
		});
	},
	editUser: function(grid, record){
		console.info('名字:'+ record.get('name')+",电子邮件:"+record.get('email'));
		var view = Ext.widget('useredit');
		view.down('form').loadRecord(record);
	}
});

PS：①、‘viewprot > userlist’ 是一种查找组件的写法，意思是 选择 viewport 组件里面的 userlist组件(即 xtype=userlist 的那个组件）

        ②、'viewport > userlist': {
                    itemdblclick: this.editUser
                }

               表示 选中这个 userlist 组件，给它添加一个 itemdbclick （双击事件）的监听事件，当双击该组件时执行 this.editUser 方法

        ③、editUser 方法主要是用来加载双击列表中的数据

4）保存编辑的数据

代码如下：

控制器代码（app/controller/Users.js ）如下：

Ext.define('OA.controller.Users', {
	extend: 'Ext.app.Controller',
	
	models: [
		'User'
	],
	
	stores: [
		'Users'	//先向 控制器中注册 store组件， 然后在 view层才可以使用这个 store存储的数据
	],
	
	views: [
		'user.List',
		'user.Edit'
	],
	
	init: function(){
		this.control({
			'viewport > userlist': {
				itemdblclick: this.editUser
			},
			'useredit  button[action="save"]': {
				click: this.updateUser
			}
		});
	},
	editUser: function(grid, record){
		console.info('名字:'+ record.get('name')+",电子邮件:"+record.get('email'));
		var view = Ext.widget('useredit');
		view.down('form').loadRecord(record);
	},
	updateUser: function(button){
		//console.info('button.click');
		var win = button.up('window');
		var form =win.down('form');
		var record = form.getRecord();
		var values = form.getValues();
		record.set(values);
		win.close();
	}
});

5） 将数据更新到后台

在步骤 4）中更新的数据只在当前窗口做了更改，数据没有同步到后台。因此看到修改后的数据是这样的

数据同步到后台需要修改 store组件（app/store/Users.js）

 a) 在updateUser 方法中添加如下代码

this.getUsersStore().sync();

b) 修改后的 app/store/Users.js 代码如下：

Ext.define('OA.store.Users', {
	extend: 'Ext.data.Store',
	model: 'OA.model.User',
	
	autoLoad: true,
//	proxy: {
//		type: 'ajax',
//		url:'data/users.json',
//		reader: {
//			type: 'json',
//			root:'users',
//			successProperty: 'success'
//		}
//	}
	proxy: {
		type: 'ajax',
		api: {
			read: 'data/users.json',
			update: 'data/updateUsers.json'
		},
		reader: {
			type:'json',
			root: 'users',
			successProperty: 'success'
		}
	}
	
});

c) 在 webapp/data/ 目录下，新建 updateUsers.json 文件，内容如下：

{success: true}

---

总结：

新添加 编辑修改功能的过程

1） 新添 编辑页面

2） 将编辑页面注册到 控制器中

3）在控制器中 通过组件查找的方式来注册监听事件来完成编辑功能