In ExtJS, whether it is a leaf node or a non-leaf node, TreeNode is used to represent the node of the tree. In ExtJS, there are two types of tree nodes. One node is an ordinary simple tree node, defined by Ext.tree.TreeNode, and the other is a tree node that needs to load child node information asynchronously. This class is defined by Ext.tree.AsyncTreeNode.
In the data, text displays text, leaf node, children child node, expanded
var store = Ext.create('Ext.data.TreeStore', {root: {expanded: true,children: [{ text: "Study abroad", leaf: true },{ text: "Homework", expanded: true, children: [{ text: "English", leaf: true },{ text: "Algebra", leaf: true}] },{ text: "TOEFL", leaf: true }]}});TreePanel reads JSON data from servlet
Data in Ext JS Tree is often obtained from dynamic programs on the server side.
In order to obtain data, we can first write a tree-like access to the common foreground of Servlet that returns JSON:
Server-side servlet code:
import java.io.IOException;import java.io.PrintWriter;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.Servlet.ServletException;import javax.servlet.http.HttpServlet;public class TreeNodeServlet extends HttpServlet {protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");//The node here is the ID set in the AsyncTreeNode assembly in the foreground. See the JS program below String treeNode = request.getParameter("node");String json = "";PrintWriter out = response.getWriter();if("0".equals(treeNode)) {json+="[{id:1,text:'0-1'},{id:2,text:'0-2'}]";}else if("1".equals(treeNode)) {json+="[{id:11,text:'0-1-1',leaf:true},{id:12,text:'0-1-2',leaf:true}]";}else if("2".equals(treeNode)) {json+="[{id:21,text:'0-2-1'},{id:22,text:'0-2-2',leaf:true}]";}else if("21".equals(treeNode)) {json+="[{id:211,text:'0-2-1-1',leaf:true},{id:212,text:'0-2-1-2',leaf:true}]";}out.write(json);}}Now you can access the servlet created above in the loader method formed by TreePanel in the foreground. The code is as follows:
Client display code
Ext.onReady(function(){var tree = new Ext.tree.TreePanel({//The div-tree here is the id value of an object created in html: 'div-tree',//Use the loader method to access TreeNodeServletloader: new Ext.tree.TreeLoader({dataUrl:'../TreeNodeServlet'})});var root = new Ext.tree.AsyncTreeNode({id:'0',text:'0'})tree.setRootNode(root);tree.render();root.expand();});The renderings are as follows:
Drag and drop nodes between treePanels
Sometimes in the program, we need to drag and drop an element of a TreePanel into another TreePanel. If we are dragging in the same tree, we set the enableDD parameter of the component to true, and now we need to drag elements between different books. At this time, we can set the enableDrag and enableDrop parameters of the component. The detailed examples are as follows:
1. Write JS code:
JS Code
Ext.onReady(function(){ var tree1 = new Ext.tree.TreePanel({ el: 'tree1', //Set enableDrag to true here to indicate that the element can be dragged from here to elsewhere enableDrag:true, loader: new Ext.tree.TreeLoader({dataUrl: 'treeData1.txt'}) }); var tree2 = new Ext.tree.TreePanel({ el: 'tree2', //Set enableDrop to true here to indicate that the element dragged in this tree can be placed enableDrop:true, loader: new Ext.tree.TreeLoader({dataUrl: 'treeData2.txt'}) }); var root1 = new Ext.tree.AsyncTreeNode({text:'With the Node'}); var root2 = new Ext.tree.AsyncTreeNode({text:'Book'}); tree1.setRootNode(root1); tree2.setRootNode(root2); tree1.render(); tree2.render();});2. The HTML code is as follows:
HTML code
<div id="tree1"></div><div id="tree2"></div>
3. Write two txt files that need to be loaded in TreeLoader, and the data inside is in JSON format:
treeData1.txt:
[ {text:'Non-leaf node'}, {text:'Leaf node',leaf:true}]treeData2.txt:[ {text:'Computer',children:[ {text:'Java',children:[ {text:'Java',children:[ {text:'Java',leaf:true}, {text:'Thinking in Java',leaf:true} ]}, {text:'Introduction to Algorithm',leaf:true} ]}, {text:'Music',children:[ {text:'Basics of Music Theory',leaf:true}, {text:'Carcassie Classical Guitar Tutorial',leaf:true} ]}]4. The program effect is shown in the figure below: