在ExtJS自己的TreeLoader中，當(dāng)要實(shí)現(xiàn)從遠(yuǎn)程服務(wù)器端異步加載樹(shù)節(jié)點(diǎn)信息的時(shí)候，都是通過(guò)請(qǐng)求服務(wù)器上的某一個(gè)URL來(lái)進(jìn)行的，這個(gè)URL返回下面的信息：
[
{
id: 1,
text: 'A leaf Node',
leaf: true
},{
id: 2,
text: 'A folder Node',
children: [{
id: 3,
text: 'A child Node',
leaf: true
}]
}]
假如我們是直接通過(guò)類似DWR或EasyJWeb的遠(yuǎn)程腳本引擎在客戶端直接調(diào)用服務(wù)器的業(yè)務(wù)方法，直接跳過(guò)了WEB（不需要Struts、JSP或其它Web層的代碼）這一層，這時(shí)我們沒(méi)有URL，這時(shí)該怎么辦呢？這就需要使用到自定義的TreeLoader，下面我們通過(guò)一個(gè)實(shí)例來(lái)做簡(jiǎn)單的講解。
看服務(wù)器端的ITopicCategoryService
publicinterface ITopicCategoryService {
List<Node> loadCategory(Long id);
}
loadCategory方法返回一個(gè)類型為Node的列表，也就是返回指定id的下級(jí)分類信節(jié)點(diǎn)信息，Node對(duì)應(yīng)樹(shù)節(jié)點(diǎn)的信息，代碼如下：
public class Node {
private TopicCategory category;
Node(TopicCategory category) {
this.category = category;
}
public String getId() {
returncategory.getId().toString();
}
publicboolean getLeaf() {
returncategory.getChildren().size() < 1;
}
public String getText() {
returncategory.getName();
}
public String getQtip() {
returncategory.getName();
}
}
Node在這里相當(dāng)于一個(gè)簡(jiǎn)單適配器，其實(shí)就是把數(shù)據(jù)庫(kù)中的日志分類實(shí)體適配成包樹(shù)節(jié)點(diǎn)對(duì)象。
把ITopicCategoryService發(fā)布成可供客戶端遠(yuǎn)程調(diào)用，使用EasyJWeb的話引如下面三個(gè)js：
<script type="text/javascript" src="/ejf/easyajax/prototype.js"></script>
<script type="text/javascript" src="/ejf/easyajax/engine.js"></script>
<script type="text/javascript" src="/ejf/easyajax/topicCategoryService.js"></script>
使用DWR的話引入下面的兩個(gè)js：
<script type="text/javascript" src="/dwr/dwr/engine.js "></script>
<script type="text/javascript" src="/dwr/dwr/util.js "></script>
<script type="text/javascript" src="/dwr/dwr/interface/ topicCategoryService.js "></script>
這樣我們可以在頁(yè)使用下面的javascrpt來(lái)從服務(wù)器端獲得某一個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)信息，代碼如下：
function test()
{
topicCategoryService.loadCategory(1,function(ret)
{
alert("一共有"+ret.length+"個(gè)子節(jié)點(diǎn)");
}
}
如何讓ExtJS的樹(shù)面板能通過(guò)這個(gè)遠(yuǎn)程web腳本方法topicCategoryService.loadCategory來(lái)加載異步加載樹(shù)節(jié)點(diǎn)信息呢？其實(shí)很簡(jiǎn)單，跟一般的使用沒(méi)什么兩樣，樹(shù)面板TreePanel的代碼如下：
var tree = new Ext.tree.TreePanel({
autoScroll:true,
animate:true,
width:'100px',
height:'300px',
enableDD:true,
containerScroll: true,
loader: loader
root: new Ext.tree.AsyncTreeNode({
text: '日志分類',
id:'root'
});
});
然后區(qū)別是在loader部分，使用遠(yuǎn)程Web調(diào)用來(lái)加載樹(shù)節(jié)點(diǎn)的loader，代碼如下：
var loader=new WebInvokeTreeLoader({
fn:topicCategoryService.loadCategory
});
loader.on("beforeload",function(l,node){
l.args[0]=(node.id!='root'?node.id:"-1");
});
再回顧一下傳統(tǒng)的直接通過(guò)url加載樹(shù)節(jié)點(diǎn)的TreeLoader代碼，如下所示：
var loader=new Ext.tree.TreeLoader({
url:'/topicCategory.ejf?cmd=getCategory&pageSize=-1&treeData=true'
});
loader.on("beforeloader",function(loader,node){
loader.baseParams.id=(node.id!='root'?node.id:"");
});
區(qū)別在于，遠(yuǎn)程腳本調(diào)用方式加載樹(shù)節(jié)點(diǎn)信息使用的是WebInvokeTreeLoader，需要通過(guò)fn屬性來(lái)指定用于加載數(shù)據(jù)的遠(yuǎn)程方法，并在beforeload事件處理器設(shè)置參數(shù)遠(yuǎn)程方法調(diào)用的參數(shù)值。而傳統(tǒng)的樹(shù)節(jié)點(diǎn)加載器是Ext.tree.TreeLoader，需要指定一個(gè)url來(lái)獲得json數(shù)據(jù)。
WebInvokeTreeLoader是自定義的樹(shù)加載器，代碼其實(shí)比較簡(jiǎn)單，你可以自己寫(xiě)一個(gè)。本方案僅供參考，關(guān)于WebInvokeTreeLoader的源代碼我已經(jīng)傳到了我用ExtJS開(kāi)發(fā)的Blog示例網(wǎng)站wlr.easyjf.com上了，僅供VIP會(huì)員瀏覽，有興趣的朋友可跟我聯(lián)系。