Ext tree拖拽

1. Ext.override(Ext.tree.TreeNode, {  
2.      clone: function() {  
3.         var atts = this.attributes;  
4.              if(this.childrenRendered || this.loaded || !this.attributes.children) {  
5.                 var clone = new Ext.tree.TreeNode(Ext.apply({}, atts));  
6.              }  
7.              else {  
8.                     var newAtts = Ext.apply({}, atts);  
9.                     newAtts.children = this.cloneUnrenderedChildren();  
10.                     var clone = new Ext.tree.AsyncTreeNode(newAtts);  
11.              }  
12.             clone.text = this.text;  
13.             for(var i=0; i<this.childNodes.length; i++){  
14.                 clone.appendChild(this.childNodes[i].clone());  
15.             }  
16.             return clone;  
17.       },  
18.       
19.     cloneUnrenderedChildren: function() {  
20.         unrenderedClone = function(n) {  
21.             if(n.children)   
22.             {  
23.                 for(var j=0; j<n.children.length; j++) {  
24.                    n.children[j] = unrenderedClone(n.children[j]);  
25.                 }  
26.             }     
27.             return n;  
28.          };  
29.         var c = [];  
30.         for(var i=0; i<this.attributes.children.length; i++) {  
31.                 c[i] = Ext.apply({}, this.attributes.children[i]);  
32.                 c[i] = unrenderedClone(c[i]);  
33.         }  
34.             return c;  
35.         }  

下面造2个树 ：

    第1个树

1.      // yui-ext tree  
2.             var tree = new Tree.TreePanel({  
3.                 animate:true,   
4.                 autoScroll:true,  
5.                 loader: new Tree.TreeLoader(),  
6.                 enableDD:true,  
7.                 containerScroll: true,  
8.                 border: false,  
9.                 width: 250,  
10.                 height: 300,  
11.                 dropConfig: {appendOnly:true}  
12.             });  
13.               
14.               
15.             // set the root node  
16.             var root = new Tree.AsyncTreeNode({  
17.                 text: 'Ext JS',   
18.                 draggable:false, // disable root node dragging  
19.                 id:'src',  
20.     children: [  
21.      {text: '节点1',id:"node_1",leaf: true},  
22.      {text: '节点2',id:"node_2",leaf: false,children: [  
23.       {text: '节点21',id:"node_21",leaf: true},  
24.       {text: '节点22',id:"node_22",leaf: true}  
25.      ]}  
26.     ]  
27.             });  
28.             tree.setRootNode(root);  
29.               
30.             tree.render('tree');  
31.               
32.             root.expand(true, true);  

 第2个树：

1.     // ExtJS tree              
2.         var tree2 = new Tree.TreePanel({  
3.             animate:true,  
4.             autoScroll:true,  
5.             rootVisible: false,  
6.             loader: new Ext.tree.TreeLoader(),  
7.             containerScroll: true,  
8.             border: false,  
9.             width: 250,  
10.             height: 300,  
11.             enableDrop :true,  
12.             dropConfig: {appendOnly:true,allowParentInsert:false},  
13.             listeners:{  
14.         "contextmenu":function(node,e){  
15.             var menu = new Ext.menu.Menu([  
16.                 {text:"上移",iconCls:'up',handler:function(){  
17.                         var nodeUp =  new Ext.tree.TreeNode(Ext.apply({}, node.attributes));;  
18.                         var previousNode = node.previousSibling;   
19.                         var pNode = node.parentNode;  
20.                         node.remove();  
21.                         pNode.insertBefore(nodeUp,previousNode);  
22.                     }  
23.                 },  
24.                 {text:"下移",iconCls:'down',handler:function(){  
25.                         var nodeUp =  new Ext.tree.TreeNode(Ext.apply({}, node.nextSibling.attributes));;  
26.                         var previousNode = node.previousSibling;   
27.                         var pNode = node.parentNode;  
28.                         node.nextSibling.remove();  
29.                         pNode.insertBefore(nodeUp,node);                                          
30.                     }  
31.                 },  
32.                 {text:"删除",iconCls:'right_delete',handler:function(){  
33.                         node.parentNode.removeChild(node);  
34.                     }  
35.                 },                                
36.                 {text:"重命名",iconCls:'right_rename',menu:new Ext.menu.Menu({  
37.                         items: [  
38.                            new Ext.form.FormPanel({  
39.                                     title: '输入',  
40.                                     frame: true,  
41.                                     defaultType: 'textfield',  
42.                                     labelWidth: 30,  
43.                                     width:190,  
44.                                     items: [{  
45.                                         fieldLabel: '名称',  
46.                                         name: 'name'  
47.                                     }],  
48.                                     buttons: [{  
49.                                         text: '确认',  
50.                                         //scope:this,  
51.                                         handler:function(){  
52.                                           var s = this.findParentByType("form").form.findField("name").getValue();  
53.                                           node.setText(s);  
54.                                           menu.hide();  
55.                                         }  
56.                                     }, {  
57.                                         text: '取消',handler:function(){  
58.                                          menu.hide();  
59.                                         }  
60.                                     }]  
61.                                 })  
62.                         ]  
63.                     })  
64.                 }  
65.             ]);  
66.             if(!node.previousSibling){  
67.                 menu.items.item(0).disable();  
68.             }  
69.             if(!node.nextSibling){  
70.                 menu.items.item(1).disable();  
71.             }  
72.             menu.showAt(e.getPoint());  
73.         }  
74.     }//监听结束   
75.         });  
76.          
77.           
78.         // add the root node  
79.         var root2 = new Tree.AsyncTreeNode({  
80.             text: 'Extensions',   
81.             draggable:false,   
82.             id:'ux',  
83. children: [  
84.     {text: '节点3',id:"node_3",zyid:"node_3",leaf: false,children: [  
85.         {text: '节点22',id:"node_22",zyid:"node_22",leaf: true}  
86.     ]},  
87.     {text: '节点4',id:"node_4",zyid:"node_4",leaf: false,children: [  
88.         {text: '节点21',id:"node_2",zyid:"node_21",leaf: true}  
89.     ]}  
90. ]  
91.         });  
92.  tree2.on("beforenodedrop",function(e){  
93.             //alert( e.data.node.text );取得拖拽的node  
94.             if(e.dropNode.getOwnerTree()==tree){  
95.                     if(e.data.node.hasChildNodes()){  
96.                 e.cancel=true;  
97.                 Ext.Msg.alert('系统提示', '不允许拖拽目录！');                            
98.                     }else{  
99.                 var isAllowDrag = true;  
100.             var parentNode = e.target;  
101.             var parentNodeChild = parentNode.childNodes;  
102.             for(var i = 0;i<parentNodeChild.length;i++){  
103.                 if(parentNodeChild[i].attributes.zyid==e.dropNode.id){  
104.                     isAllowDrag=false;  
105.                     break;  
106.                 }     
107.             }  
108.             if(isAllowDrag==true){  
109.                 e.cancel=false;  
110.                 e.dropNode = e.dropNode.clone(); //追加回节点  
111.                 e.dropNode.attributes.zyid = e.dropNode.id;   
112.                 e.dropNode.allowChildren=false;  
113.             }else{  
114.                 e.cancel=true;  
115.                 Ext.Msg.alert('系统提示', '此业务流程已经存在该节点！');  
116.             }                             
117.                       
118.                     }  
119.                   
120.             };   
121.         })  
122.         tree2.setRootNode(root2);  
123.         tree2.render('tree2');  
124.           
125.         root2.expand(true, true);  

转自：http://babydeed.iteye.com/blog/1165433