Ext 常用reader

10.6　常用Reader

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的数据交换格式。为Json- Reader准备的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',

    id: "id"

}, ['id','name','descn']);

var ds = new Ext.data.Store({

    proxy: proxy,

    reader: reader

});