PDA

View Full Version : [CLOSED][3.0.0svn] Grid to Grid DD



flylaputa
21 Aug 2009, 2:00 AM
In the grid DD demo (dnd_grid_to_grid.js), if we replace the two instances of "scroller.dom" with "mainBody", then drag and drop from the second grid to the first grid fails. It still recognizes the drop zone though. Drag and drop from the first grid to the second still works.

jay@moduscreate.com
22 Aug 2009, 8:54 AM
Hrm... it seems that notifyDrop is not being called in the first grid drop target in that case.

That said, why in the world are you using mainBody instead of the scroller?!

jay@moduscreate.com
22 Aug 2009, 8:54 AM
video demonstration: http://tdg-i.com/img/screencasts/2009-08-22_1253.swf

before we call this a bug, i want to look into it further though.

hei209
24 Aug 2009, 1:10 AM
why in the world are you using mainBody instead of the scroller?!

We are using mainBody because we want to allow dropping from a tree node onto an existing record (row) only. We thought mainBody shall be able to do that as it encapsulates all rows in the grid according to the api. Thanks for the help.

evant
24 Aug 2009, 1:17 AM
The mainBody is created inside the scroller.

Regardless, I don't see why this is a bug. The example works as intended, you've modified it in such a way that it doesn't work. Feel free to open a help request for it, but I don't really think this qualifies.

flylaputa
24 Aug 2009, 1:24 AM
I don't see why the drag and drop would just fail if we don't want to drop to the whole scroller but just the mainBody. I am not saying the demo has a bug, I am only using the demo to show that notifyDrop isn't called when we want to drop onto the mainBody only.

jay@moduscreate.com
24 Aug 2009, 3:36 AM
I don't see why the drag and drop would just fail if we don't want to drop to the whole scroller but just the mainBody. I am not saying the demo has a bug, I am only using the demo to show that notifyDrop isn't called when we want to drop onto the mainBody only.

In order to achieve what you're looking to do, you don't need to modify drop zone in the example.

in the notifyOver, you can get the current row that is being targeted by:

var targetDiv = evtObj.getTarget();
var targetIndex = grid.getView().findRowIndex(targetDiv);
var targetRow = grid.getView().getRow(targetIndex);

flylaputa
24 Aug 2009, 4:35 AM
In order to achieve what you're looking to do, you don't need to modify drop zone in the example.


Thank you for your suggestion and I agree with you that it will work. :)

However, as you have observed, notifyDrop is not been called when the example is changed to target the mainBody. Is this a bug? If not, what's causing this behaviour and if this is the intended behaviour?

jay@moduscreate.com
24 Aug 2009, 5:37 AM
That is the crux of this problem. The question is, why is notifyDrop not being called.

flylaputa
25 Aug 2009, 5:57 AM
Any experts out there to shed some light :-/

flylaputa
27 Aug 2009, 8:55 AM
~o)

flylaputa
2 Sep 2009, 7:22 AM
Anyone? :((

jay@moduscreate.com
2 Sep 2009, 7:27 AM
To be honest, I don't see this as a major issue. The example shows the best practice. Why are you trying to deviate from that?

jay@moduscreate.com
2 Sep 2009, 7:29 AM
Btw, I tackled this in Chapter 12 of ExtJS in Action. There, i use the GridPanel's Element and track the mouse movements.



<body>
<style type="text/css">
.gridBodyNotifyOver {
border-color: #00cc33 !important;
}
.gridRowInsertBottomLine {
border-bottom:1px dashed #00cc33;
}
.gridRowInsertTopLine {
border-top:1px dashed #00cc33;
}
</style>

<script type="text/javascript">
Ext.onReady(function() {
var remoteProxy = new Ext.data.ScriptTagProxy({
url : 'http://extjsinaction.com/examples/chapter12/getPCStats.php'
// url : 'getPCStats.php'
});

var remoteJsonStore = {
xtype : 'jsonstore',
proxy : remoteProxy,
id : 'ourRemoteStore',
root : '',
autoLoad : true,
totalProperty : 'totalCount',
fields : [
{ name : 'department', mapping : 'department' },
{ name : 'workstationCount', mapping : 'workstationCount' }
]
};

var depsComputersOK = new Ext.grid.GridPanel({
title : 'Departments with good computers',
store : remoteJsonStore,
loadMask : true,
stripeRows : true,
enableDragDrop : true,
ddGroup : 'depGridDD',
autoExpandColumn : 'department',
columns : [
{
header : 'Department Name',
dataIndex : 'department',
id : 'department'
},
{
header : '# PCs',
dataIndex : 'workstationCount',
width : 40
}
]
});

var needUpgradeStore = Ext.apply({}, {
proxy : null,
autoLoad : false
}, remoteJsonStore);

var needUpgradeGrid = new Ext.grid.GridPanel({
title : 'Departments that need upgrades',
store : needUpgradeStore,
loadMask : true,
stripeRows : true,
enableDragDrop : true,
ddGroup : 'depGridDD',
autoExpandColumn : 'department',
columns : [
{
header : 'Department Name',
dataIndex : 'department',
id : 'department'
},
{
header : '# PCs',
dataIndex : 'workstationCount',
width : 40
}
]
});

new Ext.Window({
width : 500,
height : 300,
layout : 'hbox',
border : false,
defaults : {
frame : true,
flex : 1
},
layoutConfig : {
align : 'stretch'
},
items : [
depsComputersOK,
needUpgradeGrid
]
}).show();


var dropZoneOverrides = {
ddGroup : 'depGridDD',
onContainerOver : function(ddSrc, evtObj, ddData) {
var destGrid = this.grid;
var tgtEl = evtObj.getTarget();
var tgtIndex = destGrid.getView().findRowIndex(tgtEl);
this.clearDDStyles();

// is this a row?
if (typeof tgtIndex === 'number') {
var tgtRow = destGrid.getView().getRow(tgtIndex);
var tgtRowEl = Ext.get(tgtRow);
var tgtRowHeight = tgtRowEl.getHeight();
var tgtRowTop = tgtRowEl.getY();
var tgtRowCtr = tgtRowTop + Math.floor(tgtRowHeight / 2);
var mouseY = evtObj.getXY()[1];

// below
if (mouseY >= tgtRowCtr) {
this.point = 'below';
tgtIndex ++;
tgtRowEl.addClass('gridRowInsertBottomLine');
tgtRowEl.removeClass('gridRowInsertTopLine');
}
// above
else if (mouseY < tgtRowCtr) {
this.point = 'above';
tgtRowEl.addClass('gridRowInsertTopLine');
tgtRowEl.removeClass('gridRowInsertBottomLine')
}
this.overRow = tgtRowEl;
}
else {
tgtIndex = destGrid.store.getCount();
}
this.tgtIndex = tgtIndex;

destGrid.body.addClass('gridBodyNotifyOver');

return this.dropAllowed;
},
notifyOut : function() {
this.clearDDStyles();
},
clearDDStyles : function() {
this.grid.body.removeClass('gridBodyNotifyOver');
if (this.overRow) {
this.overRow.removeClass('gridRowInsertBottomLine');
this.overRow.removeClass('gridRowInsertTopLine');
}
},
onContainerDrop : function(ddSrc, evtObj, ddData){
var grid = this.grid;
var srcGrid = ddSrc.view.grid;
var destStore = grid.store;
var tgtIndex = this.tgtIndex;
var records = ddSrc.dragData.selections;

this.clearDDStyles();

var srcGridStore = srcGrid.store;
Ext.each(records, srcGridStore.remove, srcGridStore);

if (tgtIndex > destStore.getCount()) {
tgtIndex = destStore.getCount();
}
destStore.insert(tgtIndex, records);

return true;
}
};
// This will make sure we only drop to the view container
var leftGridDroptgtCfg = Ext.apply({}, dropZoneOverrides, {
grid : depsComputersOK
});
new Ext.dd.DropZone(depsComputersOK.el, leftGridDroptgtCfg);


// This will make sure we only drop to the view container
var needdUpgradesDZConfig = Ext.apply({}, dropZoneOverrides, {
grid : needUpgradeGrid
});
new Ext.dd.DropZone(needUpgradeGrid.el, needdUpgradesDZConfig);




});

</script>
</body>

If you use this code, please buy a copy of the book in show of appreciation.

http://manning.com/garcia/

jay@moduscreate.com
2 Sep 2009, 7:30 AM
Here's a video demo of the code in action:
http://tdg-i.com/149/a-quick-demo-of-ext-js-in-actions-chapter-11-drag-and-drop-with-grids

flylaputa
2 Sep 2009, 7:35 AM
Thanks for your demo. I just thought that there is an elegant answer to your question on post #9. I suppose I will just go with your suggestion on post #7 then.

jay@moduscreate.com
2 Sep 2009, 7:36 AM
Just an FYI, the code for Post #7 actually came from the book :)

jay@moduscreate.com
2 Sep 2009, 7:36 AM
Can we have a mod close this thread please?