ExtJS的使用方法匯總(7)——資料存放區與傳輸

文章目錄

• 一、Ext.data.Connection
• 二、Ext.data.Record
• 三、Ext.data.Store
• 四、小結

Ext.data在命名空間中定義了一系列store、reader和proxy。Grid和ComboxBox都是以Ext.data為媒介擷取資料的，它包含非同步載入、類型轉換、分頁等功能。EXT預設支援Array、JSON、XML等資料格式，可以通過Memory、HTTP、ScriptTag等方式獲得這些格式的資料。如果要實現新的協議和新的資料結構，只需要擴充reader和proxy即可。本章主要介紹EXT中的資料存放區與傳輸。

一、Ext.data.Connection

Ext.data.Connection主要用於在Ext.data.HttpProxy和Ext.data.ScriptTagProxy中執行與後台互動的任務，它會從指定的URL獲得資料,並把後台返回的資料交給HttpProxy或ScriptTagProxy處理，Ext.data.Connection的使用方式如下面所示：

(1) 首先建立一個新的Ext.data.Connection執行個體。

var conn=new Ext.data.Connection({<br /> autoAbort:false,<br /> defaultHeaders:{<br /> referer:'http://www.sina.com.cn'<br /> },<br /> disableCaching:false,<br /> extraParams:{<br /> name:'name'<br /> },<br /> method:'GET',<br /> timeout:300,<br /> url:'01-01.txt'<br /> });

(2) 在建立conn之後，可以調用request()函數發送請求，處理返回的結果。

conn.request({<br /> success:function(response){<br /> Ext.Msg.alert('info',response.responseText);<br /> },<br /> failure:function(){<br /> Ext.Msg.alert('warn','failure');<br /> }<br /> });  

(3) Ext.data.Connection還提供了abort([Number transactionId])函數，當同時有多個請求發生時，根據指定的事務id放棄其中的某一個請求，如果不指定id,則會放棄最後一個請求。

二、Ext.data.Record

Ext.data.Record就是一個設定了內部資料類型的對象，它是Ext.data.Store的最基本組成部分。Ext.data.Record的主要功能是儲存資料，並且在內部資料發生改變時記錄修改的狀態，它還可以保留修改之前的原始值。

(1) 我們使用Ext.data.Record時，通常都是由create()函數開始,首先用create()函數建立一個自訂的Recore類型，如下所示：

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

(2) PersonRecord就是我們定義的新類型，然後我們使用new關鍵字建立PersonRecord的執行個體：

var boy=new PersonRecord({<br /> name:'boy',<br /> sex:0<br /> });

(3) 現在，我們得到了PersonRecord的執行個體boy，如何得到它的屬性值？以下有三種方法：

alert(boy.data.name);<br />alert(boy.data['name']);<br />alert(boy.get['name']);

三、Ext.data.Store

Ext.data.Store是EXT中用來進行資料交換和資料互動的標準中介軟體，無論是Grid還是ComBox，都是通過它實現資料讀取、類型轉換、排序分列和搜尋等操作。Ext.data.Store中有一個Ext.data.Record數組，所有資料都存放在這些Ext.data.Record執行個體中，為後面的讀取和修改操作做準備。

(1) 在使用之前，首先要建立一個Ext.data.Store的執行個體，如下面代碼：

var data=[<br /> ['boy',0],<br /> ['girl',1]<br /> ];<br /> var store=new Ext.data.Store({<br /> proxy:new Ext.data.MemoryProxy(data),<br /> reader:new Ext.data.ArrayReader({},PersonRecord)<br /> });<br /> store.load();

(2) 每個store最少需要兩個組件的支援，分別是proxy和reader，proxy是用於從某個途徑讀取未經處理資料，reader用於將未經處理資料轉換成Record執行個體。

四、小結

本章主要詳細介紹了Ext.data.Record和Ext.data.Store的功能和基本使用方法，這兩個類結合起來形成了Ext.data中的主體資料模型，很多組件都是建立在它們之上的，至於其他的常用的proxy,reader,store:SimpleStore和JsonStore則在後面學習中給出詳細介紹。