Custom drag'n'drop from a tree to a grid with Extjs5

Question

The Ext.grid.plugin.DragDropView and Ext.tree.plugin.TreeViewDragDropView are great to allow drag'n'drop functionnality over those components but I don't want the store modification thing when I drag and drop an item. I want custom functions, like, when I drop an item on my grid, I don't want the drag component source store to be modified and I don't want the drop component store to be modified too. I would like a function of mine to be called instead.
How to do this?
Do I need to use DragZone and DropZone instead?

Answer 1

You are on the right path, and looking in the right areas. The plugins that you have mentioned are exactly what you need for this purpose and provide the DragZone and DropZone functionality within.

I have written a simple example of using these plugins together, Fiddle Here.

The thing to watch out for here... If you do not want the default functionality of moving a record between stores you will likely need to run your own logic in the beforeDrop event and call the cancelDrop method, to prevent default behaviour, this is demonstrated in the fiddle and code below.

Make sure that both plugins share the same ddGroup.

Ext.application({
    name: 'Fiddle',

    launch: function() {

        // create a very simple tree view
        var treeStore = Ext.create('Ext.data.TreeStore', {
            root: {
                expanded: true,
                children: [{
                    text: "detention",
                    leaf: true
                }, {
                    text: "homework",
                    expanded: true,
                    children: [{
                        text: "book report",
                        leaf: true
                    }, {
                        text: "algebra",
                        leaf: true
                    }]
                }, {
                    text: "buy lottery tickets",
                    leaf: true
                }]
            }
        });

        var gridStore = Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: {
                'items': [{
                    'name': 'Lisa',
                    "email": "lisa@simpsons.com",
                    "phone": "555-111-1224"
                }, {
                    'name': 'Bart',
                    "email": "bart@simpsons.com",
                    "phone": "555-222-1234"
                }, {
                    'name': 'Homer',
                    "email": "homer@simpsons.com",
                    "phone": "555-222-1244"
                }, {
                    'name': 'Marge',
                    "email": "marge@simpsons.com",
                    "phone": "555-222-1254"
                }]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    rootProperty: 'items'
                }
            }
        });

        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            layout: 'fit',
            height: 800,
            width: 800,
            items: [{
                layout: 'border',
                title: "DnD",
                height: '100%',
                items: [{
                    xtype: 'grid',
                    region: 'center',
                    store: gridStore,
                    columns: [{
                        text: 'Name',
                        dataIndex: 'name'
                    }, {
                        text: 'Email',
                        dataIndex: 'email',
                        flex: 1
                    }, {
                        text: 'Phone',
                        dataIndex: 'phone'
                    }],
                    viewConfig: {
                        plugins: {
                            ptype: 'gridviewdragdrop',
                            enableDrag: false,
                            enableDrop: true,
                            ddGroup: 'myDropGroup'
                        },
                        listeners: {
                            beforedrop: function(node, data, overModel, dropPosition, dropHandlers) {
                                // Defer the handling
                                dropHandlers.wait = true;

                                // here you have the record from the treeview and can do anything you like with it.
                                var record = data.records[0];

                                Ext.MessageBox.confirm('Drop', 'Your are about to drop ' + record.get('text') + ', Are you sure?', function(btn) {
                                    if (btn === 'yes') {
                                        dropHandlers.processDrop();
                                    } else {
                                        // IMPORTANT - In this case, we want to cancel the drop as the records aren't compatible
                                        dropHandlers.cancelDrop();
                                    }
                                });
                            }
                        }
                    }
                }, {
                    xtype: 'treepanel',
                    width: '40%',
                    region: 'west',
                    store: treeStore,
                    rootVisible: false,
                    viewConfig: {
                        plugins: {
                            ptype: 'treeviewdragdrop',
                            enableDrop: false,
                            ddGroup: 'myDropGroup'
                        }
                    }
                }]
            }]
        });
    }
});