Extjs 4 Объясните, как перетаскивать объекты в две сетки или древовидные панели.

Question

Использование Extjs 4.07

Предположим, у меня есть две панели дерева или, что более вероятно, две сетки. Я хочу иметь возможность перетаскивать предметы назад и вперед между ними. Каковы основные механизмы, необходимые для этого? Я хотел бы увидеть пример кода, демонстрирующий, как это делается. Я не смог найти хорошую документацию о том, как это сделать, которая применима к v4, а не к v3. Я знаю, что есть простой способ, и я нашел много документов, объясняющих раздутые способы сделать это. Я не понимаю, как дд реализован в целом. Таким образом, обзор высокого уровня был бы также полезен.

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/

Общая идея заключается в том, что вы должны создать 1. перетаскиваемый элемент при получении события mousedown. Вернуть объект данных перетаскивания, если так. Объект данных может содержать произвольные данные приложения, но он также должен содержать элемент DOM в свойстве ddel, чтобы обеспечить прокси для перетаскивания. 2. опустить зону, где вы решаете, что делать с событием onNodeDrop.