6.常用Reader

常用Reader之ArrayReader从proxy中读取的数据需要进行解析，这些数据转换成Record数组后才能提供给Ext.data. Store使用。ArrayReader的作用是从二维数组里依次读取数据，然后生成对应的Record。默认情况下是按列顺序读取数组中的数据，不过你也可以考虑用mapping指定record与原始数组对应的列号。ArrayReader的用法很简单，但缺点是不支持分页。使用二维数组的方式如下面的代码所示:上例中的对应方式不够简洁，因为name和mapping部分的内容是相同的，其实这里的mapping可以省略，默认会用name参数从JSON中获得对应的数据。如果不想与JSON里的名字一样，也可以使用mapping修改。不过，mapping在这里还有其他用途，如下所示:在上面的代码中，我们使用JSON支持更复杂的嵌套结构，其中的person对象自身就拥有id、 name和sex等属性。在JsonReader中可以用mapping把这些嵌套的内部属性映射出来，赋予对应的record，而其他字段都不变。常用Reader之XmlReaderXML是非常通用的数据传输格式，XmlReader使用的XML格式的数据如下所示:这里一定要用dataset作为XML根元素。再让我们看一下如何对XmlReader进行配置，从而读取上面示例中的XML数据，如下面的代码所示: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的方式，我们有了下面的解决方案，如代码所示:
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',??????id:?"id"??
},?['id','name','descn']);?????
var?ds?=?new?Ext.data.Store({??????proxy:?proxy,??
????reader:?reader??});??