1. #1
    Ext JS Premium Member Nigel's Avatar
    Join Date
    Nov 2008
    Location
    Hampshire, England
    Posts
    57
    Vote Rating
    2
    Nigel is on a distinguished road

      0  

    Default [SOLVED] Stop node being removed from tree on drag/drop

    [SOLVED] Stop node being removed from tree on drag/drop


    I'm implementing drag/drop behaviour between two trees. At the moment I've got working code simply by turning on standard behaviour with enableDrag / enableDrop set to TRUE, so causing the built-in Ext.tree.TreeDropZone and Ext.tree.TreeDragZone to be attached to my trees (yes, I've looked through a fair bit of the code).

    I'm struggling to find where in the code a node is removed from the source tree on successful drop in the target tree. I want to turn this off so that the node stays in both trees when dropped. I'm happy with the concept of overriding either of these classes and setting this.dragZone and/or this.dropZone manually; I just can't find exactly what I'd override.

    Any pointers gratefully received
    Thanks
    Nigel
    Last edited by Nigel; 20 Jan 2011 at 10:22 AM. Reason: Solved

  2. #2
    Ext JS Premium Member Nigel's Avatar
    Join Date
    Nov 2008
    Location
    Hampshire, England
    Posts
    57
    Vote Rating
    2
    Nigel is on a distinguished road

      0  

    Default Learnings about Tree Node Drag and Drop

    Learnings about Tree Node Drag and Drop


    I've got a better understanding of this now after a more comprehensive trawl through the code. For the benefit of others like me who hadn't delved this deep before, what follows is a summary of what I found out / learned / realised.

    1. When a node is added dropped on a tree, using the standard TreeDropZone (used automatically by setting enableDrop on the tree), ultimately the completeDrop method of TreeDropZone is called - this calls either insertBefore or appendChild method of an existing node in that tree.

    2. Both the insertBefore and appendChild methods are actually part of Ext.data.Node, superclass of Ext.tree.TreeNode

    3. In both these methods, there is a test to find the current parent of the node (var oldParent) - if it is found, and the usual beforeXXX events don't return false, then the node is removed from its oldParent with a call to oldParent.removeChild

    That explains what actually happens - I was struggling because I was assuming I'd see code in the dropzone that adds the node to one tree and removes it from another, and then I'd have overridden this code to give me the behaviour I wanted - well, actually, that wouldn't have worked either, as will become apparent from the next bit of playing...

    I thought I could get the results I wanted by fooling the node into not having a parent any more by setting the parentNode to null right before I called appendChild. It stopped the node from disappearing from the first tree, but it didn't appear in the second tree like it was supposed to. Why?

    Further digging, and the light-bulb moment of understanding, was that the TreeNode had actually been attached to the second tree (confirmed by calling an existing unrelated method that created some output based on the nodes in the tree), but the TreeNodeUI that actually gets drawn was still where it should be, over in the original tree.

    Bottom line is that a TreeNode can't exist in two places at once. What I would need to do is clone a fresh TreeNode to drop into my target tree, rather than letting the default behaviour drop the existing node, since it can only ever be moved, not copied. The biggest realisation for me is the difference between Trees and Grids - Trees have nodes in a hierarchical structure; the nodes themselves are the 'data' points; whereas in a Grid, the data is contained in an underlying store and the Grid is drawn (rendered) using that underlying data store. You can 'copy' an item from one grid to another with drag and drop by inserting a new record into the second grid's store, regardless of whether or not you separately decide to delete the record from the first grid's store - that is what will determine whether or not your dragged item is 'copied' or 'moved'. Its not the same with TreeNodes - if you want to copy it, you have to, erm, create a copy of it

    Slightly rambling explanation of my own journey of discovery, but I hope it helps anyone else who's going through the same steep learning curve that I am with everything related to Drag and Drop - a painful, but ultimately very rewarding, path.

  3. #3
    Ext JS Premium Member Juanito's Avatar
    Join Date
    Apr 2007
    Location
    San Diego->Boston->Brazil
    Posts
    161
    Vote Rating
    4
    Juanito is on a distinguished road

      0  

    Default


    Hello Nigel, I am trying to do the exact same thing and have the exact same questions as you. Have you figured it out? I'm going to try to override Ext.tree.TreeDropZone.completeDrop so it clones the node and appends the cloned node. There's not an easy way to clone the node though. Let me know of your progress, and I'll update my progress here too.

    Thanks

  4. #4
    Ext JS Premium Member Nigel's Avatar
    Join Date
    Nov 2008
    Location
    Hampshire, England
    Posts
    57
    Vote Rating
    2
    Nigel is on a distinguished road

      0  

    Default


    Hi Juanito
    I haven't actually implemented cloning the node yet, partly because I'm going to re-design this bit of the UI to use a Grid as the dropzone (for reasons not related to the original problem).
    When I say 'clone', I expect that means create a new object and populate it manually with the configuration you want from your original node, but if you find a neat way of doing it, please share.
    Nigel

  5. #5
    Ext JS Premium Member Juanito's Avatar
    Join Date
    Apr 2007
    Location
    San Diego->Boston->Brazil
    Posts
    161
    Vote Rating
    4
    Juanito is on a distinguished road

      0  

    Default


    I found another post with what seems to be the best way, handle beforenodedrop and change the event.dropNode to the cloned node. http://www.sencha.com/forum/showthre...tree-node-copy

Similar Threads

  1. Tree Drag and Drop - dragged node always removed
    By bsautner in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 20 Jan 2011, 10:50 AM
  2. Replies: 3
    Last Post: 25 Aug 2010, 5:53 AM
  3. Regarding tree node drag and drop
    By ssa962 in forum Ext 1.x: Help & Discussion
    Replies: 7
    Last Post: 24 Aug 2007, 8:23 AM

Thread Participants: 1