ExtJs Tree的操作：注册事件，拖拽（目标位置的判断）、点击事件、加载之间事件、右键菜单

 

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,//是否动画   
10.             enableDD:true,// 是否支持拖放   
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.           });   
18.            
19.     // set the root node   
20.     var root = new Tree.AsyncTreeNode(   
21.         {   
22.         "text":"我的网摘",   
23.         "id":"01",   
24.         "allowDrag":false   //false表示不能被拖动   
25.            
26.         }   
27.        
28.     );   
29.   
30.   
31.        
32.      //绑定节点加载之前事件   
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.     });    
38.        
39.   
40.     //绑定节点点击事件   
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.     */  
50.       
51.   
52.        
53.   
54.     //绑定节点拖动事件，找了很久树节点拖动的实现，终于在老外的帖子发现上了这个实现，拖动以后所需的信息已经捕获，与后台联动的函数 加上即可实现TREE的拖拽   
55.    tree.on('nodedrop',    
56.       function(e){      
57.                               
58.          if(e.point=='append'){      
59.             alert('当前"【'+e.dropNode.text+'】"被放到目录"【'+e.target.text+'】"下！');      
60.             var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=append";   
61.             var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);   
62.          }   
63.             
64.          else if(e.point=='above'){      
65.             //alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"上面！');      
66.              var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=above";   
67.              var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);   
68.          }else if(e.point=='below'){      
69.             //alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"下面！');    
70.              var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=below";   
71.             var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);     
72.          }    
73.               
74.        }    
75.     );   
76.        
77.     //绑定节点右键菜单功能   
78.        
79.     tree.on('contextmenu',function(node,event){     
80.          // alert("node.id="+ node.id);   
81.           event.preventDefault(); //这行是必须的   
82.           rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单   
83.           //alert(node.id);   
84.           document.getElementById('rootid').value=node.id;   
85.          });    
86.             
87.             
88.      //定义右键菜单   
89.     var rightClick = new Ext.menu.Menu({   
90.         id :'rightClickCont',   
91.         items : [{   
92.             id:'rMenu1',   
93.             text : '编辑',   
94.             //增加菜单点击事件   
95.             handler:function (node){   
96.                  //alert(node.dropNode.id);   
97.             }   
98.         }, {   
99.             id:'rMenu2',   
100.             text : '删除'  
101.         }, {   
102.             id:'rMenu3',   
103.             text : '菜单3'  
104.         }]   
105.      });   
106.   
107.   
108.     tree.setRootNode(root);   
109.     // render the tree   
110.     tree.render();   
111.     root.expand();   
112.   });
113.   

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,//是否动画            enableDD:true,// 是否支持拖放            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表示不能被拖动                }        );         //绑定节点加载之前事件    tree.on('beforeload',function(node){           if(node.id!='01'){              tree.loader.dataUrl = '../info/rss.do?method=getChildJsonArray&nodeid='+node.id;          }    });         //绑定节点点击事件    /**//*    tree.on('click', function(node){        if(node.id!='root'){            alert(node.id);            alert(node.text);            alert(node.href);        }    });    */           //绑定节点拖动事件，找了很久树节点拖动的实现，终于在老外的帖子发现上了这个实现，拖动以后所需的信息已经捕获，与后台联动的函数 加上即可实现TREE的拖拽   tree.on('nodedrop',       function(e){                                       if(e.point=='append'){               alert('当前"【'+e.dropNode.text+'】"被放到目录"【'+e.target.text+'】"下！');               var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=append";            var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);         }                  else if(e.point=='above'){               //alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"上面！');                var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=above";             var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);         }else if(e.point=='below'){               //alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"下面！');              var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=below";            var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);           }                   }     );        //绑定节点右键菜单功能        tree.on('contextmenu',function(node,event){           // alert("node.id="+ node.id);          event.preventDefault(); //这行是必须的          rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单          //alert(node.id);          document.getElementById('rootid').value=node.id;         });                        //定义右键菜单    var rightClick = new Ext.menu.Menu({        id :'rightClickCont',        items : [{            id:'rMenu1',            text : '编辑',            //增加菜单点击事件            handler:function (node){                 //alert(node.dropNode.id);            }        }, {            id:'rMenu2',            text : '删除'        }, {            id:'rMenu3',            text : '菜单3'        }]     });    tree.setRootNode(root);    // render the tree    tree.render();    root.expand();  });

原帖地址：http://www.cnblogs.com/huazi4995/articles/1245150.html