extjs - Extjs 4 解释拖放如何实现跨两个网格或树形面板

Question

使用 Extjs 4.07

假设我有两个 treePanel，或者更有可能是两个网格。我希望能够在两者之间来回拖动项目。做到这一点需要哪些基本机制？我想看看一些示例代码来演示它是如何完成的。我无法找到适用于 v4 而不是 v3 的有关如何执行此操作的良好文档。我知道有一种简单的方法，并且我发现许多文档解释了这样做的臃肿方法。我不明白 dd 一般是如何实现的。因此，高级概述也很有用。

Answer 1

网格具有DragDrop插件，而树具有TreeViewDragDrop插件。

如果你想从你的网格或树中拖拽，或者拖拽到你的网格或树中，你包括插件。在网格的情况下，它看起来像这样：

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

    ...

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

    ...

});

包含插件后，您会从组件中获取拖放事件，您可以收听这些事件。完成上面的例子。

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.
            }
        }        
    },

    …

});

您可以在本示例及其相应的代码中看到这完全有效。

据我所知，在 4.07 和 4.1 之间这方面没有任何变化；

Answer 2

拖放的一般概述

还要检查自定义拖放到网格http://docs.sencha.com/ext-js/4-1/#!/example/dd/dragdropzones.html

一般的想法是，您必须创建 1. 可拖动元素 在收到 mousedown 事件时。如果是，则返回拖动数据对象。数据对象可以包含任意应用程序数据，但它还应该在 ddel 属性中包含一个 DOM 元素，以提供拖动的代理。2. drop zone ，你决定在 'onNodeDrop' 事件上做什么