`

EXT 2个tree节点拖拽都是 (转)

阅读更多
Ext.override(Ext.tree.TreeNode, {  
     clone: function() {  
        var atts = this.attributes;  
             if(this.childrenRendered || this.loaded || !this.attributes.children) {  
    var clone = new Ext.tree.TreeNode(Ext.apply({}, atts));  
      }  
      else {  
    var newAtts = Ext.apply({}, atts);  
    newAtts.children = this.cloneUnrenderedChildren();  
    var clone = new Ext.tree.AsyncTreeNode(newAtts);  
      }  
      clone.text = this.text;  
              
      for(var i=0; i<this.childNodes.length; i++){  
    clone.appendChild(this.childNodes[i].clone());  
      }  
      return clone;  
    },  
      
    cloneUnrenderedChildren: function() {  
              
      unrenderedClone = function(n) {  
        //n.id = undefined;  
        if(n.children)   
        {  
    for(var j=0; j<n.children.length; j++) {  
       n.children[j] = unrenderedClone(n.children[j]);  
    }  
        }     
        return n;  
     };  
      
     var c = [];  
    for(var i=0; i<this.attributes.children.length; i++) {  
    c[i] = Ext.apply({}, this.attributes.children[i]);  
    c[i] = unrenderedClone(c[i]);  
    }  
    return c;  
    }  
      
}); 

Ext.override(Ext.tree.TreeNode, {
     clone: function() {
    var atts = this.attributes;
             if(this.childrenRendered || this.loaded || !this.attributes.children) {
var clone = new Ext.tree.TreeNode(Ext.apply({}, atts));
      }
      else {
var newAtts = Ext.apply({}, atts);
newAtts.children = this.cloneUnrenderedChildren();
var clone = new Ext.tree.AsyncTreeNode(newAtts);
      }
      clone.text = this.text;

      for(var i=0; i<this.childNodes.length; i++){
clone.appendChild(this.childNodes[i].clone());
      }
      return clone;
    },

    cloneUnrenderedChildren: function() {

      unrenderedClone = function(n) {
//n.id = undefined;
        if(n.children)
        {
for(var j=0; j<n.children.length; j++) {
   n.children[j] = unrenderedClone(n.children[j]);
}
        }
        return n;
     };

     var c = [];
for(var i=0; i<this.attributes.children.length; i++) {
c[i] = Ext.apply({}, this.attributes.children[i]);
c[i] = unrenderedClone(c[i]);
}
return c;
    }

});

在拖拽目标树上加监听
Js代码
'beforenodedrop': function(e)  
{//实现COPY拖拽  
    if(e.source.tree == e.target.ownerTree)  
    {  
        return true;  
    }  
    var n = e.dropNode; // the node that was dropped  
    var existNode = e.target.ownerTree.getNodeById(n.id);  
   if(e.source.tree.el != e.target.ownerTree.el&&existNode==undefined)  
   {  
                              e.dropNode = n.clone(); // assign the copy as the new dropNode  
   }  
   else 
   {  
                                return false;  
   }  

分享到:
评论

相关推荐

    完成Ext tree 拖拽节点到 textfield 控件中

    以前有许多人需要将 tree 的节点拖拽到其他控件中的问题,前段时间已经解决了,现在也将它的源代码贡献上来。 这个树的数据是静态的,没有做动态的,而且树节点的拖拽也没有做过多的处理,如果要知道怎么样做树...

    ext的tree两个拖拽例子

    在EXT JS这个强大的JavaScript框架中,TreePanel是用于展示层级数据的一个组件,它通常用于构建树形结构,例如文件系统、组织结构等。本主题主要关注EXT的TreePanel中的拖放(Drag and Drop)功能,这是一项允许用户...

    完成Ext 拖拽树后对新的树节点顺序进行保存

    2. **确定新位置**:在`beforedrop`事件中,获取当前拖动节点和目标位置节点的信息,计算出新的节点顺序。 3. **更新数据源**:在`drop`事件中,根据新的位置信息,更新树数据源。这可能涉及在树数据模型中移动节点...

    Ext中拖拽Tree2Grid , 清空表格拖拽失效的解决办法>.<

    1. **配置Tree节点为可拖动**:在Tree的配置中,我们需要设置`draggable`为`true`,并提供`ddGroup`属性,以定义拖放组。这样,Tree节点就可以被拖动了。 ```javascript var tree = Ext.create('Ext.tree.Panel', {...

    ext4 四种常见的tree

    2. **可拖拽的tree**:在这样的tree中,用户可以直观地通过拖放操作来改变节点的位置,重新组织tree的结构。这种功能常用于需要自定义排序或者调整层次关系的应用场景,如项目管理工具或文件管理系统。实现时需要...

    gwt-ext-tree

    在实际开发中,`exttree` 文件可能是这个库的一个示例或者实现文件,包含了使用 GWT-Ext-Tree 创建树形结构的代码。通过对这个文件的学习和理解,开发者可以更好地掌握如何在项目中集成和使用 GWT-Ext-Tree 组件。 ...

    Ext用户扩展控件-------支持树上多个节点和叶子的拖动

    "Ext用户扩展控件-------支持树上多个节点和叶子的拖动"是EXT JS中的一个高级特性,它增强了EXT JS的树形控件(TreePanel),允许用户通过拖放操作在树结构中移动多个节点和叶子。这一功能对于数据组织和展示特别...

    EXT 布局 tab布局 普通拖拽 异步加载的树 节点可以编辑的树

    目录: 1. layout-test-01.html为上下布局,并且显示...详细见代码。 2. layout-test-02.html为上下布局,并且显示区采用panel的autoload的例子。详细见代码。 ...即:Ext.window ...8.tree-tz-test.html为tree节点拖拽的练习

    Ext拖动实例树和表格全 超实用

    以下是一个将树形结构中的节点拖拽至表格中的示例代码: ```javascript // 使用一个JSON数据结构作为树的本地数据源 var nodes = [ { 'text': 'SY0706', 'id': 1, 'leaf': false, 'cls': 'folder', 'children': ...

    Ext实现的拖拽树的测试例子

    - 拖拽操作可以正常启动,节点之间可以被拖动。 - 拖放操作完成后,数据结构(如JSON或数据库)更新正确,以反映新的节点位置。 - 检查浏览器兼容性,确保在不同浏览器中都能正常工作。 5. **WebTree1文件** ...

    Ext实现的拖拽树和表格之间的拖拽

    在本文中,我们将深入探讨如何使用ExtJS框架实现拖拽功能,特别是在树形视图(Tree)和表格视图(Grid)之间的交互。ExtJS是一个强大的JavaScript库,它提供了丰富的用户界面组件,包括可拖拽的元素,这使得在Web...

    ext treegrid

    "ext.ux.tree.treegrid" 指的是这个组件属于Ext JS的一个第三方插件(UX),UX是Ext JS社区为扩展其核心功能而创建的一系列用户界面组件。这些组件通常不是官方提供的,但它们丰富了Ext JS的功能,使得开发者可以更...

    ext4.2 目录树

    由于项目的需要最近在...例子里面包括了对tree增、改、删、拖动、子父节点的选则取消、右键操作的基本功能。例子可能会有bug如果那位网友发现了请留言告知以便做及时修改。例子用的ext是4.2的版本需要的话就快下载吧

    Ext拖动实例树和表格全

    根据提供的信息,我们可以深入探讨Ext JS中的拖动功能,特别是针对树(Tree)和表格(Grid)的拖动操作。本文将详细介绍这些概念和技术要点。 ### 一、Ext JS 拖动的基本概念 #### 1.1 拖动源与目标 在Ext JS中,拖动...

    Ext 开发指南 学习资料

    3.9.1. 树形节点的拖拽有三种形式 3.9.2. 用事件控制拖拽 3.9.2.1. 叶子不能append 3.9.2.2. 把节点扔到哪里啦 3.9.2.3. 裟椤双树,常与无常 3.10. 树形过滤器TreeFilter 3.11. TreeSorter对树形排序 4. 祝福吧!把...

    EXT2.0中文教程

    把表单和输入控件都改成ext的样式。 4.1. 不用ext的form啊,不怕错过有趣的东西吗? 4.2. 慢慢来,先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒,从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 ...

    Ext例子及布局问题

    目录: 1. layout-test-01.html为上下布局,并且显示...详细见代码。 2. layout-test-02.html为上下布局,并且显示区采用panel的autoload的例子。详细见代码。 ...即:Ext.window ...8.tree-tz-test.html为tree节点拖拽的练习

    EXT教程EXT用大量的实例演示Ext实例

    例如,TreeField和CheckBoxTree等控件都是扩展自标准组件的功能。此外,Ext JS还可以与其他技术(如dwr、localXHR等)整合,增加更多的功能和灵活性。 #### 9. 常见问题解答 在Ext使用过程中,可能遇到各种问题,...

    ext实现动态树

    根节点是整个树结构的起点,所有子节点都将基于此节点展开。 ```javascript var root = new Ext.tree.AsyncTreeNode({ text: "文件管理", id: "0", draggable: true, iconCls: "nodeIcon", cls: "folder", is...

    ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局

    在"ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局"中,我们将会探讨以下几个核心概念: 1. **Drag and Drop(拖放)**: ExtJS4提供了完善的拖放支持,允许用户通过鼠标操作在界面上移动元素...

Global site tag (gtag.js) - Google Analytics