extjs DataReader、JsonReader、XmlReader的构造方法

ExtJS提供了三种数据读取器（DataReader）：JsonReader、XmlReader、ArrayReader。其中JsonReader与XmlReader是最常用的两种，它们可以将Json和Xml数据解析成ExtJS中的数据集合（store）.

DataReader是一种工具，用于将来自服务器的响应数据解析成更易于在ExtJS中使用的格式。各个类型的数据读取器，其构造方法参数不完全相同。下面分别介绍三种数据读取器的构造方法。

JsonReader

构造方法

Ext.create('Ext.data.JsonReader', {
    type: 'json',   // 告知reader,传入的数据是json格式的
    rootProperty: 'users',   // 定义json数据位置
    fields: ['name', 'email']   // 表示数据列
});

JsonReader是将Json数据转换成ExtJS可以使用的数据格式。构造方法参数说明：

• type：数据类型，此处为json；

• rootProperty：从响应数据中读取数据的根属性名称，例如取下面这个例子的users属性；

• fields：列的定义，定义了从服务器传回的json数据数组中要读取的列名和ExtJS store定义时的数据列名字一一对应。

接下来看一个实际例子：

Ext.create('Ext.data.JsonReader', {
    type: 'json',
    rootProperty: 'users',
    fields: ['name', 'age', 'email']
});

// 假设后端传回的Json响应数据格式如下：
{
    "total": 2,
    "users": [{
            "name": "Tom",
            "age": "18",
            "email": "[e-mail]"
        },
        {
            "name": "Jerry",
            "age": "20",
            "email": "[e-mail]"
        }
    ]
}

XmlReader

构造方法

Ext.create('Ext.data.XmlReader', {
    type: 'xml',  // 告知reader,传入的数据是xml格式的
    record: 'book',   // 定义数据集合位置
    fields: [   // 定义读取的数据列
        {
            name: 'id',
            mapping: 'book > id'
        }, {
            name: 'title',
            mapping: 'book > title'
        }, {
            name: 'author',
            mapping: 'author'
        }
    ]
});

XmlReader是将Xml数据转换成ExtJS可以使用的数据格式。构造方法参数说明：

• type：数据类型，此处为xml；

• record：从响应数据中读取数据的根节点，例如取下面这个例子的book节点；

• fields：列的定义，通过name定义将会在ExtJS store定义时使用的列名字，mapping定义用于从服务器传回的xml数据中读取数据的XPATH。

接下来看一个实际例子：

Ext.create('Ext.data.XmlReader', {
    type: 'xml',
    record: 'book',
    fields: [
        {
            name: 'id',
            mapping: 'book > id'
        }, {
            name: 'title',
            mapping: 'book > title'
        }, {
            name: 'author',
            mapping: 'author'
        }
    ]
});

// 后端传回的Xml响应数据如下：
<?xml version="1.0" encoding="UTF-8"?>
<root>
    <book>
        <id>1</id>
        <title>ExtJS入门教程</title>
        <author>张三</author>
    </book>
    <book>
        <id>2</id>
        <title>ExtJS高级教程</title>
        <author>李四</author>
    </book>
</root>

DataReader

除了JsonReader和XmlReader，ExtJS还提供了一个更灵活的DataReader类型，可以在处理更为特殊的数据源时使用。ArrayReader继承于DataReader，它可以将数组类型的数据转换成数据集合。

构造方法

Ext.create('Ext.data.ArrayReader', {
    fields: ['name', 'email']
});

ArrayReader的构造方法参数比较简单，只有一个fields参数。fields表示要读取的数据列名，每个数据列使用一个字符串表示。

接下来看一个实际例子：

Ext.create('Ext.data.ArrayReader', {
    fields: ['name', 'email']
});

// 假设后端传回的数据格式如下：
[
    ["John", "[e-mail]"],
    ["Smith", "[e-mail]"]
]

以上是ExtJS三种数据读取器的构造方法的完整攻略，希望对你有所帮助。