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.

score 4 · Accepted Answer · answered Aug 07 '12 at 22:21

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;

score 1 · Answer 2 · answered Aug 08 '12 at 09:02

1

General overview of drag and drop

Also check the custom drag drop to a grid http://docs.sencha.com/ext-js/4-1/#!/example/dd/dragdropzones.html

general idea is that , you have to create 1. draggable element On receipt of a mousedown event. Return a drag data object if so. The data object can contain arbitrary application data, but it should also contain a DOM element in the ddel property to provide a proxy to drag. 2. drop zone , where you decide what to do on 'onNodeDrop' event

answered Aug 08 '12 at 09:02

Jom

1,877
5
29
46

The general overview was written in 2009. Does it detail the best way we can do this sort of thing with extjs 4.07? – Bbb Aug 08 '12 at 17:02
I think yes! I used code from second sample for drag and drop a ext.Panel to another container. its working fine. – Jom Aug 09 '12 at 06:27
But I'm dragging within grids or treepanels. Aren't here plugins for that? – Bbb Aug 09 '12 at 13:23
if you need custom dragdrop go this way, other wise use the plugin method by Izhaki – Jom Aug 09 '12 at 14:51

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

2 Answers2