數(shù)據(jù)存儲(chǔ)Store
在前面的表格應(yīng)用中，我們已經(jīng)知道表格的數(shù)據(jù)是存放類型為Store 的數(shù)據(jù)存儲(chǔ)器中，通過指定表格Grid 的store 屬性來(lái)設(shè)置表格中顯示的數(shù)據(jù)，通過調(diào)用store 的load 或reload方法可以重新加載表格中的數(shù)據(jù)。ExtJS 中用來(lái)定義控件中使用數(shù)據(jù)的API 位于Ext.dd 命名空間中，本章我們重點(diǎn)對(duì)ExtJS 中的數(shù)據(jù)存儲(chǔ)Store 進(jìn)行介紹。
A:Record
首先需要明確是，ExtJS?中有一個(gè)名為Record?的類，表格等控件中使用的數(shù)據(jù)是存放在Record?對(duì)象中，一個(gè)Record?可以理解為關(guān)系數(shù)據(jù)表中的一行，也可以稱為記錄。Record對(duì)象中即包含了記錄（行中各列）的定義信息（也就是該記錄包含哪些字段，每一個(gè)字段的數(shù)據(jù)類型等），同時(shí)又包含了記錄具體的數(shù)據(jù)信息（也就是各個(gè)字段的值）。
我們來(lái)看直接使用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:"日志標(biāo)題",
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?方法創(chuàng)建一個(gè)記錄集MyRecord，MyRecord?其實(shí)是一個(gè)類，該類包含了記錄集的定義信息，可以通過MyRecord?來(lái)創(chuàng)建包含字段值的Record?對(duì)象。在上面的代碼中，最后的幾條語(yǔ)句用來(lái)輸出記錄集的相關(guān)信息，MyRecord.getField("username")
可以得到記錄中username 列的字段信息，r.get("loginTimes")可以得到記錄loginTimes 字段的值，而r.data.username 同樣能得到記錄集中username 字段的值。對(duì)Record 有了一定的了解，那么要操作記錄集中的數(shù)據(jù)就非常簡(jiǎn)單了， 比如r.set(name,value)可以設(shè)置記錄中某指定字段的值，r. dirty 可以得到當(dāng)前記錄是否有字段的值被更改過等等。
B:Store
可以理解為數(shù)據(jù)存儲(chǔ)器，可以理解為客戶端的小型數(shù)據(jù)表，提供緩存等功能。在ExtJS?中，GridPanel、ComboBox、DataView?等控件一般直接與Store?打交道，直接通過store來(lái)獲得控件中需要展現(xiàn)的數(shù)據(jù)等。一個(gè)Store?包含多個(gè)Record，同時(shí)Store?又包含了數(shù)據(jù)來(lái)源，數(shù)據(jù)解析器等相關(guān)信息，Store?通過調(diào)用具體的數(shù)據(jù)解析器(DataReader)來(lái)解析指定類型或格式的數(shù)據(jù)(DataProxy)，并轉(zhuǎn)換成記錄集的形式保存在Store?中，作為其它控件的數(shù)據(jù)輸入。
數(shù)據(jù)存儲(chǔ)器由Ext.data.Store 類定義，一個(gè)完整的數(shù)據(jù)存儲(chǔ)器要知道數(shù)據(jù)源(DataProxy)及數(shù)據(jù)解析方式(DataReader)才能工作，在Ext.data.Store 類中數(shù)據(jù)源由proxy 配置屬性定義、數(shù)據(jù)解析（讀取）器由reader 配置屬性定義，一個(gè)較為按部就班創(chuàng)建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
});
當(dāng)然，這樣的難免代碼較多，Store 中本身提供了一些快捷創(chuàng)建Store 的方式，比如上面的示例代碼中可以不用先創(chuàng)建一個(gè)HttpProxy，只需要在創(chuàng)建Store 的時(shí)候指定一個(gè)url 配置參數(shù)，就會(huì)自動(dòng)使用HttpProxy 來(lái)加載參數(shù)。比如，上面的代碼可以簡(jiǎn)化成：
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();
雖然不再需要手動(dòng)創(chuàng)建HttpProxy?了，但是仍然需要?jiǎng)?chuàng)建DataReader?等，畢竟還是復(fù)雜，ExtJS?進(jìn)一步把這種常用的數(shù)據(jù)存儲(chǔ)器進(jìn)行了封裝，在Store?類的基礎(chǔ)上提供了SimpleStore、GroupingStore?等，直接使用SimpleStore，則上面的代碼可以進(jìn)一步簡(jiǎn)化成下面的內(nèi)容：
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();
C:DataReader
表示數(shù)據(jù)讀取器，也就是數(shù)據(jù)解析器，其負(fù)責(zé)把從服務(wù)器或者內(nèi)存數(shù)組、xml文檔中獲得的雜亂信息轉(zhuǎn)換成ExtJS?中的記錄集Record?數(shù)據(jù)對(duì)象，并存儲(chǔ)到Store?里面的記錄集數(shù)組中。
數(shù)據(jù)解析器的基類由Ext.data.DataReader定義，其它具體的數(shù)據(jù)解析器都是該類的子類，ExtJS 中提供了讀取二維數(shù)組、JSon 數(shù)據(jù)及Xml 文檔的三種數(shù)據(jù)解析器，分別用于把內(nèi)存中的二級(jí)數(shù)組、JSON 格式的數(shù)據(jù)及XML 文檔信息解析成記錄集。
1）ArrayReader
Ext.data.ArrayReader－數(shù)組解析器，用于讀取二維數(shù)組中的信息，并轉(zhuǎn)換成記錄集Record對(duì)象。首先看下面的代碼：
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 可以讀取下面的二維數(shù)組：
[ [1, '測(cè)試', '小王',3], [2, '新年好', 'williamraym',13] ]
2）JsonReader
Ext.data.JsonReader－Json?數(shù)據(jù)解析器，用于讀取JSON?格式的數(shù)據(jù)信息，并轉(zhuǎn)換成記錄集Record?對(duì)象。看下面使用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 數(shù)據(jù)：
{ 'results': 2, 'rows': [
{ id: 1, title: '測(cè)試', author: '小王', loginTimes: 3 },
{ id: 2, title: 'Ben', author: 'williamraym', loginTimes:13} ]
}
JSonReader 還有比較特殊的用法，就是可以把Store 中記錄集的配置信息存放直接保存在從服務(wù)器端返回的JSON 數(shù)據(jù)中，比如下面的例子：
var myReader = new Ext.data.JsonReader();
這一個(gè)不帶任何參數(shù)的myReader，可以處理從服務(wù)器端返回的下面JSON 數(shù)據(jù)：
{
'metaData': {
totalProperty: 'results',
root: 'rows',
id: 'id',
fields: [
{name: 'title'},
{name: 'username', mapping: 'author'},
{name: 'loginTimes', type: 'int'} ]
},
'results': 2, 'rows': [
{ id: 1, title: '測(cè)試', author: '小王', loginTimes: 3 },
{ id: 2, title: '新年好', author: 'williamraym', loginTimes:13}]
}
3）XmlReader
Ext.data.XmlReader－XML?文檔數(shù)據(jù)解析器，用于把XML?文檔數(shù)據(jù)轉(zhuǎn)換成記錄集Record對(duì)象。看下面的代碼：
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>測(cè)試</ title >
<author>小王</ author >
<loginTimes>3</ loginTimes >
</row>
<row>
<id>2</id>
<title>新年好</ title >
<author> williamraym </ author >
<loginTimes>13</ loginTimes >
</row>
</topics>
?
?
DataProxy與自定義Stroe
DataProxy?字面解釋就是數(shù)據(jù)代理，也可以理解為數(shù)據(jù)源，也即從哪兒或如何得到需要交給DataReader?解析的數(shù)據(jù)。數(shù)據(jù)代理（源）基類由Ext.data.DataProxy?定義，在DataProxy的基礎(chǔ)，ExtJS?提供了Ext.data.MemoryProxy、Ext.data.HttpProxy、Ext.data.ScriptTagProxy等三個(gè)分別用于從客戶端內(nèi)存數(shù)據(jù)、Ajax?讀取服務(wù)器端的數(shù)據(jù)及從跨域服務(wù)器中讀取數(shù)據(jù)等三種實(shí)現(xiàn)。
比如像SimpleStore 等存儲(chǔ)器是直接從從客戶端的內(nèi)存數(shù)組中讀取數(shù)據(jù)，此時(shí)就可以直接使用Ext.data.MemoryProxy ， 而大多數(shù)需要從服務(wù)器端加載的數(shù)據(jù)直接使用Ext.data.HttpProxy，HttpProxy 直接使用Ext.Ajax 加載服務(wù)器的數(shù)據(jù)，由于這種請(qǐng)求是不能跨域的，所以要要讀取跨域服務(wù)器中的數(shù)據(jù)時(shí)就需要使用到Ext.data.ScriptTagProxy。
