1. #1
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    388
    Vote Rating
    12
    murrah will become famous soon enough

      0  

    Default How to drag files from Windows file manager onto tree node?

    How to drag files from Windows file manager onto tree node?


    Hi,

    I have a tree that I want to be able to drop filenames onto by dragging from the Windows file manager - ie from "ouside" the app. Since I am not dragging an Ext DDObject, the drop goes unrecognised by the tree beforenodedrop and nodedrop events.

    So, I added listeners to the tree html elements themselves. eg:
    PHP Code:
    tx.tree.single.getEl().on("drop", function (e) {
        if (
    e.hasFormat(Ext.air.DragType.TEXT)) {
            
    // handle the drop
        
    }
    }); 
    which works as far as recognising the drop goes.

    Now, e.getTarget() returns the DOM element (either text or image depending upon whether I drop onto the node text or the node icon). What I need to do then is to work out which tree node I am dropping onto but I cant see how to work backwards from the dom node to the tree node.

    I tried adding a node reference to the treenode.UI when the node is created but I need to work more on that to get it to work reliably.

    Is there a simpler way to either get the tree node object to recognise the external drag, or to find out the treenode from the dom node? Or some other completely different way?

    Thanks,
    Murray

  2. #2
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    388
    Vote Rating
    12
    murrah will become famous soon enough

      0  

    Default


    Maybe create a drag object from my dom element ondrop listener and relay it somewhere so the tree ondrop event recognises it? Hmmmm - not sure how to do that either. Just thinking out loud - will investigate.

  3. #3
    Sencha User makana's Avatar
    Join Date
    Apr 2008
    Location
    Dresden, Germany
    Posts
    527
    Vote Rating
    20
    makana has a spectacular aura about makana has a spectacular aura about

      0  

    Default


    I don't know exactly what you want to do, but here's an example:
    Code:
    tree.getEl().on({
    	'dragenter': function(e) {
    		if (e.hasFormat(Ext.air.DragType.FILES)) {
    			e.preventDefault();
    		}
    	},
    	'dragover': function(e) {
    		if (e.hasFormat(Ext.air.DragType.FILES)) {
    			e.browserEvent.dataTransfer.dropEffect = 'link'; // or 'copy' or 'move'
    			e.preventDefault();
    		}
    	},
    	'drop': function(e) {
    		var files = e.browserEvent.dataTransfer.getData(Ext.air.DragType.FILES),
    			node = e.getTarget('.x-tree-node-el', 3, true);
    		node = node.getAttribute('tree-node-id', 'ext');
    		node = tree.getNodeById(node);
    		node.expand(false, false, function() {
    			Ext.each(files, function(file) {
    				node.appendChild(new Ext.tree.TreeNode({
    					text: file.name
    				}));
    			});
    		});
    	},
    	delegate: '.x-tree-node-el'
    });
    It adds subnodes to nodes if you drag files on them.

    There's no check for leaf/non-leaf nodes or files/directories. It's just a quick and dirty one to demonstrate dragging onto a tree.
    Programming today is a race between software engineers striving to build bigger and better Ń–diot-proof programs, and the universe striving to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)

    Enhanced ExtJS adapter for Adobe AIR

  4. #4
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    388
    Vote Rating
    12
    murrah will become famous soon enough

      0  

    Default


    Makana, you are a genius! Thank you!

    The piece of information I was missing was that the tree node id was part of the dom at a higher level. So to make what Makana said a bit clearer:
    PHP Code:
    // Go back up the dom 3 levels from the dom node that fired the drop event
    var domNode e.getTarget('.x-tree-node-el'3true);
    // Ask for the item with the attribute 'tree-node-id' in the 'ext' namespace which is actually the tree node id 
    var treeNodeId domNode.getAttribute('tree-node-id''ext');
    // Use that id to get the tree node
    var treeNode tx.tree.single.getNodeById(treeNodeId); 
    Fantastic. Thanks!

    Murray

  5. #5
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    388
    Vote Rating
    12
    murrah will become famous soon enough

      0  

    Default


    I want to mark this as Solved but the Go Advanced button throws a JS error! "PATHS not found"

Similar Threads

  1. drag drop from windows explorer into tree panel
    By kfa22 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 17 Mar 2011, 12:01 PM
  2. Files/images manager
    By trancer in forum Community Discussion
    Replies: 0
    Last Post: 1 Jun 2009, 1:09 AM
  3. Drag and drop tree - only files draggable?
    By wuffy77 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 11 Nov 2008, 3:09 AM

Thread Participants: 1