ExtJS MVC框架搭建（二）

一、修改ExtJS MVC框架搭建（一）中的 app/view/user/List.js 文件 

1）原 app/view/user/List.js 文件内容

Ext.define('OA.view.user.List', {
	extend: 'Ext.grid.Panel',
	alias: 'widget.userlist',
	
	title: '所有用户',
	
	initComponent: function(){
		this.store={
				fields: ['name', 'email'],
				data: [
					{name: '张三', email: 'zhangsan@qq.com'},
					{name: '李四', email: 'lisi@qq.com'}
				]
		};
		this.columns=[{
			header: '姓名',
			dataIndex: 'name',
			flex: 1
		}, {
			header: '电子邮件',
			dataIndex: 'email',
			flex: 1
		}];
		this.callParent(arguments);
	}
	
});

2）去除 initComponent 方法。即改造后的 List.js 文件可以没有 initComponent

①、从 List.js 文件（即试图组件）中抽取出 Store对象

步骤一、创建文件 app/store/Users.js（Store组件，用于存储数据）

文件内容如下：

Ext.define('OA.store.Users', {     // 定义一个 store 类型的对象
	extend: 'Ext.data.Store',
	
	fields: ['name', 'email'],

	data:[{                        // 数据目前是写死的，后面使用 proxy 实现远程加载数据
		name:"吴京",
		email:'wuj@qq.com'
	}, {
		name:"成龙",
		email:'chenglong@qq.com'
	}]
	
});

PS：a) 、上述 app/store/Users.js 还可以再改造，如把 fields: ['name', 'email'] 拎出来单独作为一个 model，把 data 定义的内容去掉，改为 proxy 属性以实现远程加载数据。随后会对 app/store/Users.js 文件进行改造。

         b) 、为什么不直接一步写到位？ 因为 ExtJS 调试代码比较麻烦，所以一步步分离代码，可以清晰的看出哪一步出现了问题。

②、在 相应的控制器（app/controller/Users.js） 中注册 上一步定义好的 Store（app/store/Users.js）

app/controller/Users.js 内容如下：

Ext.define('OA.controller.Users', {
	extend: 'Ext.app.Controller',
	
	stores: [
		'Users'			//先向 控制器中注册 store组件， 然后在 view层才可以使用这个 store存储的数据
	],
	
	views: [
		'user.List'
	],
	
	init: function(){
		console.info("OA.controller.Users.init()...");
	}
	
});

③、修改 试图组件（app/view/user/List.js ）内容

先注释掉 initComponent方法中 的 this.store， 然后在外边设置 store属性的值

Ext.define('OA.view.user.List', {
	extend: 'Ext.grid.Panel',
	alias: 'widget.userlist',
	
	title: '所有用户',
	store: 'Users',	 // 因为在控制器（app/controller/Users.js）中注册了 Users的store，所以这里才可以使用
	initComponent: function(){
//		this.store={
//				fields: ['name', 'email'],
//				data: [
//					{name: '张三', email: 'zhangsan@qq.com'},
//					{name: '李四', email: 'lisi@qq.com'}
//				]
//		};
		this.columns=[{
			header: '姓名',
			dataIndex: 'name',
			flex: 1
		}, {
			header: '电子邮件',
			dataIndex: 'email',
			flex: 1
		}];
		this.callParent(arguments);
	}
	
});

④、将项目部署到 Tomcat中，然后访问主页看一下效果

PS：这一步的目的是验证 从试图层的 this.store 方法提取的 store是否成功。

⑤、继续改造 app/view/user/List.js 文件， 将 initComponent 方法中的 this.columns 也提取出来

app/view/user/List.js 修改后的代码：

Ext.define('OA.view.user.List', {
	extend: 'Ext.grid.Panel',
	alias: 'widget.userlist',
	
	title: '所有用户',
	store: 'Users',	 // 因为在控制器（app/controller/Users.js）中注册了 Users的store，所以这里才可以使用
	columns: [{
		header: '姓名',
		dataIndex: 'name',
		flex: 1
	}, {
		header: '电子邮件',
		dataIndex: 'email',
		flex: 1
	}],
//	initComponent: function(){
//		this.store={
//				fields: ['name', 'email'],
//				data: [
//					{name: '张三', email: 'zhangsan@qq.com'},
//					{name: '李四', email: 'lisi@qq.com'}
//				]
//		};
//		this.columns=[{
//			header: '姓名',
//			dataIndex: 'name',
//			flex: 1
//		}, {
//			header: '电子邮件',
//			dataIndex: 'email',
//			flex: 1
//		}];
//		this.callParent(arguments);
//	}
	
});

---

二、改造 app/store/Users.js 

原 app/store/Users.js 内容：

Ext.define('OA.store.Users', {
	extend: 'Ext.data.Store',
	
	fields: ['name', 'email'],

	data:[{
		name:"吴京",
		email:'wuj@qq.com'
	}, {
		name:"成龙",
		email:'chenglong@qq.com'
	}]
	
});

1）将 fields: ['name', 'email'] 属性提取出来，做成一个model类

步骤一、新建 app/model/User.js ,作为model

内容如下：

Ext.define('OA.model.User', {
	extend: 'Ext.data.Model',
	
	fields: ['name', 'email']
	
});

步骤二、在控制器（app/controller/Users.js）中注册 该 model 类

步骤三、修改 app/store/Users.js 文件

a) 注释掉 fields: ['name', 'email']

b) 新添 model属性

 

2)  远程加载数据

步骤一、在 webapp/data/ 目录下，新建 users.json 文件

内容如下：

{
	success: true,
	users: [{
		id: 1,
		name:'李白',
		email:'libai@qq.com'
	}, {
		id: 2,
		name:'杜甫',
		email:'dufu@qq.com'
	}]
}

PS：目前暂时使用 data/***.json 作为后台返回的json数据， 后面结合SSH2 或 SSM 后，再修改。

步骤二、修改 app/store/Users.js 文件

代码如下：

Ext.define('OA.store.Users', {
	extend: 'Ext.data.Store',
	
	model: 'OA.model.User',
	
	autoLoad: true,
	proxy: {
		type: 'ajax',            // 发送ajax 请求
		url:'data/users.json',   // 请求路径
		reader: {
			type: 'json',        // 使用 json 类型的解析器来解析数据
			root:'users',        // 指定返回数据中数组的名称
			successProperty: 'success'  //返回数据中成功的标识
		}
	}
	
});

PS：①、必须设置 autoLoad: true， 否则数据不自动加载。