第八章 、数据存储 Stroe
8.1 、 Record
在 前面的表格应用中，我们已经知道表格的数据是存放类型为 Store 的数据存储器中，
通过指定表格 Grid 的 store 属性来设置表格中显示的数据，通过调用 store 的 load 或 reload
方法可以重新加载表格中的数据。 ExtJS 中用来定义控件中使用数据的 API 位于 Ext.dd 命 名
空间中，本章我们重点对 ExtJS 中的数据存储 Store 进行介绍。
１、 Record Record Record
首先需要明确是， ExtJS 中有一个名为 Record 的类，表格等控件中使用的数据是存放 在
Record 对象中，一个 Record 可以理解为关系数据表中的一行，也可以称为记录。 Record 对
象中即包含了记录（行中各列）的定义信息（也就是该记录包含哪些字段，每一个字段的 数
据类型等），同时又包含了记录具体的数据信息（也就是各个字段的值）。
我们来看直接使用 Record 的代码：
Ext.onReady(function(){
var MyRecord = Ext.data.Record.create([
{name: 'title'},
{name: 'username', mapping: 'author'},
{name: 'loginTimes', type: 'int'},
{name: 'lastLoginTime', mapping: 'loginTime', type: 'date'}
]);
var r=new MyRecord({
title:" 日志标题 ",
username:"easyjf",
loginTimes:100,
loginTime:new Date()
});
alert(MyRecord.getField("username").mapping);
alert(MyRecord.getField("lastLoginTime").type);
alert(r.data.username);
alert(r.get("loginTimes"));
});
首先使用 Record 的 create 方法创建一个记录集 MyRecord ， MyRecord 其实是一个类，
该类包含了记录集的定义信息，可以通过 MyRecord 来创建包含字段值的 Record 对象。在
上面的代码中，最后的几条语句用来输出记录集的相关信息， MyRecord.getField("username ")
可以得到记录中 username 列的字段信息， r.get("loginTimes") 可以得到记录 loginTimes 字段
的值，而 r.data.username 同样能得到记录集中 username 字段的值。
对 Record 有了一定的了解，那么要操作记录集中的数据就非常简单了，比如
r.set(name,value) 可以设置记录中某指定字段的值， r. dirty 可以得到当前记录是否有字段的 值
被更改过等等。
8.2、 Store
Store 可以理解为数据存储器，可以理解为客户端的小型数据表，提供缓存等功能。在
ExtJS 中， GridPanel 、 ComboBox 、 DataView 等控件一般直接与 Store 打交道，直接通过 sto re
来获得控件中需要展现的数据等。一个 Store 包含多个 Record ，同时 Store 又包含了数据来
源，数据解析器等相关信息， Store 通过调用具体的数据解析器 (DataReader) 来解析指定类 型
或格式的数据 (DataProxy) ，并转换成记录集的形式保存在 Store 中，作为其它控件的数据 输
入。
数据存储器由 Ext.data.Store 类定义，一个完整的数据存储器要知道数据源 (DataProxy)
及数据解析方式 (DataReader) 才能工作，在 Ext.data.Store 类中数据源由 proxy 配置属性定义 、
数据解析（读取）器由 reader 配置属性定义，一个较为按部就班创建 Store 的代码如下：
var MyRecord = Ext.data.Record.create([
{name: 'title'},
{name: 'username', mapping: 'author'},
{name: 'loginTimes', type: 'int'},
{name: 'lastLoginTime', mapping: 'loginTime', type: 'date'}
]);
var dataProxy=new Ext.data.HttpProxy({url:"link.ejf"});
var theReader=new Ext.data.JsonReader({
totalProperty: "results",
root: "rows",
id: "id"
},MyRecord);
var store=new Ext.data.Store({
proxy:dataProxy,
reader:theReader
});
store.load();
当然，这样的难免代码较多， Store 中本身提供了一些快捷创建 Store 的方式，比如上 面
的示例代码中可以不用先创建一个 HttpProxy ，只需要在创建 Store 的时候指定一个 url 配 置
参数，就会自动使用 HttpProxy 来加载参数。比如，上面的代码可以简化成：
var MyRecord = Ext.data.Record.create([
{name: 'title'},
{name: 'username', mapping: 'author'},
{name: 'loginTimes', type: 'int'},
{name: 'lastLoginTime', mapping: 'loginTime', type: 'date'}
]);
var theReader=new Ext.data.JsonReader({
totalProperty: "results",
root: "rows",
id: "id"
},MyRecord);
var store=new Ext.data.Store({
url:"",
proxy:dataProxy,
reader:theReader
});
store.load();
虽然不再需要手动创建 HttpProxy 了，但是仍然需要创建 DataReader 等，毕竟还是复 杂 ，
ExtJS 进一步把这种常用的数据存储器进行了封装，在 Store 类的基础上提供了 SimpleStore 、
SimpleStore 、 GroupingStore 等，直接使用 SimpleStore ，则上面的代码可以进一步简化成下
面的内容：
var store=new Ext.data.JSonStore({
url:"http://www.cnblogs.com/liu2008hz/admin/%22link.ejf?cmd=list",
totalProperty: "results",
root: "rows",
fields:['title', {name: 'username', mapping: 'author'},
{name: 'loginTimes', type: 'int'},
{name: 'lastLoginTime', mapping: 'loginTime', type: 'date'}
]
});
store.load();
8.3 、 DataReader
DataReader 表示数据读取器，也就是数据解析器，其负责把从服务器或者内存数组、 x ml
文档中获得的杂乱信息转换成 ExtJS 中的记录集 Record 数据对象，并存储到 Store 里面的 记
录集数组中。
数据解析器的基类由 Ext.data.DataReader 定义，其它具体的数据解析器都是该类的子 类 ，
ExtJS 中提供了读取二维数组、 JSon 数据及 Xml 文档的三种数据解析器，分别用于把内存
中的二级数组、 JSON 格式的数据及 XML 文档信息解析成记录集。下面简单的介绍：
1 1 1 ） ArrayReader ArrayReader ArrayReader
Ext.data.ArrayReader －数组解析器，用于读取二维数组中的信息，并转换成记录集 Record
对象。首先看下面的代码：
var MyRecord = Ext.data.Record.create([
{name: 'title', mapping:1},
{name: 'username', mapping:2},
{name: 'loginTimes', type:3}
]);
var myReader = new Ext.data.ArrayReader({
id: 0
}, MyRecord);
这里定义的 myReader 可以读取下面的二维数组：
[ [1, ' 测试 ', ' 小王 ',3], [2, ' 新年好 ', 'williamraym',13] ]
2 2 2 ） JsonReader JsonReader JsonReader
Ext.data.JsonReader － Json 数据解析器，用于读取 JSON 格式的数据信息，并转换成记
录集 Record 对象。看下面使用 JsonReader 的代码：
var MyRecord = Ext.data.Record.create([
{name: 'title'},
{name: 'username', mapping: 'author'},
{name: 'loginTimes', type: 'int'}
]);
var myReader = new Ext.data.JsonReader({
totalProperty: "results",
root: "rows",
id: "id"
}, MyRecord);
这里的 JsonReader 可以解析下面的 JSON 数据：
{ 'results': 2, 'rows': [
{ id: 1, title: ' 测试 ', author: ' 小王 ', loginTimes: 3 },
{ id: 2, title: 'Ben', author: 'williamraym', loginTimes:13} ]
}
JSonReader 还有比较特殊的用法，就是可以把 Store 中记录集的配置信息存放直接保 存
在从服务器端返回的 JSON 数据中，比如下面的例子：
var myReader = new Ext.data.JsonReader();
这一个不带任何参数的 myReader ，可以处理从服务器端返回的下面 JSON 数据：
{
'metaData': {
totalProperty: 'results',
root: 'rows',
id: 'id',
fields: [
{name: 'title'},
{name: 'username', mapping: 'author'},
{name: 'loginTimes', type: 'int'} ]
},
'results': 2, 'rows': [
{ id: 1, title: ' 测试 ', author: ' 小王 ', loginTimes: 3 },
{ id: 2, title: ' 新年好 ', author: 'williamraym', loginTimes:13}]
}
3 3 3 ） XmlReader XmlReader XmlReader
Ext.data.XmlReader － XML 文档数据解析器，用于把 XML 文档数据转换成记录集 Rec ord
对象。看下面的代码：
var MyRecord = Ext.data.Record.create([
{name: 'title'},
{name: 'username', mapping: 'author'},
{name: 'loginTimes', type: 'int'}
]);
var myReader = new Ext.data.XmlReader({
totalRecords: "results",
record: "rows",
id: "id"
}, MyRecord);
上面的 myReader 能够解析下面的 xml 文档信息：
<topics>
<results>2</results>
<row>
<id>1</id>
<title> 测试 </ title >
<author> 小王 </ author >
<loginTimes>3</ loginTimes >
</row>
<row>
<id>2</id>
<title> 新年好 </ title >
<author> williamraym </ author >
<loginTimes>13</ loginTimes >
</row>
</topics>
8.4 、 DataProxy 与自定义 Stroe
DataProxy 字面解释就是数据代理，也可以理解为数据源，也即从哪儿或如何得到需要
交给 DataReader 解析的数据。数据代理（源）基类由 Ext.data.DataProxy 定义，在 DataPro xy
的基础， ExtJS 提供了 Ext.data.MemoryProxy 、 Ext.data.HttpProxy 、 Ext.data.ScriptTagProxy
等三个分别用于从客户端内存数据、 Ajax 读取服务器端的数据及从跨域服务器中读取数据
等三种实现。
比如像 SimpleStore 等存储器是直接从从客户端的内存数组中读取数据，此时就可以直
接使用 Ext.data.MemoryProxy ，而大多数需要从服务器端加载的数据直接使用
Ext.data.HttpProxy ， HttpProxy 直接使用 Ext.Ajax 加载服务器的数据，由于这种请求是不能
跨域的，所以要要读取跨域服务器中的数据时就需要使用到 Ext.data.ScriptTagProxy 。
关于 DataProxy 的更多内容，请参考 http://wlr.easyjf.com/ 的 VIP 文档中的《 ExtJS 数据
存储 Store 详解》中的相关内容。
在实际应用中，除了基本的从内存中读取 javascript 数组对象，从服务器读取 JSON 数
组，从服务器取 xml 文档等形式的数据外，有时候还需要使用其它的数据读取方式。比如
熟悉 EasyJWeb 中远程 Web 脚本调用引擎或 DWR 等框架的都知道，通过这些框架我们可 以
直接在客户端使用 javascript 调用服务器端业务组件的方法，并把服务器端的结果返回到客
户端，客户端得到的是一个 javascript 对象或数组。由于这种方式的调用是异步的，因此，
相对来说有点特殊，即不能直接使用 Ext.data.MemoryPro xy ，也不能直接使用
Ext.data.HttpProxy ，当然更不需要 Ext.data.ScriptTagProxy ，这时候就需要创建自定义的
DataProxy 及 Store ，然后使用这个自定义的 Store 来实现这种基于远程脚本调用引擎的框架得到数据。