EXT 动态树(EXT学记)

有时候我们不希望一开始就取得整个树的数据然后初始化树，而是希望只取得一小部分数据，随着用户对树的操作，在需要的时候再从服务器取得后续的数据，展现相应的树结构，使用ExtJS的有关组件，我们可以很方便地做到这一步。

客户端的代码如下：
Js代码
Ext.onReady(function() {  
            var root = new Ext.tree.AsyncTreeNode({  
                        id : "root",  
                        text : "树的根" 
                    });  
 
            var loader = new Ext.tree.TreeLoader({  
                        url : '/extapp/Tree' 
                    });  
 
            loader.on("beforeload", function(loader, node) {  
                        loader.baseParams.nodeId = node.id;  
                    });  
 
            var tree = new Ext.tree.TreePanel({  
                        renderTo : "tree",  
                        root : root,  
                        loader : loader,  
                        width : 200,  
                        height : 300  
                    });  
        }); 

Ext.onReady(function() {
var root = new Ext.tree.AsyncTreeNode({
id : "root",
text : "树的根"
});

var loader = new Ext.tree.TreeLoader({
url : '/extapp/Tree'
});

loader.on("beforeload", function(loader, node) {
loader.baseParams.nodeId = node.id;
});

var tree = new Ext.tree.TreePanel({
renderTo : "tree",
root : root,
loader : loader,
width : 200,
height : 300
});
});


其中：
1 需要动态加载的节点要定义为AsyncTreeNode
2 使用TreeLoader从服务器加载数据，本例中服务器为映射到/extapp/Tree的一个Servlet
3 对TreeLoader添加"beforeload"事件，在每次发起request前，设置一个参数，参数就是loader.baseParams后面定义的nodeId，因为我们要根据不同的节点取得不同的子节点数据，所以把节点的id作为参数传给后台。

后台的servlet的doPost是这样的：
Java代码
protected void doPost(HttpServletRequest request,  
        HttpServletResponse response) throws ServletException, IOException {  
 
    try {  
        Thread.sleep(1000);  
    } catch (InterruptedException e) {  
        e.printStackTrace();  
    }  
      
    StringBuilder sb = new StringBuilder();  
    String nodeId = request.getParameter("nodeId");  
    if (nodeId != null) {  
        if (nodeId.equals("root")) {  
            sb.append("[{");  
            sb.append("  id: 1,");  
            sb.append("  text: '子节点1',");  
            sb.append("  leaf: true");  
            sb.append("},{");  
            sb.append("  id: 2,");  
            sb.append("  text: '儿子节点2',");  
            sb.append("  leaf: false");  
            sb.append("}]");  
        } else if (nodeId.equals("2")) {  
            sb.append("[{");  
            sb.append("  id: 3,");  
            sb.append("  text: '孙子节点',");  
            sb.append("  leaf: true");  
            sb.append("}]");  
        }  
    }  
    PrintWriter out = response.getWriter();  
    out.print(sb.toString());  
} 

protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {

try {
Thread.sleep(1000);
} catch (InterruptedException e) {
e.printStackTrace();
}

StringBuilder sb = new StringBuilder();
String nodeId = request.getParameter("nodeId");
if (nodeId != null) {
if (nodeId.equals("root")) {
sb.append("[{");
sb.append("  id: 1,");
sb.append("  text: '子节点1',");
sb.append("  leaf: true");
sb.append("},{");
sb.append("  id: 2,");
sb.append("  text: '儿子节点2',");
sb.append("  leaf: false");
sb.append("}]");
} else if (nodeId.equals("2")) {
sb.append("[{");
sb.append("  id: 3,");
sb.append("  text: '孙子节点',");
sb.append("  leaf: true");
sb.append("}]");
}
}
PrintWriter out = response.getWriter();
out.print(sb.toString());
}


后台很简单：
1 那段延时是为了在前台看出加载等待效果的
2 根据request的参数nodeId的不同，返回不同的子节点数据。当然实际应用当中这些数据一般是根据数据库中的数据生成的，这里略去了。

原文出处：http://www.iteye.com/topic/441349