數(shù)據(jù)篇-ExtJs中的Record、Reader詳解課件

1、數(shù)據(jù)篇-ExtJs中的Record、Reader詳解數(shù)據(jù)篇數(shù)據(jù)篇(1)-ExtJs中的中的Record、Reader詳解詳解-1講師：風(fēng)舞煙ExtJs版版國(guó)訊教育通用智能國(guó)訊教育通用智能OA辦公平臺(tái)辦公平臺(tái)數(shù)據(jù)篇-ExtJs中的Record、Reader詳解Ext.data簡(jiǎn)介簡(jiǎn)介 了解了解RecordDataReader詳解JsonReader、ArrayReader、XmlReader數(shù)據(jù)篇-ExtJs中的Record、Reader詳解Ext.data簡(jiǎn)介 Ext.data在命名空間中定義了一系列在命名空間中定義了一系列store、reader和和proxy。Grid和和ComboxBox

2、都是以都是以Ext.data為媒為媒介獲取數(shù)據(jù)的，它包含異步加載、類型轉(zhuǎn)換、分頁(yè)介獲取數(shù)據(jù)的，它包含異步加載、類型轉(zhuǎn)換、分頁(yè)等功能。等功能。Ext.data默認(rèn)支持默認(rèn)支持Array、JSON、XML等等數(shù)據(jù)格式，可以通過(guò)數(shù)據(jù)格式，可以通過(guò)Memory、HTTP、ScriptTag等方式獲得這些格式的數(shù)據(jù)。如果要實(shí)現(xiàn)新的協(xié)議等方式獲得這些格式的數(shù)據(jù)。如果要實(shí)現(xiàn)新的協(xié)議和新的數(shù)據(jù)結(jié)構(gòu)，只需要擴(kuò)展和新的數(shù)據(jù)結(jié)構(gòu)，只需要擴(kuò)展reader和和proxy即可即可.數(shù)據(jù)篇-ExtJs中的Record、Reader詳解數(shù)據(jù)處理 數(shù)據(jù)處理是客戶端的數(shù)據(jù)統(tǒng)一操作的接口。不管是從服務(wù)器返回的數(shù)據(jù)還是客戶端自行生成

3、的數(shù)據(jù)。都可以通過(guò)該接口來(lái)統(tǒng)一操作。這樣就為組件的數(shù)據(jù)操作提供了極大的方便。 Ext的data處理分成三部分，store是統(tǒng)一對(duì)組件或開(kāi)發(fā)的接口，它的數(shù)據(jù)是通過(guò)proxy從服務(wù)器端（包含跨域）或本地的客戶瀏覽器中獲取原始數(shù)據(jù)。從原始數(shù)據(jù)到store的統(tǒng)一格式的中間還有一步，那就是對(duì)于不同的形式的原始數(shù)據(jù)(xml,json等)進(jìn)行去解析。Reader就是完成解析功能。 通過(guò)代理，分析，儲(chǔ)存三步，呈現(xiàn)給開(kāi)發(fā)者的數(shù)據(jù)就如數(shù)據(jù)庫(kù)儲(chǔ)存的二維表的結(jié)構(gòu)數(shù)據(jù)一樣。有著排序，統(tǒng)計(jì)、查詢，更新的功能。完全可以把store看成一個(gè)客戶端的臨時(shí)數(shù)據(jù)庫(kù)。這就是組件對(duì)數(shù)據(jù)的操作提供巨大的方便數(shù)據(jù)篇-ExtJs中的Reco

4、rd、Reader詳解類類Ext.data.Record 包： Ext.data 定義的文件： Record.js 類全稱： Ext.data.Record 繼承自于： Object Record類不但封裝了Record的相關(guān)定義信息，還封裝了Ext.data.Store里面所使用的Recrod對(duì)象的值信息， 并且方便任何透過(guò)Ext.data.Store來(lái)訪問(wèn)Records緩存之信息的代碼 數(shù)據(jù)篇-ExtJs中的Record、Reader詳解類類Ext.data.DataReader 包： Ext.data 定義的文件： DataReader.js 類全稱： Ext.data.DataRead

5、er 繼承自于： Object 用于讀取結(jié)構(gòu)化數(shù)據(jù)（來(lái)自數(shù)據(jù)源）然后轉(zhuǎn)換為Ext.data.Record對(duì)象集合和元數(shù)據(jù)Ext.data.Store這二者合成的對(duì)象。這個(gè)類應(yīng)用于被擴(kuò)展而最好不要直接使用。 從DataReader派生下來(lái)的有：ArrayReader|JsonReader|XmlReader數(shù)據(jù)篇-ExtJs中的Record、Reader詳解類類Ext.data.Store 包： Ext.data 定義的文件： Store.js 類全稱： Ext.data.Store 繼承自于： Ext.util.Observable Store類封裝了一個(gè)客戶端的Record對(duì)象的緩存， 為諸

6、如GridPanel、ComboBox和DataView等的小部件提供了數(shù)據(jù)的入口。 Store對(duì)象使用一個(gè)DataProxy的實(shí)現(xiàn)來(lái)訪問(wèn)數(shù)據(jù)對(duì)象，該P(yáng)roxy對(duì)象在configured定義。不過(guò)你可以調(diào)用loadData直接地把數(shù)據(jù)對(duì)象傳入你的數(shù)據(jù)。 在DataReader實(shí)現(xiàn)的幫助下，從該類提供的數(shù)據(jù)對(duì)象來(lái)創(chuàng)建Record實(shí)例。你可在configured指定這個(gè)DataReader對(duì)象。這些records都被緩存的并且通過(guò)訪問(wèn)器函數(shù)可利用到。 Store下的子類有： JsonStore、ArrayStore、XmlStore 數(shù)據(jù)篇-ExtJs中的Record、Reader詳解了解Reco

7、rd 首先需要明確是，ExtJS中有一個(gè)名為Record的類，表格等控件中使用的數(shù)據(jù)是存放在Record對(duì)象中，一個(gè)Record可以理解為關(guān)系數(shù)據(jù)表中的一行，也可以稱為記錄。Record對(duì)象中即包含了記錄（行中各列）的定義信息（也就是該記錄包含哪些字段，每一個(gè)字段的數(shù)據(jù)類型等），同時(shí)又包含了記錄具體的數(shù)據(jù)信息（也就是各個(gè)字段的值）。 數(shù)據(jù)篇-ExtJs中的Record、Reader詳解我們來(lái)看直接使用Record的代碼：數(shù)據(jù)篇-ExtJs中的Record、Reader詳解DataReader詳解 DataReader表示數(shù)據(jù)讀取器，也就是數(shù)據(jù)解析器，其負(fù)責(zé)把從服務(wù)器或者內(nèi)存數(shù)組、xml文檔中獲

8、得的雜亂信息轉(zhuǎn)換成ExtJS中的記錄集Record數(shù)據(jù)對(duì)象，并存儲(chǔ)到Store里面的記錄集數(shù)組中。數(shù)據(jù)解析器的基類由Ext.data.DataReader定義，其它具體的數(shù)據(jù)解析器都是該類的子類，ExtJS中提供了讀取二維數(shù)組、JSon數(shù)據(jù)及Xml文檔的三種數(shù)據(jù)解析器，分別用于把內(nèi)存中的二級(jí)數(shù)組、JSON格式的數(shù)據(jù)及XML文檔信息解析成記錄集。 數(shù)據(jù)篇-ExtJs中的Record、Reader詳解1）ArrayReaderExt.data.ArrayReader數(shù)組解析器，用于讀取二維數(shù)組中的信息，并轉(zhuǎn)換成記錄集Record對(duì)象。首先看下面的代碼：var MyRecord = Ext.data

9、.Record.create( name: title, mapping:1, name: username, mapping:2, name: loginTimes, mapping:3,type:int ); var myReader = new Ext.data.ArrayReader( id: 0 , MyRecord); 數(shù)據(jù)篇-ExtJs中的Record、Reader詳解這里定義的myReader可以讀取下面的二維數(shù)組： 1, 測(cè)試, 小王,3, 2, 新年好, williamraym,13 2）JsonReaderExt.data.JsonReaderJson數(shù)據(jù)解析器，用于讀取

10、JSON格式的數(shù)據(jù)信息，并轉(zhuǎn)換成記錄集Record對(duì)象?？聪旅媸褂肑sonReader的代碼var MyRecord = Ext.data.Record.create( name: title, name: username, mapping: author, name: loginTimes, type: int ); var myReader = new Ext.data.JsonReader( totalProperty: results, root: rows, id: id , MyRecord); 數(shù)據(jù)篇-ExtJs中的Record、Reader詳解這里的JsonReader可以解

11、析下面的JSON數(shù)據(jù)： results: 2, rows: id: 1, title: 測(cè)試, author: 小王, loginTimes: 3 , id: 2, title: Ben, author: williamraym, loginTimes:13 JSonReader還有比較特殊的用法，就是可以把Store中記錄集的配置信息存放直接保存在從服務(wù)器端返回的JSON數(shù)據(jù)中，比如下面的例子：var myReader = new Ext.data.JsonReader(); 數(shù)據(jù)篇-ExtJs中的Record、Reader詳解這一個(gè)不帶任何參數(shù)的myReader，可以處理從服務(wù)器端返回的下

12、面JSON數(shù)據(jù)： metaData: totalProperty: results, root: rows, id: id, fields: name: title, name: username, mapping: author, name: loginTimes, type: int , results: 2, rows: id: 1, title: 測(cè)試, author: 小王, loginTimes: 3 , id: 2, title: 新年好, author: williamraym, loginTimes:13 數(shù)據(jù)篇-ExtJs中的Record、Reader詳解3）XmlRead

13、erExt.data.XmlReaderXML文檔數(shù)據(jù)解析器，用于把XML文檔數(shù)據(jù)轉(zhuǎn)換成記錄集Record對(duì)象?？聪旅娴拇a：var MyRecord = Ext.data.Record.create( name: title, name: username, mapping: author, name: loginTimes, type: int ); var myReader = new Ext.data.XmlReader( totalRecords: results, record: rows, id: id , MyRecord); 數(shù)據(jù)篇-ExtJs中的Record、Reader詳

14、解上面的myReader能夠解析下面的xml文檔信息： 2 1 測(cè)試 小王 3 2 新年好 williamraym 13 數(shù)據(jù)篇-ExtJs中的Record、Reader詳解再如如下 xml: 001 001001 合肥 巢湖 蕪湖 數(shù)據(jù)篇-ExtJs中的Record、Reader詳解 002 002001 aaa bbb ccc 數(shù)據(jù)篇-ExtJs中的Record、Reader詳解例如： var store1 = new Ext.data.Store( url: city.xml, reader: new Ext.data.XmlReader( record: country , name:

15、 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(data); ); store1.load(); /加載所有國(guó)家 數(shù)

16、據(jù)篇-ExtJs中的Record、Reader詳解 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(item) alert(Ex

17、t.util.JSON.encode(item.data); ); ); store2.load(); /加載省份數(shù)據(jù)篇-ExtJs中的Record、Reader詳解 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(