Generate dynamic tree example code using Ext Js_javascript skills

1. Requirements

Requires the generation of a department tree. Initially, only the root department is listed
When a department node is clicked, the direct sub-departments under the department are dynamically loaded and the department node is expanded
Department nodes are required to support right-click events. When the right button is clicked, the relevant operation menu is listed
2. Key classes

Here are mainly two classes of Ext JS:

Ext .tree.TreeNode
Ext.menu.Menu
Related APIs can refer to: http://extjs.com/deploy/ext/docs/

3. Code examples

1. Take a look at the test page first

Copy the code The code is as follows:

< ;!-- Common Styles for the examples -->

< ;link rel="stylesheet" type="text/css" href="../shared/lib.css" />








< h1>Now we need to generate a dynamic tree

2. Take another look at the spanning tree function

Copy the code The code is as follows:

/***********************************
Create tree
by chb
**** ********************************/
function createTree(n){


Ext.QuickTips.init();
var mytree=new Ext. tree.TreePanel({
el:"container",
animate:true,
title:"Extjs dynamic tree",
collapsible:true,
enableDD:true,
enableDrag :true,
rootVisible:true,
autoScroll:true,
autoHeight:true,
width:"30%",
lines:true
});

//Root node
var root=new Ext.tree.TreeNode({
id:"root",
text:"Group Company",
expanded:true
}) ;


for(var i=0;ivar sub1=new Ext.tree.TreeNode({
id:i 1,
text :"Subsidiary" (i 1),
singleClickExpand:true,
listeners:{
//Listen to click events
"click":function(node){
myExpand(node );
},
//Listen for right-click
"contextmenu":function(node,e){
//List right-click menu
menu=new Ext.menu.Menu([
{
text:"Open current node",
icon:"list.gif",
handler:function(){
myExpand(node);
}
},
{
text:"Edit current node",
icon:"list.gif",
handler:function(){
alert(node.id);
}
},
{
text:"Delete current node",
icon:"list.gif",
handler:function(){
alert(node.id) ;
}
}]);
//Display at the current location
menu.showAt(e.getPoint());
}
}
});
root.appendChild(sub1);
}
mytree.setRootNode(root);//Set the root node
mytree.render();//Don’t forget to render(), otherwise it will not be displayed
}

3. Code to expand child nodes

Copy code The code is as follows:

/******************************************
Expand Node
** ****************************************/
function myExpand(node){
if(node.id=='1'){
if(node.item(0 )==undefined){
node.appendChild(new Ext.tree.TreeNode({
id:node.id '1',
text:node.text "The first son",
hrefTarget:"mainFrame",
listeners:{//Listening
"click":function(node,e){
expand2(node)
}
}
} ));
}


node.expand();


}else if(node.id=='2'){
node. appendChild(new Ext.tree.TreeNode({
id:node.id '2',
text:node.text "The first son",
hrefTarget: "mainFrame",
listeners:{//Listening
"click":function(node){
expand2(node)
}
}
}));
}else{
alert (node.id "No more sub-departments");
}
}

Readers can run the above code themselves and will find the following phenomenon: no matter how many times they click "Subsidiary 1", only one node "The First Son of Subsidiary 1" will be listed, and every time "Subsidiary 1" is clicked 2", there will be an additional "first son of subsidiary 2" node. Why is this?

Because every click will trigger the myExpand function, and the judgment of node.item(0)==undefined is added to "Subsidiary 1". Do you understand this?
That is: if there are no sub-departments under this department, the sub-departments will be loaded, otherwise they will only be expanded and not reloaded.

Okay, let’s stop here. I’m sleepy, so I won’t explain it in detail o(∩_∩)o...Haha