数据篇ExtJs中的Record、Reader详解

北风网工程培训数据篇(1)-ExtJs中的Record、Reader详解-1ExtJs版国讯教育通用智能OA办公平台1整理ppt目录Ext.data简介

了解RecordDataReader详解JsonReader、ArrayReader、XmlReader2整理pptExt.data简介Ext.data在命名空间中定义了一系列store、reader和proxy。Grid和ComboxBox都是以Ext.data为媒介获取数据的，它包含异步加载、类型转换、分页等功能。Ext.data默认支持Array、JSON、XML等数据格式，可以通过Memory、HTTP、ScriptTag等方式获得这些格式的数据。如果要实现新的协议和新的数据结构，只需要扩展reader和proxy即可.3整理ppt数据处理数据处理是客户端的数据统一操作的接口。不管是从效劳器返回的数据还是客户端自行生成的数据。都可以通过该接口来统一操作。这样就为组件的数据操作提供了极大的方便。Ext的data处理分成三局部，store是统一对组件或开发的接口，它的数据是通过proxy从效劳器端〔包含跨域〕或本地的客户浏览器中获取原始数据。从原始数据到store的统一格式的中间还有一步，那就是对于不同的形式的原始数据(xml,json等)进行去解析。Reader就是完成解析功能。通过代理，分析，储存三步，呈现给开发者的数据就如数据库储存的二维表的结构数据一样。有着排序，统计、查询，更新的功能。完全可以把store看成一个客户端的临时数据库。这就是组件对数据的操作提供巨大的方便4整理ppt类Ext.data.Record

包：Ext.data定义的文件：Record.js类全称：Ext.data.Record

继承自于：ObjectRecord类不但封装了Record的相关定义信息，还封装了Ext.data.Store里面所使用的Recrod对象的值信息，并且方便任何透过Ext.data.Store来访问Records缓存之信息的代码5整理ppt类Ext.data.DataReader包：Ext.data定义的文件：DataReader.js类全称：Ext.data.DataReader继承自于：Object用于读取结构化数据〔来自数据源〕然后转换为Ext.data.Record对象集合和元数据Ext.data.Store这二者合成的对象。这个类应用于被扩展而最好不要直接使用。从DataReader派生下来的有：ArrayReader|JsonReader|XmlReader6整理ppt类Ext.data.Store包：Ext.data定义的文件：Store.js类全称：Ext.data.Store继承自于：Ext.util.ObservableStore类封装了一个客户端的Record对象的缓存，为诸如GridPanel、ComboBox和DataView等的小部件提供了数据的入口。Store对象使用一个DataProxy的实现来访问数据对象，该Proxy对象在configured定义。不过你可以调用loadData直接地把数据对象传入你的数据。在DataReader实现的帮助下，从该类提供的数据对象来创立Record实例。你可在configured指定这个DataReader对象。这些records都被缓存的并且通过访问器函数可利用到。Store下的子类有：JsonStore、ArrayStore、XmlStore

7整理ppt了解Record首先需要明确是，ExtJS中有一个名为Record的类，表格等控件中使用的数据是存放在Record对象中，一个Record可以理解为关系数据表中的一行，也可以称为记录。Record对象中即包含了记录〔行中各列〕的定义信息〔也就是该记录包含哪些字段，每一个字段的数据类型等〕，同时又包含了记录具体的数据信息〔也就是各个字段的值〕。8整理ppt我们来看直接使用Record的代码：9整理pptDataReader详解DataReader表示数据读取器，也就是数据解析器，其负责把从效劳器或者内存数组、xml文档中获得的杂乱信息转换成ExtJS中的记录集Record数据对象，并存储到Store里面的记录集数组中。

数据解析器的基类由Ext.data.DataReader定义，其它具体的数据解析器都是该类的子类，ExtJS中提供了读取二维数组、JSon数据及Xml文档的三种数据解析器，分别用于把内存中的二级数组、JSON格式的数据及XML文档信息解析成记录集。10整理ppt1〕ArrayReader

Ext.data.ArrayReader－数组解析器，用于读取二维数组中的信息，并转换成记录集Record对象。首先看下面的代码：varMyRecord=Ext.data.Record.create([{name:'title',mapping:1},{name:'username',mapping:2},{name:'loginTimes',mapping:3,type:’int’}]);varmyReader=newExt.data.ArrayReader({id:0},MyRecord);11整理ppt这里定义的myReader可以读取下面的二维数组：[[1,'测试','小王',3],[2,'新年好','williamraym',13]]2〕JsonReader

Ext.data.JsonReader－Json数据解析器，用于读取JSON格式的数据信息，并转换成记录集Record对象。看下面使用JsonReader的代码varMyRecord=Ext.data.Record.create([{name:'title'},{name:'username',mapping:'author'},{name:'loginTimes',type:'int'}]);varmyReader=newExt.data.JsonReader({totalProperty:"results",root:"rows",id:"id"},MyRecord);12整理ppt这里的JsonReader可以解析下面的JSON数据：{'results':2,'rows':[{id:1,title:'测试',author:'小王',loginTimes:3},{id:2,title:'Ben',author:'williamraym',loginTimes:13}]}JSonReader还有比较特殊的用法，就是可以把Store中记录集的配置信息存放直接保存在从效劳器端返回的JSON数据中，比方下面的例子：varmyReader=newExt.data.JsonReader();13整理ppt这一个不带任何参数的myReader，可以处理从效劳器端返回的下面JSON数据：{'metaData':{totalProperty:'results',root:'rows',id:'id',fields:[{name:'title'},{name:'username',mapping:'author'},{name:'loginTimes',type:'int'}]},'results':2,'rows':[{id:1,title:'测试',author:'小王',loginTimes:3},{id:2,title:'新年好',author:'williamraym',loginTimes:13}]}14整理ppt3〕XmlReader

Ext.data.XmlReader－XML文档数据解析器，用于把XML文档数据转换成记录集Record对象。看下面的代码：varMyRecord=Ext.data.Record.create([{name:'title'},{name:'username',mapping:'author'},{name:'loginTimes',type:'int'}]);varmyReader=newExt.data.XmlReader({totalRecords:"results",record:"rows",id:"id"},MyRecord);15整理ppt上面的myReader能够解析下面的xml文档信息：<topics>

<results>2</results>

<row>

<id>1</id>

<title>测试</title>

<author>小王</author>

<loginTimes>3</loginTimes>

</row>

<row>

<id>2</id>

<title>新年好</title>

<author>williamraym</author>

<loginTimes>13</loginTimes>

</row>

</topics>16整理ppt再如如下xml:<?xmlversion="1.0"encoding="utf-8"?><conf><countryname="China"><cid>001</cid><provincename="安徽"><pid>001001</pid><city><cityname>合肥</cityname></city><city><cityname>巢湖</cityname></city><city><cityname>芜湖</cityname></city></province></country>17整理ppt<countryname="America"><cid>002</cid><provincename="Florida"><pid>002001</pid><city><cityname>aaa</cityname></city><city><cityname>bbb</cityname></city><city><cityname>ccc</cityname></city></province></country></conf>18整理ppt例如：

varstore1=newExt.data.Store({url:'city.xml',reader:newExt.data.XmlReader({record:'country'},[{name:'country',mapping:'cid'}])});store1.on("load",function(_store){//alert(_store.getCount());//alert(_store.getAt(1).get("country"));//alert(Ext.util.JSON.encode(_store.getAt(1).data));vardata=[];_store.each(function(item){data.push(Ext.util.JSON.encode(item.data));});alert(data);});store1.load();//加载所有国家19整理ppt

varstore2=newExt.data.Store({url:"city.xml",reader:newExt.data.XmlReader({record:'country[name=China]>province'},[{name:'p',mapping:'pid'}])});store2.on("load",function(_store){//alert(_store.getCount());//alert(_store.getAt(1).get("country"));_store.each(function(item){alert(Ext.util.JSON.encode(item.data));});});store2.load();//加载省份20整理ppt

varstore3=newExt.data.Store({url:"city.xml",