Summary of the use of ExtJS (3)--tree-shaped structure

In the application, we often need to display or process the tree structure of object information, such as department information and regional information, the tree is a very typical data structure, which can be represented by trees. For traditional HTML pages, it is difficult to rely entirely on manual coding to implement the tree, because a lot of JS code needs to be written, especially for Ajax asynchronous loading, not only involves the asynchronous loading of AJAX data, but also the need to consider cross-browser support, processing is very troublesome, EXT provides the ready-made tree control, through these controls, may in the B/s application rapid development contains the tree information structure application.

This paper is a detailed introduction of the use of tree structure and examples. One, create a tree

The tree control is defined by the Ext.tree.TreePanel class, the name of the control is inherited from the panel panel, the tree control is very simple in ext, so let's look at the code (including configuration information) first.

The argument tree here indicates that the id.html of the rendered Dom should have <div id= "trees" ></div> corresponds, and the last one will appear in the DIV position.

Once you have the tree panel, you have to set the root, because you have to have a root to grow the side, and finally build the complete tree, so the root is required. The effect of the implementation is shown in Figure 1.

Fig. 1 A tree with only roots two, for the tree to show the leaves of the branch

The example code above generates a tree without roots, and the following code adds branches and leaves to the tree, and the code list is as follows:

<script type= "Text/javascript" > Ext.onready (Function () {var tree=new Ext.tree.TreePanel ({el: ' Tree ', autoheight : true}); var root=new Ext.tree.TreeNode ({text: ' Zone info '}); var node1=new Ext.tree.TreeNode ({text: ' Hunan Province '}); var node3=new Ext.tree.TreeNode ({text: ' Guangdong Province '}); var node2=new Ext.tree.TreeNode ({text: ' Guangzhou '}); Node3.appendchild (Node2); Root.appendchild (Node1); Root.appendchild (NODE3); Tree.setrootnode (root); Tree.render (); }); </script>

The effect figure is shown in Figure 2:

Figure 2 The complete tree control

Note: On the one hand, we can modify <div id= "tree" style= "height:300px;" ></div> to set the div height, and you can also set the Treepanel Autoheight property to tree, you can automatically calculate the height, otherwise the expanded TreeView does not see the foliage. Iii. use of Treeloader to obtain data

Using the above input method to get the data is not only troublesome, but also error-prone, Ext.tree.TreeLoader can use the data from the background to assemble a tree for us, we only need to provide data, let Treeloader complete the data conversion and assembly node operation.

(1) We want to configure a treeloader for Treepanel, as shown in the following code:

var tree=new Ext.tree.TreePanel ({el: ' Tree ', Loader:new Ext.tree.TreeLoader ({dataurl: ' Data.txt '}), autoheight:true}) ;

(2) The Treeloader here contains only one parameter {dataurl: ' Data.txt '}, which means that the tree reads data from where it finishes rendering. Data.txt contents are as follows:

[{text: ' Not the Leaf '}, {text: ' Is leaf ', leaf:true}]

(3) Now view the page can still see only the root, did not read the data and displayed on the page, because we use the TreeNode does not support Ajax, we need to change it to Asynctreenode, so that we can achieve the desired asynchronous loading effect, as shown in the following code:

var root=new Ext.tree.AsyncTreeNode ({text: ' Zone info '});

Note: Root.expand (true,true) must be modified to Root.expand () to avoid endless loops to expand the branches. Four, read local JSON data

Reading local JSON is actually an alternative way of using Treeloader. Because sometimes there are not many tree-shaped data, in order to get a small amount of data, but Ajax access to the background is not cost-effective. First set an empty treeloader for Treepanel, as shown in the following code:

var tree=new Ext.tree.TreePanel ({el: ' Tree ', loader:new Ext.tree.TreeLoader (), autoheight:true});

Then, set a root node and set the Children property for the root node, as shown in the following code:

var root=new Ext.tree.AsyncTreeNode ({text: ' I am root ', children:[{text: ' Leaf No.1 ', leaf:true}, {text: ' Leaf No.1 ', leaf:true } ] }); Tree.setrootnode (root);

Here are a few things to note:

(1) Treeloader must be set, otherwise the root node will always be in read state, unable to get the child nodes defined in children

(2) The root node must be Asynctreenode, and if it is TreeNode, the child node cannot be generated

(3) The leaf nodes in the child nodes must all be leaf:true, otherwise the read status will be displayed. Five, right button menu

The Tree pop-up Right-click menu effect is shown in Figure 3:

Figure 3 Right-click menu effect

The following steps are implemented:

(1) Make a custom menu, as shown in the following code:

var contextmenu=new Ext.menu.Menu ({id: ' Thecontextmenu ', items:[{text: ' Click ', Handler:function () {alert (' I've been clicked ');}}});

(2) Bind ContextMenu time as shown in the following code:

Tree.on ("ContextMenu", function (node,e) {e.preventdefault (); Node.select (); Contextmenu.showat (E.getxy ());}); Vi. Modifying the default icon for a node

In fact, each tree node has the icon and the Iconcls attribute, they are responsible for the node icons, and now we modify the tree node icon, whether it is through the new manually created node, or through JSON to read the node, set the same way, as shown in the following code:

var root1=new Ext.tree.TreeNode ({text: ' Icon ', Icon: ' User_female.png '}); Seven, pop-up dialog from the node

The following code lets the dialog box appear to be flying out of the title:

Tree.on ("click", Function (node) {Ext.Msg.show ({title: ' Hint ', MSG: "You clicked" +node, AnimEl:node.ui.textNode});}); Eight, node hint information

When we hover over a node, we get a hint, and in order to do that, we need to make some changes to the provided JSON data, add the corresponding node hint in JSON, and we give each node data a qtip: ' xxx ' parameter, this node can display the hint information.

However, just add this parameter for JSON can not display the message on the page, you need to first in JS to the EXT prompt function initialization.

Ext.QuickTips.init ()//Open Prompt function

This line of code must be completed before other features are loaded, and it is recommended that the first line of the Onready function be written. The specific code is as follows:

<script type= "Text/javascript" > Ext.onready (Function () {Ext.QuickTips.init (); var tree=new Ext.tree.TreePanel ( {el: ' Tree ', loader:new Ext.tree.TreeLoader (), autoheight:true}); var root=new Ext.tree.AsyncTreeNode ({text: ' I am root ', children:[{text: ' Leaf No.1 ', Qtip: ' No1 ', leaf:true}, {text: ' Leaf No.1 ', Qtip: ' No2 ', Leaf:true}]}; var root1=new Ext.tree.TreeNode ({text: ' Icon ', Icon: ' User_female.png '}); Tree.setrootnode (root); Root.expand (true,true); var contextmenu=new Ext.menu.Menu ({id: ' Thecontextmenu ', items:[{text: ' Click ', Handler:function () {alert (' I've been clicked ');}}}); Tree.on ("ContextMenu", function (node,e) {e.preventdefault (); Node.select (); Contextmenu.showat (E.getxy ());}); Tree.on ("click", Function (node) {Ext.Msg.show ({title: ' Hint ', MSG: "You clicked" +node, AnimEl:node.ui.textNode});}); Tree.render (); }); </script> Nine, set hyperlinks for nodes

Although we can listen to the click event, it is also a good idea to set the address of the hyperlink directly in the node tree, which is what many people want to achieve, with the following specific code:

var root=new Ext.tree.AsyncTreeNode ({text: ' I am root ', children:[{text: ' Sina net ', Qtip: ' Sina ', Leaf:true,href: ' http:// Www.sina.com.cn '}, {text: ' Baidu China ', Qtip: ' Search engine ', leaf:true,href: ' http://www.baidu.cn ', hreftarget: ' _blank '}];