第八章、数据存储 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 的代码如下：

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 来实现这种基于远程脚本调用引擎的框架得到数据。

posted @ 2010-10-27 15:55 liuhz 阅读(519) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

liu2008hz

第八章 、数据存储 Stroe

公告

第八章、数据存储 Stroe