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”]TreePanel-enableDrag[/caption]

arthinking wechat
欢迎关注itzhai公众号,欢迎关注itzhai公众号,获取更多最新的文章