ExtJs树的动态加载

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

客户端的代码如下：

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是这样的：

	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的不同，返回不同的子节点数据。当然实际应用当中这些数据一般是根据数据库中的数据生成的，这里略去了。

评论

1 楼 hzxlb910 2012-12-14  

[size=medium]我正在学习这方面，遇到很多问题，能否把您的代码发一份给我，谢谢了，[e-mail]