Use ext js to generate a dynamic tree
Today, I wrote a demo for my colleagues to use ext js to generate a dynamic tree. Here, I will share it with you for future reference.
I. Requirements
- A department tree is required to be generated, and only the root department is listed initially.
- When a department node is clicked, It is dynamically loaded into the direct sub-departments under the department, and the department node is expanded.
- Department node requirements support right-click events. When right-click an event, related operation menus are listed.
II. Key Categories
Two classes of ext JS are involved:
- Ext. Tree. treenode
- Ext. Menu. Menu
Related API can refer to: http://extjs.com/deploy/ext/docs/
Iii. Sample Code
1. Check the test page first.
- <HTML>
- <Head>
- <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>
- </Head>
- <Body>
- <SCRIPT type = "text/JavaScript" src = "../shared/examples. js"> </SCRIPT>
- <H1> Generate a dynamic tree now
- <Div id = "Container">
- </Div>
- </Body>
- </Html>
2. Let's look at the function of generating the tree.
- /***********************************
- 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; I <n; I ++ ){
- VaR sub1 = new Ext. Tree. treenode ({
- ID: I + 1,
- Text: "subsidiary" + (I + 1 ),
- Singleclickexpand: True,
- Listeners :{
- // Listen to the Click Event
- "Click": function (node ){
- Myexpand (node );
- },
- // Right-click the listener
- "Contextmenu": function (node, e ){
- // List the right-click menu
- Menu = new Ext. Menu. menu ([
- {
- Text: "Open current node ",
- Icon: "list.gif ",
- Handler: function (){
- Myexpand (node );
- }
- },
- {
- Text: "editing current node ",
- Icon: "list.gif ",
- Handler: function (){
- Alert (node. ID );
- }
- },
- {
- Text: "deleting the current node ",
- Icon: "list.gif ",
- Handler: function (){
- Alert (node. ID );
- }
- }]);
- // Display at the current position
- Menu. showat (E. getpoint ());
- }
- }
- });
- Root. appendchild (sub1 );
- }
- Mytree. setrootnode (Root); // you can specify the root node.
- Mytree. Render (); // do not forget to render (), otherwise it will not be displayed.
- }
3. Expand the subnode code
- /*************************************** ***
- Expand a 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: {// listener
- "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: {// listener
- "Click": function (node ){
- Expand2 (node)
- }
- }
- }));
- } Else {
- Alert (node. ID + "no sub-door ");
- }
- }
You can run the above Code on your own and discover the following phenomena: no matter how many times you click "subsidiary 1", only one node of "first son of subsidiary 1" will be listed, every time you click "subsidiary 2", there will be an additional "first son of subsidiary 2" node. Why?
Because every click will inspire the myexpand function, and node. Item (0) = undefined is added to "subsidiary 1". Do you understand this?
That is, if there is no sub-department under the department, the sub-department is loaded; otherwise, the sub-department is expanded and not re-loaded.
Okay, let's get there. If it's sleepy, I won't explain it in detail.
