Using Extjs 4.07
假设我有两个树面板,或者更有可能是两个网格。我希望能够在两者之间来回拖动项目。这样做需要哪些基本机制?我想看到一些演示它是如何完成的示例代码。我无法找到有关如何执行此操作的适用于 v4 而不是 v3 的良好文档。我知道有一个简单的方法,我发现很多文件解释了臃肿的方法。我不明白 dd 通常是如何实现的。因此,高级概述也很有用。
有一个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 之间,这方面没有任何变化;
拖放的一般概述
还要检查自定义拖放到网格 http://docs.sencha.com/ext-js/4-1/#!/example/dd/dragdropzones.html
一般的想法是,你必须创建 1.可拖动元素 在收到鼠标关闭事件时。如果是这样,则返回拖动数据对象。数据对象可以包含任意应用程序数据,但它还应在 ddel 属性中包含 DOM 元素,以提供要拖动的代理。2. 拖放区,您可以在其中决定在"onNodeDrop"事件上做什么