ExtJs tree的操作

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

你可能感兴趣的:(html,ext)