《数据篇-ExtJs中的Record、Reader详解-1.ppt》由会员分享,可在线阅读,更多相关《数据篇-ExtJs中的Record、Reader详解-1.ppt(23页珍藏版)》请在三一文库上搜索。
1、北风网项目培训,数据篇(1)-ExtJs中的Record、Reader详解-1,讲师:风舞烟,ExtJs版国讯教育通用智能OA办公平台,目录,Ext.data简介 了解Record DataReader详解 JsonReader、ArrayReader、XmlReader,Ext.data简介 Ext.data在命名空间中定义了一系列store、reader和proxy。Grid和ComboxBox都是以Ext.data为媒介获取数据的,它包含异步加载、类型转换、分页等功能。Ext.data默认支持Array、JSON、XML等数据格式,可以通过Memory、HTTP、ScriptTag等方式
2、获得这些格式的数据。如果要实现新的协议和新的数据结构,只需要扩展reader和proxy即可.,数据处理 数据处理是客户端的数据统一操作的接口。不管是从服务器返回的数据还是客户端自行生成的数据。都可以通过该接口来统一操作。这样就为组件的数据操作提供了极大的方便。 Ext的data处理分成三部分,store是统一对组件或开发的接口,它的数据是通过proxy从服务器端(包含跨域)或本地的客户浏览器中获取原始数据。从原始数据到store的统一格式的中间还有一步,那就是对于不同的形式的原始数据(xml,json等)进行去解析。Reader就是完成解析功能。 通过代理,分析,储存三步,呈现给开发者的数据
3、就如数据库储存的二维表的结构数据一样。有着排序,统计、查询,更新的功能。完全可以把store看成一个客户端的临时数据库。这就是组件对数据的操作提供巨大的方便,类Ext.data.Record 包: Ext.data 定义的文件: Record.js 类全称: Ext.data.Record 继承自于: Object Record类不但封装了Record的相关定义信息,还封装了Ext.data.Store里面所使用的Recrod对象的值信息, 并且方便任何透过Ext.data.Store来访问Records缓存之信息的代码,类Ext.data.DataReader 包: Ext.data 定义的
4、文件: DataReader.js 类全称: Ext.data.DataReader 继承自于: Object 用于读取结构化数据(来自数据源)然后转换为Ext.data.Record对象集合和元数据Ext.data.Store这二者合成的对象。这个类应用于被扩展而最好不要直接使用。 从DataReader派生下来的有:ArrayReader|JsonReader|XmlReader,类Ext.data.Store 包: Ext.data 定义的文件: Store.js 类全称: Ext.data.Store 继承自于: Ext.util.Observable Store类封装了一个客户端的R
5、ecord对象的缓存, 为诸如GridPanel、ComboBox和DataView等的小部件提供了数据的入口。 Store对象使用一个DataProxy的实现来访问数据对象,该Proxy对象在configured定义。不过你可以调用loadData直接地把数据对象传入你的数据。 在DataReader实现的帮助下,从该类提供的数据对象来创建Record实例。你可在configured指定这个DataReader对象。这些records都被缓存的并且通过访问器函数可利用到。 Store下的子类有: JsonStore、ArrayStore、XmlStore,了解Record 首先需要明确是,E
6、xtJS中有一个名为Record的类,表格等控件中使用的数据是存放在Record对象中,一个Record可以理解为关系数据表中的一行,也可以称为记录。Record对象中即包含了记录(行中各列)的定义信息(也就是该记录包含哪些字段,每一个字段的数据类型等),同时又包含了记录具体的数据信息(也就是各个字段的值)。,我们来看直接使用Record的代码:,DataReader详解 DataReader表示数据读取器,也就是数据解析器,其负责把从服务器或者内存数组、xml文档中获得的杂乱信息转换成ExtJS中的记录集Record数据对象,并存储到Store里面的记录集数组中。 数据解析器的基类由Ext.
7、data.DataReader定义,其它具体的数据解析器都是该类的子类,ExtJS中提供了读取二维数组、JSon数据及Xml文档的三种数据解析器,分别用于把内存中的二级数组、JSON格式的数据及XML文档信息解析成记录集。,1)ArrayReader Ext.data.ArrayReader数组解析器,用于读取二维数组中的信息,并转换成记录集Record对象。首先看下面的代码: var MyRecord = Ext.data.Record.create( name: title, mapping:1, name: username, mapping:2, name: loginTimes, m
8、apping:3,type:int ); var myReader = new Ext.data.ArrayReader( id: 0 , MyRecord);,这里定义的myReader可以读取下面的二维数组: 1, 测试, 小王,3, 2, 新年好, williamraym,13 2)JsonReader Ext.data.JsonReaderJson数据解析器,用于读取JSON格式的数据信息,并转换成记录集Record对象。看下面使用JsonReader的代码 var MyRecord = Ext.data.Record.create( name: title, name: userna
9、me, mapping: author, name: loginTimes, type: int ); var myReader = new Ext.data.JsonReader ( totalProperty: “results“, root: “rows“, id: “id“ , MyRecord );,这里的JsonReader可以解析下面的JSON数据: results: 2, rows: id: 1, title: 测试, author: 小王, loginTimes: 3 , id: 2, title: Ben, author: williamraym, loginTimes:1
10、3 JSonReader还有比较特殊的用法,就是可以把Store中记录集的配置信息存放直接保存在从服务器端返回的JSON数据中,比如下面的例子: var myReader = new Ext.data.JsonReader();,这一个不带任何参数的myReader,可以处理从服务器端返回的下面JSON数据: metaData: totalProperty: results, root: rows, id: id, fields: name: title, name: username, mapping: author, name: loginTimes, type: int , result
11、s: 2, rows: id: 1, title: 测试, author: 小王, loginTimes: 3 , id: 2, title: 新年好, author: williamraym, loginTimes:13 ,3)XmlReader Ext.data.XmlReaderXML文档数据解析器,用于把XML文档数据转换成记录集Record对象。看下面的代码: var MyRecord = Ext.data.Record.create( name: title, name: username, mapping: author, name: loginTimes, type: int
12、); var myReader = new Ext.data.XmlReader( totalRecords: “results“, record: “rows“, id: “id“ , MyRecord);,上面的myReader能够解析下面的xml文档信息: 2 1 测试 小王 3 2 新年好 williamraym 13 ,再如如下 xml: 001 001001 合肥 巢湖 芜湖 , 002 002001 aaa bbb ccc ,例如: var store1 = new Ext.data.Store( url: city.xml, reader: new Ext.data.XmlRe
13、ader( 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); var data = ; _store.each(function(item) data.push(Ext.util.JSON.encode(item.data); ); alert(d
14、ata); ); store1.load(); /加载所有国家,var store2 = new Ext.data.Store( url: “city.xml“, reader: new Ext.data.XmlReader( record: countryname=China province , name: p, mapping: pid) ); store2.on(“load“, function(_store) /alert(_store.getCount(); /alert(_store.getAt(1).get(“country“); _store.each(function(it
15、em) alert(Ext.util.JSON.encode(item.data); ); ); store2.load(); /加载省份,var store3 = new Ext.data.Store( url: “city.xml“, reader: new Ext.data.XmlReader( record: countryname=China provincename=“安徽“ city , name: cityname) ); store3.on(“load“, function(_store) /alert(_store.getCount(); /alert(_store.getAt(1).get(“country“); var data = ; _store.each(function(item) data.push(Ext.util.JSON.encode(item.data); ); alert(data); ); store3.load(); /加载城市,总结,Ext.data简介 了解Record DataReader详解 JsonReader、ArrayReader、XmlReader,本课程版权归北风网所有,欢迎访问我们的官方网站 ,
链接地址:https://www.31doc.com/p-2157053.html