6.常用Reader

常用Reader之ArrayReader

从proxy中读取的数据需要进行解析，这些数据转换成Record数组后才能提供给Ext.data. Store使用。
ArrayReader的作用是从二维数组里依次读取数据，然后生成对应的Record。
默认情况下是按列顺序读取数组中的数据，不过你也可以考虑用mapping指定record与原始数组对应的列号。
ArrayReader的用法很简单，但缺点是不支持分页。
使用二维数组的方式如下面的代码所示:

1. var data = [  
2.     ['id1','name1','descn1'],  
3.     ['id2','name2','descn2']  
4. ];  

var data = [ ['id1','name1','descn1'], ['id2','name2','descn2'] ]; 对应的ArrayReader如下面的代码所示:

1. var reader = new Ext.data.ArrayReader({  
2.     id:1  
3. },[  
4.     {name:'name',mapping:1},  
5.     {name:'descn',mapping:2},  
6.     {name:'id',mapping:0},  
7. ]);  

var reader = new Ext.data.ArrayReader({ id:1 },[ {name:'name',mapping:1}, {name:'descn',mapping:2}, {name:'id',mapping:0}, ]); 常用Reader之JsonReader 在JavaScript中，JSON是一种非常重要的数据格式，key:value的形式比XML那种复杂的标签结构更容易理解， 代码量也更小，很多人倾向于使用它作为EXT的数据交换格式。 为Json- Reader准备的JSON数据如下面的代码所示:

1. var data = {  
2.     id:0,  
3.     totalProperty:2,  
4.     successProperty:true,  
5.     root:[  
6.         {id:'id1',name:'name1',descn:'descn1'},  
7.         {id:'id2',name:'name2',descn:'descn2'}  
8.     ]  
9. };  

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数据对应的，如下面的代码所示:

1. var reader = new Ext.data.JsonReader({  
2.     successProperty: "successproperty",  
3.     totalProperty: "totalProperty",  
4.     root: "root",  
5.     id: "id"  
6. }, [  
7.     {name:'id',mapping:'id'},  
8.     {name:'name',mapping:'name'},  
9.     {name:'descn',mapping:'descn'}  
10. ]);  

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在这里还有其他用途，如下所示:

1. var data = {  
2.     id:0,  
3.     totalProperty:2,  
4.     successProperty:true,  
5.     root:[  
6.         {id:'id1',name:'name1',descn:'descn1',person:{  
7.             id:1,name:'man',sex:'male'  
8.         }},  
9.         {id:'id2',name:'name2',descn:'descn2',person:{  
10.             id:2,name:'woman',sex:'female'  
11.         }}  
12.     ]  
13. };  
14. var reader = new Ext.data.JsonReader({  
15.     successProperty: "successproperty",  
16.     totalProperty: "totalProperty",  
17.     root: "root",  
18.     id: "id"  
19. }, [  
20.     'id','name','descn',  
21.     {name:'person_name',mapping:'person.name'},  
22.     {name:'person_sex',mapping:'person.sex'}  
23. ]);  

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，而其他字段都不变。 常用Reader之XmlReader XML是非常通用的数据传输格式，XmlReader使用的XML格式的数据如下所示:

1. <?xml version="1.0" encoding="utf-8"?>  
2. <dataset>  
3.     <id>1</id>  
4.     <totalRecords>2</totalRecords>  
5.     <success>true</success>  
6.     <record>  
7.         <id>1</id>  
8.         <name>name1</name>  
9.         <descn>descn1</descn>  
10.     </record>  
11.     <record>  
12.         <id>2</id>  
13.         <name>name2</name>  
14.         <descn>descn2</descn>  
15.     </record>  
16. </dataset>  

<?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数据， 如下面的代码所示:

1. var reader = new Ext.data.XmlReader({  
2.    totalRecords: 'totalRecords',  
3.    success: 'success'  
4.    record: 'record',  
5.    id: "id"  
6. }, ['id','name','descn']);  

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的方式，我们有了下面的解决方案，如代码所示:

1. var data = "<?xml version='1.0' encoding='utf-8'?>" +  
2.     "<dataset>" +  
3.         "<id>1</id>" +  
4.         "<totalRecords>2</totalRecords>" +  
5.         "<success>true</success>" +  
6.         "<record>" +  
7.             "<id>1</id>" +  
8.             "<name>name1</name>" +  
9.             "<descn>descn1</descn>" +  
10.         "</record>" +  
11.         "<record>" +  
12.             "<id>2</id>" +  
13.             "<name>name2</name>" +  
14.             "<descn>descn2</descn>" +  
15.         "</record>" +  
16.     "</dataset>";  
17.    
18. var xdoc;  
19.    
20. if(typeof(DOMParser) == 'undefined'){  
21.     xdoc = new ActiveXObject("Microsoft.XMLDOM");  
22.     xdoc.async="false";  
23.     xdoc.loadXML(data);  
24. }else{  
25.     var domParser = new DOMParser();  
26.     xdoc = domParser.parseFromString(data, 'application/xml');  
27.     domParser = null;  
28. }  
29.    
30. var proxy = new Ext.data.MemoryProxy(xdoc);  
31.    
32. var reader = new Ext.data.XmlReader({  
33.     totalRecords: 'totalRecords',  
34.     success: 'success',  
35.     record: 'record',  
36.     id: "id"  
37. }, ['id','name','descn']);  
38.    
39. var ds = new Ext.data.Store({  
40.     proxy: proxy,  
41.     reader: reader  
42. });