extJS 中 ext.data 介紹

標籤：des   style   blog   http   java   color   

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處理

 

 

 

 

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類型，如下面的代碼所示。

varPersonRecord=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]];varstore=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