PDA

View Full Version : Drag and Drop - Dataview to GridPanel



randomuser
12 Mar 2012, 10:08 PM
I'm trying out drag & drop from dataview to grid panel... following is the code which is used. Drag part alone works fine, i.e, the items form the dataview can be dragged. While dropping it doesnt get dropped.


var dataview = Ext.create('Ext.view.View', {
deferInitialRefresh: false,
store: store,
tpl : Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="phone">',
(!Ext.isIE6? '<img width="64" height="64" src="ext-4.0.7-gpl/examples/view/images/phones/{[values.name.replace(/ /g, "-")]}.png" />' :
'<div style="width:74px;height:74px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/phones/{[values.name.replace(/ /g, "-")]}.png\',sizingMethod=\'scale\')"></div>'),
'<strong>{name}</strong>',
'<span>{price:usMoney} ({reviews} Review{[values.reviews == 1 ? "" : "s"]})</span>',
'</div>',
'</tpl>'
),
plugins : [
Ext.create('Ext.ux.DataView.Animated', {
duration : 550,
idProperty: 'id'
})
],
id: 'phones',
itemSelector: 'div.phone',
overItemCls : 'phone-hover',
singleSelect: true,
autoScroll : true,
});

dataview.on('render', function(v) {
dataview.dragZone = new Ext.dd.DragZone(v.getEl(), {
getDragData: function(e) {
var sourceEl = e.getTarget(v.itemSelector, 10);
if (sourceEl) {
d = sourceEl.cloneNode(true);
d.id = Ext.id();
return {
ddel: d,
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).getXY(),
sourceStore: v.store,
draggedRecord: v.getRecord(sourceEl)
}
}
},
getRepairXY: function() {
return this.dragData.repairXY;
}
});
});
--------------------------------------------------------------------------------------------

var Grid = Ext.create('Ext.grid.Panel', {
title: 'Cart',
region: 'center',
margins: '0 5 5 0',
columns: [{
width: 215
},],
store: store
});

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


getTargetFromEvent: function(e) {
return e.getTarget(Grid.getView().rowSelector);
},


// On entry into a target node, highlight that node.
onNodeEnter : function(target, dd, e, data){

Ext.fly(target).addCls('my-row-highlight-class');
},


onNodeOut : function(target, dd, e, data){
Ext.fly(target).removeCls('my-row-highlight-class');
},


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


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

mitchellsimoens
13 Mar 2012, 10:34 AM
Should you be creating the drop zone on the scroller or the getView()?