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