EXTJS4.x之无限级树形菜单实现

目前在Web应用程序开发领域，Ext JS框架已经逐渐被广泛使用，它是富客户端开发中出类拔萃的框架之一。在Ext的UI控件中，树形控件无疑是最为常用的控件之一，它用来实现树形结构的菜单。TreeNode用来实现静态的树形菜单，AsyncTreeNode用来实现动态的异步加载树形菜单，后者最为常用，它通过接收服务器端返回来的JSON格式的数据，动态生成树形菜单节点。生成树有两种思路，一种是一次性生成全部树节点，另一种是异步加载树节点（branch-by-branch）。对于大数据量的菜单节点来说，异步加载是比较合适的选择，但是对于小数据量的菜单来说，一次性生成全部节点应该是最为合理的方案。

一次生成全部节点在上次已经编写过了，现在来折腾一下异步加载属性菜单。

1.启动Sencha Architect，新建工程命名为treepanel放在ExtBook的webroot目录下

2.在ExtBook工程的controller包里面创建nodetree包，在里面创建NodeTreeController.java文件，内容如下

package org.extbook.controller.nodetree;


import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping(value="/NodeTreeController") 
public class NodeTreeController {

	@RequestMapping(value="/list")
	@ResponseBody
	public Object list(
			@RequestParam String node
			) {
		List<Object> list = new ArrayList<Object>();
	    if (node != null) {  
	        if (node.equals("0")) {  
	        	Map<String, Object> map1 = new HashMap<String, Object>();
	        	map1.put("id", 1);
	        	map1.put("text", "子节点1");
	        	map1.put("leaf", true);
	        	list.add(map1);
	        	Map<String, Object> map2 = new HashMap<String, Object>();
	        	map2.put("id", 2);
	        	map2.put("text", "子节点2");
	        	map2.put("leaf", false);
	        	list.add(map2); 
	        } else if (node.equals("2")) {  
	        	Map<String, Object> map1 = new HashMap<String, Object>();
	        	map1.put("id", 3);
	        	map1.put("text", "孙子节点1");
	        	map1.put("leaf", true);
	        	list.add(map1);
	        	Map<String, Object> map2 = new HashMap<String, Object>();
	        	map2.put("id", 4);
	        	map2.put("text", "孙子节点2");
	        	map2.put("leaf", false);
	        	list.add(map2); 
	        } else if (node.equals("4")) {  
	        	Map<String, Object> map1 = new HashMap<String, Object>();
	        	map1.put("id", 5);
	        	map1.put("text", "曾孙节点1");
	        	map1.put("leaf", true);
	        	list.add(map1);
	        	Map<String, Object> map2 = new HashMap<String, Object>();
	        	map2.put("id", 6);
	        	map2.put("text", "曾孙节点2");
	        	map2.put("leaf", true);
	        	list.add(map2); 
	        }  
	    } 
		return list;
	}
}

目录如下

2.使用Sencha Architect创建以下控件

treestore：需要设置的属性如下

autoLoad: true,
autoSync: true,
storeId: 'MyJsonTreeStore',

root:

{
                id: 0,
                test: 'root node',
                expanded: true
            }

fields：添加两个分别为 id，text

MyAjaxProxy：设置url为../NodeTreeController/list

treepane：需要设置的属性如下

store设置为'MyJsonTreeStore即可

保存运行

图中红色圈中地方可以看出我们的数据是动态加载的