1. #1
    Ext User
    Join Date
    Apr 2007
    Posts
    32
    Vote Rating
    0
    vicent is on a distinguished road

      0  

    Default how can copy the Item but not cut it on the Drag and Drop ?

    how can copy the Item but not cut it on the Drag and Drop ?


    Any one can give me a suggest about .. how can I copy the item to another place ? that mean the original item still on the original place

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I think that would be up to your implementation to decide whether to remove the original or not. The DragDrop system just informs you of user actions. You write the code to move data around and possibly remove data from the source.

  3. #3
    Ext User
    Join Date
    Apr 2007
    Posts
    32
    Vote Rating
    0
    vicent is on a distinguished road

      0  

    Default


    Ext.onReady(function(){
    // shorthand
    var Tree = Ext.tree;

    var tree = new Tree.TreePanel('tree-div', {
    animate:true,
    loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}),
    enableDD:true,
    containerScroll: true
    });

    // set the root node
    var root = new Tree.AsyncTreeNode({
    text: 'Ext JS',
    draggable:false,
    id:'source'
    });
    tree.setRootNode(root);

    // render the tree
    tree.render();
    root.expand();
    });

    could you please tell me how can I config on these code ? I just want it doesn't remove when drop on another place

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I know as much as you about this.

    But I'm sure it's possible. You just have to listen for the right events.

  5. #5
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    You are going to love how easy it is.

    Copy the node before the drop is processed and change the dropNode:

    Code:
    tree.on('beforenodedrop', function(e){
        var n = e.dropNode; // the node that was dropped
        var copy = new xt.TreeNode( // copy it
              Ext.apply({}, n.attributes) 
        );
        e.dropNode = copy; // assign the copy as the new dropNode
    });
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  6. #6
    Ext User
    Join Date
    Apr 2007
    Posts
    32
    Vote Rating
    0
    vicent is on a distinguished road

      0  

    Default


    Animal , Jack
    Thanks a lot for your help !

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Jack, would it be possible to have the mousedown handler record the state of the control key, and have the default processing do a copy if the node drag was started with CTRL+MOUSEDOWN?

    That would have to be an optional feature because sometimes you don't want copying.

  8. #8
    Ext User para's Avatar
    Join Date
    Apr 2007
    Location
    Redmond, WA
    Posts
    918
    Vote Rating
    -2
    para has a little shameless behaviour in the past

      0  

    Smile Copying node and its children

    Copying node and its children


    When I implemented the snippet given by Jack above, it only copies the node which was dragged, not its children as well. I wrote this little happy function that copies the children as well.

    I've only been working with JavaScript for about 2 weeks now, so I apologize if the code isn't the prettiest. I'm still working on learning the different syntaxes for loops.


    Code:
    tree.on('beforenodedrop', function(e){
    	e.dropNode = copyDropNode(e.dropNode);
    });
    
    
    function copyDropNode(node){
    	var newNode = new Ext.tree.TreeNode(Ext.apply({}, node.attributes));
    		for(var i=0; i < node.childNodes.length; i++){
    		n = node.childNodes[i];
    		if(n){
    			newNode.appendChild(copyDropNode(n));
    		}
    	}
    	return newNode;
    }

  9. #9
    Ext User
    Join Date
    May 2007
    Posts
    40
    Vote Rating
    0
    mhubert is on a distinguished road

      0  

    Question Missing Something --- copy does not work :-(

    Missing Something --- copy does not work :-(


    Code:
    /*
    * Ext JS Library 1.0.1
    * Copyright(c) 2006-2007, Ext JS, LLC.
    * licensing@extjs.com
    * 
    * http://www.extjs.com/license
    */
    var TreeTest = function(){
    // shorthand
    var Tree = Ext.tree;
     
    return {
    init : function(){
    var tree = new Tree.TreePanel('reports', {
    animate:true, 
    loader: new Tree.TreeLoader({dataUrl:'get-report-tree.html'}),
    enableDrag:true,
    containerScroll: true
    // ,dropConfig: {appendOnly:true}
    });
     
    // add a tree sorter in folder mode
    new Tree.TreeSorter(tree, {folderSort:true});
     
    // set the root node
    var root = new Tree.AsyncTreeNode({
    text: 'Reports', 
    draggable:false,
    id:'reports'
    });
    tree.setRootNode(root);
    tree.on('beforenodedrop', function(e){
    var n = e.dropNode; // the node that was dropped
    var copy = new xt.TreeNode( // copy it
    Ext.apply({}, n.attributes) 
    );
    e.dropNode = copy; // assign the copy as the new dropNode
    });
     
    // render the tree
    tree.render();
     
    root.expand(false, /*no anim*/ false);
     
    //-------------------------------------------------------------
     
    var myfavreport = new Tree.TreePanel('myfavreports', {
    animate:true, 
    //rootVisible: false,
    loader: new Ext.tree.TreeLoader({
    dataUrl:'get-myfavreport-tree.html'
    // ,baseParams: {lib:'yui'} // custom http params
    }),
    containerScroll: true,
    enableDD:true,
    dropConfig: {appendOnly:true}
    });
     
    // add a tree sorter in folder mode
    new Tree.TreeSorter(myfavreport, {folderSort:true});
     
    // add the root node
    var root2 = new Tree.AsyncTreeNode({
    text: 'My Favorit Reports', 
    draggable:false, 
    id:'myfavreports'
    });
    myfavreport.setRootNode(root2);
    myfavreport.render();
     
    myfavreport.expand(false, /*no anim*/ false);
    }
    };
    }();
    Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);
    I tried using this suggestion and did the above -- but it does NOT copy?

    What did I miss?

    Thanks

  10. #10
    Ext User
    Join Date
    Apr 2007
    Posts
    32
    Vote Rating
    0
    vicent is on a distinguished road

      0  

    Wink


    Quote Originally Posted by mhubert View Post
    Code:
    /*
    * Ext JS Library 1.0.1
    * Copyright(c) 2006-2007, Ext JS, LLC.
    * licensing@extjs.com
    * 
    * http://www.extjs.com/license
    */
    var TreeTest = function(){
    // shorthand
    var Tree = Ext.tree;
     
    return {
    init : function(){
    var tree = new Tree.TreePanel('reports', {
    animate:true, 
    loader: new Tree.TreeLoader({dataUrl:'get-report-tree.html'}),
    enableDrag:true,
    containerScroll: true
    // ,dropConfig: {appendOnly:true}
    });
     
    // add a tree sorter in folder mode
    new Tree.TreeSorter(tree, {folderSort:true});
     
    // set the root node
    var root = new Tree.AsyncTreeNode({
    text: 'Reports', 
    draggable:false,
    id:'reports'
    });
    tree.setRootNode(root);
    tree.on('beforenodedrop', function(e){
    var n = e.dropNode; // the node that was dropped
    var copy = new xt.TreeNode( // copy it
    Ext.apply({}, n.attributes) 
    );
    e.dropNode = copy; // assign the copy as the new dropNode
    });
     
    // render the tree
    tree.render();
     
    root.expand(false, /*no anim*/ false);
     
    //-------------------------------------------------------------
     
    var myfavreport = new Tree.TreePanel('myfavreports', {
    animate:true, 
    //rootVisible: false,
    loader: new Ext.tree.TreeLoader({
    dataUrl:'get-myfavreport-tree.html'
    // ,baseParams: {lib:'yui'} // custom http params
    }),
    containerScroll: true,
    enableDD:true,
    dropConfig: {appendOnly:true}
    });
     
    // add a tree sorter in folder mode
    new Tree.TreeSorter(myfavreport, {folderSort:true});
     
    // add the root node
    var root2 = new Tree.AsyncTreeNode({
    text: 'My Favorit Reports', 
    draggable:false, 
    id:'myfavreports'
    });
    myfavreport.setRootNode(root2);
    myfavreport.render();
     
    myfavreport.expand(false, /*no anim*/ false);
    }
    };
    }();
    Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);
    I tried using this suggestion and did the above -- but it does NOT copy?

    What did I miss?

    Thanks

    var copy = new xt.TreeNode( // copy it
    change to
    var copy = new Ext.tree.TreeNode