Ext中数据读取器Ext.data.DataReader的学习

60 阅读 0 评论 40 点赞

我是靠谱客的博主风中香菇，最近开发中收集的这篇文章主要介绍Ext中数据读取器Ext.data.DataReader的学习，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1：Ext.data.DataReader

数据读取器，它是所有读取数据的基类，主要功能就是将数据代理从远程服务器或者本地数据请求返回的异构数据按照规定的数据记录类型解析成Ext Js的Record数据集类型，并且保存到store的数据集中。

在Ext Js中还提供了读取二维数组、JSON数据以及XML等读取器。

2：Ext.data.ArrayReader

ArrayReader则是读取数据的读取器，主要用来读取二维数组，然后生成对应的record，默认情况下是按列顺序读取二维数组，不过还可以考虑使用mapping指定record与原始数组对应的列号

ArrayReader(Object meta, Object recordType)中的第一个参数是指示使用哪个字段做id，第二个参数与record对象的create方法的参数一样，都有config对象数组。从proxy中读取的数据需要进行解析，这些数据转换成Record数组后才能提供给Ext.data.Store使用。

ArrayReader的用法很简单，缺点是不支持分页，代码如下：

var data = [
         {'id1', 'name1', 'descn1'},
         {'id2', 'name2', 'descn2'}
        ];
     var reader = new Ext.data.ArrayReader({
          id: 1
         }, [
            {name: 'name', mapping: 1},
            {name: 'descn', mapping: 2}, 
            {name: 'id', mapping: 0}
         ]);

3：Ext.data.JsonReader

与数组相比，json的特点是支持分页。

var jsonData = {

id: 0,

totalProperty: 2,

successProperty: true,

root: [

{id: '1', name: 'name1', descn: 'descn1'},

{id: '2', name: 'name2', descn: 'descn2'},

]

};

可以使用totalProperty参数表示数组的总量，successProperty参数是可选的，可以用它判断当前请求是否执行成功，进而判断是否进行数据加载，在不希望JsonReader处理响应数据时，可以把successProperty设置为false，代码如下：

var reader = new Ext.data.JsonReader({

successProperty: "successProperty",

totalProperty: "totalPropert",

root: "root",

id: "id"

}, [

{name: 'id', mapping: 'id'},

{name: 'name', mapping: 'name'},

{name: 'descn', mapping: 'descn'},

]);

4：Ext.data.XmlReader

它用于读取XML文件格式的数据，并把数据转换为record对象类型，在使用它时，它的配置和JsonReader是不一样的，XmlReader的配置方式是id、success、record和totalRecords，JsonReader配置方式则是id、root、successProperty、totalProperty，其中，totalRecords表示从totolRecords标签里获得后台数据的总数，record表示XML中放在record标签里要显示的数据，success用来判断操作是否成功，id为这次返回的id，因为XML中的标签和reader里需要的名字是相同的，所以简化了配置，将

[{name: 'id'},
 {name: 'name'},
 {name: 'descn'},
 ]

直接写成了：

['id', 'name', 'descn']

简单示例如下：

var Employee = Ext.data.Record.create([
   {name: 'name', mapping: 'name'},     // "mapping" property not needed if it is the same as "name"
   {name: 'occupation'}                 // This field will use "occupation" as the mapping.
]);
var myReader = new Ext.data.XmlReader({
   totalProperty: "results", // The element which contains the total dataset size (optional)
   record: "row",           // The repeated element which contains row information
   idProperty: "id"         // The element within the row that provides an ID for the record (optional)
   messageProperty: "msg"   // The element within the response that provides a user-feedback message (optional)
}, Employee);

XML文件为：

<?xml version="1.0" encoding="UTF-8"?>
<dataset>
 <results>2</results>
 <row>
   <id>1</id>
   <name>Bill</name>
   <occupation>Gardener</occupation>
 </row>
 <row>
   <id>2</id>
   <name>Ben</name>
   <occupation>Horticulturalist</occupation>
 </row>
</dataset>