Drag and Drop - Dataview to GridPanel

[randomuser]

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]

Should you be creating the drop zone on the scroller or the getView()?