Question

I have a panel and within the panel i have three grids.
I want to be able to move the grid by dragging and dropping.
I have the draggable: true and enableDragDrop: true, that seems to allow me to drag but not drop.

Any genius help will be much appreciated.

Answer 1

In order to drop something that is draggable, you need to define an Ext.dd.DropTarget or Ext.dd.DropZone and define the behavior that you want when the item is dropped. Use DropZone if there are multiple drop targets in a zone that handle the drop differently, but it sounds like you want DropTarget, which is used for dropping on a single element (such as inside your panel).

To make an entire panel be able to drop things onto, pass the panel into the constructor of DropTarget, and override the notifyDrop function:

var panelDropTarget = new Ext.dd.DropTarget(panel, {
    notifyDrop: function(dragsource, event, data) {
        // do something with the dragsource
    }
});

The dragsource that is passed into the function will have your grid in it (I think it will be dragsource.panel, but use Firebug debugging to determine exactly what that source object has in it).

Once you have a handle on the grid, you can reorder it in the panel, move itsomewhere, or define whatever behavior you want.