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

北風網(wǎng)工程培訓數(shù)據(jù)篇(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為媒介獲取數(shù)據(jù)的，它包含異步加載、類型轉(zhuǎn)換、分頁等功能。Ext.data默認支持Array、JSON、XML等數(shù)據(jù)格式，可以通過Memory、HTTP、ScriptTag等方式獲得這些格式的數(shù)據(jù)。如果要實現(xiàn)新的協(xié)議和新的數(shù)據(jù)結(jié)構(gòu)，只需要擴展reader和proxy即可.3整理ppt數(shù)據(jù)處理數(shù)據(jù)處理是客戶端的數(shù)據(jù)統(tǒng)一操作的接口。不管是從效勞器返回的數(shù)據(jù)還是客戶端自行生成的數(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ù)的操作提供巨大的方便4整理ppt類Ext.data.Record

包：Ext.data定義的文件：Record.js類全稱：Ext.data.Record

繼承自于：ObjectRecord類不但封裝了Record的相關(guān)定義信息，還封裝了Ext.data.Store里面所使用的Recrod對象的值信息，并且方便任何透過Ext.data.Store來訪問Records緩存之信息的代碼5整理ppt類Ext.data.DataReader包：Ext.data定義的文件：DataReader.js類全稱：Ext.data.DataReader繼承自于：Object用于讀取結(jié)構(gòu)化數(shù)據(jù)〔來自數(shù)據(jù)源〕然后轉(zhuǎn)換為Ext.data.Record對象集合和元數(shù)據(jù)Ext.data.Store這二者合成的對象。這個類應(yīng)用于被擴展而最好不要直接使用。從DataReader派生下來的有：ArrayReader|JsonReader|XmlReader6整理ppt類Ext.data.Store包：Ext.data定義的文件：Store.js類全稱：Ext.data.Store繼承自于：Ext.util.ObservableStore類封裝了一個客戶端的Record對象的緩存，為諸如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

7整理ppt了解Record首先需要明確是，ExtJS中有一個名為Record的類，表格等控件中使用的數(shù)據(jù)是存放在Record對象中，一個Record可以理解為關(guān)系數(shù)據(jù)表中的一行，也可以稱為記錄。Record對象中即包含了記錄〔行中各列〕的定義信息〔也就是該記錄包含哪些字段，每一個字段的數(shù)據(jù)類型等〕，同時又包含了記錄具體的數(shù)據(jù)信息〔也就是各個字段的值〕。8整理ppt我們來看直接使用Record的代碼：9整理pptDataReader詳解DataReader表示數(shù)據(jù)讀取器，也就是數(shù)據(jù)解析器，其負責把從效勞器或者內(nèi)存數(shù)組、xml文檔中獲得的雜亂信息轉(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文檔信息解析成記錄集。10整理ppt1〕ArrayReader

Ext.data.ArrayReader－數(shù)組解析器，用于讀取二維數(shù)組中的信息，并轉(zhuǎn)換成記錄集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可以讀取下面的二維數(shù)組：[[1,'測試','小王',3],[2,'新年好','williamraym',13]]2〕JsonReader

Ext.data.JsonReader－Json數(shù)據(jù)解析器，用于讀取JSON格式的數(shù)據(jù)信息，并轉(zhuǎn)換成記錄集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數(shù)據(jù)：{'results':2,'rows':[{id:1,title:'測試',author:'小王',loginTimes:3},{id:2,title:'Ben',author:'williamraym',loginTimes:13}]}JSonReader還有比較特殊的用法，就是可以把Store中記錄集的配置信息存放直接保存在從效勞器端返回的JSON數(shù)據(jù)中，比方下面的例子：varmyReader=newExt.data.JsonReader();13整理ppt這一個不帶任何參數(shù)的myReader，可以處理從效勞器端返回的下面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}]}14整理ppt3〕XmlReader

Ext.data.XmlReader－XML文檔數(shù)據(jù)解析器，用于把XML文檔數(shù)據(jù)轉(zhuǎn)換成記錄集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",