第⼋章、数据存储Stroe 第⼋章、数据存储 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 的代码：
var MyRecord = Ext.ate([
{name: 'title'},
{name: 'username', mapping: 'author'},
{name: 'loginTimes', type: 'int'},
{name: 'lastLoginTime', mapping: 'loginTime', type: 'date'}
]);
var r=new MyRecord({
title:" ⽇志标题 ",
es6字符串转数组username:"easyjf",
loginTimes:100,
loginTime:new Date()
});
Field("username").mapping);
Field("lastLoginTime").type);
alert(r.data.username);
("loginTimes"));
});
⾸先使⽤ Record 的 create ⽅法创建⼀个记录集 MyRecord ， MyRecord 其实是⼀个类，
该类包含了记录集的定义信息，可以通过 MyRecord 来创建包含字段值的 Record 对象。在
上⾯的代码中，最后的⼏条语句⽤来输出记录集的相关信息， Field("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.ate([
{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.ate([
{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();
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.ate([
{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.ate([
{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.ate([
{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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。