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

[demotics2002]

Hi,

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...

[demotics2002]

Up

[raikoti sravan kumar]

I am also facing same issue i want ordering in GRID 1 and drag and drop between two grids GRID 1 & GRID 2

[demotics2002]

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...

[alicexyl]

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?

[Arg0n]

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
  }
}

AAAND

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

[alicexyl]

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
                    });
                    
                    dropZone.addToGroup(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());

                    dragZone.addToGroup(selfDDGroup);                    

                    dropZone.addToGroup(selfDDGroup);

I'm using Ext 4.1.0