Ext.grid.GridDragZone not firing startdrag & enddrag events

[nathanstitt]

Using the grid, the startdrag and enddrag events never fire.

I tracked it down to missing calls in the Ext.grid.GridDragZone, contained at the end of the GridDD.js file. There are comments there suggesting that someone considered adding the calls but didn't for some reason.

Adding:
this.grid.fireEvent("startdrag", this.grid, data.node, e);
this.grid.fireEvent("enddrag", this.grid, data.node, e);
this.grid.fireEvent("dragdrop", this.grid, dd, id, e);

at the end of the appropriate functions seems to correct the issues.

Hope this helps someone!

[brian.moeskau]

Just curious, what are you trying to accomplish? Adding the events as you did is OK, but in general rather than firing events, the DD stuff works by subclasses overriding methods as needed from their superclasses and performing logic there. In fact, DragSource and DropTarget are designed as base classes with many methods available purely to be implemented/overridden.

So if you need to do custom stuff for the grid, rather than firing events out to some other code, I would consider subclassing GridDragZone and implementing the methods that you need from DragSource (that are currently empty): onStartDrag, onEndDrag and beforeDragDrop (if you need the drop to be cancellable) or afterDragDrop (if you only need the notification that a drop occurred). That way, GridDragZone remains as the DD "controller" for the grid. Also, subclassing, rather than editing, would be preferred so that you'll get any future updates to GridDragZone automatically rather than having to manually merge changes into your copy.

[brian.moeskau]

One more thing, I'm not 100% sure about the comments in GridDD, but I would suspect that they are referring to "firing" those events in the same way that DragSource does. If you look at DragSource.onInitDrag (which is being overridden by GridDragZone) near the end it does this:

this.onStartDrag(x, y);

It does not actually fire an event, it simply calls the internal onStartDrag method. I think that's what the comments are likely referring to, and whether or not GridDragZone should do the same.

[brian.moeskau]

Actually, after looking some more into how the TreeDragZone and TreeDropZone are set up, they do fire events from the DD code to make handling from the Tree component itself more convenient. So while what I said earlier about subclassing is still the best approach when extending DD components yourself, adding the fireEvent calls as you've done is best in this case.

[nathanstitt]

Sorry for the late reply, I wasn't able to monitor the forum today.

The app I'm working on really doesn't need to modify the behavior of the GridDragZone at all, but it does need to receive DD elements from several different sources ( tree, multiple grids, etc ). In order to do that it has to know the origion of the dropped element, so it can take appropriate action.

I had decided that the simplest thing to do would be to set a flag once dragging starts from any source that would indicate where it came from. Hence the need to capture the start of a drag.

Of course there may be a better way to determine the origion of an arbitrary dragged element. I'd love to hear your opinions on it.

I did attempt to use DragSource.id and DragSource.getEl(), but it appears to return a reference to an Ext generated object, not the original Element.

I was actually useing 1.0 beta1 when I noticed the problem, and traced the problem down to the methods at the end of GridView.js, which actually had commented out fireEvent calls. However they appeared to be based on TreeDragZone. I then upgraded (rather painlessly) to 1.0.1, however it still has the problem.

At any rate, I appreciate your posts and agree the better way might be to subclass GridDragZone. In my defense, the docs do mention startdrag & friends :)

Thanks again,
Nathan

[jack.slocum]

Those events are left overs from .33 drag drop and their docs need to be removed.

The dragData object supplied to your drop target will contain all the info available:

{grid: this.grid, ddel: this.ddel, rowIndex: rowIndex, selections: sm.getSelections()}

There is a thread in the Prerelease forum with more details.