CODEWITHSUNDEEP
extjs
mmrs151
mmrs151

Reputation: 4102

Drag and Drop grid on a panel

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.

Upvotes: 4

Views: 5558

Answers (1)

Sean Adkinson
Sean Adkinson

Reputation: 8615

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.

Upvotes: 5

Related Questions