ExtJS 4 实例之数据包

本章介绍Extjs 4中数据包崭新的功能有哪些。假设例子是个简单的博客程序，博客的模型有用户User ，帖子Post 及评论Comment 。例子依赖服务器的远程调用须要部署在一个服务器上，静态的文件服务器即可。 
 

一、创建一个模型的实例：

首先要创建一个User模型的实例。需要指出的是，这里的User变量是一个全局变量。虽然全局变量应该慎重使用，但如果这里只是一个例子的话所以直接用上了。User是一个模型类。

 

1. var frank = new User({
2.     name: 'Frank Cheung',
3.     age: 28
4. });
5. alert("用户姓名是" + frank.get('name'));

二、加载数据到Store容器：

接着要把上述用户的数据加载到数据容器Store。先定义一个对接User 模型的Store。这个Store我们配置为AjaxProxy的方式获取数据，数据就是来自于data/users.json 。你也可以点击这个链接看看这个JSON文件内部究竟如何。因为使用了JSON格式，所以便调用JsonReader来处理AjaxProxy送来的数据。在JsonReader的root配置项设置user的参数，就会在对应着的响应数据中匹配user字段，说明那是想要的结果记录。

 

1. var store = new Ext.data.Store({
2.     model: 'User',
3.     proxy: {
4.         type: 'ajax',
5.         url : 'data/users.json',
6.         reader: {
7.             type: 'json',
8.             root: 'users'
9.     }
10.    }
11. });
12. // 加载Store.load，因为是异步操作的缘故，所以设置了一个回调函数。
13. // 这里应该返回4笔记录，现实的是4。
14. store.load(function(records) {
15.     alert("加载了" + store.getCount() + " 笔记录回来。");
16. });

三、使用关联定义关系和隐式加载：

关联（Associations）是Ext 4带来全新的概念和方法，能够让我们可以在模型之间建立特定的关系。例如在这个例子，我们将User模型关联不同的帖子Post，就是一个特定的关系。通过了解User 源码就可以窥探个中原理。以下加载一个User模型并列出其所属的Post。其中每张帖子Post，又有一个或多个评论Comment可操作。

如果你打开了User模型源码 ，你会发现RestProxy定义其中。但是，你也会觉得怎么没有了Store？因为这是隐式创建了Store。RestProxy是AjaxProxy的特殊类型，允许以RESTful的方式与服务端进行沟通。在这个例子中，url就是data/users/1.json，这是由RestProxy自动生成了/1.json的路径。

 

1. User.load(1, {
2.     success: function(user) {
3.         // 刚才设置User模型的时候，分配了hasMany关系。这过程会创建user.posts()方法
4.         var posts = user.posts(),
5.             name  = user.get('name');
6.         
7.         alert("用户"+ name + " 有  " + posts.getCount() + "篇博文。");
8.         
9.         posts.each(function(post) {
10.             // 类似地，由于设置Post模型的时候，分配了hasMany关系。这过程会创建post.comment()方法
11.             var title = post.get('title'),
12.                 count = post.comments().getCount();
13.             
14.             alert(title + " 有 " + count + "条评论 ");
15.         });
16.         
17.         // 对于连续的方法链也是支持的
18.         var message = user.posts().last().comments().last().get('message');
19.         alert("最后的评论：" + message);
20.     }
21. });