`
ruanwxh
  • 浏览: 22790 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
最近访客 更多访客>>
社区版块
存档分类
最新评论

Extjs异步加载Tree

EXTjsonJSPJavaScriptCSS 
阅读更多

使用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 ＝ 动态异步加载的树

分享到：
| Date和Calendar类的使用方法
评论
1 楼 helloandy2009 2010-01-06  
  JSONArray  干啥用的 如何实现
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    extjs tree 异步加载树型

    异步加载树型是 ExtJS Tree 的一个重要特性，允许只在需要时动态加载子节点，从而提高页面的加载速度和用户体验。 异步加载通常通过 AJAX 请求实现，只有当用户展开一个节点时，才会向服务器请求该节点的子节点数据...

    ExtJS构造动态异步加载

    本文将深入探讨如何使用ExtJS构建动态异步加载的树形结构，结合AJAX技术实现JSON数据的高效传输。 首先，我们要理解什么是动态异步加载。在传统的网页开发中，如果一次性加载所有数据，可能会导致页面加载速度慢，...

    Extjs4树结构异步加载

    在ExtJS4中实现树结构的异步加载，主要涉及以下几个关键概念： 1. **TreeStore**: TreeStore是树结构的数据源，它负责管理与服务器之间的数据通信。对于异步加载，我们需要配置TreeStore，设置`autoLoad`为`false`...

    ExtJs4 Checkbox tree

    对于大数据量的树，可以使用异步加载（lazy loading）技术，只加载当前可视区域的节点，提高性能。 11. **与服务器端通信**： 当用户完成选择后，通常需要将选中的节点ID发送到服务器端进行保存或处理。这可以...

    Ext.ux.tree.treegrid异步加载

    本文详细介绍了如何使用ExtJS中的`Ext.ux.tree.TreeGrid`组件实现异步加载功能，包括前端配置和后端数据处理两个方面。通过这种方式可以有效提升用户体验，同时减轻服务器的压力。在实际开发过程中，还需要根据具体...

    动态加载extjs tree

    7. **配置项**: 在配置Tree和TreeStore时，还需要注意一些与动态加载相关的配置项，如`rootVisible`（是否显示根节点）、`loadMask`（加载时是否显示遮罩）、`async`（启用异步加载）等。 通过以上介绍，我们可以...

    Extjs 动态加载树

    2. **异步加载**: 在动态加载树中，数据通常不是一次性全部加载，而是通过异步请求获取。Extjs的TreeLoader或TreeStore负责处理这些请求，当用户展开节点时，会发送Ajax请求到服务器获取子节点数据。 3. **数据模型...

    extjs-tree.zip_extjs tree

    这个"extjs-tree.zip"文件包含了使用Java编写的ExtJS异步树形控件的示例代码，旨在帮助开发者快速理解和应用这一功能。ExtJS是Sencha公司开发的一个前端框架，广泛应用于构建富互联网应用程序（RIA）。 在ExtJS中，...

    extjs的tree的使用

    Tree组件支持动态加载数据，这意味着在树展开时，可以异步地从服务器获取子节点数据，而不是一开始就加载所有数据，这在处理大量数据时非常有用。动态加载可以通过在`Ext.data.TreeStore`中设置`proxy`和`autoLoad`...

    extjs ajax tree（js动态树,无需递归）

    ExtJS AJAX Tree是一种基于JavaScript的动态树形结构，它利用AJAX技术来异步加载节点数据，无需在服务器端生成完整的树结构。这种方式可以显著提高页面加载速度，尤其是在处理大量数据时。ExtJS是一个功能丰富的...

    ExtJs_TreeDemo

    - `Ext.data.TreeStore`用于管理树节点数据，它可以连接到服务器进行异步加载。 3. **节点操作**： - `expand()`: 展开节点。 - `collapse()`: 折叠节点。 - `select()`: 选择节点。 - `unselect()`: 取消选择...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    动态加载本地数据到`Ext.Panel`通常涉及到异步请求，使用`Ajax`或`Store`的`load`方法，通过URL获取JSON或XML格式的数据，并将其渲染到面板内。 例如： ```javascript var panel = Ext.create('Ext.Panel', { ...

    extjs tree

    如果需要异步加载，还需设置`loadMask`（加载遮罩）和`async`（异步加载标志）。 4. 自定义节点模板：通过`viewConfig`配置项，可以自定义节点的样式和行为，例如使用`tpl`和`indent`来控制节点的显示。 5. 绑定...

    Extjs Tree + JSON + Struts2 示例源代码

    它支持拖放操作、异步加载以及多种节点类型和样式。 2. **JSON (JavaScript Object Notation)**: JSON 是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在本例中，服务器端的Struts2框架...

    extjs 写的动态加载、增删改查、拖拽Tree（完整版）

    动态加载通常通过配置`rootVisible: false`、`loadMask: true`以及设置`treeStore`的`proxy`和`autoload`属性来实现，同时配合使用`treeStore.load()`方法来异步加载数据。 接下来是增删改查（CRUD）操作。在ExtJS ...

    ExtJs Tree

    - **异步加载**：通过`Ext.tree.TreeLoader`实现数据的异步加载，其中`dataUrl`指定了获取数据的URL路径。 - **根节点配置**：通过`root`属性指定树的根节点，该节点可配置自己的`text`、`iconCls`和`id`等属性。 #...

    Extjs的tree

    在ExtJS中，可以使用`Ext.data.proxy.WCF`作为数据代理，配置WCF的服务地址和方法，以异步方式加载树数据。 7. **自定义节点** 除了基本的文本和图标，节点还可以包含其他组件，如按钮、输入框等，以增强交互性。...

    Extjs3.2.0+asp.net动态Tree

    在3.2.0版本中，TreePanel支持异步加载，可以通过Ajax请求获取节点数据，实现动态加载，提高页面性能。 2. **ASP.NET**：这是一种微软提供的服务器端编程平台，用于构建动态Web应用程序。在这个项目中，ASP.NET可能...

    ExtJS3 实现异步下拉树

    2. **Ajax 数据源**：异步加载数据通常通过Ajax请求实现。需要定义一个`TreeStore`，配置`proxy`为`Ext.data.TreeProxy`，并设置`url`属性指定服务器接口地址，用于获取节点数据。 3. **JsonReader**：数据解析器，...

    extjs tree示例

    ExtJS Tree 示例是一种基于ExtJS库实现的交互式树形组件，它允许用户在Web应用程序中展示层次结构数据。在本示例中，我们将探讨如何使用ExtJS来创建、访问和操作一个树形结构，特别是在数据库操作方面，如添加和删除...

Magicbox
Global site tag (gtag.js) - Google Analytics