javascript - 网格拖放 : Suppress for some records (groups)

Question

你好，

是否可以控制可以拖动哪些记录以及可以将它们放到哪里(在悬停期间从头开始或中间抑制拖动操作)？

我需要的详细信息如下:

我有一个包含一些组(比如男性和女性)的网格，只想激活组“女性”内的 d&d，这意味着两件事:

1.) 我开始从“女性”组 (Lisa) 中拖出一条记录。一旦拖动在“女性”组之外(在“男性”组上方...)，它应该显示错误状态，就像拖动到网格边界之外时一样:

2.) 要么根本不可能从“男性”组中拖动一个项目(只是不显示 d&d 面板)，要么从一开始就显示上面提到的错误状态，并且永远不要更改为“正确”状态。

谢谢，

迈克

Answer 1

在深入研究 ext 的源代码后，我发现了一个可行但并不完美的解决方案:

“drop-allowed-indication”可以由在 treeviewdragdrop-plugin 的 onViewRender 中创建的底层 DropZone 处理。这没有记录，但可以在 the source-code 中看到插件的。

需要做的所有事情(至少对于这个例子)是覆盖/扩展 DropZone 的 onNodeOver- 和 onContainerOver- 方法，以返回适当的 css 类，用于 drop-not-allowed- 或 drop-allowed -适应症。

Ext.override(Ext.view.DropZone, {
    onNodeOver: function(nodeData, source, e, data) {
        if (data && data.records && data.records[0]) {
            // The check should be better specified, e.g. a
            // female with the name 'Malena' would be recognized as male!
            if (nodeData.innerHTML.indexOf(data.records[0].get('sex')) < 0) {
                return this.dropNotAllowed;
            }
        }
        return this.callOverridden([nodeData, source, e, data]);
    },
    onContainerOver: function(source, e, data) {
        return this.dropNotAllowed;
    }
});

工作示例:http://jsfiddle.net/suamikim/auXdQ/

这个解决方案有几点我不喜欢:

1. 覆盖更改(根据定义...)我的应用程序中所有 DropZone 的行为。我怎样才能只覆盖/扩展一个网格的特定 DropZone？
   
   我尝试了以下方法:
   
   
   • 在呈现 GridView 后向 dropZone 添加拦截器:http://jsfiddle.net/suamikim/uv8tX/
     
     起初这似乎有效，因为它显示了正确的允许删除指示，但即使指示器显示不允许删除它也会删除记录(它始终显示“绿线”...)
     
     
   • 定义一个新的 dnd-plugin，它扩展了 treeviewdragdrop-plugin，并在创建后覆盖 dropZone 的 onNodeOver 方法:http://jsfiddle.net/suamikim/5v67W/
     
     这种与拦截方法相反。它还显示了正确的指示，但它从不显示“绿线”并且不允许在任何地方掉落......
     
     
2. 我覆盖的类 (Ext.view.DropZone) 在 the documentation 中标记为私有(private)请注意不应直接使用它...

我非常感谢对这 2 个问题的一些评论，甚至可能是一些更好的解决方案!

谢谢，米克

---

编辑:

我调整了我定义了一个新的 dnd-plugin 的版本，它扩展了原来的 gridviewdragdrop-plugin。 “魔法”还包括扩展 gridviewdropzone 和扩展 onNodeOver 方法，而不是仅仅覆盖它。

这需要完成，因为现在由 callParent 调用的原始 onNodeOver 方法处理“绿线”并最终允许删除。

我的扩展 gridviewdragdrop-plugin 现在唯一做的就是在 onViewRender 方法中创建一个新的 dropzone 类的实例，而不是标准的 gridviewdropzone。
到目前为止，这似乎是一种合理的方式:

// Extend the treeview dropzone
Ext.define('ExtendedGridViewDropZone', {
    extend: 'Ext.grid.ViewDropZone',

    onNodeOver: function(nodeData, source, e, data) {
        if (data && data.records && data.records[0]) {
            // The check should be specified, e.g. a female with the name 'Malena' would be recognized as male!
            if (nodeData.innerHTML.indexOf(data.records[0].get('sex')) < 0) {
                    return this.dropNotAllowed;
            }
        }

        return this.callParent(arguments);
    },
    onContainerOver: function(source, e, data) {
        return this.dropNotAllowed;
    }
});

Ext.define('ExtendedGridDnD', {
    extend: 'Ext.grid.plugin.DragDrop',
    alias: 'plugin.extendeddnd',

    onViewRender: function(view) {
        this.callParent(arguments);

        // Create a instance of ExtendedGridViewDropZone instead of Ext.grid.ViewDropZone
        this.dropZone = Ext.create('ExtendedGridViewDropZone', {
            view: view,
            ddGroup: this.dropGroup || this.ddGroup
        });
    }
});

工作示例:http://jsfiddle.net/5v67W/1/

尽管如此，我仍然喜欢不同的方法，因为它仍然感觉可以更容易地完成...