PDA

View Full Version : DnD Items drop in wrong grid



Lobermann
6 Oct 2010, 7:30 AM
Hello,

I have a problem with Drag and Drop in a window with 2 Ext.grid.EditorGridPanel (left and right).
Dropping should be allowed only for sorting each grid.
This works thine if I only use one Ext.grid.EditorGridPanel with enabled DnD, but if I enable it
on the second one, if I drag a Items in the right grid, it is added to the left grid.
It works in the left grid for sorting, so this problem only occures when dragging on item from the right grid.

Here are the two grids:



var Grid1 = new Ext.grid.EditorGridPanel({
id: 'Grid1',
store: GridStore1,
columnWidth: 0.35,
cm: cm,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
}),
clicksToEdit: 1,
autoWidth: true,
autoHeight: true,
//height: 390,
resizeable: true,
ddGroup:'DD1',
enableDragDrop: true, // enable drag and drop of grid rows
frame: false,
plugins: [checkColumnActive, checkColumnDelete],
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
}),
viewConfig: {
emptyText: 'Select a Group or create new Item',
forceFit: true
},

listeners: {
"render": {
scope: this,
fn: function(grid) {

// Enable sorting Rows via Drag & Drop
// this drop target listens for a row drop
// and handles rearranging the rows

var ddrow = new Ext.dd.DropTarget(grid.container, {
ddGroup : 'DD1',
copy:false,
notifyDrop : function(dd, e, data){

var ds = grid.store;

// NOTE:
// you may need to make an ajax call here
// to send the new order
// and then reload the store


// alternatively, you can handle the changes
// in the order of the row as demonstrated below

// ***************************************

var sm = grid.getSelectionModel();
var rows = sm.getSelections();
if(dd.getDragData(e)) {
var cindex=dd.getDragData(e).rowIndex;
if(typeof(cindex) != "undefined") {
for(i = 0; i < rows.length; i++) {
ds.remove(ds.getById(rows[i].id));
}
ds.insert(cindex,data.selections);
sm.clearSelections();
}
}

// ************************************
}
})

// load the grid store
// after the grid has been rendered
}
}
}

});


var Grid2 = new Ext.grid.EditorGridPanel
({
id: 'Grid2',
store: GridStore2, // define the data store in a separate variable
cm: cmitem,
columnWidth: 0.65,
loadMask: true,
//width: 320,
//height: 400,
autoHeight: true,
autoWidth: true,
resizeable: true,
ddGroup:'DD2',
enableDragDrop: true, // enable drag and drop of grid rows
plugins: [checkColumnActiveItem, checkColumnDeleteItem],
clicksToEdit: 1,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
}),
viewConfig: {
emptyText: 'Select a Group or create new Item',
forceFit: true
},

listeners: {
"render": {
scope: this,
fn: function(grid2) {

// Enable sorting Rows via Drag & Drop
// this drop target listens for a row drop
// and handles rearranging the rows

var ddrow2 = new Ext.dd.DropTarget(grid2.container, {
ddGroup : 'DD2',
copy:false,
notifyDrop : function(dd2, e2, data2){

var ds2 = grid2.store;

// NOTE:
// you may need to make an ajax call here
// to send the new order
// and then reload the store


// alternatively, you can handle the changes
// in the order of the row as demonstrated below

// ***************************************

var sm2 = grid2.getSelectionModel();
var rows2 = sm2.getSelections();
if(dd2.getDragData(e2)) {
var cindex2 = dd2.getDragData(e2).rowIndex;
if(typeof(cindex2) != "undefined") {
for(i2 = 0; i2 < rows2.length; i2++) {
ds2.remove(ds2.getById(rows2[i2].id));
}
ds2.insert(cindex2,data2.selections);
sm2.clearSelections();
}
}

// ************************************
}
})

// load the grid store
// after the grid has been rendered
}
}
}

})


Can somebody explain that problem? Or better tell me what is causing this behaviour?

Thanks

Lobermann
7 Oct 2010, 5:38 AM
nobody an idea what the problem could be?

intro
10 Oct 2010, 12:14 PM
I am having the same problem...Any idea.. When i drag and drom reorder in one grid he add data into another grid.
I am having two grids dnd have two dd : DownGridEN and DownGridHR

Thanks...

Condor
11 Oct 2010, 1:30 AM
'grid.container' is the wrong element. You should attach the DropTarget to grid.getView().mainBody.

Lobermann
11 Oct 2010, 1:47 AM
I found a solution for the problem.
I modified the sample from http://examples.extjs.eu/ddgrids.html

Modified it in that way:



Example.GridDropZone = function(grid, config) {
this.grid = grid;
Example.GridDropZone.superclass.constructor.call(this, grid.view.scroller.dom, config);
};

Ext.extend(Example.GridDropZone, Ext.dd.DropZone, {

onContainerOver:function(dd, e, data) {
return dd.grid == this.grid ? this.dropAllowed : this.dropNotAllowed;
} // eo function onContainerOver

,onContainerDrop:function(dd, e, data) {
if(dd.grid == this.grid) {
var ds = dd.grid.store;
var sm = dd.grid.getSelectionModel();
var rows = sm.getSelections();
if(dd.getDragData(e)) {
var cindex=dd.getDragData(e).rowIndex;
if(typeof(cindex) != "undefined") {
for(i = 0; i < rows.length; i++) {
ds.remove(ds.getById(rows[i].id));
}
ds.insert(cindex,data.selections);
sm.clearSelections();
}
}
return true;
}
else {
return false;
}
} // eo function onContainerDrop
,containerScroll:true

});


Have fun with it :)

intro
11 Oct 2010, 2:13 AM
thanks i will try tha:)