PDA

View Full Version : Drag and Drop - GridPanel - startdrag functionality?



Dustin Graham
4 Oct 2009, 2:53 PM
I am trying to create a GridPanel with lazy instantiation (I think that's what it's referred to, I'm pretty new). I have var myGrid = { xtype: 'grid', ... and I have added drag and drop functionality... ddGroup: 'contacts', enableDragDrop: true, ... and sure enough I can now drag the rows around. However, I added listeners: { startdrag: function() { alert('start'); } } and it doesn't work.

I have tried adding the listener to the row selection model, the grid, and tried catching startdrag, startDrag, onStartDrag, onstartdrag, etc and I just can't seem to catch the event when the grid panel item begins to be dragged.

I found Saki's example, http://examples.extjs.eu/?ex=tree2divdrag which has the startdrag function. But, he's implementing it in a tree, and I'm trying to use a gridpanel. Perhaps the gridpanel doesn't fire the startdrag event, where the tree does fire the startdrag event?

Saki's example has...



var tree = new Ext.tree.TreePanel({
root:{/*...*/}
,listeners:{
startdrag:function() { /*...*/}
}
/*...*/
});


And, I have



var contactGrid = {
xtype: 'grid',
ddGroup: 'contacts',
enableDragDrop: true,
listeners: {
startdrag: function() { alert('start...'); /* Does NOT work for me... */ }
}
/*...*/
};


In the API documentation, I see that the TreePanel has a startdrag, but the GridPanel does not have one listed. I have noticed from time to time some events or functions that are not listed, but I guess this must be a situation where there isn't an easy way to catch the start drag event using this form of lazy instantiating?

Thoughts?

[Edit]
Essentially, I want a way to DO something when someone starts to drag a row of the grid. But, I generally have all my panels created as configs var panel = { xtype: 'grid', ... so I would prefer to figure out a way to maintain that design without extending classes and such.

tubamanu
4 Oct 2009, 11:18 PM
dragdop was discussed several times,
take a look at this:
http://www.extjs.com/forum/showthread.php?t=79902

Dustin Graham
5 Oct 2009, 8:26 AM
dragdop was discussed several times,
take a look at this:
http://www.extjs.com/forum/showthread.php?t=79902

Hm. I looked at that page but I must be blind. I also looked at...

http://www.extjs.com/forum/showthread.php?t=21913
http://www.extjs.com/forum/showthread.php?t=16124
https://www.extjs.com/forum/showthread.php?t=6832

... and many others. But, I thought I made my question clear, I'm looking for a way to be notified when the dragging starts. Hence, the title of this thread, and asking for a "way to DO something when someone starts to drag a row of the grid."

I looked at the link you posted and found a pair of solutions, one was to avoid the plugin in question in that thread and simply listen to a "drop" event, and the other solution was to use a row selection model. I do use a row selection model, but it doesn't solve my problem -- and I'm not using the plugin.

That link does not help me.

I am still trying to figure out how to listen to an event that is fired when the user Starts to drag a row of the grid.

Thanks,
-Dustin

Tom23
21 Sep 2010, 6:37 AM
A quick look at the GridDragZone source code (http://dev.sencha.com/deploy/dev/docs/source/GridDD.html#method-Ext.grid.GridDragZone-onInitDrag) revealed this:

onInitDrag : function(e){
var data = this.dragData;
this.ddel.innerHTML = this.grid.getDragDropText();
this.proxy.update(this.ddel);
// fire start drag?
},
...
onEndDrag : function(data, e){
// fire end drag?
},

onValidDrop : function(dd, e, id){
// fire drag drop?
this.hideProxy();
}

The comments are actually there, I did not insert them.

Maybe there should be something like

Ext.override(Ext.grid.GridDragZone, {
onInitDrag: function (e) {
var data = this.dragData;
this.ddel.innerHTML = this.grid.getDragDropText();
this.proxy.update(this.ddel);
this.grid.fireEvent('startdrag', this.grid, data.selections, e);
},
onEndDrag: function (data, e) {
this.grid.fireEvent('enddrag', this.grid, data.selections, e);
},
onValidDrop: function (dd, e, id) {
this.grid.fireEvent('dragdrop', this.grid, this.dragData.selections, dd, e);
this.hideProxy();
}
});
Any reason why this is missing?