ExtJS - EditorGridPanel rows not draggable? - extjs

Question

I had a working grid-to-grid drag and drop configuration, but once I changed one of the grids to an EditorGridPanel, I could no longer drag from it - only to it. Once I click on the row I want to drag I get the following error:
sm.isSelected is not a function
if(!sm.isSelected(rowIndex) || e.hasModifier()){
ext-all-debug.js (line 45439)
Is there any way to set it up so I can drag rows from an EditorGridPanel?

Answer 1

Found the answer to this inadvertently while looking at another example.
When creating a EditorGridPanel, be sure to include:
selModel:new Ext.grid.RowSelectionModel({singleSelect:true}),
to get the drag and drop functionality to work.

Answer 2

You don't have to use RowSelectionModel, but you will have to write your own code for the drag and drop zones. Here's an example of how to use drag and drop with CellSelectionModel:
grid1.on('render', function(grid) {grid1.initializeDragZone (grid1); });
grid2.on('render', function(grid) {grid2.initializeDropZone (grid2); });
initializeDragZone : function(grid) {
grid.dragZone = new Ext.dd.DragZone(grid.getEl(), {
getRepairXY: function() {
return this.dragData.repairXY;
},
getDragData: function(e) {
var cell = grid.getSelectionModel().getSelectedCell();
var row = grid.getStore().getAt(cell[0]);
var data = row.get('id'); //you can put custom data here
var sourceEl = grid.getView().getRow(cell[0]);
if (sourceEl) {
var d = sourceEl.cloneNode(true);
d.id = Ext.id();
return grid.dragData = {
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).getXY(),
ddel: d,
customData: data //our custom data
};
}
}
});
}
initializeDropZone : function(grid) {
grid.dropZone = new Ext.dd.DropZone(grid.getView().scroller, {
getTargetFromEvent: function(e) { //supports multiple drop zone classes
var target = e.getTarget('.some-class1');
target = target? target: e.getTarget('.some-class2');
target = target? target: e.getTarget('.some-class3');
target = target? target: e.getTarget('.some-class4');
return target;
},
onNodeEnter : function(target, dd, e, data){
Ext.fly(target).addClass('drop-zone-selected'); //test
},
onNodeOut : function(target, dd, e, data){
Ext.fly(target).removeClass('drop-zone-selected'); //test
},
onNodeOver : function(target, dd, e, data){
return Ext.dd.DropZone.prototype.dropAllowed;
},
onNodeDrop : function(target, dd, e, data){
var rowIndex = grid.getView().findRowIndex(target);
var rowRecord = grid.getStore().getAt(rowIndex);
var customData = data.customData;
//use custom data
return true;
}
});
}