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

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

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

3、的數(shù)據(jù)。都可以通過該接口來統(tǒng)一操作。這樣就為組件的數(shù)據(jù)操作提供了極大的方便。 Ext的data處理分成三部分，store是統(tǒng)一對組件或開發(fā)的接口，它的數(shù)據(jù)是通過proxy從服務器端（包含跨域）或本地的客戶瀏覽器中獲取原始數(shù)據(jù)。從原始數(shù)據(jù)到store的統(tǒng)一格式的中間還有一步，那就是對于不同的形式的原始數(shù)據(jù)(xml,json等)進行去解析。Reader就是完成解析功能。 通過代理，分析，儲存三步，呈現(xiàn)給開發(fā)者的數(shù)據(jù)就如數(shù)據(jù)庫儲存的二維表的結(jié)構(gòu)數(shù)據(jù)一樣。有著排序，統(tǒng)計、查詢，更新的功能。完全可以把store看成一個客戶端的臨時數(shù)據(jù)庫。這就是組件對數(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對象的值信息， 并且方便任何透過Ext.data.Store來訪問Records緩存之信息的代碼 數(shù)據(jù)篇-ExtJs中的Record、Reader詳解類類Ext.data.DataReader 包： Ext.data 定義的文件： DataReader.js 類全稱： Ext.data.DataRead

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

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

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

8、得的雜亂信息轉(zhuǎn)換成ExtJS中的記錄集Record數(shù)據(jù)對象，并存儲到Store里面的記錄集數(shù)組中。數(shù)據(jù)解析器的基類由Ext.data.DataReader定義，其它具體的數(shù)據(jù)解析器都是該類的子類，ExtJS中提供了讀取二維數(shù)組、JSon數(shù)據(jù)及Xml文檔的三種數(shù)據(jù)解析器，分別用于把內(nèi)存中的二級數(shù)組、JSON格式的數(shù)據(jù)及XML文檔信息解析成記錄集。 數(shù)據(jù)篇-ExtJs中的Record、Reader詳解1）ArrayReaderExt.data.ArrayReader數(shù)組解析器，用于讀取二維數(shù)組中的信息，并轉(zhuǎn)換成記錄集Record對象。首先看下面的代碼：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, 測試, 小王,3, 2, 新年好, williamraym,13 2）JsonReaderExt.data.JsonReaderJson數(shù)據(jù)解析器，用于讀取

10、JSON格式的數(shù)據(jù)信息，并轉(zhuǎn)換成記錄集Record對象?？聪旅媸褂肑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: 測試, author: 小王, loginTimes: 3 , id: 2, title: Ben, author: williamraym, loginTimes:13 JSonReader還有比較特殊的用法，就是可以把Store中記錄集的配置信息存放直接保存在從服務器端返回的JSON數(shù)據(jù)中，比如下面的例子：var myReader = new Ext.data.JsonReader(); 數(shù)據(jù)篇-ExtJs中的Record、Reader詳解這一個不帶任何參數(shù)的myReader，可以處理從服務器端返回的下

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: 測試, 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對象。看下面的代碼：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 測試 小王 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(); /加載所有國家 數(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(