How to fires event after Drag & Drop on TreePanel

问题

How can I use Ext.tree.ViewDDPlugin's events?

I have a TreePanel that uses DDPplugin, but I'd like to know how to listen to the drop event.

This is what my code looks like:

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,

I would like to fire drop events for example, but my code doesn't work

Thanks :)

回答1:

Take a look at the doc :

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

Fires before a new child is inserted in a node in this tree, return false to cancel the insert. ...

回答2:

I've got same question and found this page.

There is note in documentation, in event section: "This event is fired through the TreeView. Add listeners to the TreeView object"

I've tryed to found method in tree.Panel class to get view, unsuccessfully. So, all you need to do, just put listners block in configuration to viewConfig section (not in plugin section):

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

回答3:

As an addition to Anton's correct answer above: The code below shows how to "connect from the outside" to drop events, for example from a Controller etc:

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

回答4:

You can also catch the drop event by overriding dropConfig inside a TreeGrid or TreePanel. Here is an example how I did.

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.");
            }

        }
    }
});

You can also do the same for Ext.ux.tree.TreeGrid. Hope It will help.

来源：https://stackoverflow.com/questions/6305822/how-to-fires-event-after-drag-drop-on-treepanel

标签

extjs

panel