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