ExtJS Tree (iii) of the ExtJS beginner's course

The first two times I introduced the static tree and the tree that was generated from the data loaded by the database, today, I'm going to put some of the main things that are left of ExtJS tree, and the rest is mainly: event processing of trees, editable trees, and drag-and-drop trees, and finally, a tree that can be loaded asynchronously.

event handling of the tree

     

The main events of the tree are: 1, expand node events. 2, Collapse node events. 3, click the node event. 4. Double-click the node event. Below we test the tree's main events with a static tree.

Ordinary static tree = new Ext.tree.TreePanel ({el: ' Tree-div '}); Create root node var root = new Ext.tree.TreeNode ({text: ' Allshengfen '}); Create parent node var shengfen1 = new Ext.tree.TreeNode ({text: ' Heilongjiang '}); var shengfen2 = new Ext.tree.TreeNode ({text: ' Liaoning '}); var city1 = new Ext.tree.TreeNode ({text: ' Harbin '}); var city2 = new Ext.tree.TreeNode ({text: ' Daqiang '}); var city3 = new Ext.tree.TreeNode ({text: ' Shenyang '}); var city4 = new Ext.tree.TreeNode ({text: ' Dalian '}); Adds a child node to the parent node Shengfen1.appendchild (city1); Shengfen1.appendchild (City2); Shengfen2.appendchild (CITY3); Shengfen2.appendchild (CITY4); Adds a child node to the parent node Root.appendchild (SHENGFEN1); Root.appendchild (SHENGFEN2); Set root node to root node Tree.setrootnode (root); Make this tree appear in the div tag tree.render (); Expand Node Event Tree.on ("Expandnode", function (node) {alert ("[" +node.text+ "]open");}); Collapse Node Event Tree.on ("Collapsenode", function (node) {alert ("[" +node.text+ "]close");}); Click the node event tree.on ("click", Function (node) {alert ("[" +node.text+ "]click"); Double-click the node event Tree.on ("DblClick ", function (node) {alert (" ["+node.text+"]double click ");  

Because there is a conflict between clicking and double-clicking, we can first comment out a separate test when we test.

Editable Tree

     

with the basis of our ExtJS, I went straight to the code. The simple features I have written in the comments of the code.

The following example uses the Treenodeservlet.java class so I post this code as well.

public class Treenodeservlet extends HttpServlet {private static final long serialversionuid = 1L;/** * @see HttpServlet #HttpServlet () */public Treenodeservlet () {super ();//TODO auto-generated constructor stub} @Override protected void S Ervice (HttpServletRequest request, httpservletresponse response) throws Servletexception, IOException { Response.setcontenttype ("Text/html;charset=utf-8"); PrintWriter out = Response.getwriter (); String node = request.getparameter ("node"); String json = ""; if ("0". Equals (node)) {json = ' [{id:1,text: ' Node 1 '},{id:2,text: ' Node 2 '}] ';} else if ("1". Equals (node)) {json = "[{id:11, Text: ' Node One ', Leaf:true},{id:12,text: ' node ', leaf:true}] '; else if ("2". Equals (node)) {json = "[{id:21,text: ' node '},{id:22,text: ' node ', leaf:true}]";} else if ("? equals" (Node ) {json = "[{id:211,text: ' node 211 ', Leaf:true},{id:212,text: ' Node 212 ', leaf:true}]";} out.write (JSON); } }

var tree = new Ext.tree.TreePanel ({el: ' Tree-div ', Loader:new Ext.tree.TreeLoader ({dataurl: ' ...) /treenodeservlet '})}); var root = new Ext.tree.AsyncTreeNode ({ID: ' 0 ', text: ' Harbin '}); Tree.setrootnode (root); Tree.render (); Set the tree to edit var treeeditor = new Ext.tree.TreeEditor (Tree,{allowblank:false}); Set only leaf node editable treeeditor.on ("Beforestartedit", function (treeeditor) {return treeEditor.editNode.isLeaf ();}); Tree.on ("click", Function (node) {alert ("The name is:" +node.text+ "* *" +node.id);}); The value edited here is output Treeeditor.on ("complete", function (treeeditor,newvalue) {alert ("The name had been modified,the result is:" + NewValue); });

a tree that can be dragged

var tree = new Ext.tree.TreePanel ({el: ' Tree-div ',//settings can be dragged Enabledd:true, Loader:new Ext.tree.TreeLoader ({data URL: '.. /treenodeservlet '})}); var root = new Ext.tree.AsyncTreeNode ({ID: ' 0 ', text: ' Harbin '}); Tree.setrootnode (root); Tree.render (); Set leaf node to append element Tree.on ("Nodedragover", function (e) {var node = E.target; if (node.leaf) Node.leaf = false; return true;});

Load Tree Asynchronously

Asynchronous loading trees are very common, because the trees we generate on the page are often the data found from the database, sometimes our data volume is very large, if every time the full load so wasteful resources, so we use the asynchronous loading of the tree. The so-called asynchronous loading tree is: We click which node, just load the elements under this node, do not query other elements. But the amount of data is large, and the level of the tree is very much more useful, we will implement an asynchronous loading of the tree. I have all the code glued out to make it easy for everyone to run the test directly.

1, prepare the data of the database. The data we use in the second section is OK.

2, Vo is the JavaBean, we also in the second section will be passed, the following is the code.

public class Tree {private int id; private String text; private boolean leaf; public tree () {} public tree (int id,string Text,boolean leaf) {this.id = id; this.text = text; this.leaf = leaf;} public int getId () {return id;} public void SetI d (int id) {this.id = ID;} public String GetText () {return text;} public void SetText (String text) {this.text = text; public boolean isleaf () {return leaf;} public void Setleaf (Boolean leaf) {this.leaf = leaf;}}

3, then is the query DAO, in fact, and the second section of the same, but the second is the query all, and here we just click on the node to query the data, so we are based on the ID passed over the query part of the data to display.

public class DAO {Connection conn; PreparedStatement pstate; ResultSet rs; Public List findall (int id) {List list = new ArrayList (); String sql = "Select Deptid,deptname from dept where higherdept =" +id; try{conn = Dbconn.getconn (); pstate = conn.preparestatement (sql); rs = Pstate.executequery (); while (Rs.next ()) {Tree Vo = New Tree (); Vo.setid (Rs.getint ("DeptID")); Vo.settext (rs.getstring ("Deptname")); Vo.setleaf (FALSE); List.add (VO); }}catch (Exception e) {e.printstacktrace ();} finally{Dbconn.closers (RS); Dbconn.closeprestate (pstate); DBCONN.CLOSECONN (conn); } return list; } }

This involves another tool class, which is the class used to connect to the database, which is very simple and should not be a problem.

4, then is Servlet,servlet we also simple processing, is to receive the page passed over the node ID, and based on this ID query data.

public class Treeservlet extends HttpServlet {private static final long serialversionuid = 1L;/** * @see Httpservlet#htt Pservlet () */public Treeservlet () {super ();//TODO auto-generated constructor stub} @Override protected void service (H Ttpservletrequest request, HttpServletResponse response) throws Servletexception, IOException { Response.setcontenttype ("Text/html;charset=utf-8"); PrintWriter out = Response.getwriter (); String node = request.getparameter ("pid"); int id = integer.parseint (node); DAO dao = new Dao (); List List = new ArrayList (); List = Dao.findall (ID); Response.getwriter (). Write (Jsontools.getjsonarray (list). ToString ()); } }

5, the following is the page JS file.

var tree = new Ext.tree.TreePanel ({el: ' Tree-div ', loader:new///The first visit only loads the data under the root node Ext.tree.TreeLoader ({dataurl: ' ...) /treeservlet?pid=23010000 '})}); var root = new Ext.tree.AsyncTreeNode ({text: ' Harbin ', Draggable:false, id: ' 23010000 '}); Tree.setrootnode (root); Tree.render (); Load the data under the node according to the clicked node, click which node to load which node's data tree.on (' Beforeload ', function (node) {if (node.id!= ' 23010000 ') { Tree.loader.dataUrl = '.. /treeservlet?pid= ' +node.id; } });

This completes the entire asynchronous load of the tree. Complete the asynchronous loading of the tree, then the main content of ExtJS trees is almost, there are some details to study and research on it. If there is a mistake or a lack of hope to point out.

Subscribe to my public number and find the latest articles