Extjs 4 Explain drag and drop how to implement across two grids or treepanels

Question

Using Extjs 4.07

Assume I have two treePanels or, more likely, two grids. I want to be able to drag items back and forth between the two. What are the basic mechanisms required to do this? I'd liek to see some sample code demonstrating how it is done. I've not been able to find good documentation on how to do this that is applicable to v4 and not v3. I know there is an easy way and I've found many documents explaining bloated ways of doing this. I don't understand how dd is implemented in general. So, a high level overview would be useful as well.

Answer 1

A grid had a DragDrop plugin, while a tree has TreeViewDragDrop plugin.

If you want to drag from, to, or within your grid or tree, you include the plugin. In the case of a grid it will look something like this:

Ext.create('Ext.grid.Panel', {

    ...

    viewConfig: {
        plugins: {
            ptype: 'gridviewdragdrop',
            dragText: 'Drag and drop to reorganize'
        }
    },

    ...

});

Once the plugin is included, you get drag and drop events from the component, to which you can listen. To complete the example above.

Ext.create('Ext.grid.Panel', {

    …

    viewConfig: {
        plugins: {
            ptype: 'gridviewdragdrop',
            dragText: 'Drag and drop to reorganize'
        },

        listeners: {
            drop: function(node, data, dropRec, dropPosition) {
                // Do something here.
            }
        }        
    },

    …

});

You can see this fully working in this example, and its corresponding code.

To the best of my knowledge, nothing has changed on this front between 4.07 and 4.1;