ExtJS在树TreePanel之间拖放结点
本文由发表于7年前 | ExtJS | 评论数 1 |  被围观 10,201 views+

有时候我们在程序中,需要把一棵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代码
<div id="tree1"></div>
<div id="tree2"></div>
三、编写两个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}
        ]}
]
四、程序效果如下图所示:
TreePanel-enableDrag

TreePanel-enableDrag

除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/extjs-drag-and-drop-between-the-tree-nodes-treepanel.html
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 4/11
文章评论
    一条评论
  1. 小癖好 2014年08月12日11:27:50  #-49楼 回复 回复

    监听drop的事件是什么?

给我留言

有人回复时邮件通知我
ExtJS的相关文章
随机文章 本月热门 热评
1 8251A串行通信和8253计数器编程举例 2011/5/5
2 org.hibernate.LazyInitializationException的解决方法 使用OpenSessionInViewFilter 2011/7/31
3 Java虚拟机笔记 – JVM 自定义的类加载器的实现和使用 2011/11/5
4 据说这套试题对于软考很有帮助,大家可以看看 2011/4/26
5 ThreadPoolExecutor的使用和介绍 2012/7/30
6 chrome插件编写中需要了解的几个概念和一些方法 2013/6/5
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.