Using ExtJS2, asynchronously reads the data in JSON (JavaScript Object notation) Treeloader constructs an asynchronous-loaded tree.
1. Download ExtJS2, Address: http://www.extjs.com/
Download ext JS 2.1 sdk:ext-2.1.zip.
The examples folder is full of ExtJS example demo program.
ExtJS2 main will use the following several files: Ext-all.css, Ext-base.js, Ext-all.js, the use of the method can refer to the demo.
Ext Document Center:
http://www.ajaxjs.com/docs/docs/
http://www.jackytsu.com/extcn/docs/
2. Download Json-lib, Address: http://json-lib.sourceforge.net/
After opening the URL, there is a passage on the home page:
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
The above jar file needs to be downloaded and used together with Json-lib.
Commons Download Address: http://commons.apache.org/
Ezmorph Download Address: http://ezmorph.sourceforge.net
Alternatively, go to the http://www.docjar.com search download.
Use of JSON, refer to related documentation.
3. Use the Mytree.js file written by ExtJS.
For Ext.tree.TreePanel, you can refer to:
Http://www.jackytsu.com/extcn/docs/output/Ext.tree.TreePanel.html
The Mytree.js code is as follows:
--------------------------------------
Ext.onready (function () {
var tree = Ext.tree;
Defines the loader of the root node
var treeloader=new tree.treeloader ({dataurl: ' tree.jsp? Did=1 '});
To load the root node asynchronously
var rootnode=new tree.asynctreenode ({
ID: ' 1 ',
Text: ' Directory root node '
});
var treepanel = new Tree.treepanel ({
Renderto: "Tree_div",//If you use Renderto, you cannot use the Setrootnode () method, you need to set the root property in Treepanel.
El: ' Tree_div ',//filling area
Rootvisible:true,//Hide root node
Border:true,//Border
Animate:true,//animation effect
Autoscroll:true,//automatic scrolling
Enabledd:false,//dragging nodes
Containerscroll:true,
Loader:treeloader
});
Setting the root node
Treepanel.setrootnode (RootNode);
Responding to events, passing node parameters
Treepanel.on (' Beforeload ',
function (node) {
Treepanel.loader.dataurl= ' tree.jsp? Did= ' +node.id; Loader to define child nodes
});
Treepanel.render ();
Rootnode.expand (False,false);
});
--------------------------------------
4. Display the extjstree.jsp of the tree. The JSP file invokes the Mytree.js and displays the tree.
Note that the three files ext-all.css, ext-base.js, ext-all.js are used.
The extjstree.jsp code is as follows:
--------------------------------------
<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>
<body>
<table width= "100%" height= "100%" border= "0" cellpadding= "0" cellspacing= "0" oncontextmenu= "return false;" >
<tr>
<TD align=left valign= "Top" >
< filled area of the!--tree-->
<div id= "Tree_div" style= "height:101%;width:100%" ></div>
</td>
</tr>
</table>
</body>
--------------------------------------
5. Constructs the tree node.
Defines the attributes of a tree node, including the node ID, Text, icon, whether it is a leaf node, whether it is expanded, and so on.
The Jsontreenode.java code is as follows:
--------------------------------------
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; Node display
Private String CLS; Icon
Private Boolean leaf; Whether leaves
private String href; Link
Private String Hreftarget; Link point to
private Boolean expandable; Whether to expand
Private String description; Descriptive information
Get, set method. Slightly.
}
}
--------------------------------------
6. Query from database, read byte point data and construct JSON data.
The Jsontree.java code is as follows:
--------------------------------------
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");
StringBuffer parentidbuffer =new stringbuffer ();
Parentidbuffer.append ("|");
while (Rs.next ())
{
Parentidbuffer.append (rs.getstring ("PID"));
Parentidbuffer.append ("|");
}
Get all the Parentdid list (this is an ingenious algorithm ^_^)
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)//parent node
{
Treenode.setcls ("folder");
Treenode.setleaf (FALSE);
Treenode.setexpandable (FALSE);
}
else//child node
{
Treenode.setcls ("file");
Treenode.setleaf (TRUE);
Treenode.setexpandable (FALSE);
}
Treenodearray.add (TreeNode);
}
Jsonarray Jsonarray = Jsonarray.fromobject (Treenodearray); Get a JSON array
return jsonarray.tostring ()//returns JSON data
}
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. The tree.jsp of the ExtJS Treeloader call in Mytree.js.
Clicking TreeNode on the tree will load the next level node.
TREE.JSP is responsible for TreeNode the JSON data that is constructed by the next level node after clicking.
The tree.jsp code is as follows:
--------------------------------------
<%@ 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. The story of the rivers and lakes
1. If you want to do ExtJS tree demo, Generate Treeloader (), try not to use static JSON format files.
Such as:
Tree.treeloader ({dataurl: '/jsondata.txt '});
Tree.treeloader ({dataurl: '/jsondata.js '});
And so forth.
On the Internet, when doing ExtJS tree, a lot of information said using a static JSON file to do demo, I use ExtJS2.1, once did not succeed.
This wasted a lot of time and energy and paid a heavy price.
2. When using JSON, you need some jar files to work with.
Download from the Internet, many are zip files, then did not think more, according to past experience, directly modify the suffix named jar, and then import to the Lib folder, the results will be an error.
Such as:
Javax.servlet.servletexception:org/apache/commons/lang/exception/nestableruntimeexception
Java.lang.noclassdeffounderror:org/apache/commons/lang/exception/nestableruntimeexception
Searched a lot of information, did not fix.
Initially assumed to be the result of a jar version mismatch. In this matter for a long time, but also waste a lot of energy, pain AH.
Spirit of torture.
In fact, the real jar files need to extract the zip file to get. Low-level errors. Collapse.
3. Questions relating to s.gif documents
The problem will be exposed when the system is not connected to the Internet.
Because ExtJS when creating a tree, by default, it always accesses http://extjs.com/s.gif to download this s.gif picture file.
In the case of not connected to the network, the tree node navigation picture is not displayed, through the right key properties know, is http://extjs.com/s.gif.
By searching, it was found that the s.gif was defined in the Ext-base.js file:
Blank_image_url: "http:/" + "/extjs.com/s.gif"
and the sample program in ExtJS is with this s.gif picture file.
According to the specific application situation, modify the ext-base.js into:
Blank_image_url: ". /images/default/s.gif "
4. When debugging, JS error: not end of string constants.
This problem is because the JS call does not specify the character set, resulting in JS in the Chinese characters appear garbled.
When calling JS, you can specify the use of a character set.
such as: <script type= "Text/javascript" defer=true src= "Xxx.js" charset= "GBK" >
8. AJAX
ajax:asynchronous JavaScript and XML (asynchronous JavaScript and XML)
Just for the tree, but also to learn ExtJS.
Extjs2.1+json = dynamic asynchronous loading of trees
Original address: http://caodaoxi.javaeye.com/blog/787910
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
