Extjs中的数据存储（Stroe）

8.1
、Record
在前面的表格应用中，我们已经知道表格的数据是存放类型为Store 的数据存储器中，
通过指定表格Grid 的store 属性来设置表格中显示的数据，通过调用store 的load 或reload
方法可以重新加载表格中的数据。ExtJS 中用来定义控件中使用数据的API 位于Ext.dd 命名
空间中，本章我们重点对ExtJS 中的数据存储Store 进行介绍。
１、Record
首先需要明确是，ExtJS 中有一个名为Record 的类，表格等控件中使用的数据是存放在
Record 对象中，一个Record 可以理解为关系数据表中的一行，也可以称为记录。Record 对
象中即包含了记录（行中各列）的定义信息（也就是该记录包含哪些字段，每一个字段的数
据类型等），同时又包含了记录具体的数据信息（也就是各个字段的值）。
我们来看直接使用Record 的代码：
failure: fFn,
params: { name: '小李',email: ' xiaoli@easyjf.com',bornDate: ' 1992-5-6',sex: '男'}
});
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);
ExtJS 实用简明教程[收集整理:龚辟愚、QQ 群：19274175]
- 54 -
首先使用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 打交道，直接通过store
来获得控件中需要展现的数据等。一个Store 包含多个Record，同时Store 又包含了数据来
源，数据解析器等相关信息，Store 通过调用具体的数据解析器(DataReader)来解析指定类型
或格式的数据(DataProxy)，并转换成记录集的形式保存在Store 中，作为其它控件的数据输
入。
数据存储器由Ext.data.Store 类定义，一个完整的数据存储器要知道数据源(DataProxy)
及数据解析方式(DataReader)才能工作，在Ext.data.Store 类中数据源由proxy 配置属性定义、
数据解析（读取）器由reader 配置属性定义，一个较为按部就班创建Store 的代码如下：
alert(r.get("loginTimes"));
});
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
});
ExtJS 实用简明教程[收集整理:龚辟愚、QQ 群：19274175]
- 55 -
当然，这样的难免代码较多，Store 中本身提供了一些快捷创建Store 的方式，比如上面
的示例代码中可以不用先创建一个HttpProxy，只需要在创建Store 的时候指定一个url 配置
参数，就会自动使用HttpProxy 来加载参数。比如，上面的代码可以简化成：
虽然不再需要手动创建HttpProxy 了，但是仍然需要创建DataReader 等，毕竟还是复杂，
ExtJS 进一步把这种常用的数据存储器进行了封装，在Store 类的基础上提供了SimpleStore、
SimpleStore、GroupingStore 等，直接使用SimpleStore，则上面的代码可以进一步简化成下
面的内容：
store.load();
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:"link.ejf",
proxy:dataProxy,
reader:theReader
});
store.load();
var store=new Ext.data.JSonStore({
url:"link.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();
ExtJS 实用简明教程[收集整理:龚辟愚、QQ 群：19274175]
- 56 -
8.3
、DataReader
DataReader 表示数据读取器，也就是数据解析器，其负责把从服务器或者内存数组、xml
文档中获得的杂乱信息转换成ExtJS 中的记录集Record 数据对象，并存储到Store 里面的记
录集数组中。
数据解析器的基类由Ext.data.DataReader定义，其它具体的数据解析器都是该类的子类，
ExtJS 中提供了读取二维数组、JSon 数据及Xml 文档的三种数据解析器，分别用于把内存
中的二级数组、JSON 格式的数据及XML 文档信息解析成记录集。下面简单的介绍：
1
）ArrayReader
Ext.data.ArrayReader－数组解析器，用于读取二维数组中的信息，并转换成记录集Record
对象。首先看下面的代码：
这里定义的myReader 可以读取下面的二维数组：
2
）JsonReader
Ext.data.JsonReader－Json 数据解析器，用于读取JSON 格式的数据信息，并转换成记
录集Record 对象。看下面使用JsonReader 的代码：
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);
[ [1, '测试', '小王',3], [2, '新年好', 'williamraym',13] ]
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);
ExtJS 实用简明教程[收集整理:龚辟愚、QQ 群：19274175]
- 57 -
这里的JsonReader 可以解析下面的JSON 数据：
JSonReader 还有比较特殊的用法，就是可以把Store 中记录集的配置信息存放直接保存
在从服务器端返回的JSON 数据中，比如下面的例子：
这一个不带任何参数的myReader，可以处理从服务器端返回的下面JSON 数据：
3
）XmlReader
Ext.data.XmlReader－XML 文档数据解析器，用于把XML 文档数据转换成记录集Record
对象。看下面的代码：
{ 'results': 2, 'rows': [
{ id: 1, title: '测试', author: '小王', loginTimes: 3 },
{ id: 2, title: 'Ben', author: 'williamraym', loginTimes:13} ]
}
var myReader = new Ext.data.JsonReader();
{
'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}]
}
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);
ExtJS 实用简明教程[收集整理:龚辟愚、QQ 群：19274175]
- 58 -
上面的myReader 能够解析下面的xml 文档信息：
8.4
、DataProxy
与自定义Stroe
DataProxy 字面解释就是数据代理，也可以理解为数据源，也即从哪儿或如何得到需要
交给DataReader 解析的数据。数据代理（源）基类由Ext.data.DataProxy 定义，在DataProxy
的基础，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.MemoryProxy ， 也不能直接使用
Ext.data.HttpProxy，当然更不需要Ext.data.ScriptTagProxy，这时候就需要创建自定义的
DataProxy 及Store，然后使用这个自定义的Store 来实现这种基于远程脚本调用引擎的框架
<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>
ExtJS 实用简明教程[收集整理:龚辟愚、QQ 群：19274175]
- 59 -
得到数据。