在ExtJS自己的TreeLoader中，當要實現從遠程服務器端異步加載樹節點信息的時候，都是通過請求服務器上的某一個URL來進行的，這個URL返回下面的信息：
[
{
id: 1,
text: 'A leaf Node',
leaf: true
},{
id: 2,
text: 'A folder Node',
children: [{
id: 3,
text: 'A child Node',
leaf: true
}]
}]
假如我們是直接通過類似DWR或EasyJWeb的遠程腳本引擎在客戶端直接調用服務器的業務方法，直接跳過了WEB（不需要Struts、JSP或其它Web層的代碼）這一層，這時我們沒有URL，這時該怎么辦呢？這就需要使用到自定義的TreeLoader，下面我們通過一個實例來做簡單的講解。
看服務器端的ITopicCategoryService
publicinterface ITopicCategoryService {
List<Node> loadCategory(Long id);
}
loadCategory方法返回一個類型為Node的列表，也就是返回指定id的下級分類信節點信息，Node對應樹節點的信息，代碼如下：
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在這里相當于一個簡單適配器，其實就是把數據庫中的日志分類實體適配成包樹節點對象。
把ITopicCategoryService發布成可供客戶端遠程調用，使用EasyJWeb的話引如下面三個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的話引入下面的兩個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>
這樣我們可以在頁使用下面的javascrpt來從服務器端獲得某一個節點的子節點信息，代碼如下：
function test()
{
topicCategoryService.loadCategory(1,function(ret)
{
alert("一共有"+ret.length+"個子節點");
}
}
如何讓ExtJS的樹面板能通過這個遠程web腳本方法topicCategoryService.loadCategory來加載異步加載樹節點信息呢？其實很簡單，跟一般的使用沒什么兩樣，樹面板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'
});
});
然后區別是在loader部分，使用遠程Web調用來加載樹節點的loader，代碼如下：
var loader=new WebInvokeTreeLoader({
fn:topicCategoryService.loadCategory
});
loader.on("beforeload",function(l,node){
l.args[0]=(node.id!='root'?node.id:"-1");
});
再回顧一下傳統的直接通過url加載樹節點的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:"");
});
區別在于，遠程腳本調用方式加載樹節點信息使用的是WebInvokeTreeLoader，需要通過fn屬性來指定用于加載數據的遠程方法，并在beforeload事件處理器設置參數遠程方法調用的參數值。而傳統的樹節點加載器是Ext.tree.TreeLoader，需要指定一個url來獲得json數據。
WebInvokeTreeLoader是自定義的樹加載器，代碼其實比較簡單，你可以自己寫一個。本方案僅供參考，關于WebInvokeTreeLoader的源代碼我已經傳到了我用ExtJS開發的Blog示例網站wlr.easyjf.com上了，僅供VIP會員瀏覽，有興趣的朋友可跟我聯系。