PDA

View Full Version : [FIXED] DD with overlaying targets



robert.peszek
28 Nov 2011, 3:40 PM
I think this maybe a bug, but maybe I do not understand something. It seems like Ext ingores Z-order when
finding DD targets. If several target controlls (in the same ddGroup) are positioned of top of each other, all of them get notified.
To illustrate my problem I have modified sencha’s dnd_grid_to_formpanel.js example:



/*
EDITED SENCHA EXAMPLE TO DEMONSTRATE POTENTIAL DD PROBLEM
*/
Ext.require(['*']);Ext.onReady(function(){
var myData = [
{ name : "Record 0", column1 : "0", column2 : "0" },
{ name : "Record 1", column1 : "1", column2 : "1" },
{ name : "Record 2", column1 : "2", column2 : "2" },
{ name : "Record 3", column1 : "3", column2 : "3" },
{ name : "Record 4", column1 : "4", column2 : "4" },
{ name : "Record 5", column1 : "5", column2 : "5" },
{ name : "Record 6", column1 : "6", column2 : "6" },
{ name : "Record 7", column1 : "7", column2 : "7" },
{ name : "Record 8", column1 : "8", column2 : "8" },
{ name : "Record 9", column1 : "9", column2 : "9" }
];
// Generic fields array to use in both store defs.
Ext.define('DataObject', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', mapping : 'name'},
{name: 'column1', mapping : 'column1'},
{name: 'column2', mapping : 'column2'}
]
});
// create the data store
var gridStore = Ext.create('Ext.data.Store', {
model : 'DataObject',
data : myData
});
// Column Model shortcut array
var columns = [
{ id : 'name', flex: 1, header: "Record Name", sortable: true, dataIndex: 'name'},
{header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
{header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
];
// declare the source Grid
var grid = Ext.create('Ext.grid.Panel', {
viewConfig: {
plugins: {
ddGroup: 'GridExample',
ptype: 'gridviewdragdrop',
enableDrop: false
}
},
store : gridStore,
columns : columns,
enableDragDrop : true,
stripeRows : true,
width : 325,
margins : '0 2 0 0',
title : 'Data Grid',
region : 'west',
selModel : Ext.create('Ext.selection.RowModel', {singleSelect : true})
});
//FIRST TAGET IS A TEXT AREA
var textField1 = Ext.create('Ext.form.field.TextArea', {
width : 250,
height : 200,
fieldLabel : 'Record Name',
name : 'name'
});
// Setup the form panel
var formPanel = Ext.create('Ext.form.Panel', {
region : 'center',
title : 'Generic Form Panel',
bodyStyle : 'padding: 10px; background-color: #DFE8F6',
labelWidth : 100,
width : 325,
margins : '0 0 0 3',
items : [
textField1
]
});

var displayPanel = Ext.create('Ext.Panel', {
width : 650,
height : 300,
layout : 'border',
renderTo : 'panel',
bodyPadding: '5',
items : [
grid,
formPanel
]
});

configureDD = function(target, targetEl) {
var panelDropTarget = Ext.create('Ext.dd.DropTarget', targetEl, {
ddGroup: 'GridExample',
notifyEnter: function(ddSource, e, data) {
console.log('notifyEnter ' + " on " + targetEl.id);
},
notifyDrop : function(ddSource, e, data){
// Reference the record (single selection) for readability
var selectedRecord = ddSource.dragData.records[0];
console.log('notifyDrop ' + selectedRecord.get('name') + " on " + targetEl.id);
return true;
}
});
}

configureDD(textField1, textField1.bodyEl);

//SECOND TARGET IS A PANEL
var tpanel = Ext.create('Ext.panel.Panel', {
title : 'OVERLAP PANEL',
width : 325,
height : 200
});
var twindow = Ext.create('Ext.window.Window', {
items :[
tpanel
]
});
twindow.show();
configureDD(tpanel, tpanel.body.dom);
});


Here are the changes I have made to the example:
I have replaced DropTarget code in notifyEnter and notifyDrop to simply print what is happening to the console.
From the form I have removed field2 and field3 and made field1 to be a big text area. I made this text area a drop target.
Created a Panel and made it a target for the same ddGroup. Displayed this panel using Ext.window.Window.
To see the issue simply run the modified example js file and place the OVERLAP window to hide the text area. Drag and drop one of the records in the way so that the drop location is over both the text area and the panel. (all 4 resulted from one drop):

notifyEnter on panel-1033-body
notifyEnter on textareafield-1021-bodyEl
notifyDrop Record 5 on textareafield-1021-bodyEl
notifyDrop Record 5 on panel-1033-body

If you look at Ext.dd.DragDropManager.js arround line 677 there appears to be no logic other that
checking "isOverTarget()".

Am I missing something? Is it expected that application will handle the aspect of figuring out which
of the targets is actually a target?
Could you suggest some workarrounds?

Robert

mitchellsimoens
29 Nov 2011, 6:28 AM
This looks to be a bug or not the expected behavior so I have moved to the bugs forum and have pushed to our bug tracker. I know you probably spent some time figuring out what is going on so I thank you for looking into it and giving us a test case to work with!

robert.peszek
30 Nov 2011, 7:04 AM
Thank you for your help!
Robert