View Full Version : Custom Grid Drag Zone not working in IE

30 Apr 2009, 11:15 AM
I have implemented a custom drag zone for a grid. Overriding the getDragData method it adds an additional member to the drag data object. This works in firefox and safari but not IE (6).

I modified examples/dd/dnd_grid_to_grid.js to replicate the error. Here are the essential modifications:

The custom drag zone. This adds the extra_data member to the drag data.

Ext.dd.CustomDragZone = function(grid, config) {
Ext.dd.CustomDragZone.superclass.constructor.call(this, grid, config);
Ext.extend(Ext.dd.CustomDragZone, Ext.grid.GridDragZone, {
getDragData : function(e) {
var retval = Ext.dd.CustomDragZone.superclass.getDragData.call(this, e);
retval.extra_data = 'Extra Drag Data';
return retval;

Adding the custom drag zone to the grid:

var firstGrid = new Ext.grid.GridPanel({
ddGroup : 'secondGridDDGroup',
store : firstGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
width : 325,
region : 'west',
title : 'First Grid',
listeners: {
// Initialize the grid to use the custom drag zone
render: {
fn: function (grid) {
this.view.dragZone = new Ext.dd.CustomDragZone(grid, { ddGroup: grid.ddGroup });


The drop target where I want to access the extra_data member.

var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup : 'secondGridDDGroup',
copy : false,
notifyDrop : function(ddSource, e, data){

// Show the extra data
Ext.MessageBox.alert('Extra Data', data.extra_data);

// Generic function to add records.
function addRow(record, index, allItems) {

// Search for duplicates
var foundItem = secondGridStore.find('name', record.data.name);
// if not found
if (foundItem == -1) {
// Call a sort dynamically
secondGridStore.sort('name', 'ASC');

//Remove Record from the source
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);

I have attached the entire file if you want to test it. Use it to overwrite the examples/dd/dnd_grid_to_grid.js file.

Did I do something wrong here or is this a bug in 3.0?

30 Apr 2009, 1:02 PM
OK, here's another clue.

I found a post (http://www.extjs.com/forum/showthread.php?t=44605&highlight=DragZone that suggested disabling getDragData on the base class would correct the problem. Sure enough it does.

Here are the changes replicating getDragData in the derived class and disabling it in the superclass:

// Disable base functionality
Ext.grid.GridDragZone.prototype.getDragData = function (e) {};

// Create custom drag zone to append more data to the drag data object
Ext.dd.CustomDragZone = function(grid, config) {
Ext.dd.CustomDragZone.superclass.constructor.call(this, grid, config);
Ext.extend(Ext.dd.CustomDragZone, Ext.grid.GridDragZone, {

// Carry forward the full method and add extensions
getDragData : function(e){
var t = Ext.lib.Event.getTarget(e);
var rowIndex = this.view.findRowIndex(t);
if(rowIndex !== false){
var sm = this.grid.selModel;
if(!sm.isSelected(rowIndex) || e.hasModifier()){
sm.handleMouseDown(this.grid, rowIndex, e);
return {grid: this.grid, ddel: this.ddel, rowIndex: rowIndex, selections:sm.getSelections(), extra_data: 'Extra Drag Data'};
return false;

This solution is not really workable for me as I would like to use the base functionality of getDragData elsewhere in the application.

I now believe that this is a bug and not an error on my part.