Copy records in Drag and Drop Grid ext-js 4.2.1

Question

I have been searching for solutions for this. I have two grid panels which have drag and drop plugin enabled.
I want the copy of the record which is dragged to destination grid to be inserted in , but when once record is dropped to other grid the record is lost in source grid.

I tried to find some solutions found this at many places.

Ext.create('Ext.grid.Panel', {
store: 'testStore',
columns: [
    {header: 'Name',  dataIndex: 'name', flex: true}
],
viewConfig: {
    copy: true,
    plugins: {
        ptype: 'gridviewdragdrop',
        dragText: 'Drag and drop to reorganize'
    }
},
height: 200,
width: 400,
renderTo: Ext.getBody()

});

I am using ext-js 4.2.1 and in document there is no copy config present
There is no config option as copy present.
Can anyone suggest how to achieve this functionality in ext-js 4.2.1.

Thanks & Regards
Sumanth K.P

Answer 1

You should add beforedrop event handler to the target grid view and handle drop.

Example:

me.getView().on('beforedrop', function(node, data, overModel, dropPosition, dropHandlers) {
    var record = data.records[0];

    if (me.getStore().findBy(function(r) { return r.get('idx') == record.get('idx'); }) == -1) {
        console.log('Process drop');
        dropHandlers.processDrop();
    } else {
        console.log('Cancel drop');
        dropHandlers.cancelDrop();
    }
});

Fiddle: http://jsfiddle.net/bgvxcz3k/1/

If you want to have possibility to add one record multiple times, you can copy records in data.records array.

Example:

me.getView().on('beforedrop', function(node, data, overModel, dropPosition, dropHandlers) {
    data.records[0] = data.records[0].copy('id' + idseed++);

    console.log('Process drop');
    dropHandlers.processDrop();
});

http://jsfiddle.net/bgvxcz3k/2/