使用ExtJS2，以JSON（JavaScript Object Notation）TreeLoader 异步读取数据，构造一棵异步加载的树
1. 下载ExtJS2，地址：http://www.extjs.com/
下载Ext JS 2.1 SDK：ext-2.2.zip。
examples文件夹下全部是ExtJS例子演示程序。
ExtJS2主要的会用到以下几个文件：ext-all.css、ext-base.js、ext-all.js，使用方法可以参考Demo。
Ext文档中心：
http://www.ajaxjs.com/docs/docs/
http://www.jackytsu.com/extcn/docs/
2. 下载JSON-lib，地址：http://json-lib.sourceforge.net/
打开网址后，首页上有一段话：
Json-lib requires (at least) the following dependencies in your classpath:
jakarta commons-lang 2.3
jakarta commons-beanutils 1.7.0
jakarta commons-collections 3.2
jakarta commons-logging 1.1.1
ezmorph 1.0.4
下载上述jar文件，配合JSON-lib 一起使用。
commons 下载地址：http://commons.apache.org/
ezmorph 下载地址：http://ezmorph.sourceforge.net
或者，到 http://www.docjar.com 搜索下载。
JSON的用法，可参考相关文档。
3. 使用ExtJS写tree.js文件。
关于Ext.tree.TreePanel，可以参考：
http://www.jackytsu.com/extcn/docs/output/Ext.tree.TreePanel.html
tree.js代码如下：
--------------------------
Ext.onReady(function(){
var Tree = Ext.tree;
//定义根节点的Loader
var treeloader=new Tree.TreeLoader({dataUrl:'tree.jsp?DID=1'});
//异步加载根节点
var rootnode=new Tree.AsyncTreeNode({
id:'1',
text:'目录树根节点'
});
var treepanel = new Tree.TreePanel({
//renderTo:"tree_div",//如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。
el:'tree_div', //填充区域
rootVisible:true, //隐藏根节点
border:true, //边框
animate:true, //动画效果
autoScroll:true, //自动滚动
enableDD:false, //拖拽节点
containerScroll:true,
loader:treeloader
});
//设置根节点
treepanel.setRootNode(rootnode);
//响应事件，传递node参数
treepanel.on('beforeload',
function(node){
treepanel.loader.dataUrl='tree.jsp?DID='+node.id; //定义子节点的Loader
});
treepanel.render();
rootnode.expand(false,false);
});
-----------------------------------
4. 展示树的extjsTree.jsp的文件。该jsp文件调用tree.js，展示树。
注意使用到了ext-all.css、ext-base.js、ext-all.js这三个文件。
extjsTree.jsp代码如下：
--------------------------------------
<html>
<head>
<title>ExtJS Tree</title>
<link rel="stylesheet" type="text/css" href="../extjs/ext-all.css" />
<script type="text/javascript" src="../extjs/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="../extjs/mytree.js" defer=true charset="GBK"></script>
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" onContextMenu="return false;">
<tr>
<td align=left valign="top" >
<!--树的填充区域-->
<div ></div>
</td>
</tr>
</table>
</body>
</html>
--------------------------------------
5. 构造树节点。
定义树节点的属性，包括节点ID、Text、图标、是否为叶子节点、是否展开等。
JSONTreeNode.java代码如下：
--------------------------------------
package com.tree;
import java.io.Serializable;
public class JSONTreeNode implements Serializable{
private static final long serialVersionUID = 1L;
public static void main(String[] args) {
}
private String id; //ID
private String text; //节点显示
private String cls; //图标
private boolean leaf; //是否叶子
private String href; //链接
private String hrefTarget; //链接指向
private boolean expandable; //是否展开
private String description; //描述信息
//get、set方法。略。
}
}
--------------------------------------
6. 从数据库查询，读取字节点数据及构造JSON数据。
JSONTree.java代码如下：
--------------------------------------
package com.tree;
import java.sql.Connection;
import java.sql.Statement;
import java.sql.ResultSet;
import java.util.ArrayList;
import net.sf.json.JSONArray;
import com.db.DBConnction;
import com.tree.JSONTreeNode;
public class JSONTree{
private String PID;
public String getJSONString(){
Connection conn =null;
Statement st = null;
ResultSet rs = null;
ArrayList<JSONTreeNode> TreeNodeArray = null;
String SQLString = "SELECT * FROM S_MLS WHERE PID="+this.PID+" ORDER BY DID";
try
{
conn = DBConnction.getConnection();
st = conn.createStatement();
rs = st.executeQuery("SELECT PID FROM S_MLS WHERE PID>0 Group By PID Order By PID");
StringBuffer parentIDBuffer =new StringBuffer();
parentIDBuffer.append("|");
while(rs.next())
{
parentIDBuffer.append(rs.getString("PID"));
parentIDBuffer.append("|");
}
//得到所有的parentDID列表（这是一个巧妙的算法^_^）
String parentIDString = parentIDBuffer.toString();
rs = st.executeQuery(SQLString);
TreeNodeArray = new ArrayList<JSONTreeNode>();
while(rs.next())
{
JSONTreeNode TreeNode = new JSONTreeNode();
TreeNode.setId(rs.getString("DID"));
TreeNode.setText(rs.getString("JDMC"));
TreeNode.setDescription(rs.getString("JDMC"));
TreeNode.setHref("rightframe.jsp?d>
9. AJAX
AJAX：Asynchronous JavaScript and XML（异步JavaScript和XML）
只是为了树，也要学ExtJS。
ExtJS2.1＋JSON ＝ 动态异步加载的树