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

[murrah]

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:

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

[murrah]

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.

[makana]

I don't know exactly what you want to do, but here's an example:

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.

[murrah]

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:

// Go back up the dom 3 levels from the dom node that fired the drop event
var domNode = e.getTarget('.x-tree-node-el', 3, true);
// 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

[murrah]

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