extjs - Cómo se dispara el evento después de arrastrar y soltar en TreePanel

Question

¿Cómo puedo usar los eventos de Ext.tree.ViewDDPlugin?

Tengo un TreePanel que usa DDPplugin, pero me gustaría saber cómo escuchar el evento drop.

Así es como se ve mi código:

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,

Me gustaría lanzar eventos drop por ejemplo, pero mi código no funciona

Gracias :)

Answer 1

Eche un vistazo al documento:

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

Incendios antes de que un nuevo niño se inserte en un nodo en este árbol, devuelva falso para cancelar la inserción. ...

Answer 2

Tengo la misma pregunta y encontré esta página.

Hay una nota en la documentación, en la sección de eventos: "Este evento se activa a través de TreeView. Agregar oyentes al objeto TreeView"

He intentado encontrar el método en tree.Panel class para obtener view, sin éxito. Entonces, todo lo que tiene que hacer, simplemente ponga listners block en la configuración para ver la secciónConfig (no en la sección de complementos):

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

Answer 3

También puede ver el evento drop reemplazando dropConfig dentro de TreeGrid o TreePanel. Aquí hay un ejemplo de cómo lo hice.

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

        }
    }
});​

También puede hacer lo mismo para Ext.ux.tree.TreeGrid. Espero que ayude.

Answer 4

Como una adición a la respuesta correcta de Anton anterior: El siguiente código muestra cómo "conectarse desde el exterior" para soltar eventos, por ejemplo desde un Controlador, etc.

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