View Full Version : Drag and Drop: how to allow dropzone to receive from multiple dragzone?

2 Oct 2012, 6:29 PM

I am currently having difficulty allowing a dropzone to receive drops from different dragzones. My requirement is simple.
Grid A: Source of all data
Grid B: Receive drops from Grid A. Grid B should allow drag and drop to itself to reorder the items.

I am currently using Ext.dd.DropZone and Ext.dd.DragZone due grids A and B have different structure. I managed to allow dragging from A to B. But how can I enable dragging from B to B (for reordering items)?

What I did

gridA.getView().dragZone = Ext.create('Ext.dd.DragZone', el, {<options>});
gridB.getView().dropZone = Ext.create('Ext.dd.DropZone', el, {<options>});
// at this point all is well. Can drag from gridA to gridB

// but as soon as I did below, I am unable to drag from A to B anymore
gridB.getView.dragZone = Ext.create('Ext.dd.DragZone', el, {<options>});

I thought I should use ddGroup so.
1. If all 3 zones have equal ddGroup - Unable to drag from A to B
2. A.dragZone and B.dropZone have equal ddGroup and B.dragZone is different - Able to drag from A to B. B items are draggable but will not be accepted by B itself.

So, is it possible in ExtJS4 to have a grid receive drops from other grids and from itself also?

Thank you...

5 Oct 2012, 1:15 AM

raikoti sravan kumar
5 Oct 2012, 1:25 AM
I am also facing same issue i want ordering in GRID 1 and drag and drop between two grids GRID 1 & GRID 2

6 Oct 2012, 8:10 PM
i hope the silence does not mean "No! it is not possible".

I hope not to hear something like:
"No, dropping an item to one panel from many different panels is not possible"

It's time to dive in to source code...

28 Nov 2012, 12:02 AM
I'm facing similar issue, except I have a grid and a panel. I want to be able to drag from grid to panel, and also reorder components inside the panel. If I add a DragZone for the panel, then can't drag from grid to panel anymore.

What's preventing dragging from A to B if B also has a DragZone?

28 Nov 2012, 12:27 AM
At first you need to add dragGroups to your other grids lets say we have:

Grid 1:

//Grid config blaaa

viewConfig: {
plugins: {
ptype: 'gridviewdragdrop'
dragGroup: 'grid1'
enableDrag: true


Grid 2:

//Grid config blaaa

viewConfig: {
plugins: {
ptype: 'gridviewdragdrop'
dragGroup: 'grid2'
enableDrag: true

So you have a third grid which can have drops from Grid 1 and Grid 2.
You would have to create your own Grid class, which extends the normal grid.

Now you have to initialise a dropZone in it:

initDropZone: function(view)
var me = this;

var dropTarget = new Ext.dd.DropTarget(view.el,{
ddGroup: 'grid1', //our first grid
overClass: 'over',
notifyDrop: Ext.Function.bind(me.onDrop, me),
notifyOver: Ext.Function.bind(me.onOver, me)

dropTarget.addToGroup('grid2'); //our second grid

}, //eo function initDropZone

The problem now is, that you would have to write the whole drop and over behavior by your own ^^

If you have more question, ask ;P

28 Nov 2012, 2:57 AM
The solution that worked for me was create another ddGroup different from the first and add container B's drag zone and drop zone to the new group. One caveat is that this worked for me (assume 'this' is container B):

var selfDDGroup = 'self-dd-zone-' + this.id;
dragZone = Ext.create('Ext.dd.DragZone', this.getEl(), {
ddGroup: selfDDGroup


But this didn't. Not sure why but seems like a bug:

var selfDDGroup = 'self-dd-zone-' + this.id;
dragZone = Ext.create('Ext.dd.DragZone', this.getEl());



I'm using Ext 4.1.0

14 Jan 2015, 3:38 AM