PDA

View Full Version : How do I test if drop is on dataview item



Dennis.Gearmesh
24 Feb 2013, 8:03 AM
Using ext js 4.1.3.

I have two dataviews. I am able to drag and drop back and forth between the two. I am trying to figure out how to test if the drop event happens on a dataview item (as opposed to just the blank area of the dataview).

It feels like I need to make each node a DropTarget, but the nodes are created from a <tpl>, so I don't see how that's an option.

Here is the code in my controller that sets up the current DropTarget on one of the dataviews


....
onDesktopDataViewRender: function (v) {
v.dropTarget = Ext.create('Ext.dd.DropTarget', v.el, {
ddGroup: 'FromSearchToDesktop',
notifyDrop: function (source, e, dropData) {
//Want do do something like:
//if(dropped directly on any item) {
// do some logic with that item
//}
//else {
// do the code below
var recordAlreadyExists = false;

v.store.each(function (r) {
if (r.data.ID == dropData.searchData.ID) {
recordAlreadyExists = true;
}
});

if (recordAlreadyExists == false) {
v.store.add(dropData.searchData);
}
//}end else
}
});
}
...

Thanks!

mitchellsimoens
26 Feb 2013, 10:30 AM
Is the dataview item setup as a drop target or is the dataview setup as the drop target?

Dennis.Gearmesh
27 Feb 2013, 9:38 PM
The dataview is set up as the DropTarget. I just use a <tpl> to create the dataview item. Is there a way to make the <tpl> a DropTarget?

Here is the dataview:


Ext.require('Client.store.DesktopStore');


Ext.define('Client.view.DesktopDataView',
{
extend: 'Ext.view.View',
alias: 'widget.DesktopDataView',
config:
{
store: Ext.create('Client.store.DesktopStore'),
tpl: '<tpl for=".">' +
'<div class="desktop-wrapper">' +
'<div class="desktop-icon">' +
'<tplswitch="Type">' +
'<tplcase="Person">' +
'<img src="../../Images/icons/Person50x50.jpg" />' +
'<tplcase="Family">' +
'<img src="../../Images/icons/Family50x50.jpg" />' +
'<tplcase="Household">' +
'<img src="../../Images/icons/Household50x50.jpg" />' +
'<tplcase="Church">' +
'<img src="../../Images/icons/Church50x50.jpg" />' +
'<tplcase="School">' +
'<img src="../../Images/icons/School50x50.jpg" />' +
'<tplcase="Business">' +
'<img src="../../Images/icons/Business50x50.jpg" />' +
'<tpldefault>' +
'<img src="../../Images/icons/Household50x50.jpg" />' +
'</tpl>' +
'</div>' +
'<div class="desktop-text">' +
'<span class="title">{Title}</span>' +
'<span class="address">{Address}</span>' +
'<span class="info">{Info}</span>' +
'</div>' +
'</div>' +
'</tpl>',
itemSelector: 'div.desktop-wrapper',
emptyText: '',
singleSelect: true
}
}
);

Dennis.Gearmesh
10 Mar 2013, 4:19 PM
I'd sure love to know if someone can tell me a way to make the DataViewItem a dropTarget...

Thanks.

Dennis.Gearmesh
15 Mar 2013, 6:50 PM
Yay! Finally figured this one out.
The quick answer is to create a DropZone for the node. The long answer is how to do that.
In my program, the user can drag items from DataView A to DataView B. After dropping the item in DataView B, the item appears in DataView B. On top of that, the user can drag an item from DataView A, and drop it on a node inside DataView B. The code needs to differentiate between the item being dropped on the DataView and the item being dropped on a node inside the DataView.
Generic instructions:
In DataViewB's onrender event, create a dropTarget with a ddGroup of "DataViewB"
Inside the notifyDrop function, create a new node.
Also inside the notifyDrop function, create another dropTarget (this one for the node instead of the DataView) with a ddGroup of "DataViewBNode".
Inside DataViewA's onRender event, create a DragZone with a ddGroup of "DataViewBNode" (!important!)
Inside of DataViewA's afterrender event, add the dragZone to the "DataViewB" group.
Now you will be able to drag from DataViewA and drop in the white space of DataViewB to add a node, but you will also be able to drop directly on a node from DataViewB and do a different action.
It's very important that the first ddGroup is for the node, and the one that's added in the afterrender event is for the DataView

Here is the code for DataViewA

onDataViewARender: function (v) {
var dataView = v;
...
v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
ddGroup: 'DataViewBNode',
getDragData: function (e) {
var sourceEl = e.getTarget(v.itemSelector, 10), d;
if (sourceEl) {
d = sourceEl.cloneNode(true);
d.id = Ext.id();
return v.dragData = {
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).getXY(),
ddel: d,
searchData: v.getRecord(sourceEl).data,
store: v.store,
source: 'DataViewA'
}
}
},

getRepairXY: function () {
return this.dragData.repairXY;
}
});
},

Here is the code for DataViewB


onDataViewBRender: function (v) {
var dataView = v;

v.dropTarget = Ext.create('Ext.dd.DropTarget', v.el, {
ddGroup: 'DataViewB',
notifyDrop: function (source, e, dropData) {
var recordAlreadyExists = false;

v.store.each(function (r) {
if (r.data.ID == dropData.searchData.ID && r.data.Type == dropData.searchData.Type) {
recordAlreadyExists = true;
}
});

if (recordAlreadyExists == false) {
v.store.add(dropData.searchData);

var nodes = v.container.dom.childNodes[0].childNodes;
var index = v.container.dom.childNodes[0].childNodes.length -1;

//
//Here is where you create the dropTarget for the new node
//
nodes[index].dropTarget = Ext.create('Ext.dd.DropTarget', nodes[index], {
ddGroup: 'DataViewBNode',
notifyDrop: function (source, e, dropData) {
console.log('success')
}
});
}

}
});
...
},