Extjs 4 Explain drag and drop how to implement through two grids or wood panels

Question

Using Extjs 4.07

Suppose I have two treePanels or, more likely, two grids. I want to be able to drag items back and forth between them. What are the basic mechanisms required for this? I would like to find some code example demonstrating how to do this. I could not find good documentation on how to do this, which applies to v4, not v3. I know there is an easy way, and I have found many documents explaining overblown ways to do this. I do not understand how dd is implemented as a whole. Thus, a high-level review will also be useful.

Answer 1

There was a DragDrop plugin in the grid, and a TreeViewDragDrop tree.

If you want to drag from or to your grid or tree, you enable 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' } }, ... }); 

After you enable the plugin, you get drag and drop events from a component that you can listen to. To complete the above example.

 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 the corresponding code .

As far as I know, nothing has changed on this front between 4.07 and 4.1;

Answer 2

General drag and drop overview

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

The general idea is that you need to create 1. draggable element. Upon receipt of the mousedown event. If so, return the drag and drop data object. A data object may contain arbitrary application data, but it must also contain a DOM element in the ddel property to provide a proxy for drag and drop. 2. a reset zone where you decide what to do in the onNodeDrop event