ext动态加载树

 

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

客户端的代码如下：

Js代码  

1. Ext.onReady(function() {   
2.             var root = new Ext.tree.AsyncTreeNode({   
3.                         id : "root",   
4.                         text : "树的根"  
5.                     });   
6.   
7.             var loader = new Ext.tree.TreeLoader({   
8.                         url : '/extapp/Tree'  
9.                     });   
10.   
11.             loader.on("beforeload", function(loader, node) {   
12.                         loader.baseParams.nodeId = node.id;   
13.                     });   
14.   
15.             var tree = new Ext.tree.TreePanel({   
16.                         renderTo : "tree",   
17.                         root : root,   
18.                         loader : loader,   
19.                         width : 200,   
20.                         height : 300   
21.                     });   
22.         });  

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代码  

1. protected void doPost(HttpServletRequest request,   
2.         HttpServletResponse response) throws ServletException, IOException {   
3.   
4.     try {   
5.         Thread.sleep(1000);   
6.     } catch (InterruptedException e) {   
7.         e.printStackTrace();   
8.     }   
9.        
10.     StringBuilder sb = new StringBuilder();   
11.     String nodeId = request.getParameter("nodeId");   
12.     if (nodeId != null) {   
13.         if (nodeId.equals("root")) {   
14.             sb.append("[{");   
15.             sb.append("  id: 1,");   
16.             sb.append("  text: '子节点1',");   
17.             sb.append("  leaf: true");   
18.             sb.append("},{");   
19.             sb.append("  id: 2,");   
20.             sb.append("  text: '儿子节点2',");   
21.             sb.append("  leaf: false");   
22.             sb.append("}]");   
23.         } else if (nodeId.equals("2")) {   
24.             sb.append("[{");   
25.             sb.append("  id: 3,");   
26.             sb.append("  text: '孙子节点',");   
27.             sb.append("  leaf: true");   
28.             sb.append("}]");   
29.         }   
30.     }   
31.     PrintWriter out = response.getWriter();   
32.     out.print(sb.toString());   
33. }  

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