View Full Version : Drag items from Tree Panel to View

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.
Does anyone knows if I am doing something wrong?



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: