/ Published in: JavaScript
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
// 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 = tree.dropZone.dragOverData.target; // 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 ) { this.nodeClicked(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); } } });