Extjs Tree operations: register events, drag and drop events (target location Judgment), click events, load events, right-click events

1. VaR tree = ext. tree;
2. VaR tree = NULL;
3. Ext. onready (function (){
4. Tree = new tree. treepanel ({
5. El: 'tree-Div ',
6. Onlyleafcheckable: false,
7. Rootvisible: True,
8. Autoscroll: True,
9. Animate: false, // whether to animation
10. Enabledd: True, // whether drag/drop is supported
11. Containerscroll: True,
12. Lines: True,
13. Checkmodel: 'cascade ',
14. Loader: new tree. treeloader ({dataurl: '../INFO/RSS. do? Method = getjsonarray ',
15. Baseattrs: {uiprovider: Ext. Tree. treechecknodeui}
16. })
17. });
19. // Set the root node
20. VaR root = new tree. asynctreenode (
21. {
22. "Text": "My network address ",
23. "ID": "01 ",
24. "Allowdrag": false // false indicates that the file cannot be dragged.
26. }
28. );
32. // Events before binding nodes to load
33. Tree. On ('beforeload', function (node ){
34. If (node. ID! = '01 '){
35. Tree. loader. dataurl = '../INFO/RSS. do? Method = getchildjsonarray & nodeid = '+ node. ID;
36. }
37. });
40. // Bind node Click Event
41. /**//*
42. Tree. On ('click', function (node ){
43. If (node. ID! = 'Root '){
44. Alert (node. ID );
45. Alert (node. Text );
46. Alert (node. href );
47. }
48. });
49. */
54. // Bind the node drag event, find the implementation of Tree node drag for a long time, and finally find this implementation in the post of a foreigner. After dragging, the required information has been captured, you can drag a tree by adding functions linked to the background.
55. Tree. On ('nodedrop ',
56. Function (e ){
58. If (E. Point = 'append '){
59. Alert ('current "['+ E. dropnode. Text +']" is put under the directory "'Folder e.tar get. Text +! ');
60. VaR resulturl = "../INFO/RSS. do? Method = treenodetuodong & currenrootid = "+ E. dropnode. ID +" & parentrootid = "paie.tar get. ID +" & type = APPEND ";
61. VaR resulthtml = xmlhttphelper. Transmit (false, "get", "text", resulturl, null, null );
62. }
64. Else if (E. Point = 'ababove '){
65. // Alert ('current "'+ E. dropnode. Text +'" is placed on "'your e.tar get. Text +! ');
66. VaR resulturl = "../INFO/RSS. do? Method = treenodetuodong & currenrootid = "+ E. dropnode. ID +" & parentrootid = "paie.tar get. ID +" & type = above ";
67. VaR resulthtml = xmlhttphelper. Transmit (false, "get", "text", resulturl, null, null );
68. } Else if (E. Point = 'below '){
69. // Alert ('current "'+ E. dropnode. Text +'" is placed under "'your e.tar get. Text +! ');
70. VaR resulturl = "../INFO/RSS. do? Method = treenodetuodong & currenrootid = "+ E. dropnode. ID +" & parentrootid = "paie.tar get. ID +" & type = below ";
71. VaR resulthtml = xmlhttphelper. Transmit (false, "get", "text", resulturl, null, null );
72. }
74. }
75. );
77. // Right-click the binding node and choose menu
79. Tree. On ('textmenu ', function (node, event ){
80. // Alert ("node. ID =" + node. ID );
81. Event. preventdefault (); // This line is required
82. Rightclick. showat (event. getxy (); // obtain the coordinates of the mouse and click to display the menu
83. // Alert (node. ID );
84. Document. getelementbyid ('rootid'). value = node. ID;
85. });
88. // Right-click the menu
89. VaR rightclick = new Ext. Menu. menu ({
90. ID: 'rightclickcont ',
91. Items :[{
92. ID: 'rmenu1 ',
93. Text: 'editor ',
94. // Add a menu Click Event
95. Handler: function (node ){
96. // Alert (node. dropnode. ID );
97. }
98. },{
99. ID: 'rmenu2 ',
100. Text: 'delete'
101. },{
102. ID: 'rmenu3 ',
103. Text: 'menu 3'
104. }]
105. });
108. Tree. setrootnode (Root );
109. // Render the tree
110. Tree. Render ();
111. Root. Expand ();
112. });

VaR tree = ext. tree; var tree = NULL; Ext. onready (function () {tree = new tree. treepanel ({El: 'tree-Div ', onlyleafcheckable: false, rootvisible: True, autoscroll: True, animate: false, // whether to animated enabledd: True, // whether to drag and drop containerscroll: True, lines: True, checkmodel: 'cascade ', loader: new tree. treeloader ({dataurl :'.. /INFO/RSS. do? Method = getjsonarray ', baseattrs: {uiprovider: ext. tree. treechecknodeui}); // set the root node var root = new tree. asynctreenode ({"text": "", "ID": "01", "allowdrag": false // false indicates that the object cannot be dragged }); // bind the node to load the previous event tree. on ('beforeload', function (node) {If (node. ID! = '01') {tree. loader. dataurl = '../INFO/RSS. do? Method = getchildjsonarray & nodeid = '+ node. id ;}}); // click event/** // * tree for binding nodes. on ('click', function (node) {If (node. ID! = 'Root') {alert (node. ID); alert (node. text); alert (node. href) ;}}); * // bind a node drag event, find the implementation of Tree node drag for a long time, and finally find this implementation in the post of a foreigner, after dragging, the required information has been captured. You can drag the tree by adding the function associated with the background. on ('nodedrop', function (e) {If (E. point = 'append') {alert ('current "['+ E. dropnode. text + '] "put to the directory" folder 'Folder e.tar get. text +! '); Var resulturl = "../INFO/RSS. do? Method = treenodetuodong & currenrootid = "+ E. dropnode. ID + "& parentrootid =" paie.tar get. ID + "& type = APPEND"; var resulthtml = xmlhttphelper. transmit (false, "get", "text", resulturl, null, null);} else if (E. point = 'ababove ') {// alert ('current "' + E. dropnode. text + '"is placed in" 'your e.tar get. text + '"above! '); Var resulturl = "../INFO/RSS. do? Method = treenodetuodong & currenrootid = "+ E. dropnode. ID + "& parentrootid =" paie.tar get. ID + "& type = above"; var resulthtml = xmlhttphelper. transmit (false, "get", "text", resulturl, null, null);} else if (E. point = 'below') {// alert ('current "'+ E. dropnode. text + '"is placed in" 'your e.tar get. text +! '); Var resulturl = "../INFO/RSS. do? Method = treenodetuodong & currenrootid = "+ E. dropnode. ID + "& parentrootid =" paie.tar get. ID + "& type = below"; var resulthtml = xmlhttphelper. transmit (false, "get", "text", resulturl, null, null) ;}}); // right-click the binding node and choose the function tree. on ('textmenu ', function (node, event) {// alert ("node. id = "+ node. ID); event. preventdefault (); // This line is required. showat (event. getxy (); // get the coordinates of the mouse and click to display the menu // alert (node. ID); document. getelementbyid ('rootid '). value = node. ID;}); // right-click the menu var rightclick = new Ext. menu. menu ({ID: 'rightclickcont', items: [{ID: 'rmenu1', text: 'edit', // Add a menu Click Event Handler: function (node) {// alert (node. dropnode. ID) ;}},{ ID: 'rmenu2 ', text: 'delete' },{ ID: 'rmenu3', text: 'menu 3'}]}); tree. setrootnode (Root); // render the tree. render (); root. expand ();});

Original post address: http://www.cnblogs.com/huazi4995/articles/1245150.html