EXT4动态树

EXT JS4.0树的生成和加载与EXT3.0相比做了比较大的改动，层次比较分明，先是加载TreeStore，然后加载TreePanel，并把TreeStore的值传给TreePanel。但是这种加载方式没有Ext Js3.0的加载方式灵活，监听起来也没那么方便。早段时间做了个从后台传值并生成动态树的功能，给大家参考参考。

 

前端js代码：

 

 

//创建静态树
function createXxTrees(){
	
	var xxMenuArr = [{
				text: "XXX管理",
				expanded: false,
				iconCls:"leftMenuIcon",
				icon:"images/node/utcs/folder.jpg",
				children: [{
					text: "服务器管理",
					iconCls:"leftMenuIcon",
					icon:"images/node/utcs/bianji.png",
					leaf: true
				},{
					text: "域管理",
					iconCls:"leftMenuIcon",
					icon:"images/node/utcs/bianji.png",
					leaf: true
				},{
					text: "节点管理",
					iconCls:"leftMenuIcon",
					icon:"images/node/utcs/bianji.png",
					leaf: true
				}
				]
			}
			];
	
	//动态树生成
	Ext.Ajax.request({
		url : 'XxTreeAction.action',
		//params : {},
		success : function(response,returnValue)
		{
			
			var info = Ext.JSON.decode(response.responseText);
			var nodes = info.nodes;
			if(info.success){
				var nodeRoot = {
					text:"信号节点",
			        expanded: true,
					iconCls:"leftMenuIcon",
					icon:"images/node/utcs/folder.jpg",
			        children: nodes
			    }
				 xxMenuArr.push(nodeRoot);
			}
						
		},
		failure : function(response)
		{
    		
		},
		async: false   
	});
	
	
	xxTreeStore = Ext.create('Ext.data.TreeStore', {
		root: {
			expanded: true,
			children: xxMenuArr
		}
	});
	//显示树
if (Ext.getCmp(' xxTreePanel ') == null ) {
		Ext.create('Ext.tree.Panel', {
			id: 'xxTreePanel',
			width: leftMenuWidth,
			height: leftMenuHeight,
			store:  xxTreeStore ,
			rootVisible: false,
			renderTo: "xxDivId",//HTML的DIV Id
			listeners: {
				itemclick: function(view, record, element, index){

																			
				}
			}
		});
	}
			
}


	

 

 

后台XxTreeAction  execute方法代码：

 

 

 

	public String execute() throws Exception
	{
		List<TreeNode> serverTreeList = new ArrayList<TreeNode>();//服务器树节点列表
		List<TreeNode> childrenTreeList = new ArrayList<TreeNode>();
		try {

			List<KkServerInfo> serverInfoList = serverService.findAll();

			//遍历服务器
			for(int i=0;i<serverInfoList.size();i++){
				KkServerInfo serverInfo = serverInfoList.get(i);
				long serverId = serverInfo.getId();
				//设置服务器属性
				TreeNode serverTreeNode = new TreeNode();
				serverTreeNode.setText(serverInfo.getKkServerName());
				serverTreeNode.setId("s#"+serverInfo.getId());
				serverTreeNode.setCls("");
				serverTreeNode.setIconCls("leftMenuIcon");
				serverTreeNode.setIcon("images/node/utcs/server.jpg");
				serverTreeNode.setExpanded(true);
				//定义域的树节点
				List<TreeNode> areaTreaNodeList =  new ArrayList<TreeNode>();
				
				List<KkDomain> areaInfoList = areaService.selectKkAreaListByServerId(serverId);
				//遍历域
				for(int j=0;j<areaInfoList.size();j++){
					KkDomain areaInfo  = areaInfoList.get(j);
					long areaId = areaInfo.getId();
					//设置域节点属性
					TreeNode areaTreeNode = new TreeNode();
					areaTreeNode.setText(areaInfo.getName());
					areaTreeNode.setId("a#"+areaInfo.getId());
					areaTreeNode.setCls("");
					areaTreeNode.setIconCls("leftMenuIcon");
					areaTreeNode.setIcon("images/node/utcs/yu.jpg");
					areaTreeNode.setExpanded(false);

					//定义节点的树节点
					List<TreeNode> nodeTreeNodeList =  new ArrayList<TreeNode>();
					List<KkInfo> nodeInfoList = nodeService.selectKkInfoListByAreaId(areaId);
					
					//遍历节点
					for(int m=0;m<nodeInfoList.size();m++){
						KkInfo nodeInfo  = nodeInfoList.get(m);
						//设置节点属性
						TreeNode nodeTreeNode = new TreeNode();
						nodeTreeNode.setText(nodeInfo.getAddress());
						nodeTreeNode.setId("n#"+nodeInfo.getId());
						nodeTreeNode.setCls("");
						nodeTreeNode.setLeaf(true);
						nodeTreeNode.setIconCls("leftMenuIcon");
						nodeTreeNode.setIcon("images/node/kkcs/kkcs.png");

						nodeTreeNode.setChildren(childrenTreeList);

						nodeTreeNodeList.add(nodeTreeNode);

					}//end 遍历节点

					
					areaTreeNode.setChildren(nodeTreeNodeList);
					areaTreaNodeList.add(areaTreeNode);//添加域节点

				}//end  遍历域
				serverTreeNode.setChildren(areaTreaNodeList);
				serverTreeList.add(serverTreeNode);
			}//end 遍历服务器
			
			success = true;	
			
		} catch (Exception e) {
			e.printStackTrace();
			success = false;	
		}
			
		this.nodes = serverTreeList;
		return SUCCESS;
	}

 

 

NodeTree.java类：（封装了TreeStore 中树节点的属性）

 

 

 

import java.util.List;
/**
 * 动态树节点类
 * @author 林
 *
 */
public class TreeNode {

	private String text;
	private String id;
	private String cls;
	private boolean expanded; 
	private String iconCls;
	private String icon;
	private String href;
	private boolean leaf;
	private List<TreeNode> children;
	
	public String getIcon() {
		return icon;
	}
	public void setIcon(String icon) {
		this.icon = icon;
	}
	public String getHref() {
		return href;
	}
	public String getIconCls() {
		return iconCls;
	}
	public void setIconCls(String iconCls) {
		this.iconCls = iconCls;
	}
	public void setHref(String href) {
		this.href = href;
	}
	public boolean isLeaf() {
		return leaf;
	}
	public void setLeaf(boolean leaf) {
		this.leaf = leaf;
	}
	public List<TreeNode> getChildren() {
		return children;
	}
	public void setChildren(List<TreeNode> children) {
		this.children = children;
	}
	public boolean isExpanded() {
		return expanded;
	}
	public void setExpanded(boolean expanded) {
		this.expanded = expanded;
	}

	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getCls() {
		return cls;
	}
	public void setCls(String cls) {
		this.cls = cls;
	}
	
}