Sealyu

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即可。 DWRProxy就實現(xiàn)了自身的proxy和reader，讓EXT可以直接從DWR獲得數(shù)據(jù)

Ext.data.Record就是一個設定了內(nèi)部數(shù)據(jù)類型的對象，它是Ext.data.Store的最基本組成部分。如果把Ext.data.Store看作是一張二維表，那么它的每一行就對應一個Ext.data. Record實例。

Ext.data.Record的主要功能是保存數(shù)據(jù)，并且在內(nèi)部數(shù)據(jù)發(fā)生改變時記錄修改的狀態(tài)，它還可以保留修改之前的原始值。

我們使用Ext.data.Record時通常都是由create()函數(shù)開始，首先用create()函數(shù)創(chuàng)建一個自定義的Record類型，如下面的代碼所示。

var PersonRecord = Ext.data.Record.create([

    {name: 'name', type: 'string'},

    {name: 'sex', type: 'int'}

]);

PersonRecord就是我們定義的新類型，包含字符串類型的name和整數(shù)類型的sex兩個屬性，然后我們使用new關(guān)鍵字創(chuàng)建PersonRecord的實例，如下面的代碼所示。

var boy = new PersonRecord({

    name: 'boy',

    sex: 0

});

創(chuàng)建對象時，可以直接通過構(gòu)造方法為對象賦予初始值，將'boy'賦值給name，0賦值給sex。

現(xiàn)在，我們得到了PersonRecord的實例boy，如何才能得到它的屬性呢？以下三種方式都可以獲得boy中name屬性的數(shù)據(jù)，如下面的代碼所示。

alert(boy.data.name);

alert(boy.data['name']);

alert(boy.get('name'));

這里涉及 Ext.data.Record的data屬性，這是定義在Ext.data.Record中的一個公共屬性，用于保存當前record對象的所有數(shù)據(jù)。 它是一個JSON對象，可以直接從它里面獲得需要的數(shù)據(jù)。可以通過Ext.data.Record的get()函數(shù)方便地從data屬性中獲得指定的屬性 值。

如果我們需要修改boy中的數(shù)據(jù)，請不要使用以下方式直接操作data，如下面的代碼所示。

    boy.data.name = 'boy name';

    boy.data['name'] = 'boy name';

而應該使用set()函數(shù)，如下面的代碼所示。

    boy.set('name', 'body name');

set()函數(shù)會判斷屬性值是否發(fā)生了改變，如果改變了，就要將當前對象的dirty屬性設置為true，并將修改之前的原始值放入modified對象中，供其他函數(shù)使用。如果直接操作data中的值，record就無法記錄屬性數(shù)據(jù)的修改情況。

Record的屬性數(shù)據(jù)被修改后，我們可以執(zhí)行如下幾種操作。

q   commit()（提交）：這個函數(shù)的效果是設置dirty為false，并刪除modified中保存的原始數(shù)據(jù)。

q   reject()（撤銷）：這個函數(shù)的效果是將data中已經(jīng)修改了的屬性值都恢復成modified中保存的原始數(shù)據(jù)，然后設置dirty為false，并刪除保存原始數(shù)據(jù)的modified對象。

q   getChanges()獲得修改的部分：這個函數(shù)會把data中經(jīng)過修改的屬性和數(shù)據(jù)放在一個JSON對象里并返回。例如上例中，getChanges()返回的結(jié)果是{name:’body name’}。

q   我們還可以調(diào)用isModified()判斷當前record中的數(shù)據(jù)是否被修改。

      Ext.data.Record還提供了用于復制record實例的函數(shù)copy()。

var copyBoy = boy.copy();

這樣我們就得到了boy的一個副本，它里面包含了boy的data數(shù)據(jù)，但copy()函數(shù)不會復制dirty和modified等額外的屬性值。

Ext.data專題四：Ext.data.Store

MemoryProxy只能從JavaScript對象獲得數(shù)據(jù)，可以直接把數(shù)組，或JSON和XML格式的數(shù)據(jù)交給它處理，如下面的代碼所示。

var proxy = new Ext.data.MemoryProxy([
    ['id1','name1','descn1'],
    ['id2','name2','descn2']
]);

HttpProxy使用HTTP協(xié)議，通過Ajax去后臺取數(shù)據(jù)，構(gòu)造它時需要設置url:'xxx.jsp'參數(shù)。這里的url可以替換成任何一個合法的網(wǎng)址，這樣HttpProxy才知道去哪里獲取數(shù)據(jù)，如下面的代碼所示。

var proxy = new Ext.data.HttpProxy({url:'xxx.jsp'});               

后臺需要返回EXT所需要的JSON格式的數(shù)據(jù)，下面的內(nèi)容就是后臺使用JSP的一個范例，如下面的代碼所示。

response.setContentType("application/x-json");

Writer out = response.getWriter();

out.print("[" +

        "['id1','name1','descn1']" +

        "['id2','name2','descn2']" +

    "]");               

請注意，這里的HttpProxy不支持跨域，它只能從同一域中獲得數(shù)據(jù)。如果想跨域，請參考下面的ScriptTagProxy。

常用proxy之ScriptTagProxy

ScriptTagProxy的用法幾乎和HttpProxy一樣，如下面的代碼所示。

var proxy = new Ext.data.ScriptTagProxy({url:'xxx.jsp'});               

從這里也看不出來它是如何支持跨域的，我們還需要在后臺進行相應的處理，如下面的代碼所示。

String cb = request.getParameter("callback");

response.setContentType("text/javascript");

Writer out = response.getWriter();

out.write(cb + "(");

out.print("[" +

        "['id1','name1','descn1']" +

        "['id2','name2','descn2']" +

    "]");

out.write(");");

其中的關(guān)鍵就在于從請求中獲 得的callback參數(shù)，這個參數(shù)叫做回調(diào)函數(shù)。ScriptTag- Proxy會在當前的HTML頁面里添加一個<script type="text/javascript"src="xxx.jsp"> </script>標簽，然后把后臺返回的內(nèi)容添加到這個標簽中，這樣就可以解決跨域訪問數(shù)據(jù)的問題。為了讓后臺返回的內(nèi)容可以在動態(tài)生成的 標簽中運行，EXT會生成一個名為callback的回調(diào)函數(shù)，并把回調(diào)函數(shù)的名稱傳遞給后臺，由后臺生成callback(data)形式的響應內(nèi)容， 然后返回給前臺自動運行。

雖然上述處理過程比較難理解，但是我們只需要了解ScriptTagProxy的用法就足夠了。如果還想進一步了解ScriptTagProxy的運行過程，可以使用Firebug查看動態(tài)生成的HTML以及響應的JSON內(nèi)容。

最后我們來分析一下EXT的API文檔中提供的示例，這段后臺代碼會自動判斷請求的類型，返回支持ScriptTagProxy或HttpProxy的數(shù)據(jù)，如代碼清單10-2所示。

代碼清單　在后臺同時支持HttpProxy和ScriptTagProxy

boolean scriptTag = false;

String cb = request.getParameter("callback");

if (cb != null) {

    scriptTag = true;

    response.setContentType("text/javascript");

} else {

    response.setContentType("application/x-json");

}

Writer out = response.getWriter();

if (scriptTag) {

    out.write(cb + "(");

}

out.print(dataBlock.toJsonString());

if (scriptTag) {

    out.write(");");

}               

代碼中通過判斷請求中是否包含callback參數(shù)來決定返回何種數(shù)據(jù)類型。如果包含，就返回ScriptTagProxy需要的數(shù)據(jù)；否則，就當作HttpProxy處理。