View Full Version : Grid Drag & Drop Example

31 Aug 2009, 2:01 PM
I have been attempting to use this code example from the Extjs documentation for grid and below is what is shows, but when I implement it, it fails to work and I am wondering if there is something that I am missing. From the code, I am assuming that I have to manually build a dropZone object for the gridPanel so that monitored events can allow me to code some type of functionality based on those events. I am not correct?

myGridPanel.on('render', function() {
myGridPanel.dropZone = new Ext.dd.DropZone(myGridPanel.getView().scroller, {

// If the mouse is over a grid row, return that node. This is
// provided as the "target" parameter in all "onNodeXXXX" node event handling functions
getTargetFromEvent: function(e) {
return e.getTarget(myGridPanel.getView().rowSelector);

// On entry into a target node, highlight that node.
onNodeEnter : function(target, dd, e, data){

// On exit from a target node, unhighlight that node.
onNodeOut : function(target, dd, e, data){

// While over a target node, return the default drop allowed class which
// places a "tick" icon into the drag proxy.
onNodeOver : function(target, dd, e, data){
return Ext.dd.DropZone.prototype.dropAllowed;

// On node drop we can interrogate the target to find the underlying
// application object that is the real target of the dragged data.
// In this case, it is a Record in the GridPanel's Store.
// We can use the data set up by the DragZone's getDragData method to read
// any data we decided to attach in the DragZone's getDragData method.
onNodeDrop : function(target, dd, e, data){
var rowIndex = myGridPanel.getView().findRowIndex(target);
var r = myGridPanel.getStore().getAt(rowIndex);
Ext.Msg.alert('Drop gesture', 'Dropped Record id ' + data.draggedRecord.id +
' on Record id ' + r.id);
return true;

Thanks for all your help in advance...

31 Aug 2009, 7:12 PM
What are you looking to achieve in your drag and drop code?

1 Sep 2009, 6:24 AM
Hello Aaron,

Thanks for your help. I am working on a project where the user wants to be able to reorganize the rows by means of drag and drop. I have a simi working solution but onNodeDrop I am trying to determine just how I can get the removed record and insert record into a new location. A lot of the examples I see are just adding the record to the end of the collection which isn't what I want. I can't determine just how to get the new location where record is being dropped so that I can get the new index and reinsert into store. Any help would be greatly appreciated...

Take Care and Have a Great Day.

1 Sep 2009, 8:13 AM
It appears be working okay now for one row to two selections at a time, but as soon as I have 3 or more selections and I move them to the last index position in the grid, a portion of the items dissappear and seem to be populated in out of order. Below is my code. Am I missing something?

onNodeDrop : function(target, dd, e, data){
var targetIndex = g.getView().findRowIndex(target);
var records = dd.dragData.selections;
Ext.each(records, dd.grid.store.remove, dd.grid.store);
dd.grid.store.insert(targetIndex, records);
return true;


1 Sep 2009, 8:49 AM
I have managed to get this working okay by adding:


I added this at the end right before the return true. But, unfortunately, the order of the selected items is still being populated out of order. For example, when I have an id field of 1, 2, 3, 4. The records when moved to another location are populated in the opposite order as 4, 3, 2, 1. Is there any way that I can control this? I have tried doing this instead

for(var i = records.length-1; i >= 0; i--){
g.store.insert(targetIndex, [records[i]]);

but am having another problem with rows dissappearing.