ExtJS 4 数据包的演示例子

在这份演示中（如下图），我们向大家透露了数据包崭新的功能有哪些。假设例子是个简单的博客程序，博客的模型有用户User ，帖子Post 及评论Comment 。例子依赖服务器的远程调用须要部署在一个服务器上，静态的文件服务器即可。

• 进入在线演示：http://playen.ajaxjs.com/playen/ext/DataDemo/index.html
• 下载：http://playen.ajaxjs.com/playen/ext/DataDemo/DataDemo.zip

1.创建一个模型的实例

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

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

2. 加载数据到Store容器

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

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

3. 使用关联定义关系和隐式加载

关联（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的路径。

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

欢迎大家打开例子看看！