ExtJs通过后台动态创建树

ExtJs动态创建树的方法是：当树的TreeStore要加载的时候，通过ajax请求后台数据，根据后台返回数据动态加载树结构。

正常情况下我们定义TreeStore是这样定义的：

	var tree = Ext.create('Ext.data.TreeStore', {
		root : {
			expanded : true,
			children : [ {
				text : "操作",
				id : "operator",
				expanded : true,
				children : [ 
				    {text : "第一个叶子",leaf : true,id : "termOpera"},
				    {text : "第二个叶子",leaf : true,id : "userMang"}, 
				    {text : "第三个叶子",leaf : true,id : "importExcel"} 
				]
			} ]
		}
	});

现在如果需要动态加载树形结构就需要通过ajax请求后台数据。这里我们看一下如何定义TreeStore

	var tree_store = Ext.create('Ext.data.TreeStore', {
	    id:'tree_store',
	    proxy: {
	        type: 'ajax',
	        url: 'tree_load',
	        reader:{
	        	root:'nodelist',
		    	type:'json'
		    }
	    },
	    fields : [
	    	{name:'text'},
	    	{name:'id'},
	    	{name:'leaf'},
	    ]
	});

这里我们同过Struts2拦截请求，并对请求处理，首先在后台定义一个Node类，这是一个纯javaBean。有id、text、leaf属性。

public class Node {
	private String text;
	private String id;
	private boolean leaf;
	
	public Node(){
		
	}
	public Node(String text,String id,boolean leaf){
		this.text = text;
		this.id = id;
		this.leaf = leaf;
	}
	
	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 boolean isLeaf() {
		return leaf;
	}
	public void setLeaf(boolean leaf) {
		this.leaf = leaf;
	}
	
}

public class BaseAction extends ActionSupport {
	
	private static final long serialVersionUID = 1L;
	private String id;
	private ArrayList<Node> nodelist;
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public ArrayList<Node> getNodelist() {
		return nodelist;
	}
	public void setNodelist(ArrayList<Node> nodelist) {
		this.nodelist = nodelist;
	}
	
	private NodeService ns = new NodeService();
	
	public String treeload(){	
		System.out.println(id);
		nodelist = ns.getTree(id);
		return SUCCESS;
	}
}

这里我们在后台直接新建对象方式进行模拟，对于获取Node的方式可以从数据库中获取数据。

public class NodeService {
	//这里做测试，后期节点信息需要从数据库中存取
	public ArrayList<Node> getTree(String id){
		ArrayList<Node> arr = new ArrayList<Node>();
		if("root".equals(id)){
			Node node = new Node("监控主机1","one", "one", false,null);
			Node node2 = new Node("监控主机2","second", "second", false,null);
			arr.add(node);
			arr.add(node2);
		}else{
			Node mode = new Node("连接检测", null,"link", true,id);
			Node mode1 = new Node("系统检测",null,"system", true,id);
			Node mode3 = new Node("硬盘检测", null,"disk", true,id);
			Node mode4 = new Node("应用检测", null,"app", true,id);
			Node mode5 = new Node("数据库检测",null,"db", true,id);
			Node mode6 = new Node("备份检测", null,"bak", true,id);
			Node mode7 = new Node("流量检测", null,"netcard", true,id);
			arr.add(mode);
			arr.add(mode1);
			arr.add(mode3);
			arr.add(mode4);
			arr.add(mode5);
			arr.add(mode6);
			arr.add(mode7);
		}
		return arr;
	}
}