PDA

View Full Version : Drag items from Tree Panel to View



AlbertoMD
7 Jun 2013, 3:02 PM
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.
44246
Does anyone knows if I am doing something wrong?


Thanks,


Alberto

slemmon
12 Jun 2013, 9:45 AM
Try changing the dropZone (with the getTargetFromEvent) to dropTarget and see if that gets you closer.

You might check out this example, too, if you haven't seen it already:
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#dd-grid-to-form