Dropzone Tree panel to View - extjs

Question

I am trying to implement some drag and drop functionallity from a Tree Panel to a View but I have not been able to do this. I am new using ExtJs and maybe I am doing something wrong.
I have my tree defined like this:
var treeMeasures = Ext.create('Ext.tree.Panel', {
id: 'treeMeasuresPanel',
title: 'Measures',
region: 'north',
store: dsMeasures,
rootVisible: true,
width: '100%',
height: '50%',
useArrows: true,
enableDD: true,
allowDrop: false,
collapsible: true,
border: 0,
style: 'border-right:1px solid #99BCE8;border-top:none;border-left:none;border-bottom: none;',
viewConfig: {
listeners: {
render: initializeFieldsDragZone
},
plugins: {
ptype: 'treeviewdragdrop',
ddGroup: 'fieldsToAreas',
enableDrag: true,
enableDrop: false,
containerScroll: true
}
}
});
The initializeFieldsDragZone function:
function initializeFieldsDragZone(v, record, item, index, evt, eOpts) {
v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
getDragData: function (e) {
var sourceEl = e.getTarget(v.itemSelector, 10), d;
if (sourceEl) {
d = sourceEl.cloneNode(true);
d.id = Ext.id();
return v.dragData = {
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).getXY(),
ddel: d,
controlData: v.getRecord(sourceEl).data
};
}
},
// Provide coordinates for the proxy to slide back to on failed drag.
// This is the original XY coordinates of the draggable element.
getRepairXY: function () {
return this.dragData.repairXY;
}
});
}
The View:
var filterAreaView = Ext.create('Ext.view.View', {
store: dsFilterArea,
tpl: "",
ddGroup: 'fieldsToAreas',
bodyStyle: {
background: 'ffffff'
},
listeners: {
render: initializeAreasDropZone
}
});
And the initializeAreasDropZone function is:
function initializeAreasDropZone(area) {
var view = area.getEl();
view.dropZone = Ext.create('Ext.dd.DropZone', area.el, {
getTargetFromEvent: function (e) {
return e.getTarget('.x-grid-row');
},
onNodeEnter: function (target, dd, e, data) {
},
onNodeOut: function (target, dd, e, data) {
},
onNodeOver: function (target, dd, e, data) {
return true;
},
onNodeDrop: function (target, dd, e, data) {
// My Code
return true;
}
});
}
And the problem is that when I drag the node from the tree and try to drop into the view nothing happens.
Does anyone knows if I am doing something wrong?
Thanks,
Alberto

Answer 1

I think you may be overthinking this. I created a working model of DD between two panels (Ext.tree.Panel) each containing a root, with multiple folders, and multiple leaves in each folder. Simply by adding the plugin to each tree enabled DD:
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
ddGroup: 'myDDGroup',
appendOnly: true,
sortOnDrop: true,
containerScroll: true
}
},
After doing this, when I click and drag a leaf from one tree to the other, it dutifully adds the leaf to the target folder upon release of the mouse button. I didn't have to do anything else as far as monitoring events.

Answer 2

if you use TreePanel for Drag Zone, i think we don't need to create function initializeFieldsDragZone, just use plugin "treeviewdragdrop".
The problem from your code is initializeAreasDropZone must have ddgroup same as the plugin:
function initializeAreasDropZone(area) {
var view = area.getEl();
view.dropZone = Ext.create('Ext.dd.DropZone', area.el, {
getTargetFromEvent: function (e) {
return e.getTarget('.x-grid-row');
},
onNodeEnter: function (target, dd, e, data) {
},
onNodeOut: function (target, dd, e, data) {
},
onNodeOver: function (target, dd, e, data) {
return true;
},
onNodeDrop: function (target, dd, e, data) {
console.log(data);
},
ddGroup: 'fieldsToAreas'
});
}
cheers