2

嘿那里，

是否可以控制可以拖动哪些记录以及可以放置它们的位置（在悬停期间从一开始或中间抑制拖动操作）？

我需要的详细信息如下：

我有一个包含一些组的网格（比如说男性和女性），并且只想激活组“女性”中的 d&d，这意味着两件事：

1.）我开始从“女性”组（丽莎）中拖出一张唱片。一旦拖动在组“女性”之外（在组“男性”之上......），它应该显示错误状态，就像在网格边界之外拖动时一样：
错误状态示例

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

谢谢，

麦克风

4

2 回答 2

1

在对 ext 的来源进行了一些挖掘之后，我刚刚找到了一个可行但并不完美的解决方案：

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

需要做的一切（至少对于本示例）是覆盖/扩展 DropZone 的 onNodeOver- 和 onContainerOver- 方法，以返回适当的 css 类用于放置不允许或放置允许指示。

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/

      起初这似乎有效，因为它显示了正确的 drop-allowed-indication 但即使指示器也会丢弃记录表明这是不允许的（它总是显示“绿线”......）

    • 定义一个新的 dnd-plugin 扩展 treeviewdragdrop-plugin 并在它创建后覆盖 dropZone 的 onNodeOver 方法：http: //jsfiddle.net/suamikim/5v67W/

      这种与拦截方法相反。它还显示了正确的指示，但它从不显示“绿线”，并且不允许在任何地方下降......

  2. 我要覆盖的类（Ext.view.DropZone）在文档中被标记为私有，并注明不应直接使用它...

我真的很感激对这两个问题的一些评论，甚至可能是一些更好的解决方案！

谢谢，米克

编辑：

我调整了我定义了一个新的 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/

尽管如此，我仍然会欣赏不同的方法，因为它仍然感觉可以更轻松地完成......

于 2012-08-30T12:55:30.917 回答
1

你可以对分机 5 和 6 这样做

在您的树形面板定义中：

 listeners: {        
        viewready           : 'onViewReady'
    }

在您的视图控制器上：

onViewReady       : function (tree) {
    var view = tree.getView(),
        dd = view.findPlugin('treeviewdragdrop'),
        rec;

    dd.dropZone.onNodeOver = function (data, e) {
        rec = view.getRecord(e.getTarget(view.itemSelector));
        return rec.get('customProperty') === 'someValue' ? this.dropAllowed : this.dropNotAllowed;
    }
},

参考https://www.sencha.com/forum/showthread.php?282685 https://www.sencha.com/blog/declarative-listeners-in-ext-js-5/

于 2016-10-03T19:40:14.563 回答