10.6 常用Reader
1. ArrayReader
2. JsonReader
3. XmlReader
10.6.1 ArrayReader
從proxy中讀取的數據需要進行解析，這些數據轉換成Record數組後才能提供給Ext.data.Store使用。
ArrayReader的作用是從二維數組裏依次讀取數據，然後生成對應的Record。默認情況下是按列順序讀取數組中的數據，不過你也可以考慮用mapping指定record與原始數組對應的列號。ArrayReader的用法很簡單，但缺點是不支持分頁。使用二維數組的方式如下面的代碼所示:
var data = [
['id1','name1','descn1'],
['id2','name2','descn2']
];
對應的ArrayReader如下面的代碼所示。
var reader = new Ext.data.ArrayReader({
id:1
},[
{name:'name',mapping:1},
{name:'descn',mapping:2},
{name:'id',mapping:0},
]);
我們演示的是字段順序不一致的情況，如果字段順序和列順序一致，就不用額外配置mapping。
10.6.2 JsonReader
在JavaScript中，JSON是一種非常重要的數據格式，key:value的形式比XML那種複雜的標籤結構更容易理解，代碼量也更小，很多人傾向於使用它作爲EXT的數據交換格式。爲JsonReader準備的JSON數據如下面的代碼所示:
var data = {
id:0,
totalProperty:2,
successProperty:true,
root:[
{id:'id1',name:'name1',descn:'descn1'},
{id:'id2',name:'name2',descn:'descn2'}
]
};
與數組相比，JSON的最大優點就是支持分頁，我們可以使用totalProperty參數表示數據的總量。successProperty參數是可選的，可以用它判斷當前請求是否執行成功，進而判斷是否進行數據加載。在不希望JsonReader處理響應數據時，可以把successProperty設置成false。
現在來討論一下JsonReader，看看它是如何與上面的JSON數據對應的，如下面的代碼所示。
var reader = new Ext.data.JsonReader({
successProperty: "successproperty",
totalProperty: "totalProperty",
root: "root",
id: "id"
}, [
{name:'id',mapping:'id'},
{name:'name',mapping:'name'},
{name:'descn',mapping:'descn'}
]);
上例中的對應方式不夠簡潔，因爲name和mapping部分的內容是相同的，其實這裏的mapping可以省略，默認會用name參數從JSON中獲得對應的數據。如果不想與JSON裏的名字一樣，也可以使用mapping修改。不過，mapping在這裏還有其他用途，如代碼清單10-3所示:
代碼清單10-3 爲JsonReader設置mapping進行數據映射
var data = {
id:0,
totalProperty:2,
successProperty:true,
root:[
{id:'id1',name:'name1',descn:'descn1',person:{
id:1,name:'man',sex:'male'
}},
{id:'id2',name:'name2',descn:'descn2',person:{
id:2,name:'woman',sex:'female'
}}
] };
var reader = new Ext.data.JsonReader({
successProperty: "successproperty",
totalProperty: "totalProperty",
root: "root",
id: "id"
}, [
'id','name','descn',
{name:'person_name',mapping:'person.name'},
{name:'person_sex',mapping:'person.sex'}
]);
在上面的代碼中，我們使用JSON支持更復雜的嵌套結構，其中的person對象自身就擁有id、name和sex等屬性。在JsonReader中可以用mapping把這些嵌套的內部屬性映射出來，賦予對應的record，而其他字段都不變。
10.6.3 XmlReader
XML是非常通用的數據傳輸格式，XmlReader使用的XML格式的數據如代碼清單10-4所示。
代碼清單10-4 XmlReader使用的XML格式的數據
<?xml version="1.0" encoding="utf-8"?>
<dataset>
<id>1</id>
<totalRecords>2</totalRecords>
<success>true</success>
<record>
<id>1</id>
<name>name1</name>
<descn>descn1</descn>
</record>
<record>
<id>2</id>
<name>name2</name>
<descn>descn2</descn>
</record>
</dataset>
這裏一定要用dataset作爲XML根元素。再讓我們看一下如何對XmlReader進行配置，從而讀取上面示例中的XML數據，如下面的代碼所示:
var reader = new Ext.data.XmlReader({
totalRecords: 'totalRecords',
success: 'success',
record: 'record',
id: "id"
}, ['id','name','descn']);
XmlReader使用的參數與之前介紹的JsonReader有些不同，我們可以看到這裏用到了totalRecords和record兩個參數，其中totalRecords用來指定從’totalRecords’標籤裏獲得後臺數據總數，record則表示XML中放在record標籤裏的數據是我們需要顯示的結果數據。其他兩個參數success和id的含義和JsonReader中對應的參數相似，分別用來判斷操是否成功和這次返回的id。因爲XML中的標籤和reader裏需要的名字是相同的，所以簡化了配置，將
[{name:’id’},{name:’name’},{name:’descn’}]直接寫成了[‘id’,’name’,’descn’]。
因爲XmlReader不能將JavaScript中的字符串自動解析成XML格式的數據，因此我們需要利
用其他方法進行演示。參考localXHR.js中構造XML的方式，我們有了下面的解決方案，如代
碼清單10-5所示:
代碼清單10-5 通過本地字符串構造XML對象
var data = "<?xml version='1.0' encoding='utf-8'?>" +
"<dataset>" +
"<id>1</id>" +
"<totalRecords>2</totalRecords>" +
"<success>true</success>" +
"<record>" +
"<id>1</id>" +
"<name>name1</name>" +
"<descn>descn1</descn>" +
"</record>" +
"<record>" +
"<id>2</id>" +
"<name>name2</name>" +
"<descn>descn2</descn>" +
"</record>" +
"</dataset>";
var xdoc;
if(typeof(DOMParser) == 'undefined'){
xdoc = new ActiveXObject("Microsoft.XMLDOM");
xdoc.async="false";
xdoc.loadXML(data);
}else{
var domParser = new DOMParser();
xdoc = domParser.parseFromString(data, 'application/xml');
domParser = null;
}
var proxy = new Ext.data.MemoryProxy(xdoc);
var reader = new Ext.data.XmlReader({
totalRecords: 'totalRecords',
success: 'success',
record: 'record',
10.7 高級store 24513
id: "id"
}, ['id','name','descn']);
var ds = new Ext.data.Store({
proxy: proxy,
reader: reader
});