extJS 中 ext.data 介紹

ext.data 最主要的功能是獲取和組織數據結構,並和特定控件聯繫起來，因而，Ext.data成了數據的來源，負責顯示數據。

Ext.data在命名空間中定義了一系列store、reader和proxy。Grid和ComboxBox都是以Ext.data爲媒介獲取數據的，它包含異步加載、類型轉換、分頁等功能。

Ext.data默認支持Array、JSON、XML等數據格式，能夠經過Memory、HTTP、ScriptTag等方式得到這些格式的數據。若是要實現新的協議和新的數據結構，只須要擴展reader和proxy便可。

DWRProxy就實現了自身的proxy和reader，讓EXT能夠直接從DWR得到數據. 

DataProxy：獲取想要的數據，經過他能獲得來自不一樣地方的數據，如數組、遠程服務器，並組織成不一樣的格式。 

DataReader：定義數據項的邏輯結構，一個數據項有不少列，每列的名稱是什麼，分別是什麼數據類型，都由該類來定義。另外，還負責對不一樣格式的數據進行讀取和解析。 

Store：存儲器，用於整合 Proxy 和 Reader，控索取數據時一般和他打交道。 

 

1. Ext.data.Connection

Ext.data.Connection是對Ext.lib.Ajax的封裝，它提供了配置使用Ajax的通用方式，它在內部經過Ext.lib.Ajax實現與後臺的異步調用。與底層的Ext.lib.Ajax相比，Ext.data.Connection提供了更簡潔的配置方式，使用起來更方便。

Ext.data.Connection主要用於在Ext.data.HttpProxy和Ext.data.ScriptTagProxy中執行與後臺交互的任務，它會從指定的URL得到數據，並把後臺返回的數據交給HttpProxy或ScriptTagProxy處理。

ExtJs之因此能異步請求數據，全依賴於Ext.data.Connection.  而ExtAjax只不過是它的一個實例罷了。 

全　　稱:Ext.data.Connection
命名空間:Ext.data
定義　於:Connection.js
類　　名:Connection
子　　類:Ajax
父　　類:Observable

　　這個類封裝了到頁面所在主機的鏈接，容許經過一個配置好的URL來請求數據，也能夠臨時在請求時傳遞一個URL。

　　經過這個類得到的請求都是異步的，而且立刻返回，調用request後，它並不立刻返回數據，要處理數據，要在調用request時傳入的options對象中，配置callback或者是success、failure。這三個是回調函數。其區別將在下文具體交待。固然，你也可使用Connection的事件處理來作一些事情。

　　注意：若是你是要上傳文件，你的回調、事件處理函數將不會得到一般意義上的response對象。上傳經過IFrame來捕獲，因此就沒有XMLHttpRequest了。這時，response仍是被建立，不過，它的responseText等於IFrame的document.innerHTML，responseXML等於IFrame的document中的xml數據。固然，這個前提是它們存在的時候。

　　這意味着必面回一個合法的XML或HTML document。若是返回的是JSON數據，那麼建議你把數據放到<textarea>標記中，返回時經過正則表達式從responseText中取出來了。若是返回的是XML數據，建議放到CDATA裏面，經過標準DOM方法從responseXMl中取得數據。

  

2. Ext.data.Record

Ext.data.Record就是一個設定了內部數據類型的對象，它是Ext.data.Store的最基本組成部分。若是把Ext.data.Store看做是一張二維表，那麼它的每一行就對應一個Ext.data.Record實例。

Ext.data.Record的主要功能是保存數據，而且在內部數據發生改變時記錄修改的狀態，它還能夠保留修改以前的原始值。咱們使用Ext.data.Record時一般都是由create()函數開始，首先用create()函數建立一個自定義的Record類型，以下面的代碼所示。

var PersonRecord=Ext.data.Record.create([
　　{name:'name',type:'string'},
　　{name:'sex',type:'int'}
]);

　　PersonRecord就是咱們定義的新類型，包含字符串類型的name和整數類型的sex兩個屬性，而後咱們使用new關鍵字建立PersonRecord的實例，以下面的代碼所示。

 

3. Ext.data.Store

Ext.data.Store是EXT中用來進行數據交換和數據交互的標準中間件，不管是Grid仍是ComboBox，都是經過它實現數據讀取、類型轉換、排序分頁和搜索等操做的.

Ext.data.Store中有一個Ext.data.Record數組，全部數據都存放在這些Ext.data.Record實例中，爲後面的讀取和修改操做作準備.

在使用以前，首先要建立一個Ext.data.Store的實例，以下面的代碼所示。

var data=[['boy',0],['girl',1]];
var store=newExt.data.Store({
　　proxy:newExt.data.MemoryProxy(data),
　　reader:newExt.data.ArrayReader({},PersonRecord)
});
store.load()

每一個store最少須要兩個組件的支持，分別是proxy和reader，proxy用於從某個途徑讀取原始數據，reader用於將原始數據轉換成Record實例。

這裏咱們使用的是Ext.data.MemoryProxy和Ext.data.ArrayReader，將data數組中的數據轉換成對應的幾個PersonRecord實例，而後放入store中。store建立完畢以後，執行store.load()實現這個轉換過程。

通過轉換以後，store裏的數據就能夠提供給Grid或ComboBox使用了，這就是Ext.data.Store的最基本用法。
Ext.data.Store提供了一系列屬性和函數，利用它們對數據進行排序操做。
能夠在建立Ext.data.Store時使用sortInfo參數指定排序的字段和排序方式，以下面的代碼所示。

 

 4.Ext.data：經常使用proxy之MemoryProxy、HttpProxy、ScriptTagProxy 

Ext.data. DataProxy 就是來源這樣一種靈感。  

Ext.data.DataProxy  是獲取數據的代理，數據可能來自於內存，可能來自於同一域的遠程服務器數據，更有可能來自於不一樣域的遠程服務器數據。  

可是，在實際應用中，咱們不會直接使用  Ext.data.DataProxy，而是使用他的子類: MemoryProxy、HttpProxy 和 ScriptTagProxy，他們的做用分別是： 

 MemoryProxy：獲取來自內存的數據，能夠是數組、json 或者 xml。 

 HttpProxy：使用 HTTP 協議經過 ajax 從遠程服務器獲取數據的代理，須要指定 url。 

 ScriptTagProxy：功能和 HttpProxy 同樣，但支持跨域獲取數據，   是實現時有點偷雞摸狗。 

 

 5. Ext.data 經常使用Reader

 從proxy中讀取的數據須要進行解析，這些數據轉換成Record數組後才能提供給Ext.data.Store使用。

 

 

6.Ext.data.Store

實際開發時，並不須要每次都對proxy、reader、store這三個對象進行配置，EXT爲咱們提供了幾種可選擇的整合方案。

A:  SimpleStore = Store + MemoryProxy  + ArrayReader

var ds=Ext.data.SimpleStore({
    data:[['id1','name1','descn1'],['id2','name2','descn2']],
　　fields:['id','name','descn']
});   

SimpleStore是專爲簡化讀取本地數組而設計的，設置上MemoryProxy須要的data和ArrayReader須要的fields就可使用了。

 

B: JsonStore = Store +HttpProxy + JsonReader

var ds = Ext.data.JsonStore({
     url: 'xxx.jsp',
     root: 'root',
     fields: ['id', 'name', 'descn']    
});

JsonStore將JsonReader和HttpProxy整合在一塊兒，提供了一種從後臺讀取JSON信息的簡便方法，大多數狀況下能夠考慮直接使用它從後臺讀取數據.

 

C：Ext.data.GroupingStore對數據進行分組

Ext.data.GroupingStore繼承自Ext.data.Store，它的主要功能是能夠對內部的數據進行分組，咱們能夠在建立Ext.data.GroupingStore時指定根據某個字段進行分組，也能夠在建立實例後調用它的groupBy()函數對內部數據從新分組，以下面的代碼所示。

var ds=newExt.data.GroupingStore({
　　　　data:[['id1','name1','female','descn1'],['id2','name2','male','descn2'],['id3','name3','female','descn3'],['id4','name4','male','descn4'],['id5','name5','female','descn5']],
　　　　reader:newExt.data.ArrayReader({
　　　　　　　　fields:['id','name','sex','descn']
　　　　}),
　　　　groupField:'sex',
　　　　groupOnSort:true
});

上例中，咱們使用groupField做爲參數，爲Ext.data.Grouping設置了分組字段，另外還設置了groupOnSort參數，這個參數能夠保證只有在進行分組時纔會對Ext.data.Grouping-Store內部的數據進行排序。若是採用默認值，就須要手工指定sortInfo參數，從而指定默認的排序字段和排序方式，不然就會出現錯誤。
建立Ext.data.GroupingStore的實例以後，咱們還能夠調用groupBy()函數從新對數據進行分組。由於咱們設置了groupOnSort:true，因此在從新分組時，EXT會使用分組的字段對內部數據進行排序。若是不但願對數據進行分組，也能夠調用clearGrouping()函數清除分組信息，以下面的代碼所示。
　　ds.groupBy('id');ds.clearGrouping();

 

7. ExtAjax

ExtAjax的基本用法以下：

ExtAjax.request({
     url: '07-01.txt',
     success: function(response){
           Ext.Msg.alert("成功！", response.responseText);
     },
     failure: function(response){
           Ext.Msg.alert("失敗！", response.responseText);
     },
     params: { name : 'value'} 
});        

這裏調用的是Ext.Ajax的request函數，它的參數是一個JSON對象，具體以下所示。qurl參數表示將要訪問的後臺網址。

q   success參數表示響應成功後的回調函數。

上例中咱們直接從response取得返回的字符串，用Ext.Msg.alert顯示出來。

q   failure參數表示響應失敗後的回調函數。
注意，這裏的響應失敗並非指數據庫操做之類的業務性失敗，而是指HTTP返回404或500錯誤，請不要把HTTP響應錯誤與業務錯誤混淆在一塊兒。
q   params參數表示請求時發送到後臺的參數，既可使用JSON對象，也能夠直接使用
"name=value"形式的字符串。
上面的示例能夠在10.store/07-01.html中找到。
Ext.Ajax直接繼承自Ext.data.Connection，不一樣的是，它是一個單例，不須要用new建立實例，能夠直接使用。在使用Ext.data.Connection前須要先建立實例，由於Ext.data.Connection是爲了給Ext.data中的各類proxy提供Ajax功能，分配不一樣的實例更有利於分別管理。Ext.Ajax爲用戶提供了一個簡易的調用接口，實際使用時，能夠根據本身的須要進行選擇。

 

8. Ext.lib.Ajax  更底層的ajax封裝

其實Ext.Ajax和Ext.data.Connection的內部功能實現都是依靠Ext.lib.Ajax來完成的，在Ext.lib.Ajax下面就是各類底層庫的Ajax了。
若是使用Ext.lib.Ajax實現以上的功能，就須要寫成下面的形式，以下面的代碼所示。

Ext.lib.Ajax.request(
　　　　'POST',
　　　　'07-01txt', 
　　　　{
　　　　　　success:function(response){
　　　　　　　　　　 Ext.Msg.alert('成功',response.responseText);
　　　　　　},
　　　　　　failure:function(){ 
　　　　　　　　　　 Ext.Msg.alert('失敗',response.responseText);
　　　　　　}
       }, 
       'data='+encodeURIComponent(Ext.encode({name:'value'}))
);

咱們能夠看到，使用Ext.lib.Ajax時須要傳遞4個參數，分別爲method、url、callback和params。它們的含義與Ext.Ajax中的參數都是一一對應的，惟一沒有提到過的method參數表示請求HTTP的方法，它也能夠在Ext.Ajax中使用method:'POST'的方式設置。

 

 

來源： http://wenku.baidu.com/link?url=vA84T-2kDhlUi_DGQ5DOGs2rOCYIrfPmkXxx8rTrWF797QlIPK6m7JpjQIOcimFSwFJO3A8_Yzj97ouFB9_uz-lzS4E5iLj8fi3vCKdy-Q7