ExtJS在树TreePanel之间拖放结点

有时候我们在程序中，需要把一棵TreePanel的元素拖放到另外一棵TreePanel中，如果是在同一棵树中拖动时设置组件的enableDD参数为true，而现在需要在不同给的书之间拖动元素，这个时候就可以设置组件的enableDrag和enableDrop参数，详细示例如下：

一、编写JS代码：

JS代码

Ext.onReady(function(){

var tree1 = new Ext.tree.TreePanel({
    el: 'tree1',
	//这里设置enableDrag为true表示可以从这里拖动元素到别处
    enableDrag:true,
    loader: new Ext.tree.TreeLoader({dataUrl: 'treeData1.txt'})
});
var tree2 = new Ext.tree.TreePanel({
    el: 'tree2',
	//这里设置enableDrop为true表示可以在这棵树中放置拖动过来的元素
    enableDrop:true,
    loader: new Ext.tree.TreeLoader({dataUrl: 'treeData2.txt'})
});
var root1 = new Ext.tree.AsyncTreeNode({text:'跟节点'});
var root2 = new Ext.tree.AsyncTreeNode({text:'图书'});
tree1.setRootNode(root1);
tree2.setRootNode(root2);
tree1.render();
tree2.render();

});

二、HTML代码如下：

HTML代码

三、编写两个TreeLoader需要装载的txt文件，里面的数据为JSON格式：

treeData1.txt:

[
{text:'非叶子结点'},
{text:'叶子结点',leaf:true}
]

treeData2.txt:

[
{text:'计算机',children:[
{text:'Java',children:[
{text:'Java核心技术',leaf:true},
{text:'Thinking in Java',leaf:true}
]},
{text:'算法导论',leaf:true}
]},
{text:'音乐',children:[
{text:'乐理基础',leaf:true},
{text:'卡尔卡西古典吉他教程',leaf:true}
]}
]

四、程序效果如下图所示：

[caption id="attachment_66" align="aligncenter" width="468" caption="TreePanel-enableDrag"][/caption]