预览ExtJS 4.0的新功能（四）：焕然一新的Store/Proxy

焕然一新的Store/Proxy

转载请注明出处Ext中文网 （http://www.ajaxjs.com） 。

上期讲到，Ext JS4 可以允许我们定义业务模型之间的关系（Association），在浏览器客户端就可以描述我们的业务模型如何，甚至灵活调用域对象（Domain Object）也不是一件难事。可是如果没用实体数据，业务模型也只是“空壳”，缺了内容也不存在什么“UI 数据绑定”一说。当然，Ext 中，我们可以为 Model 调入与之 Schmea 匹配的数据的，关键问题是怎么去做？明显，浏览器客户端决不可能自己出现实体数据，却还是由服务端或者 LocalStorage 中得到数据，浏览器或客户端内存就是”数据的中转站“，——这点很好理解。Ext 中约定，准备好原始数据之后，Proxy 对象负责把到手的实体数据填充到 Model 之中……至于 Proxy，老早就有，我们并不陌生，只是以前 Proxy 直接与 Store 打交道，而现在由于有 Model 的出现，于是向 Model 交互则不需要向 Store 进行处理。但 Store 并不是消失了，而是内部透过 API 自动创建， Store 依然存在。我们可以这样认为，由于有 Model 的介入和 Proxy 的重新协调，两者结果使得 Store 的角色愈加明确，可以说 Store 作为数据内容存放地方的意味更加明显，简单说，相当于数据仓库。

相对于旧版 Ext（3.0/2.0/1.0），值得一说的便是 Record，它比较单一，不过为了对比前后差异，我们贴出旧 Record 图对比如下。以前创建 Store 的工作主要是围绕Proxy/Reader 而创建的，可以说 Proxy/Reader 正是 Store 所依赖的对象，其中内容有定义数据层的如何获取，怎么解析等等……

4.0中加入 Model。如下面的略图，简单说明了 Model 组成部分，新版内容是蓝色标记的。上期已经为大家介绍过，如今剩下还有 Store 和 Proxy……

上图第二个 Data 就是 Store了——就以 Store 的介绍开始本文的历程！

Store

Model 是数据模型，Store 则是数据的容器。从数据库的角度讲，Store 类封装了一个客户端的记录对象的缓存，为诸如 GridPanel、Tree 和 DataView等 UI 组件提供了数据的入口。4.0 的 Store 简化了许多，显得很清爽，呵呵，这固之然为表面所折射出来的感觉，然而我认为这是 Proxy、Reader/Writer 更细颗粒的职责分工下以及引入 Model 后必然带来的结果。更严格地说，Store 在 Ext 4 中被称作“Ext.data.AbstractStore”，代表抽象的 Store 负责和 Proxy 和 Reader 耦合，却没有任何的实体数据的存储 representation。也就是说  AbstractStore 只是各对象之间耦合的一些共性内容，如真正的数据区域是根据不同组件而不同的，如一般 Store 就是 Ext.util.MixedCollection，而 Tree 组件就是 Ext.data.Tree。

以最常用的 JsonStore 为例子，一般用法如下：

Edit 2011-9-22 示例代码可能与最新版本的 Ext Model 有区别，但不影响主干意思——感谢 Thanks to QiuQiu/太阳。

[javascript]  view plain copy

1. var store = new Ext.data.JsonStore({  
2.     // store configs  
3.     autoDestroy: true,  
4.     storeId: 'myStore'  
5.       
6.     proxy: {  
7.         type: 'ajax',  
8.         url: 'get-images.php',  
9.         reader: {  
10.             type: 'json',  
11.             root: 'images',  
12.             idProperty: 'name'  
13.         }  
14.     },  
15.       
16.     // 可选的，也可以指定Model名称  
17.     fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]  
18. });  

样本数据如下：

[javascript]  view plain copy

1. {  
2.     images: [  
3.         {name: 'Image one', url:'/GetImage.php?id=1', size:46.5, lastmod: new Date(2007, 10, 29)},  
4.         {name: 'Image Two', url:'/GetImage.php?id=2', size:43.2, lastmod: new Date(2007, 10, 30)}  
5.     ]  
6. }  

我们可以通过 API 来直接了解新的 Store 构造，首先是 Store 的配置项：

针对排序和数据筛选的问题，Ext 提供了 sort 和 filter 对象来解决。下面的方法有相关 sort/fitler 的方法说明：

Ext.data.AbstractStore 继承于 Ext.util.Observable，它利用观察者来广播消息（pub/sub），达到与其他组件通讯的目的。Store 事件如下：

至于分页方面，Ext 4没有变化，依然通过 Store 来实现控制。

 

请继续，Proxy 介绍。

转载请注明出处Ext中文网 （http://www.ajaxjs.com）。