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

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

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

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

EXTJS4.x之无限级树形菜单实现_第1张图片

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 list = new ArrayList();
	    if (node != null) {  
	        if (node.equals("0")) {  
	        	Map map1 = new HashMap();
	        	map1.put("id", 1);
	        	map1.put("text", "子节点1");
	        	map1.put("leaf", true);
	        	list.add(map1);
	        	Map map2 = new HashMap();
	        	map2.put("id", 2);
	        	map2.put("text", "子节点2");
	        	map2.put("leaf", false);
	        	list.add(map2); 
	        } else if (node.equals("2")) {  
	        	Map map1 = new HashMap();
	        	map1.put("id", 3);
	        	map1.put("text", "孙子节点1");
	        	map1.put("leaf", true);
	        	list.add(map1);
	        	Map map2 = new HashMap();
	        	map2.put("id", 4);
	        	map2.put("text", "孙子节点2");
	        	map2.put("leaf", false);
	        	list.add(map2); 
	        } else if (node.equals("4")) {  
	        	Map map1 = new HashMap();
	        	map1.put("id", 5);
	        	map1.put("text", "曾孙节点1");
	        	map1.put("leaf", true);
	        	list.add(map1);
	        	Map map2 = new HashMap();
	        	map2.put("id", 6);
	        	map2.put("text", "曾孙节点2");
	        	map2.put("leaf", true);
	        	list.add(map2); 
	        }  
	    } 
		return list;
	}
}目录如下

EXTJS4.x之无限级树形菜单实现_第2张图片

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

EXTJS4.x之无限级树形菜单实现_第3张图片

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即可


保存运行

EXTJS4.x之无限级树形菜单实现_第4张图片


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


你可能感兴趣的:(extjs)