在EXT中直接使用DWR

據不完全統計，從事Ajax開發的Java程序員有一大半都使用DWR。我們下面來介紹一下如何在EXT中使用DWR與後臺交互。

10.10.1　在EXT中直接使用DWR

因爲DWR在前臺的表現形式和普通的JavaScript完全一樣，所以我們不需要特地去做些什麼，直接使用EXT調用DWR生成的JavaScript函數即可。以Grid爲例，比如現在我們要顯示一個通訊錄的信息，後臺記錄的數據有：id、name、sex、email、tel、addTime和descn。編寫對應的POJO，代碼如下所示。

public class Info {
long id;
String name;
int sex;
String email;
String tel;
Date addTime;
String descn;
}

然後編寫操作POJO的manager類，代碼如下所示。

public class InfoManager {
private List infoList = new ArrayList();

    public List getResult() {
return infoList;
}
}

代碼部分有些刪減，我們只保留了其中的關鍵部分，就這樣把這兩個類配置到dwr.xml中，讓前臺可以對這些類進行調用。

下面是EXT與DWR交互的關鍵部分，我們要對JavaScript部分做如下修改，如代碼清單10-7所示。

代碼清單10-7　使用EXT調用DWR

var cm = new Ext.grid.ColumnModel([
{header:'編號',dataIndex:'id'},
{header:'名稱',dataIndex:'name'},
{header:'性別',dataIndex:'sex'},
{header:'郵箱',dataIndex:'email'},
{header:'電話',dataIndex:'tel'},
{header:'添加時間',dataIndex:'addTime'},
{header:'備註',dataIndex:'descn'}
]);

var store = new Ext.data.JsonStore({
fields: ["id","name","sex",'email','tel','addTime','descn']
});

// 調用DWR取得數據
infoManager.getResult(function(data) {
store.loadData(data);
});

var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
store: store,
cm: cm
});

注意，執行infoManager.getResult()函數時，DWR就會使用Ajax去後臺取數據了，操作成功後調用我們定義的匿名回調函數。在這裏我們只做一件事，那就是將返回的data直接注入到ds中。

 

DWR返回的data可以被JsonStore直接讀取，我們需要設置對應的fields參數，以告訴JsonReader需要哪些屬性。

在這裏，EXT和DWR兩者之間沒有任何關係，將它們任何一方替換掉都可以。實際上它們只是在一起運行，並沒有整合。我們給出的這個示例也是說明了一種鬆耦合的可能性，實際操作中完全可以使用這種方式。