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

时间:2012-08-07 21:51:30

标签: extjs datagrid drag-and-drop extjs4 treepanel

使用Extjs 4.07

假设我有两个treePanel,或者更可能是两个网格。我希望能够在两者之间来回拖动物品。这样做需要什么基本机制?我会看到一些示例代码演示它是如何完成的。我无法找到适用于v4而不是v3的如何执行此操作的良好文档。我知道有一种简单的方法,我发现很多文件解释了这种方式的膨胀方式。我不明白dd是如何实现的。因此,高级概述也很有用。

2 个答案:

答案 0 :(得分:4)

网格有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之间的这方面没有任何变化;

答案 1 :(得分:1)

drag and drop

的概述

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

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