I. Demand
Requires a department tree to be generated, initially listing only the root department
When clicked on a departmental node, dynamically load the subordinate departments under the Department, and expand the departmental node
The departmental node requires support for right click events, and when you right-click, list the relevant Actions menu
Two. Key categories
Here are mainly related to Ext JS two classes:
Ext.tree.TreeNode
Ext.menu.Menu
Related APIs can refer to: http://extjs.com/deploy/ext/docs/
Three. code example
1. Take a look at the test page first
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>reorder treepanel</title>
<link rel= "stylesheet" type= text/css "href=". /.. /resources/css/ext-all.css "/>
<script type= "Text/javascript" src= ". /.. /adapter/ext/ext-base.js "></script>
<script type= "Text/javascript" src= ". /.. /ext-all.js "></script>
<script type= "Text/javascript" src= "Reorder.js" ></script>
<!--Common Styles for the examples-->
<link rel= "stylesheet" type= text/css "href=". /shared/examples.css "/>
<link rel= "stylesheet" type= text/css "href=". /shared/lib.css "/>
<script type= "Text/javascript" >
/**************
OnLoad Event
***************/
Window.onload=function () {
Createtree (3);
}
</script>
<body>
<script type= "Text/javascript" src= ". /shared/examples.js "></script>
<div id= "Container" >
</div>
</body>
2. Take another look at the function of the spanning tree
Copy Code code as follows:
/***********************************
Creating a 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;i<n;i++) {
var sub1=new Ext.tree.TreeNode ({
Id:i+1,
Text: "Subsidiary" + (I+1),
Singleclickexpand:true,
listeners:{
Listening for click events
"Click": Function (node) {
Myexpand (node);
},
Listening right button
' ContextMenu ': function (node,e) {
Lists the right key 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);
}
}]);
Show in current position
Menu.showat (E.getpoint ());
}
}
});
Root.appendchild (SUB1);
}
Mytree.setrootnode (root);/Set root node
Mytree.render ()//Do not forget render (), or not show OH
}
3. Expand the child node code
Copy Code code 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+ "'s first son",
Hreftarget: "MainFrame",
listeners:{//Monitor
' 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+ "'s first son",
Hreftarget: "MainFrame",
listeners:{//Monitor
"Click": Function (node) {
Expand2 (node)
}
}
}));
}else{
Alert (node.id+ "No sub-department");
}
}
The reader can run a code like this on its own, will find the following phenomenon: No matter how many times to click "Subsidiary 1", will only list "subsidiary 1 of the first son" a node, and each click "Subsidiary 2", there will be a "subsidiary 2 of the first son" node, this is why?
Because each click will trigger the Myexpand function, and "subsidiary 1" added Node.item (0) ==undefined's judgment, here is understood?
That is, if there are no sub departments under the Department, load the child departments, otherwise only expand, do not reload.
OK, here it is, sleepy, not explained in detail O (∩_∩) o ... Ha ha
