Title: Use extjs2 to construct a dynamically asynchronously loaded tree
Author: jrq link: http://blog.csdn.net/jrq/archive/2008/06/15/2549839.aspx body: Using extjs2, using JSON (JavaScript Object Notation) treeloader to asynchronously read data, construct a asynchronously loaded tree. 1. Download extjs2, address: http://www.extjs.com/ Download ext JS 2.1 SDK: ext-2.1.zip. The examples folder contains all extjs examples.Program. Extjs2 mainly will use the following files: ext-all.css, ext-base.js, ext-all.js, use method can refer to 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 the URL is opened, there is a line on the homepage: 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 Download the JAR file and use it with JSON-lib. Commons : Http://commons.apache.org/ Ezmorph : Http://ezmorph.sourceforge.net Or, go to the http://www.docjar.com to search for the download. For more information about JSON usage, see related documents. 3. Use the mytree. js file written in extjs. For more information about Ext. Tree. treepanel, see: Http://www.jackytsu.com/extcn/docs/output/Ext.tree.TreePanel.html Mytree. jsCodeAs follows: -------------------------------------- Ext. onready (function (){ VaR tree = ext. tree; // Define the loader of the Root Node VaR treeloader = new tree. treeloader ({dataurl: 'tree. jsp? Did = 1 '}); // Asynchronously load the root node 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 attribute in treepanel. El: 'tree _ Div ', // fill area Rootvisible: True, // hide the root node Border: True, // border Animate: True, // animation effect Autoscroll: True, // auto scroll Enabledd: false, // drag a node Containerscroll: True, Loader: treeloader }); // Set the root node Treepanel. setrootnode (rootnode ); // Respond to the event and pass the node Parameter Treepanel. On ('beforeload ', Function (node ){ Treepanel. loader. dataurl = 'tree. jsp? Did = '+ node. ID ;// Defines the loader of a subnode. }); Treepanel. Render (); Rootnode. Expand (false, false ); }); ------------------------------------ 4. display the tree's extjstree. jsp file. The JSP file calls mytree. js to display the tree. Examples use the ext-all.css, ext-base.js, ext-all.js these three files. Extjstree. jsp The Code is as follows: ------------------------------ <HTML> <TD align = left valign = "TOP"> <! -- Tree Filling Area --> <Div id = "tree_div" style = "height: 101%; width: 100%"> </div> </TD> </Tr> </table> </body> Defines the attributes of a tree node, including the node ID, text, icon, whether it is a leaf node, and whether it is expanded. 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 ;// Leaf? Private string href ;// Link Private string hreftarget ;// Link Private Boolean expandable ;// Expand? Private string description ;// Description // Get , Set method. . } ------------------------------------ 6. query from the database, read the byte 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.exe cutequery ("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 ("| "); } // Get the list of all parentdids (this is a clever Algorithm ^_^) String parentidstring = parentidbuffer. tostring (); Rs = st.exe cutequery (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 // Subnode { Treenode. setcls ("file "); Treenode. setleaf (true ); Treenode. setexpandable (false ); } Treenodearray. Add (treenode ); } Jsonarray = jsonarray. fromobject (treenodearray );// Obtain the JSON array. Return jsonarray. tostring ();// Return 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. Tree. jsp called by extjs treeloader in mytree. js. After you click treenode in the directory tree, the next level of nodes will be loaded. Tree. jsp is responsible for clicking treenode and returning JSON data constructed by the next-level node. 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. Jianghu story 1) if you want to use the demo of extjs tree, do not use static JSON format files when generating treeloader. For example : Tree. treeloader ({dataurl: '/jsondata.txt '}); Tree. treeloader ({dataurl: '/jsondata. js '}); And so on. During online data query and extjs tree creation, many materials say that static JSON files are used for demo and I use extjs2.1, but none of them are successful at a time. This wastes a lot of time and energy, causing a heavy cost. 2) When using JSON, some jar files are required for use. Many of the files downloaded from the Internet are zip files, which were not considered at the time. Based on previous experience, you can directly change the suffix to jar and import the files to the Lib folder. An error is returned. For example: Javax. servlet. servletexception: ORG/Apache/commons/lang/exception/nestableruntimeexception Java. Lang. noclassdeffounderror: ORG/Apache/commons/lang/exception/nestableruntimeexception I checked a lot of information and couldn't fix it. Initially, it was caused by jar version mismatch. It has been a long time-consuming task and a lot of time, effort, and pain. Mental torture. In fact, the real JAR file can be obtained only after the ZIP file is decompressed. Low-level error. Crash. 3). About the s.gif File This problem is exposed without the Internet connection of the system. Because extjs always accesses the s.gif image file http://extjs.com/s.gif by default when generating a tree. The navigation image of the Tree node cannot be displayed without network connection. The right-click attribute shows that it is http://extjs.com/s.gif. After searching, we can find that the s.gif is defined in the ext-base.js file: Blank_image_url: "http:/" + "/extjs.com/s.gif" In addition, the example program in extjs contains the s.gif image file. Modify the ext-base.js: Blank_image_url: "../images/default/s.gif" Or Add the following statement at the beginning of the mytree. js file: Ext. blank_image_url = "../images/default/s.gif"; we recommend that you do this. 4). When debugging, JS reports an error: A String constant that has not ended. This problem occurs because the character set is not specified during JS calls, causing garbled characters in Js. When calling JS, you can specify the character set. For example : <SCRIPT type = "text/JavaScript" Defer = true src = "XXX. js" charset = "GBK"> 8. Ajax Ajax : Asynchronous JavaScript and XML ( Asynchronous JavaScript and XML) I only want to learn extjs for the tree. Extjs2.1 + JSON = dynamically asynchronously loaded tree [-- End --] By jrq 2008/06/15 Yu JingStart 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
