PDA

View Full Version : How to create drag and drop with DragZone and DropZone?



isearch4nothing
21 Dec 2011, 7:25 AM
Hi ,

Trying to create drag and drop between 2 grids.

I use this solution , but it does not work for me :
http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.dd.DropZone.html
Need to use onNodeOver listener , but i have no idea why it is not working...




// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
id : 'first_grid',
viewConfig : {
plugins : {
ptype : 'gridviewdragdrop',
ddGroup : 'employeeDDGroup'
},
listeners : {
drop : function(node, data, dropRec, dropPosition) {

}
}
},
layout: 'fit',
store : fisrtStore,
columns : columns,
stripeRows : true,
margins : '0 2 0 0'
});

var availableGrid = Ext.create('Ext.grid.Panel', {
id : 'available_grid',
viewConfig : {
emptyText: 'There is no available people for this requirement',

},
layout: 'fit',
store : availableStore,
columns : columns,
stripeRows : true,
title : 'Available ',
margins : '0 2 0 0'
});


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

ddGroup : 'employeeDDGroup',

onNodeOver : function(target, dd, e, data){
return Ext.dd.DropZone.prototype.dropAllowed;
},


onNodeDrop : function(target, dd, e, data){
var rowIndex = availableGrid .getView().findRowIndex(target);
var r = availableGrid .getStore().getAt(rowIndex);
Ext.Msg.alert('Drop gesture', 'Dropped Record id ' + data.draggedRecord.id +
' on Record id ' + r.id);
return true;
}
});
}

mitchellsimoens
21 Dec 2011, 8:42 AM
I'm assuming you have looked at the grid to grid drag and drop example?

isearch4nothing
21 Dec 2011, 12:41 PM
Yes I have seen that example http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/dd/dnd_grid_to_grid.js

, but there I cannot override containerOver event , because i have only drop and beforedrop events.