Javascript 网格拖动&；删除：抑制某些记录（组）

好了

是否有可能控制哪些记录可以被拖动，哪些地方可以被删除（在拖动过程中，从一开始还是在中间）抑制拖动操作？

我需要的详细信息如下：

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

1.）我开始从组“女性”（Lisa）中拖动一条记录。一旦拖动到组“女性”（组“男性”上方）之外，它就会显示一个错误状态，如在网格边界之外拖动时：

2.）从“男性”组开始拖动项目应该是完全不可能的（只是不显示d&d面板），或者从一开始就显示如上所述的错误状态，并且永远不要更改为“正确”状态

谢谢

---

mike

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

“允许放置指示”可以由在TreeViewWdragDrop插件的onViewRender中创建的基础放置区处理。这没有文档记录，但可以在插件的第页中看到。

需要做的一切（至少在本例中）都是重写/扩展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;
    }
});

Ext.override（Ext.view.DropZone{
onNodeOver：函数（nodeData、source、e、data）{
if（data&&data.records&&data.records[0]）{
//应更好地指定检查，例如a
//名为“Malena”的女性会被认为是男性！
if（nodeData.innerHTML.indexOf（data.records[0].get（'sex'））<0）{
退回此文件。不允许删除；
}
}
返回此.callOverrided（[nodeData，source，e，data]）；
},
onContainerOver：函数（源、e、数据）{
退回此文件。不允许删除；
}
});

工作示例：

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

覆盖更改（根据定义…）我的应用程序中所有DropZone的行为。如何仅覆盖/扩展一个网格的特定DropZone？

我尝试了以下方法：

• 在呈现gridview后向dropZone添加拦截器：
  
  起初，这似乎有效，因为它显示了正确的允许下降指示，但即使指示灯显示不允许下降，它也会下降记录（它总是显示“绿线”…
  
  
• 定义一个新的dnd插件，该插件扩展treeviewdragdrop插件，并在创建dropZone后覆盖其onNodeOver方法：
  
  这种方法与拦截方法相反。它也显示了正确的指示，但它从不显示“绿线”，也不允许在任何地方下降。。。
  
  

我覆盖的类（Ext.view.DropZone）在中标记为private，并注意不应直接使用它

我真的很感激对这两个问题的一些评论，也许还有更好的解决方案

谢谢，迈克

---

编辑：

我调整了版本，在版本中我定义了一个新的dnd插件，它扩展了原来的gridviewdragdrop插件。“魔力”是扩展gridviewdropzone并扩展onNodeOver方法，而不仅仅是覆盖它。

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

我的扩展gridviewdragdrop插件现在做的唯一一件事是在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
        });
    }
});

//扩展treeview dropzone
Ext.define（'ExtendedGridViewDropZone'{
扩展：“Ext.grid.ViewDropZone”，
onNodeOver：函数（nodeData、source、e、data）{
if（data&&data.records&&data.records[0]）{
//应指定检查，例如，名为“Malena”的女性将被识别为男性！
if（nodeData.innerHTML.indexOf（data.records[0].get（'sex'））<0）{
退回此文件。不允许删除；
}
}
返回this.callParent（参数）；
},
onContainerOver：函数（源、e、数据）{
退回此文件。不允许删除；
}
});
Ext.define（'ExtendedGridDnD'{
扩展：“Ext.grid.plugin.DragDrop”，
别名：“plugin.extendeddnd”，
onViewRender:函数（视图）{
this.callParent（参数）；
//创建ExtendedGridViewDropZone的实例，而不是Ext.grid.ViewDropZone
this.dropZone=Ext.create（'ExtendedGridViewDropZone'{
视图：视图，
ddGroup:this.dropGroup | | this.ddGroup
});
}
});

工作示例：

---

尽管如此，我仍然很欣赏不同的方法，因为它仍然让我觉得可以更容易地完成…

对于Ext 5和Ext 6，您可以这样做

在树面板定义中：

 listeners: {        
        viewready           : 'onViewReady'
    }

在ViewController上：

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;
    }
},

参考文献