Return to Snippet

Revision: 45001
at April 22, 2011 04:14 by jvandemerwe

Initial Code
// This relates to Extjs 3.3.1
Suppose you have a treenode that receives drops from more than one source, like a
grid and the tree itself. Well if you add a "dropconfig" to your tree and add a
"onNodeDrop" event, then the default drop of the tree doesn't work anymore. Therefor
we have to help the tree a bit and we will fire it ourselves. But the problem is
the index value (or maybe not). Below you find how to calculate the index and hand
it over to the event (the following sample is an excerpt)

var MyTree = new Ext.tree.TreePanel({
            minSize     : 150,
            autoScroll  : true,
            tbar        : tbar,
            bbar        : bbar,
            layout      : 'fit',
            enableDD    : true,
            containerScroll: true,
            ddGroup     : 'StructureTree',
            ddText      : "{0} Zeile(n) ausgewählt",
            dropConfig: {
                ddGroup            : 'StructureTree',
                allowContainerDrop : false,
                onNodeDrop         : function (nodeData, ddSource, e, data ) {
                	// there are 2 groups entering this event: StructureTree and EventsGridPanel
                	// These are ddGroups from this tree and a grid (not in this sample)
                	// When the grid row drop is detected it will execute another function outside
                	// this source, in the other case it is firing (on own tree events) a 'beforemove'
                	// event on a treenode. But please watch the calculation of the index value
                    if (ddSource.ddGroup === 'EventsGridPanel') {
                        var manager = App.Quick.Structure();
                        manager.ProcessDropping(ddSource, data, nodeData);
                    } else {
                        var tree = data.node.ownerTree;
                        var node = data.node;
                        var oldParent =  data.node.parentNode;
                        var newParent = nodeData.node.parentNode;
                        var dropChild =; // this is what is beneath
                        var dropParent = dropChild.parentNode; // and this the parent of what is beneath
                        var index = dropParent.indexOf(dropChild); // and this is the index, place of the child in the parent node
                        node.fireEvent('beforemove', tree, node, oldParent, newParent, index);
            animate     : true,
            loader      : treeLoader,
            root        : rootNode,
            rootVisible : true,
            bodyCfg     : {
                cls : 'y-panel-body y-plan-me' // this style is in the styles.css from this project
            listeners   : {
                scope   : this,
                'click' : function ( node ) {
                'contextmenu' : function (node, e) {
                    this.onContextMenu(node, e);   
                'beforeappend' : function (tree, parent, node ) {
                    node.addListener('beforemove',  function(tree, node, oldParent, newParent, index) {
                        this.onBeforeMove(tree, node, oldParent, newParent, index);
                    }, this);

Initial URL

Initial Description

Initial Title
Extjs - how to get the index of a treenode (on an onNodeDrop)

Initial Tags

Initial Language