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

Source: Internet
Author: User

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 (' ', {
root: {
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 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
    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:

    {text: ' Non-leaf node '},
    {text: ' leaf node ', leaf:true}

  {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:

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.