使用ExtJS2构造动态异步加载的树

bj_dxd

浏览: 24638 次
性别:
来自: 北京

最近访客更多访客>>

h416373073

liaoze

eandy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT json JSP JavaScript CSS

使用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>

</head>

<body>

<tr>

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

分享到：

Ext事件示例（Ext.Msg.alert） | Ext3.2 direct与Java配置

2010-08-30 00:43
浏览 1513
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论