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'事件上做什麼