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. перемещаемый элемент О получении MouseDown события. Если это так, верните объект данных перетаскивания. Объект данных может содержать произвольные данные приложения, но он также должен содержать элемент DOM в свойстве ddel для предоставления прокси-сервера для перетаскивания. 2. зона выпадения, где вы решите, что делать на мероприятии onNodeDrop