使用extjs、json开发用到的包,json的结构模式

最新推荐文章于 2024-09-20 11:14:58 发布

萧逸2005

最新推荐文章于 2024-09-20 11:14:58 发布

阅读量1.8k

点赞数

分类专栏： EXTJS 文章标签： json extjs string tree javascript asynchronous

EXTJS 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

使用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" mce_href="extjs/ext-all.css" /> <mce:script type="text/javascript" src="../extjs/ext-base.js" mce_src="extjs/ext-base.js"></mce:script> <mce:script type="text/javascript" src="../extjs/ext-all.js" mce_src="extjs/ext-all.js"></mce:script> <mce:script type="text/javascript" src="../extjs/mytree.js" mce_src="extjs/mytree.js" defer=true charset="GBK"></mce: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. tree.js中ExtJS的TreeLoader调用的tree.jsp。在目录树上点击TreeNode后会加载下一级节点。 extjsTree.jsp负责TreeNode点击后，传回由下一级节点构造的JSON数据。 extjsTree.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()%> --------------------------------------

8.

   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文件需要解压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">

9. AJAX

   AJAX：Asynchronous JavaScript and XML（异步JavaScript和XML）

   只是为了树，也要学ExtJS 。

   ExtJS2.1＋JSON ＝动态异步加载的树