ExtJS的4解释拖放如何在两个网格或treepanels

Question

实现使用ExtJS的4.07

假设我有两个treePanels，或者更可能的是，两个网格。我希望能够在两者之间来回拖动项目。做这件事需要什么基本的机制？我愿意看到一些示例代码展示它是如何完成的。我一直无法找到有关如何做到这一点的文档，适用于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. 
      } 
     }   
    }, 

    … 

}); 

你可以看到这个完全工作in this example，及其相应的code。据我所知，在4.07和4.1之间，这方面没有任何改变;

Answer 2

的drag and drop

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

总的想法是，你必须创建1.拖动元素在收到鼠标按下事件。如果是，则返回拖动数据对象。数据对象可以包含任意的应用程序数据，但是它也应该在ddel属性中包含一个DOM元素来提供一个代理来进行拖动。 2.拖放区域，您决定在'onNodeDrop'事件上做什么