ExtJS在樹TreePanel之間拖放結點

有時候咱們在程序中，須要把一棵TreePanel的元素拖放到另一棵 TreePanel中，若是是在同一棵樹中拖動時設置組件的enableDD參數爲true，而如今須要在不一樣給的樹之間拖動元素，這個時候就能夠設置組 件的enableDrag和enableDrop參數，詳細示例以下：

1、編寫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();

});

 

2、HTML代碼以下：

 <div id="tree1"></div>

<div id="tree2"></div>

3、編寫兩個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}
        ]}
]

4、程序效果以下圖所示：

TreePanel-enableDrag