The use instance of JavaScript in the ExtJS frame Treepanel of the number panel _extjs

In ExtJS, both leaf nodes and non leaf nodes uniformly use TreeNode to represent the nodes of the tree. In ExtJS, there are two types of tree nodes. A node is an ordinary simple tree node, defined by Ext.tree.TreeNode, and a tree node that needs to asynchronously load child node information, which is defined by Ext.tree.AsyncTreeNode.
In the data, text displays the word, the leaf node, the Children node, and the expanded expands

var store = ext.create (' Ext.data.TreeStore ', {
root: {
expanded:true,
children: [
{text: "Study Abroad", LEAF:TR UE},
{text: "Homework", expanded:true, children: [
{text: English, leaf:true},
{text: ' Algebra ', leaf:true}
]},
{text: "TOEFL", leaf:true}
]
}
);

Treepanel read JSON data from the servlet
the data in Ext JS tree is often obtained from the dynamic program on the server side.
In order to get the data, we can start by writing a tree build access to the servlet that returns JSON to the foreground:
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.ServletException;

Import Javax.servlet.http.HttpServlet; public class Treenodeservlet extends HttpServlet {protected void service (HttpServletRequest request, httpservletrespons

E response) throws Servletexception, IOException {response.setcontenttype ("text/html;charset=utf-8");

The node here is the ID set in the Asynctreenode build of the foreground, see the following JS program 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 (treeNode) {json+= "[{id:211,text: ' 0-2-1-1 ', Leaf:true},{id:212,text: ' 0-2-1-2', leaf:true}] ';

} out.write (JSON);

 }

}

You can now access the servlet created above in the loader method of the Treepanel build in the foreground, 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

el: ' Div-tree ',

///Use loader method to access Treenodeservlet

loader:new Ext.tree.TreeLoader ({dataurl: ' ... /treenodeservlet '})

});

var root = new Ext.tree.AsyncTreeNode ({ID: ' 0 ', text: ' 0 '})

Tree.setrootnode (root);

Tree.render ();

Root.expand ();

});

The effect chart is as follows:

Drag and drop nodes between tree Treepanel.
Sometimes we need to drag a treepanel element into another treepanel in a program, and if you drag in the same tree, set the component's Enabledd parameter to True, and now you need to drag the element between different books. The Enabledrag and Enabledrop parameters of the component can be set at this time, with a detailed example as follows:

1. Write JS code:
JS Code

Ext.onready (function () {

  var tree1 = new Ext.tree.TreePanel ({
    el: ' tree1 ',
 // This setting Enabledrag to true means that you can drag elements from here to
    Enabledrag:true,
    loader:new Ext.tree.TreeLoader ({dataurl: ' TreeData1.txt '})
  });
  var tree2 = new Ext.tree.TreePanel ({
    el: ' Tree2 ',
 //Here set Enabledrop to true means that you can place the dragged element Enabledrop in this tree
    : True,
    loader:new Ext.tree.TreeLoader ({dataurl: ' TreeData2.txt '})
  });
  var root1 = new Ext.tree.AsyncTreeNode ({text: ' with node '});
  var root2 = new Ext.tree.AsyncTreeNode ({text: ' book '});
  Tree1.setrootnode (ROOT1);
  Tree2.setrootnode (ROOT2);
  Tree1.render ();
  Tree2.render ();

});

The 2.HTML code is as follows:
HTML code

<div id= "Tree1" ></div>
<div id= "Tree2" ></div>

3. Write two treeloader txt files that need to be loaded, with the data in JSON format:
TreeData1.txt:

[
    {text: ' Non-leaf node '},
    {text: ' leaf node ', leaf:true}
]
treeData2.txt:

[
  {text: ' computer ', children:[
    { Text: ' Java ', children:[
      {text: ' Java core technology ', leaf:true},
      {text: ' Thinking in Java ', leaf:true}
    ]},
    { Text: ' Introduction to Algorithms ', Leaf:true}
  ]},
  {text: ' Music ', children:[
    {text: ' musical basis ', leaf:true},
    {text: ' Carcassi Classical Guitar Tutorial ', leaf:true}
    ]}

4. The program effect is shown in the following illustration: