extjs的tree的使用（拖动、动态载入json数据、拖动后的事件处理）

转:http://www.cnblogs.com/huazi4995/articles/1245150.html
/*设置tree的节点放置函数此函数有一个很重要的参数对象e
           e对象有三个重要的属性，分别为dropNode,target,point
         1.dropNode为在拖动时鼠标抓住的节点
         2.target为将要放置在某处的节点
         3.point为被放置的状态，分别有append表示添加，above节点的上方，below节点的下方。          
       */
nodedrop : ( Object dropEvent )
Fires after a DD object is dropped on a node in this tree. The dropEvent passed to handlers has the following properties:
   tree - The TreePanel
   target - The node being targeted for the drop
   data - The drag data from the drag source
   point - The point of the drop - append, above or below
   source - The drag source
   rawEvent - Raw mouse event
   dropNode - Dropped node(s).
 
this.tree.on('nodedrop',function(e){                   
          if(e.point=='append'){ 
             alert('当前"'+e.dropNode.text+'"被"'+e.target.text+'"录取！'); 
          }else if(e.point=='above'){ 
             alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"上面！'); 
          }else if(e.point=='below'){ 
             alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"下面！'); 
          } 
    }

<script type="text/javascript">
        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();
  });
    </script>