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


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. // This relates to Extjs 3.3.1
  2. /*
  3. Suppose you have a treenode that receives drops from more than one source, like a
  4. grid and the tree itself. Well if you add a "dropconfig" to your tree and add a
  5. "onNodeDrop" event, then the default drop of the tree doesn't work anymore. Therefor
  6. we have to help the tree a bit and we will fire it ourselves. But the problem is
  7. the index value (or maybe not). Below you find how to calculate the index and hand
  8. it over to the event (the following sample is an excerpt)
  9. */
  10.  
  11. var MyTree = new Ext.tree.TreePanel({
  12. minSize : 150,
  13. autoScroll : true,
  14. tbar : tbar,
  15. bbar : bbar,
  16. layout : 'fit',
  17. enableDD : true,
  18. containerScroll: true,
  19. ddGroup : 'StructureTree',
  20. ddText : "{0} Zeile(n) ausgewählt",
  21. dropConfig: {
  22. ddGroup : 'StructureTree',
  23. allowContainerDrop : false,
  24. onNodeDrop : function (nodeData, ddSource, e, data ) {
  25. // there are 2 groups entering this event: StructureTree and EventsGridPanel
  26. // These are ddGroups from this tree and a grid (not in this sample)
  27. // When the grid row drop is detected it will execute another function outside
  28. // this source, in the other case it is firing (on own tree events) a 'beforemove'
  29. // event on a treenode. But please watch the calculation of the index value
  30.  
  31.  
  32. if (ddSource.ddGroup === 'EventsGridPanel') {
  33. var manager = App.Quick.Structure();
  34. manager.ProcessDropping(ddSource, data, nodeData);
  35. } else {
  36. var tree = data.node.ownerTree;
  37. var node = data.node;
  38. var oldParent = data.node.parentNode;
  39. var newParent = nodeData.node.parentNode;
  40. var dropChild = tree.dropZone.dragOverData.target; // this is what is beneath
  41. var dropParent = dropChild.parentNode; // and this the parent of what is beneath
  42. var index = dropParent.indexOf(dropChild); // and this is the index, place of the child in the parent node
  43. node.fireEvent('beforemove', tree, node, oldParent, newParent, index);
  44. }
  45. }
  46. },
  47. animate : true,
  48. loader : treeLoader,
  49. root : rootNode,
  50. rootVisible : true,
  51. bodyCfg : {
  52. cls : 'y-panel-body y-plan-me' // this style is in the styles.css from this project
  53. },
  54. listeners : {
  55. scope : this,
  56. 'click' : function ( node ) {
  57. this.nodeClicked(node);
  58. },
  59. 'contextmenu' : function (node, e) {
  60. this.onContextMenu(node, e);
  61. },
  62. 'beforeappend' : function (tree, parent, node ) {
  63. node.addListener('beforemove', function(tree, node, oldParent, newParent, index) {
  64. this.onBeforeMove(tree, node, oldParent, newParent, index);
  65. }, this);
  66. }
  67. }
  68. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.