Extjs 动态异步加载树

 使用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 class="com.thams.tree .JSONTree" 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 = 动态异步加载的树

 

原文:http://wanchong998.javaeye.com/blog/212583

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值