ExtJs+JSP构造动态树

首先看一下建立的TreeStore。

var tree_store = Ext.create('Ext.data.TreeStore', {
	    id:'tree_store',
	    proxy: {
   		 type: 'ajax',
   		 url: 'MyJsp.jsp',
   	 }
	});

var treePanel = Ext.create('Ext.tree.Panel', {
	    id: 'tree_panel',
	    title: '动态加载',
	    region: 'west',
	    width: 200,
	    rootVisible: false,
	    store: tree_store,
	    listeners : {
			itemclick : tree_itemclick
		}, 
		tools: [{
	        type: 'refresh',
	        tooltip: '刷新',
	        handler: function() {//Ext.data.Store load
	            tree_store.load({
	                scope: this,
	                callback: function(records, operation, success) {
	                    treePanel.getRootNode().eachChild(function(child) { child.expand(); });
	                }
	            });
	        }
	    }
	    ],
});

后台最主要的作用是将节点信息组成恰当的JSON字符串，如果需要加载的节点不多的话可以使用拼接字符串的方式，如果节点较多可以使用javaBean封装节点信息，然后通过循环的方式拼接。

下面我们先看一下节点类的定义。

public class Node {
	private String text;//节点显示字符串
	private String id;//节点ID
	private boolean 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 ArrayList<Node> getRes(){
		ArrayList<Node> result = new ArrayList<Node>();
		
		Node node1 = new Node();
		node1.setId("第一个节点的id");
		node1.setLeaf(true);
		node1.setText("第一个节点");
		
		Node node2 = new Node();
		node2.setId("第二个节点的ID");
		node2.setLeaf(true);
		node2.setText("第二个节点");
		result.add(node1);
		result.add(node2);
			
		return result;
	}

public String getJson(){
		String result = "[{text:'1级文件夹',id:'host',children:[";
		ArrayList<Node> arrlist = getRes();
		Iterator<Node> iterator = arrlist.iterator();
		while(iterator.hasNext()){
			Node node = iterator.next();
			if(iterator.hasNext())
				result +="{id:'"+node.getId()+"',text:'"+node.getText()+"',leaf:"+node.isLeaf()+"},";
			else
				result +="{id:'"+node.getId()+"',text:'"+node.getText()+"',leaf:"+node.isLeaf()+"}";
		}
		result+="]},{text:'2级文件夹',id:'operate',children:[{id:'addhost',text:'第三个节点',leaf:true},"
				+ "{id:'addclient',text:'第四个节点',leaf:true}]}]";
		return result;
	}

然后我们看一下url中请求的JSP页面。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<jsp:useBean id="service" class="service.Service"></jsp:useBean>
<%
	request.setCharacterEncoding("utf-8");
	response.setCharacterEncoding("utf-8");
	String json = service.getJson();
	System.out.println(json);
	response.getWriter().write(json);
%>

下面看一下效果图：

使用这种方式动态加载时将所有的几点信息一次全部加载，也就是当你点击展开一级文件夹或二级文件夹的时候他不会在想后台发送请求，这里通过firebug就能看出，如果树的层次比较深，在后台构造JSON字符串发送就会比较麻烦，这时可以使用异步加载，也就是当页面第一次加载的时候只会加载1级文件夹和2级文件夹，当点击展开1级文件夹或2级文件夹的时候这时会继续向后退发送请求，请求加载1级文件夹的子节点。关于异步加载将在下篇博客介绍。