Construct a dynamic tree using ExtJs + JSP

Construct a dynamic tree using ExtJs + JSP
In actual production, the tree structure needs to be dynamically loaded according to the content stored in the background database. For example, in a system, different roles have different permissions, the operations they can perform are also different. If you need to construct a tree structure to display the operations that a role can perform, the tree structure is used.
ExtJs provides a mechanism to dynamically load the tree structure. Here we use TreeStore for dynamic loading. Common formats of dynamic loading data include JSON and XML.
Here we will take a look at how to dynamically load the attribute structure using JSON format data.

First, let's take a look at the created TreeStore.

var tree_store = Ext.create('Ext.data.TreeStore', {    id:'tree_store',    proxy: {    type: 'ajax',    url: 'MyJsp.jsp',    }});

Here we use ajax to request data from a JSP. The following describes the definition of TreePanel.

Var treePanel = Ext. create ('ext. tree. panel ', {id: 'tree _ panel', title: 'dynamic loading', region: 'west', width: 200, rootVisible: false, store: tree_store, listeners: {itemclick: tree_itemclick}, tools: [{type: 'refresh', tooltip: 'refresh', handler: function () {// Ext. data. store load tree_store.load ({scope: this, callback: function (records, operation, success) {treePanel. getRootNode (). eachChild (function (child) {child. expand () ;}}}) ;}],});

Note that this code is used to uninstall the onReady () function and call the load method of tree_store before loading treePanel. You can also write tree_store in treePanel. Otherwise, the tree structure may not be loaded and displayed normally.

The main function of the background is to make up the node information into an appropriate JSON string. If there are not many nodes to load, You Can concatenate strings. If there are many nodes, You Can Use javaBean to encapsulate the node information, then it is spliced in a loop.

Next, let's take a look at the definition of the node class.

Public class Node {private String text; // The Node displays the String private String id; // The Node IDprivate boolean leaf; // whether the Node is a public String getText () {return text ;} public void setText (String text) {this. text = text;} public String getId () {return id;} public void setId (String id) {this. id = id;} public boolean isLeaf () {return leaf;} public void setLeaf (boolean leaf) {this. leaf = leaf ;}}

In actual development, you can retrieve a set of these nodes from the database. Here we use a common method to simulate a set of node information.

Public ArrayList
 
  
GetRes () {ArrayList
  
   
Result = new ArrayList
   
    
(); Node node1 = new Node (); node1.setId ("id of the first Node"); node1.setLeaf (true); node1.setText ("first Node "); node node2 = new Node (); node2.setId ("ID of the second Node"); node2.setLeaf (true); node2.setText ("second Node"); result. add (node1); result. add (node2); return result ;}
   
  
 

Next, let's take a look at how to splice JSON characters based on this set.

Public String getJson () {String result = "[{text: '1's level folder ', id: 'host', children: ["; ArrayList
 
  
Arrlist = getRes (); Iterator
  
   
Iterator = arrlist. iterator (); while (iterator. hasNext () {Node node = iterator. next (); if (iterator. hasNext () result + = "{id: '" + node. getId () + "', text:'" + node. getText () + "', leaf:" + node. isLeaf () + "},"; elseresult + = "{id: '" + node. getId () + "', text:'" + node. getText () + "', leaf:" + node. isLeaf () + "}";} result + = "]}, {text: 'level 2 folder ', id: 'operate', children: [{id: 'addhost', text: 'Third node', leaf: true}, "+" {id: 'addclient', text: 'Fourth node', leaf: true}] "; return result ;}
  
 

Before defining the result string and returning the result, we use the most common String concatenation method. Here we will test it together.

Then let's take a look at the requested JSP page in the url.

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
 <%request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");String json = service.getJson();System.out.println(json);response.getWriter().write(json);%>

In this way, the attribute structure can be dynamically loaded Based on the content in the background during the request page.

Let's take a look:

In this way, when dynamic loading is used, all the information about several points is loaded at a time, that is, when you click to expand the level-1 folder or level-2 folder, the system will not send requests in the background, here, we can see from firebug that, for example, if the hierarchy of fruit trees is deep, constructing JSON strings in the background will be troublesome to send. In this case, asynchronous loading can be used, that is, when the page is loaded for the first time, only the level 1 folder and level 2 folder will be loaded. When you click to expand the level 1 folder or Level 2 folder, the request will continue to be sent back, the subnode that requests to load level 1 folders. Asynchronous loading will be introduced in the next blog.