如何在 TreePanel 上拖放后触发事件答案

【问题标题】：How to fires event after Drag & Drop on TreePanel如何在 TreePanel 上拖放后触发事件
【发布时间】：2011-09-12 10:41:40
【问题描述】：

如何使用 Ext.tree.ViewDDPlugin 的事件？

我有一个使用 DDP 插件的 TreePanel，但我想知道如何监听 drop 事件。

这是我的代码的样子：

var monPretree = Ext.create('Ext.tree.Panel',{
            id : 'treepanel',
            title : 'TITRE',
            //width : 800,
            //height : 600,
            width : 500,
            enableDD: true,
            useArrows : true,
            viewConfig : {
                plugins : {
                    ptype: 'treeviewdragdrop',     
                      appendOnly: true,     
                      listeners: {       
                        drop: function (node, data, overModel, dropPosition) {         
                              alert('CHANGE');       
                        },       
                        notifyDrop: function (dragSource, event, data) {         
                              var nodeId = data.node.id;         
                              alert(nodeId);       
                        },       
                        notifyOver: function (dragSource, event, data) {         
                            alert('over');
                        }     
                    }   
                }

            },
            singleExpand : false,
            store : monPrestore,
            rootVisible : false,

例如，我想触发 drop 事件，但我的代码不起作用

谢谢:)

【问题讨论】：

标签： extjs panel

【解决方案1】：

作为对上述 Anton 正确答案的补充：下面的代码显示了如何“从外部连接”以删除事件，例如来自控制器等：

    // Drag & Drop on the TreePanel
    var ganttTreeView = ganttTreePanel.getView();
    ganttTreeView.on({
        'drop': me.onDrop,
        'scope': this
    });;

【讨论】：

【解决方案2】：

您还可以通过覆盖 TreeGrid 或 TreePanel 中的 dropConfig 来捕获 drop 事件。这是我如何做的一个例子。

var myTree = new Tree.TreePanel({
    id: 'treepanel',
    title: 'My Title',
    enableDD: true,
    ddGroup: 'GridDD',
    dataUrl: 'yourMethodURLForJSONData',
    dropConfig: {
        dropAllowed: true,
        ddGroup: "GridDD",
        notifyDrop: function(source, e, data) {
            alert("A node/leaf is dropped");

            //If you want few more details
            if (data.grid) {
                var node = data.selections[0].data;
                alert("This is a node dropped from a Grid.");
            } else {
                var node = data["node"];
                alert("This is a node dropped from a Tree.");
            }

        }
    }
});

您也可以对 Ext.ux.tree.TreeGrid 执行相同的操作。希望它会有所帮助。

【讨论】：

【解决方案3】：

我有同样的问题并找到了这个页面。

文档中有注释，在事件部分： "此事件通过 TreeView 触发。将侦听器添加到 TreeView 对象"

我试图在 tree.Panel 类中找到方法来获取视图，但没有成功。所以，你需要做的，只是将listners块放在配置中的viewConfig部分（而不是插件部分）：

viewConfig : {
                plugins : {
                    ptype: 'treeviewdragdrop',     
                    ...
                },
                listeners: {       
                        drop: function (node, data, overModel, dropPosition) {         
                              alert('CHANGE');       
                        },         
                    }   
                }

            },

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.plugin.TreeViewDragDrop-event-drop

【讨论】：

那个参数正确吗？ node 不是树节点。无法获取移动节点的父节点。

【解决方案4】：

看看文档：

beforeinsert( Tree tree, Node parent, Node node, Node refNode, Object options )

在将新子节点插入此树中的节点之前触发，返回 false 以取消插入。 ...

【讨论】：

没有被解雇。这是树侦听器还是 ViewConfig 侦听器？
@MagnoC 检查文档：此事件是在树存储上定义的。
我认为商店不应该对界面事件负责。
@MagnoC ：我不知道我的回复是否仍然相关，因为问题和回复日期为 2010 年 6 月