使用ExtJS2构造动态异步加载的树
使用ExtJS2，以JSON（JavaScript Object Notation）TreeLoader 异步读取数据，构造一棵异步加载的树。1. 下载ExtJS2，地址：http://www.extjs.com/?? 下载Ext JS 2.1 SDK：ext-2.1.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写的mytree.js文件。?? 关于Ext.tree.TreePanel，可以参考：?? http://www.jackytsu.com/extcn/docs/output/Ext.tree.TreePanel.html?? mytree.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文件调用mytree.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 id="tree_div" style="height:101%;width:100%"></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?did="+rs.getString("DID").toString());??????????? ??? ??? TreeNode.setHrefTarget("rightFrame");?????????? ??? ??????????????? ??????????????? if (parentIDString.indexOf("|"+rs.getString("DID")+"|")>=0) //父节点??????????? ??????? {??????????? ??? ??????? TreeNode.setCls("folder");??????????? ??? ??????? TreeNode.setLeaf(false);??????????? ??? ??????? TreeNode.setExpandable(false);??????????? ??????? }??????????? ??????? else //子节点??????????? ?????? {??????????? ??? ??????? TreeNode.setCls("file");??????????? ??? ??????? TreeNode.setLeaf(true);??????????? ??? ??????? TreeNode.setExpandable(false);??????????? ??????? }??????????? ??? ??? TreeNodeArray.add(TreeNode);??????????? }??????????? ??????????? JSONArray JsonArray = JSONArray.fromObject(TreeNodeArray); //得到JSON数组???? ??????????? return JsonArray.toString();//返回JSON数据??????? }??????? catch(Exception e)??????? {??????????? System.out.println("getJSONString() of JSONTree.java throws : "+e.toString());??????????? return "";??????? }??????? finally??????? {??????????? DBConnction.closeConnection(conn,st,rs);??????? }??? }?? ??? public String getPID() {??????? return PID;??? }??? public void setPID(String pid) {??????? PID = pid;??? }}-------------------------------------- 7. mytree.js中ExtJS的TreeLoader调用的tree.jsp。?? 在目录树上点击TreeNode后会加载下一级节点。 ?? tree.jsp负责TreeNode点击后，传回由下一级节点构造的JSON数据。?? tree.jsp代码如下：-------------------------------------- <%@ page language="java" pageEncoding="GBK"%><jsp:useBean id="JSONTree"></jsp:useBean><% String PID = "";if (request.getParameter("DID")!=null){??? PID = request.getParameter("DID").toString();}JSONTree.setPID(PID);%><%=JSONTree.getJSONString()%>-------------------------------------- 7. 江湖故事?? 1). 如果要做ExtJS Tree的DEMO，生成TreeLoader()时，尽量不要使用静态的JSON格式文件。?????? ?????? 如：?????????? Tree.TreeLoader({dataUrl:'/jsondata.txt'}); ?????????? Tree.TreeLoader({dataUrl:'/jsondata.js'});?? ?????? 等诸如此类。?????? 在网上查资料时，做ExtJS Tree时，很多资料说使用静态的JSON文件做Demo，我使用ExtJS2.1，一次没有成功。?????? 为此浪费了很多时间精力，付出惨重代价。?? 2). 使用JSON的时候，需要一些jar文件来配合使用。?????? 从网上下载的时候，很多是zip文件，当时没有多加考虑，按照以往的经验，直接修改后缀名为jar，然后导入到lib文件夹，结果会报错。?????? 诸如：?????? javax.servlet.ServletException: org/apache/commons/lang/exception/NestableRuntimeException?????? java.lang.NoClassDefFoundError: org/apache/commons/lang/exception/NestableRuntimeException?????? 查了很多资料，没有搞定。?????? 开始以为是jar版本不匹配造成的。在这个问题上折腾了很久，亦浪费很多时间和精力，痛苦啊。?????? 精神的折磨。?????? 其实，真正的jar文件需要解压zip文件后才能得到的。低级错误。崩溃。?? 3). 关于s.gif文件的问题?????? ?????? 该问题会在系统不连互联网的情况下暴露。?????? ?????? 因为ExtJS在生成Tree时，默认情况下，总是访问http://extjs.com/s.gif下载这个s.gif图片文件。?????? 在不连网的情况下，树节点的导航图片显示不出，通过右键属性可知，是http://extjs.com/s.gif。?????? 通过搜索，发现该s.gif是在ext-base.js这个文件中定义的：???? ?????? BLANK_IMAGE_URL:"http:/"+"/extjs.com/s.gif"?????? 并且ExtJS中的示例程序是带有这个s.gif图片文件的。?????? ?????? 根据具体应用情况，把ext-base.js修改成为：?????? BLANK_IMAGE_URL:"../images/default/s.gif"?? 4). 调试的时候，JS报错：未结束的字符串常量。????? 这个问题是因为JS调用时没有指定字符集，造成JS里的汉字出现乱码引起的。????? 调用JS时，可以指定使用字符集。 ????? 如：<script type="text/javascript" defer=true src="xxx.js" charset="GBK">8. AJAX?? AJAX：Asynchronous JavaScript and XML（异步JavaScript和XML）????? ?? 只是为了树，也要学ExtJS。?? ExtJS2.1＋JSON ＝ 动态异步加载的树
