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.  }); 

你可能感兴趣的:(ext)