pkgs/pkg-tree-debug.js

   1 /*!
   2  * Ext JS Library 3.1.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**\r
   8  * @class Ext.tree.TreePanel\r
   9  * @extends Ext.Panel\r
  10  * <p>The TreePanel provides tree-structured UI representation of tree-structured data.</p>\r
  11  * <p>{@link Ext.tree.TreeNode TreeNode}s added to the TreePanel may each contain metadata\r
  12  * used by your application in their {@link Ext.tree.TreeNode#attributes attributes} property.</p>\r
  13  * <p><b>A TreePanel must have a {@link #root} node before it is rendered.</b> This may either be\r
  14  * specified using the {@link #root} config option, or using the {@link #setRootNode} method.\r
  15  * <p>An example of tree rendered to an existing div:</p><pre><code>\r
  16 var tree = new Ext.tree.TreePanel({\r
  17     renderTo: 'tree-div',\r
  18     useArrows: true,\r
  19     autoScroll: true,\r
  20     animate: true,\r
  21     enableDD: true,\r
  22     containerScroll: true,\r
  23     border: false,\r
  24     // auto create TreeLoader\r
  25     dataUrl: 'get-nodes.php',\r
  26 \r
  27     root: {\r
  28         nodeType: 'async',\r
  29         text: 'Ext JS',\r
  30         draggable: false,\r
  31         id: 'source'\r
  32     }\r
  33 });\r
  34 \r
  35 tree.getRootNode().expand();\r
  36  * </code></pre>\r
  37  * <p>The example above would work with a data packet similar to this:</p><pre><code>\r
  38 [{\r
  39     "text": "adapter",\r
  40     "id": "source\/adapter",\r
  41     "cls": "folder"\r
  42 }, {\r
  43     "text": "dd",\r
  44     "id": "source\/dd",\r
  45     "cls": "folder"\r
  46 }, {\r
  47     "text": "debug.js",\r
  48     "id": "source\/debug.js",\r
  49     "leaf": true,\r
  50     "cls": "file"\r
  51 }]\r
  52  * </code></pre>\r
  53  * <p>An example of tree within a Viewport:</p><pre><code>\r
  54 new Ext.Viewport({\r
  55     layout: 'border',\r
  56     items: [{\r
  57         region: 'west',\r
  58         collapsible: true,\r
  59         title: 'Navigation',\r
  60         xtype: 'treepanel',\r
  61         width: 200,\r
  62         autoScroll: true,\r
  63         split: true,\r
  64         loader: new Ext.tree.TreeLoader(),\r
  65         root: new Ext.tree.AsyncTreeNode({\r
  66             expanded: true,\r
  67             children: [{\r
  68                 text: 'Menu Option 1',\r
  69                 leaf: true\r
  70             }, {\r
  71                 text: 'Menu Option 2',\r
  72                 leaf: true\r
  73             }, {\r
  74                 text: 'Menu Option 3',\r
  75                 leaf: true\r
  76             }]\r
  77         }),\r
  78         rootVisible: false,\r
  79         listeners: {\r
  80             click: function(n) {\r
  81                 Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');\r
  82             }\r
  83         }\r
  84     }, {\r
  85         region: 'center',\r
  86         xtype: 'tabpanel',\r
  87         // remaining code not shown ...\r
  88     }]\r
  89 });\r
  90 </code></pre>\r
  91  *\r
  92  * @cfg {Ext.tree.TreeNode} root The root node for the tree.\r
  93  * @cfg {Boolean} rootVisible <tt>false</tt> to hide the root node (defaults to <tt>true</tt>)\r
  94  * @cfg {Boolean} lines <tt>false</tt> to disable tree lines (defaults to <tt>true</tt>)\r
  95  * @cfg {Boolean} enableDD <tt>true</tt> to enable drag and drop\r
  96  * @cfg {Boolean} enableDrag <tt>true</tt> to enable just drag\r
  97  * @cfg {Boolean} enableDrop <tt>true</tt> to enable just drop\r
  98  * @cfg {Object} dragConfig Custom config to pass to the {@link Ext.tree.TreeDragZone} instance\r
  99  * @cfg {Object} dropConfig Custom config to pass to the {@link Ext.tree.TreeDropZone} instance\r
 100  * @cfg {String} ddGroup The DD group this TreePanel belongs to\r
 101  * @cfg {Boolean} ddAppendOnly <tt>true</tt> if the tree should only allow append drops (use for trees which are sorted)\r
 102  * @cfg {Boolean} ddScroll <tt>true</tt> to enable body scrolling\r
 103  * @cfg {Boolean} containerScroll <tt>true</tt> to register this container with ScrollManager\r
 104  * @cfg {Boolean} hlDrop <tt>false</tt> to disable node highlight on drop (defaults to the value of {@link Ext#enableFx})\r
 105  * @cfg {String} hlColor The color of the node highlight (defaults to <tt>'C3DAF9'</tt>)\r
 106  * @cfg {Boolean} animate <tt>true</tt> to enable animated expand/collapse (defaults to the value of {@link Ext#enableFx})\r
 107  * @cfg {Boolean} singleExpand <tt>true</tt> if only 1 node per branch may be expanded\r
 108  * @cfg {Object} selModel A tree selection model to use with this TreePanel (defaults to an {@link Ext.tree.DefaultSelectionModel})\r
 109  * @cfg {Boolean} trackMouseOver <tt>false</tt> to disable mouse over highlighting\r
 110  * @cfg {Ext.tree.TreeLoader} loader A {@link Ext.tree.TreeLoader} for use with this TreePanel\r
 111  * @cfg {String} pathSeparator The token used to separate sub-paths in path strings (defaults to <tt>'/'</tt>)\r
 112  * @cfg {Boolean} useArrows <tt>true</tt> to use Vista-style arrows in the tree (defaults to <tt>false</tt>)\r
 113  * @cfg {String} requestMethod The HTTP request method for loading data (defaults to the value of {@link Ext.Ajax#method}).\r
 114  *\r
 115  * @constructor\r
 116  * @param {Object} config\r
 117  * @xtype treepanel\r
 118  */\r
 119 Ext.tree.TreePanel = Ext.extend(Ext.Panel, {\r
 120     rootVisible : true,\r
 121     animate : Ext.enableFx,\r
 122     lines : true,\r
 123     enableDD : false,\r
 124     hlDrop : Ext.enableFx,\r
 125     pathSeparator : '/',\r
 126 \r
 127     /**\r
 128      * @cfg {Array} bubbleEvents\r
 129      * <p>An array of events that, when fired, should be bubbled to any parent container.\r
 130      * See {@link Ext.util.Observable#enableBubble}.\r
 131      * Defaults to <tt>[]</tt>.\r
 132      */\r
 133     bubbleEvents : [],\r
 134 \r
 135     initComponent : function(){\r
 136         Ext.tree.TreePanel.superclass.initComponent.call(this);\r
 137 \r
 138         if(!this.eventModel){\r
 139             this.eventModel = new Ext.tree.TreeEventModel(this);\r
 140         }\r
 141 \r
 142         // initialize the loader\r
 143         var l = this.loader;\r
 144         if(!l){\r
 145             l = new Ext.tree.TreeLoader({\r
 146                 dataUrl: this.dataUrl,\r
 147                 requestMethod: this.requestMethod\r
 148             });\r
 149         }else if(Ext.isObject(l) && !l.load){\r
 150             l = new Ext.tree.TreeLoader(l);\r
 151         }\r
 152         this.loader = l;\r
 153 \r
 154         this.nodeHash = {};\r
 155 \r
 156         /**\r
 157         * The root node of this tree.\r
 158         * @type Ext.tree.TreeNode\r
 159         * @property root\r
 160         */\r
 161         if(this.root){\r
 162             var r = this.root;\r
 163             delete this.root;\r
 164             this.setRootNode(r);\r
 165         }\r
 166 \r
 167 \r
 168         this.addEvents(\r
 169 \r
 170             /**\r
 171             * @event append\r
 172             * Fires when a new child node is appended to a node in this tree.\r
 173             * @param {Tree} tree The owner tree\r
 174             * @param {Node} parent The parent node\r
 175             * @param {Node} node The newly appended node\r
 176             * @param {Number} index The index of the newly appended node\r
 177             */\r
 178            'append',\r
 179            /**\r
 180             * @event remove\r
 181             * Fires when a child node is removed from a node in this tree.\r
 182             * @param {Tree} tree The owner tree\r
 183             * @param {Node} parent The parent node\r
 184             * @param {Node} node The child node removed\r
 185             */\r
 186            'remove',\r
 187            /**\r
 188             * @event movenode\r
 189             * Fires when a node is moved to a new location in the tree\r
 190             * @param {Tree} tree The owner tree\r
 191             * @param {Node} node The node moved\r
 192             * @param {Node} oldParent The old parent of this node\r
 193             * @param {Node} newParent The new parent of this node\r
 194             * @param {Number} index The index it was moved to\r
 195             */\r
 196            'movenode',\r
 197            /**\r
 198             * @event insert\r
 199             * Fires when a new child node is inserted in a node in this tree.\r
 200             * @param {Tree} tree The owner tree\r
 201             * @param {Node} parent The parent node\r
 202             * @param {Node} node The child node inserted\r
 203             * @param {Node} refNode The child node the node was inserted before\r
 204             */\r
 205            'insert',\r
 206            /**\r
 207             * @event beforeappend\r
 208             * Fires before a new child is appended to a node in this tree, return false to cancel the append.\r
 209             * @param {Tree} tree The owner tree\r
 210             * @param {Node} parent The parent node\r
 211             * @param {Node} node The child node to be appended\r
 212             */\r
 213            'beforeappend',\r
 214            /**\r
 215             * @event beforeremove\r
 216             * Fires before a child is removed from a node in this tree, return false to cancel the remove.\r
 217             * @param {Tree} tree The owner tree\r
 218             * @param {Node} parent The parent node\r
 219             * @param {Node} node The child node to be removed\r
 220             */\r
 221            'beforeremove',\r
 222            /**\r
 223             * @event beforemovenode\r
 224             * Fires before a node is moved to a new location in the tree. Return false to cancel the move.\r
 225             * @param {Tree} tree The owner tree\r
 226             * @param {Node} node The node being moved\r
 227             * @param {Node} oldParent The parent of the node\r
 228             * @param {Node} newParent The new parent the node is moving to\r
 229             * @param {Number} index The index it is being moved to\r
 230             */\r
 231            'beforemovenode',\r
 232            /**\r
 233             * @event beforeinsert\r
 234             * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.\r
 235             * @param {Tree} tree The owner tree\r
 236             * @param {Node} parent The parent node\r
 237             * @param {Node} node The child node to be inserted\r
 238             * @param {Node} refNode The child node the node is being inserted before\r
 239             */\r
 240             'beforeinsert',\r
 241 \r
 242             /**\r
 243             * @event beforeload\r
 244             * Fires before a node is loaded, return false to cancel\r
 245             * @param {Node} node The node being loaded\r
 246             */\r
 247             'beforeload',\r
 248             /**\r
 249             * @event load\r
 250             * Fires when a node is loaded\r
 251             * @param {Node} node The node that was loaded\r
 252             */\r
 253             'load',\r
 254             /**\r
 255             * @event textchange\r
 256             * Fires when the text for a node is changed\r
 257             * @param {Node} node The node\r
 258             * @param {String} text The new text\r
 259             * @param {String} oldText The old text\r
 260             */\r
 261             'textchange',\r
 262             /**\r
 263             * @event beforeexpandnode\r
 264             * Fires before a node is expanded, return false to cancel.\r
 265             * @param {Node} node The node\r
 266             * @param {Boolean} deep\r
 267             * @param {Boolean} anim\r
 268             */\r
 269             'beforeexpandnode',\r
 270             /**\r
 271             * @event beforecollapsenode\r
 272             * Fires before a node is collapsed, return false to cancel.\r
 273             * @param {Node} node The node\r
 274             * @param {Boolean} deep\r
 275             * @param {Boolean} anim\r
 276             */\r
 277             'beforecollapsenode',\r
 278             /**\r
 279             * @event expandnode\r
 280             * Fires when a node is expanded\r
 281             * @param {Node} node The node\r
 282             */\r
 283             'expandnode',\r
 284             /**\r
 285             * @event disabledchange\r
 286             * Fires when the disabled status of a node changes\r
 287             * @param {Node} node The node\r
 288             * @param {Boolean} disabled\r
 289             */\r
 290             'disabledchange',\r
 291             /**\r
 292             * @event collapsenode\r
 293             * Fires when a node is collapsed\r
 294             * @param {Node} node The node\r
 295             */\r
 296             'collapsenode',\r
 297             /**\r
 298             * @event beforeclick\r
 299             * Fires before click processing on a node. Return false to cancel the default action.\r
 300             * @param {Node} node The node\r
 301             * @param {Ext.EventObject} e The event object\r
 302             */\r
 303             'beforeclick',\r
 304             /**\r
 305             * @event click\r
 306             * Fires when a node is clicked\r
 307             * @param {Node} node The node\r
 308             * @param {Ext.EventObject} e The event object\r
 309             */\r
 310             'click',\r
 311             /**\r
 312             * @event containerclick\r
 313             * Fires when the tree container is clicked\r
 314             * @param {Tree} this\r
 315             * @param {Ext.EventObject} e The event object\r
 316             */\r
 317             'containerclick',\r
 318             /**\r
 319             * @event checkchange\r
 320             * Fires when a node with a checkbox's checked property changes\r
 321             * @param {Node} this This node\r
 322             * @param {Boolean} checked\r
 323             */\r
 324             'checkchange',\r
 325             /**\r
 326             * @event beforedblclick\r
 327             * Fires before double click processing on a node. Return false to cancel the default action.\r
 328             * @param {Node} node The node\r
 329             * @param {Ext.EventObject} e The event object\r
 330             */\r
 331             'beforedblclick',\r
 332             /**\r
 333             * @event dblclick\r
 334             * Fires when a node is double clicked\r
 335             * @param {Node} node The node\r
 336             * @param {Ext.EventObject} e The event object\r
 337             */\r
 338             'dblclick',\r
 339             /**\r
 340             * @event containerdblclick\r
 341             * Fires when the tree container is double clicked\r
 342             * @param {Tree} this\r
 343             * @param {Ext.EventObject} e The event object\r
 344             */\r
 345             'containerdblclick',\r
 346             /**\r
 347             * @event contextmenu\r
 348             * Fires when a node is right clicked. To display a context menu in response to this\r
 349             * event, first create a Menu object (see {@link Ext.menu.Menu} for details), then add\r
 350             * a handler for this event:<pre><code>\r
 351 new Ext.tree.TreePanel({\r
 352     title: 'My TreePanel',\r
 353     root: new Ext.tree.AsyncTreeNode({\r
 354         text: 'The Root',\r
 355         children: [\r
 356             { text: 'Child node 1', leaf: true },\r
 357             { text: 'Child node 2', leaf: true }\r
 358         ]\r
 359     }),\r
 360     contextMenu: new Ext.menu.Menu({\r
 361         items: [{\r
 362             id: 'delete-node',\r
 363             text: 'Delete Node'\r
 364         }],\r
 365         listeners: {\r
 366             itemclick: function(item) {\r
 367                 switch (item.id) {\r
 368                     case 'delete-node':\r
 369                         var n = item.parentMenu.contextNode;\r
 370                         if (n.parentNode) {\r
 371                             n.remove();\r
 372                         }\r
 373                         break;\r
 374                 }\r
 375             }\r
 376         }\r
 377     }),\r
 378     listeners: {\r
 379         contextmenu: function(node, e) {\r
 380 //          Register the context node with the menu so that a Menu Item's handler function can access\r
 381 //          it via its {@link Ext.menu.BaseItem#parentMenu parentMenu} property.\r
 382             node.select();\r
 383             var c = node.getOwnerTree().contextMenu;\r
 384             c.contextNode = node;\r
 385             c.showAt(e.getXY());\r
 386         }\r
 387     }\r
 388 });\r
 389 </code></pre>\r
 390             * @param {Node} node The node\r
 391             * @param {Ext.EventObject} e The event object\r
 392             */\r
 393             'contextmenu',\r
 394             /**\r
 395             * @event containercontextmenu\r
 396             * Fires when the tree container is right clicked\r
 397             * @param {Tree} this\r
 398             * @param {Ext.EventObject} e The event object\r
 399             */\r
 400             'containercontextmenu',\r
 401             /**\r
 402             * @event beforechildrenrendered\r
 403             * Fires right before the child nodes for a node are rendered\r
 404             * @param {Node} node The node\r
 405             */\r
 406             'beforechildrenrendered',\r
 407            /**\r
 408              * @event startdrag\r
 409              * Fires when a node starts being dragged\r
 410              * @param {Ext.tree.TreePanel} this\r
 411              * @param {Ext.tree.TreeNode} node\r
 412              * @param {event} e The raw browser event\r
 413              */\r
 414             'startdrag',\r
 415             /**\r
 416              * @event enddrag\r
 417              * Fires when a drag operation is complete\r
 418              * @param {Ext.tree.TreePanel} this\r
 419              * @param {Ext.tree.TreeNode} node\r
 420              * @param {event} e The raw browser event\r
 421              */\r
 422             'enddrag',\r
 423             /**\r
 424              * @event dragdrop\r
 425              * Fires when a dragged node is dropped on a valid DD target\r
 426              * @param {Ext.tree.TreePanel} this\r
 427              * @param {Ext.tree.TreeNode} node\r
 428              * @param {DD} dd The dd it was dropped on\r
 429              * @param {event} e The raw browser event\r
 430              */\r
 431             'dragdrop',\r
 432             /**\r
 433              * @event beforenodedrop\r
 434              * Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The dropEvent\r
 435              * passed to handlers has the following properties:<br />\r
 436              * <ul style="padding:5px;padding-left:16px;">\r
 437              * <li>tree - The TreePanel</li>\r
 438              * <li>target - The node being targeted for the drop</li>\r
 439              * <li>data - The drag data from the drag source</li>\r
 440              * <li>point - The point of the drop - append, above or below</li>\r
 441              * <li>source - The drag source</li>\r
 442              * <li>rawEvent - Raw mouse event</li>\r
 443              * <li>dropNode - Drop node(s) provided by the source <b>OR</b> you can supply node(s)\r
 444              * to be inserted by setting them on this object.</li>\r
 445              * <li>cancel - Set this to true to cancel the drop.</li>\r
 446              * <li>dropStatus - If the default drop action is cancelled but the drop is valid, setting this to true\r
 447              * will prevent the animated 'repair' from appearing.</li>\r
 448              * </ul>\r
 449              * @param {Object} dropEvent\r
 450              */\r
 451             'beforenodedrop',\r
 452             /**\r
 453              * @event nodedrop\r
 454              * Fires after a DD object is dropped on a node in this tree. The dropEvent\r
 455              * passed to handlers has the following properties:<br />\r
 456              * <ul style="padding:5px;padding-left:16px;">\r
 457              * <li>tree - The TreePanel</li>\r
 458              * <li>target - The node being targeted for the drop</li>\r
 459              * <li>data - The drag data from the drag source</li>\r
 460              * <li>point - The point of the drop - append, above or below</li>\r
 461              * <li>source - The drag source</li>\r
 462              * <li>rawEvent - Raw mouse event</li>\r
 463              * <li>dropNode - Dropped node(s).</li>\r
 464              * </ul>\r
 465              * @param {Object} dropEvent\r
 466              */\r
 467             'nodedrop',\r
 468              /**\r
 469              * @event nodedragover\r
 470              * Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent\r
 471              * passed to handlers has the following properties:<br />\r
 472              * <ul style="padding:5px;padding-left:16px;">\r
 473              * <li>tree - The TreePanel</li>\r
 474              * <li>target - The node being targeted for the drop</li>\r
 475              * <li>data - The drag data from the drag source</li>\r
 476              * <li>point - The point of the drop - append, above or below</li>\r
 477              * <li>source - The drag source</li>\r
 478              * <li>rawEvent - Raw mouse event</li>\r
 479              * <li>dropNode - Drop node(s) provided by the source.</li>\r
 480              * <li>cancel - Set this to true to signal drop not allowed.</li>\r
 481              * </ul>\r
 482              * @param {Object} dragOverEvent\r
 483              */\r
 484             'nodedragover'\r
 485         );\r
 486         if(this.singleExpand){\r
 487             this.on('beforeexpandnode', this.restrictExpand, this);\r
 488         }\r
 489     },\r
 490 \r
 491     // private\r
 492     proxyNodeEvent : function(ename, a1, a2, a3, a4, a5, a6){\r
 493         if(ename == 'collapse' || ename == 'expand' || ename == 'beforecollapse' || ename == 'beforeexpand' || ename == 'move' || ename == 'beforemove'){\r
 494             ename = ename+'node';\r
 495         }\r
 496         // args inline for performance while bubbling events\r
 497         return this.fireEvent(ename, a1, a2, a3, a4, a5, a6);\r
 498     },\r
 499 \r
 500 \r
 501     /**\r
 502      * Returns this root node for this tree\r
 503      * @return {Node}\r
 504      */\r
 505     getRootNode : function(){\r
 506         return this.root;\r
 507     },\r
 508 \r
 509     /**\r
 510      * Sets the root node for this tree. If the TreePanel has already rendered a root node, the\r
 511      * previous root node (and all of its descendants) are destroyed before the new root node is rendered.\r
 512      * @param {Node} node\r
 513      * @return {Node}\r
 514      */\r
 515     setRootNode : function(node){\r
 516         Ext.destroy(this.root);\r
 517         if(!node.render){ // attributes passed\r
 518             node = this.loader.createNode(node);\r
 519         }\r
 520         this.root = node;\r
 521         node.ownerTree = this;\r
 522         node.isRoot = true;\r
 523         this.registerNode(node);\r
 524         if(!this.rootVisible){\r
 525             var uiP = node.attributes.uiProvider;\r
 526             node.ui = uiP ? new uiP(node) : new Ext.tree.RootTreeNodeUI(node);\r
 527         }\r
 528         if (this.innerCt) {\r
 529             this.innerCt.update('');\r
 530             this.afterRender();\r
 531         }\r
 532         return node;\r
 533     },\r
 534 \r
 535     /**\r
 536      * Gets a node in this tree by its id\r
 537      * @param {String} id\r
 538      * @return {Node}\r
 539      */\r
 540     getNodeById : function(id){\r
 541         return this.nodeHash[id];\r
 542     },\r
 543 \r
 544     // private\r
 545     registerNode : function(node){\r
 546         this.nodeHash[node.id] = node;\r
 547     },\r
 548 \r
 549     // private\r
 550     unregisterNode : function(node){\r
 551         delete this.nodeHash[node.id];\r
 552     },\r
 553 \r
 554     // private\r
 555     toString : function(){\r
 556         return '[Tree'+(this.id?' '+this.id:'')+']';\r
 557     },\r
 558 \r
 559     // private\r
 560     restrictExpand : function(node){\r
 561         var p = node.parentNode;\r
 562         if(p){\r
 563             if(p.expandedChild && p.expandedChild.parentNode == p){\r
 564                 p.expandedChild.collapse();\r
 565             }\r
 566             p.expandedChild = node;\r
 567         }\r
 568     },\r
 569 \r
 570     /**\r
 571      * Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. 'id')\r
 572      * @param {String} attribute (optional) Defaults to null (return the actual nodes)\r
 573      * @param {TreeNode} startNode (optional) The node to start from, defaults to the root\r
 574      * @return {Array}\r
 575      */\r
 576     getChecked : function(a, startNode){\r
 577         startNode = startNode || this.root;\r
 578         var r = [];\r
 579         var f = function(){\r
 580             if(this.attributes.checked){\r
 581                 r.push(!a ? this : (a == 'id' ? this.id : this.attributes[a]));\r
 582             }\r
 583         };\r
 584         startNode.cascade(f);\r
 585         return r;\r
 586     },\r
 587 \r
 588     /**\r
 589      * Returns the default {@link Ext.tree.TreeLoader} for this TreePanel.\r
 590      * @return {Ext.tree.TreeLoader} The TreeLoader for this TreePanel.\r
 591      */\r
 592     getLoader : function(){\r
 593         return this.loader;\r
 594     },\r
 595 \r
 596     /**\r
 597      * Expand all nodes\r
 598      */\r
 599     expandAll : function(){\r
 600         this.root.expand(true);\r
 601     },\r
 602 \r
 603     /**\r
 604      * Collapse all nodes\r
 605      */\r
 606     collapseAll : function(){\r
 607         this.root.collapse(true);\r
 608     },\r
 609 \r
 610     /**\r
 611      * Returns the selection model used by this TreePanel.\r
 612      * @return {TreeSelectionModel} The selection model used by this TreePanel\r
 613      */\r
 614     getSelectionModel : function(){\r
 615         if(!this.selModel){\r
 616             this.selModel = new Ext.tree.DefaultSelectionModel();\r
 617         }\r
 618         return this.selModel;\r
 619     },\r
 620 \r
 621     /**\r
 622      * Expands a specified path in this TreePanel. A path can be retrieved from a node with {@link Ext.data.Node#getPath}\r
 623      * @param {String} path\r
 624      * @param {String} attr (optional) The attribute used in the path (see {@link Ext.data.Node#getPath} for more info)\r
 625      * @param {Function} callback (optional) The callback to call when the expand is complete. The callback will be called with\r
 626      * (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded.\r
 627      */\r
 628     expandPath : function(path, attr, callback){\r
 629         attr = attr || 'id';\r
 630         var keys = path.split(this.pathSeparator);\r
 631         var curNode = this.root;\r
 632         if(curNode.attributes[attr] != keys[1]){ // invalid root\r
 633             if(callback){\r
 634                 callback(false, null);\r
 635             }\r
 636             return;\r
 637         }\r
 638         var index = 1;\r
 639         var f = function(){\r
 640             if(++index == keys.length){\r
 641                 if(callback){\r
 642                     callback(true, curNode);\r
 643                 }\r
 644                 return;\r
 645             }\r
 646             var c = curNode.findChild(attr, keys[index]);\r
 647             if(!c){\r
 648                 if(callback){\r
 649                     callback(false, curNode);\r
 650                 }\r
 651                 return;\r
 652             }\r
 653             curNode = c;\r
 654             c.expand(false, false, f);\r
 655         };\r
 656         curNode.expand(false, false, f);\r
 657     },\r
 658 \r
 659     /**\r
 660      * Selects the node in this tree at the specified path. A path can be retrieved from a node with {@link Ext.data.Node#getPath}\r
 661      * @param {String} path\r
 662      * @param {String} attr (optional) The attribute used in the path (see {@link Ext.data.Node#getPath} for more info)\r
 663      * @param {Function} callback (optional) The callback to call when the selection is complete. The callback will be called with\r
 664      * (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node.\r
 665      */\r
 666     selectPath : function(path, attr, callback){\r
 667         attr = attr || 'id';\r
 668         var keys = path.split(this.pathSeparator),\r
 669             v = keys.pop();\r
 670         if(keys.length > 1){\r
 671             var f = function(success, node){\r
 672                 if(success && node){\r
 673                     var n = node.findChild(attr, v);\r
 674                     if(n){\r
 675                         n.select();\r
 676                         if(callback){\r
 677                             callback(true, n);\r
 678                         }\r
 679                     }else if(callback){\r
 680                         callback(false, n);\r
 681                     }\r
 682                 }else{\r
 683                     if(callback){\r
 684                         callback(false, n);\r
 685                     }\r
 686                 }\r
 687             };\r
 688             this.expandPath(keys.join(this.pathSeparator), attr, f);\r
 689         }else{\r
 690             this.root.select();\r
 691             if(callback){\r
 692                 callback(true, this.root);\r
 693             }\r
 694         }\r
 695     },\r
 696 \r
 697     /**\r
 698      * Returns the underlying Element for this tree\r
 699      * @return {Ext.Element} The Element\r
 700      */\r
 701     getTreeEl : function(){\r
 702         return this.body;\r
 703     },\r
 704 \r
 705     // private\r
 706     onRender : function(ct, position){\r
 707         Ext.tree.TreePanel.superclass.onRender.call(this, ct, position);\r
 708         this.el.addClass('x-tree');\r
 709         this.innerCt = this.body.createChild({tag:'ul',\r
 710                cls:'x-tree-root-ct ' +\r
 711                (this.useArrows ? 'x-tree-arrows' : this.lines ? 'x-tree-lines' : 'x-tree-no-lines')});\r
 712     },\r
 713 \r
 714     // private\r
 715     initEvents : function(){\r
 716         Ext.tree.TreePanel.superclass.initEvents.call(this);\r
 717 \r
 718         if(this.containerScroll){\r
 719             Ext.dd.ScrollManager.register(this.body);\r
 720         }\r
 721         if((this.enableDD || this.enableDrop) && !this.dropZone){\r
 722            /**\r
 723             * The dropZone used by this tree if drop is enabled (see {@link #enableDD} or {@link #enableDrop})\r
 724             * @property dropZone\r
 725             * @type Ext.tree.TreeDropZone\r
 726             */\r
 727              this.dropZone = new Ext.tree.TreeDropZone(this, this.dropConfig || {\r
 728                ddGroup: this.ddGroup || 'TreeDD', appendOnly: this.ddAppendOnly === true\r
 729            });\r
 730         }\r
 731         if((this.enableDD || this.enableDrag) && !this.dragZone){\r
 732            /**\r
 733             * The dragZone used by this tree if drag is enabled (see {@link #enableDD} or {@link #enableDrag})\r
 734             * @property dragZone\r
 735             * @type Ext.tree.TreeDragZone\r
 736             */\r
 737             this.dragZone = new Ext.tree.TreeDragZone(this, this.dragConfig || {\r
 738                ddGroup: this.ddGroup || 'TreeDD',\r
 739                scroll: this.ddScroll\r
 740            });\r
 741         }\r
 742         this.getSelectionModel().init(this);\r
 743     },\r
 744 \r
 745     // private\r
 746     afterRender : function(){\r
 747         Ext.tree.TreePanel.superclass.afterRender.call(this);\r
 748         this.root.render();\r
 749         if(!this.rootVisible){\r
 750             this.root.renderChildren();\r
 751         }\r
 752     },\r
 753 \r
 754     beforeDestroy : function(){\r
 755         if(this.rendered){\r
 756             Ext.dd.ScrollManager.unregister(this.body);\r
 757             Ext.destroy(this.dropZone, this.dragZone);\r
 758         }\r
 759         Ext.destroy(this.root, this.loader);\r
 760         this.nodeHash = this.root = this.loader = null;\r
 761         Ext.tree.TreePanel.superclass.beforeDestroy.call(this);\r
 762     }\r
 763 \r
 764     /**\r
 765      * @cfg {String/Number} activeItem\r
 766      * @hide\r
 767      */\r
 768     /**\r
 769      * @cfg {Boolean} autoDestroy\r
 770      * @hide\r
 771      */\r
 772     /**\r
 773      * @cfg {Object/String/Function} autoLoad\r
 774      * @hide\r
 775      */\r
 776     /**\r
 777      * @cfg {Boolean} autoWidth\r
 778      * @hide\r
 779      */\r
 780     /**\r
 781      * @cfg {Boolean/Number} bufferResize\r
 782      * @hide\r
 783      */\r
 784     /**\r
 785      * @cfg {String} defaultType\r
 786      * @hide\r
 787      */\r
 788     /**\r
 789      * @cfg {Object} defaults\r
 790      * @hide\r
 791      */\r
 792     /**\r
 793      * @cfg {Boolean} hideBorders\r
 794      * @hide\r
 795      */\r
 796     /**\r
 797      * @cfg {Mixed} items\r
 798      * @hide\r
 799      */\r
 800     /**\r
 801      * @cfg {String} layout\r
 802      * @hide\r
 803      */\r
 804     /**\r
 805      * @cfg {Object} layoutConfig\r
 806      * @hide\r
 807      */\r
 808     /**\r
 809      * @cfg {Boolean} monitorResize\r
 810      * @hide\r
 811      */\r
 812     /**\r
 813      * @property items\r
 814      * @hide\r
 815      */\r
 816     /**\r
 817      * @method cascade\r
 818      * @hide\r
 819      */\r
 820     /**\r
 821      * @method doLayout\r
 822      * @hide\r
 823      */\r
 824     /**\r
 825      * @method find\r
 826      * @hide\r
 827      */\r
 828     /**\r
 829      * @method findBy\r
 830      * @hide\r
 831      */\r
 832     /**\r
 833      * @method findById\r
 834      * @hide\r
 835      */\r
 836     /**\r
 837      * @method findByType\r
 838      * @hide\r
 839      */\r
 840     /**\r
 841      * @method getComponent\r
 842      * @hide\r
 843      */\r
 844     /**\r
 845      * @method getLayout\r
 846      * @hide\r
 847      */\r
 848     /**\r
 849      * @method getUpdater\r
 850      * @hide\r
 851      */\r
 852     /**\r
 853      * @method insert\r
 854      * @hide\r
 855      */\r
 856     /**\r
 857      * @method load\r
 858      * @hide\r
 859      */\r
 860     /**\r
 861      * @method remove\r
 862      * @hide\r
 863      */\r
 864     /**\r
 865      * @event add\r
 866      * @hide\r
 867      */\r
 868     /**\r
 869      * @method removeAll\r
 870      * @hide\r
 871      */\r
 872     /**\r
 873      * @event afterLayout\r
 874      * @hide\r
 875      */\r
 876     /**\r
 877      * @event beforeadd\r
 878      * @hide\r
 879      */\r
 880     /**\r
 881      * @event beforeremove\r
 882      * @hide\r
 883      */\r
 884     /**\r
 885      * @event remove\r
 886      * @hide\r
 887      */\r
 888 \r
 889 \r
 890 \r
 891     /**\r
 892      * @cfg {String} allowDomMove  @hide\r
 893      */\r
 894     /**\r
 895      * @cfg {String} autoEl @hide\r
 896      */\r
 897     /**\r
 898      * @cfg {String} applyTo  @hide\r
 899      */\r
 900     /**\r
 901      * @cfg {String} contentEl  @hide\r
 902      */\r
 903     /**\r
 904      * @cfg {String} disabledClass  @hide\r
 905      */\r
 906     /**\r
 907      * @cfg {String} elements  @hide\r
 908      */\r
 909     /**\r
 910      * @cfg {String} html  @hide\r
 911      */\r
 912     /**\r
 913      * @cfg {Boolean} preventBodyReset\r
 914      * @hide\r
 915      */\r
 916     /**\r
 917      * @property disabled\r
 918      * @hide\r
 919      */\r
 920     /**\r
 921      * @method applyToMarkup\r
 922      * @hide\r
 923      */\r
 924     /**\r
 925      * @method enable\r
 926      * @hide\r
 927      */\r
 928     /**\r
 929      * @method disable\r
 930      * @hide\r
 931      */\r
 932     /**\r
 933      * @method setDisabled\r
 934      * @hide\r
 935      */\r
 936 });\r
 937 \r
 938 Ext.tree.TreePanel.nodeTypes = {};\r
 939 \r
 940 Ext.reg('treepanel', Ext.tree.TreePanel);Ext.tree.TreeEventModel = function(tree){\r
 941     this.tree = tree;\r
 942     this.tree.on('render', this.initEvents, this);\r
 943 }\r
 944 \r
 945 Ext.tree.TreeEventModel.prototype = {\r
 946     initEvents : function(){\r
 947         var t = this.tree;\r
 948             \r
 949         if(t.trackMouseOver !== false){\r
 950             t.mon(t.innerCt, {\r
 951                 scope: this,\r
 952                 mouseover: this.delegateOver,\r
 953                 mouseout: this.delegateOut\r
 954             });\r
 955         }\r
 956         t.mon(t.getTreeEl(), {\r
 957             scope: this,\r
 958             click: this.delegateClick,\r
 959             dblclick: this.delegateDblClick,\r
 960             contextmenu: this.delegateContextMenu\r
 961         });\r
 962     },\r
 963 \r
 964     getNode : function(e){\r
 965         var t;\r
 966         if(t = e.getTarget('.x-tree-node-el', 10)){\r
 967             var id = Ext.fly(t, '_treeEvents').getAttribute('tree-node-id', 'ext');\r
 968             if(id){\r
 969                 return this.tree.getNodeById(id);\r
 970             }\r
 971         }\r
 972         return null;\r
 973     },\r
 974 \r
 975     getNodeTarget : function(e){\r
 976         var t = e.getTarget('.x-tree-node-icon', 1);\r
 977         if(!t){\r
 978             t = e.getTarget('.x-tree-node-el', 6);\r
 979         }\r
 980         return t;\r
 981     },\r
 982 \r
 983     delegateOut : function(e, t){\r
 984         if(!this.beforeEvent(e)){\r
 985             return;\r
 986         }\r
 987         if(e.getTarget('.x-tree-ec-icon', 1)){\r
 988             var n = this.getNode(e);\r
 989             this.onIconOut(e, n);\r
 990             if(n == this.lastEcOver){\r
 991                 delete this.lastEcOver;\r
 992             }\r
 993         }\r
 994         if((t = this.getNodeTarget(e)) && !e.within(t, true)){\r
 995             this.onNodeOut(e, this.getNode(e));\r
 996         }\r
 997     },\r
 998 \r
 999     delegateOver : function(e, t){\r
1000         if(!this.beforeEvent(e)){\r
1001             return;\r
1002         }\r
1003         if(Ext.isGecko && !this.trackingDoc){ // prevent hanging in FF\r
1004             Ext.getBody().on('mouseover', this.trackExit, this);\r
1005             this.trackingDoc = true;\r
1006         }\r
1007         if(this.lastEcOver){ // prevent hung highlight\r
1008             this.onIconOut(e, this.lastEcOver);\r
1009             delete this.lastEcOver;\r
1010         }\r
1011         if(e.getTarget('.x-tree-ec-icon', 1)){\r
1012             this.lastEcOver = this.getNode(e);\r
1013             this.onIconOver(e, this.lastEcOver);\r
1014         }\r
1015         if(t = this.getNodeTarget(e)){\r
1016             this.onNodeOver(e, this.getNode(e));\r
1017         }\r
1018     },\r
1019 \r
1020     trackExit : function(e){\r
1021         if(this.lastOverNode && !e.within(this.lastOverNode.ui.getEl())){\r
1022             this.onNodeOut(e, this.lastOverNode);\r
1023             delete this.lastOverNode;\r
1024             Ext.getBody().un('mouseover', this.trackExit, this);\r
1025             this.trackingDoc = false;\r
1026         }\r
1027     },\r
1028 \r
1029     delegateClick : function(e, t){\r
1030         if(this.beforeEvent(e)){\r
1031             if(e.getTarget('input[type=checkbox]', 1)){\r
1032                 this.onCheckboxClick(e, this.getNode(e));\r
1033             }else if(e.getTarget('.x-tree-ec-icon', 1)){\r
1034                 this.onIconClick(e, this.getNode(e));\r
1035             }else if(this.getNodeTarget(e)){\r
1036                 this.onNodeClick(e, this.getNode(e));\r
1037             }else{\r
1038                 this.onContainerEvent(e, 'click');\r
1039             }\r
1040         }\r
1041     },\r
1042 \r
1043     delegateDblClick : function(e, t){\r
1044         if(this.beforeEvent(e)){\r
1045             if(this.getNodeTarget(e)){\r
1046                 this.onNodeDblClick(e, this.getNode(e));\r
1047             }else{\r
1048                 this.onContainerEvent(e, 'dblclick');    \r
1049             }\r
1050         }\r
1051     },\r
1052 \r
1053     delegateContextMenu : function(e, t){\r
1054         if(this.beforeEvent(e)){\r
1055             if(this.getNodeTarget(e)){\r
1056                 this.onNodeContextMenu(e, this.getNode(e));\r
1057             }else{\r
1058                 this.onContainerEvent(e, 'contextmenu');    \r
1059             }\r
1060         }\r
1061     },\r
1062     \r
1063     onContainerEvent: function(e, type){\r
1064         this.tree.fireEvent('container' + type, this.tree, e); \r
1065     },\r
1066 \r
1067     onNodeClick : function(e, node){\r
1068         node.ui.onClick(e);\r
1069     },\r
1070 \r
1071     onNodeOver : function(e, node){\r
1072         this.lastOverNode = node;\r
1073         node.ui.onOver(e);\r
1074     },\r
1075 \r
1076     onNodeOut : function(e, node){\r
1077         node.ui.onOut(e);\r
1078     },\r
1079 \r
1080     onIconOver : function(e, node){\r
1081         node.ui.addClass('x-tree-ec-over');\r
1082     },\r
1083 \r
1084     onIconOut : function(e, node){\r
1085         node.ui.removeClass('x-tree-ec-over');\r
1086     },\r
1087 \r
1088     onIconClick : function(e, node){\r
1089         node.ui.ecClick(e);\r
1090     },\r
1091 \r
1092     onCheckboxClick : function(e, node){\r
1093         node.ui.onCheckChange(e);\r
1094     },\r
1095 \r
1096     onNodeDblClick : function(e, node){\r
1097         node.ui.onDblClick(e);\r
1098     },\r
1099 \r
1100     onNodeContextMenu : function(e, node){\r
1101         node.ui.onContextMenu(e);\r
1102     },\r
1103 \r
1104     beforeEvent : function(e){\r
1105         if(this.disabled){\r
1106             e.stopEvent();\r
1107             return false;\r
1108         }\r
1109         return true;\r
1110     },\r
1111 \r
1112     disable: function(){\r
1113         this.disabled = true;\r
1114     },\r
1115 \r
1116     enable: function(){\r
1117         this.disabled = false;\r
1118     }\r
1119 };/**\r
1120  * @class Ext.tree.DefaultSelectionModel\r
1121  * @extends Ext.util.Observable\r
1122  * The default single selection for a TreePanel.\r
1123  */\r
1124 Ext.tree.DefaultSelectionModel = function(config){\r
1125    this.selNode = null;\r
1126    \r
1127    this.addEvents(\r
1128        /**\r
1129         * @event selectionchange\r
1130         * Fires when the selected node changes\r
1131         * @param {DefaultSelectionModel} this\r
1132         * @param {TreeNode} node the new selection\r
1133         */\r
1134        'selectionchange',\r
1135 \r
1136        /**\r
1137         * @event beforeselect\r
1138         * Fires before the selected node changes, return false to cancel the change\r
1139         * @param {DefaultSelectionModel} this\r
1140         * @param {TreeNode} node the new selection\r
1141         * @param {TreeNode} node the old selection\r
1142         */\r
1143        'beforeselect'\r
1144    );\r
1145 \r
1146     Ext.apply(this, config);\r
1147     Ext.tree.DefaultSelectionModel.superclass.constructor.call(this);\r
1148 };\r
1149 \r
1150 Ext.extend(Ext.tree.DefaultSelectionModel, Ext.util.Observable, {\r
1151     init : function(tree){\r
1152         this.tree = tree;\r
1153         tree.mon(tree.getTreeEl(), 'keydown', this.onKeyDown, this);\r
1154         tree.on('click', this.onNodeClick, this);\r
1155     },\r
1156     \r
1157     onNodeClick : function(node, e){\r
1158         this.select(node);\r
1159     },\r
1160     \r
1161     /**\r
1162      * Select a node.\r
1163      * @param {TreeNode} node The node to select\r
1164      * @return {TreeNode} The selected node\r
1165      */\r
1166     select : function(node, /* private*/ selectNextNode){\r
1167         // If node is hidden, select the next node in whatever direction was being moved in.\r
1168         if (!Ext.fly(node.ui.wrap).isVisible() && selectNextNode) {\r
1169             return selectNextNode.call(this, node);\r
1170         }\r
1171         var last = this.selNode;\r
1172         if(node == last){\r
1173             node.ui.onSelectedChange(true);\r
1174         }else if(this.fireEvent('beforeselect', this, node, last) !== false){\r
1175             if(last && last.ui){\r
1176                 last.ui.onSelectedChange(false);\r
1177             }\r
1178             this.selNode = node;\r
1179             node.ui.onSelectedChange(true);\r
1180             this.fireEvent('selectionchange', this, node, last);\r
1181         }\r
1182         return node;\r
1183     },\r
1184     \r
1185     /**\r
1186      * Deselect a node.\r
1187      * @param {TreeNode} node The node to unselect\r
1188      * @param {Boolean} silent True to stop the selectionchange event from firing.\r
1189      */\r
1190     unselect : function(node, silent){\r
1191         if(this.selNode == node){\r
1192             this.clearSelections(silent);\r
1193         }    \r
1194     },\r
1195     \r
1196     /**\r
1197      * Clear all selections\r
1198      * @param {Boolean} silent True to stop the selectionchange event from firing.\r
1199      */\r
1200     clearSelections : function(silent){\r
1201         var n = this.selNode;\r
1202         if(n){\r
1203             n.ui.onSelectedChange(false);\r
1204             this.selNode = null;\r
1205             if(silent !== true){\r
1206                 this.fireEvent('selectionchange', this, null);\r
1207             }\r
1208         }\r
1209         return n;\r
1210     },\r
1211     \r
1212     /**\r
1213      * Get the selected node\r
1214      * @return {TreeNode} The selected node\r
1215      */\r
1216     getSelectedNode : function(){\r
1217         return this.selNode;    \r
1218     },\r
1219     \r
1220     /**\r
1221      * Returns true if the node is selected\r
1222      * @param {TreeNode} node The node to check\r
1223      * @return {Boolean}\r
1224      */\r
1225     isSelected : function(node){\r
1226         return this.selNode == node;  \r
1227     },\r
1228 \r
1229     /**\r
1230      * Selects the node above the selected node in the tree, intelligently walking the nodes\r
1231      * @return TreeNode The new selection\r
1232      */\r
1233     selectPrevious : function(/* private */ s){\r
1234         if(!(s = s || this.selNode || this.lastSelNode)){\r
1235             return null;\r
1236         }\r
1237         // Here we pass in the current function to select to indicate the direction we're moving\r
1238         var ps = s.previousSibling;\r
1239         if(ps){\r
1240             if(!ps.isExpanded() || ps.childNodes.length < 1){\r
1241                 return this.select(ps, this.selectPrevious);\r
1242             } else{\r
1243                 var lc = ps.lastChild;\r
1244                 while(lc && lc.isExpanded() && Ext.fly(lc.ui.wrap).isVisible() && lc.childNodes.length > 0){\r
1245                     lc = lc.lastChild;\r
1246                 }\r
1247                 return this.select(lc, this.selectPrevious);\r
1248             }\r
1249         } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){\r
1250             return this.select(s.parentNode, this.selectPrevious);\r
1251         }\r
1252         return null;\r
1253     },\r
1254 \r
1255     /**\r
1256      * Selects the node above the selected node in the tree, intelligently walking the nodes\r
1257      * @return TreeNode The new selection\r
1258      */\r
1259     selectNext : function(/* private */ s){\r
1260         if(!(s = s || this.selNode || this.lastSelNode)){\r
1261             return null;\r
1262         }\r
1263         // Here we pass in the current function to select to indicate the direction we're moving\r
1264         if(s.firstChild && s.isExpanded() && Ext.fly(s.ui.wrap).isVisible()){\r
1265              return this.select(s.firstChild, this.selectNext);\r
1266          }else if(s.nextSibling){\r
1267              return this.select(s.nextSibling, this.selectNext);\r
1268          }else if(s.parentNode){\r
1269             var newS = null;\r
1270             s.parentNode.bubble(function(){\r
1271                 if(this.nextSibling){\r
1272                     newS = this.getOwnerTree().selModel.select(this.nextSibling, this.selectNext);\r
1273                     return false;\r
1274                 }\r
1275             });\r
1276             return newS;\r
1277          }\r
1278         return null;\r
1279     },\r
1280 \r
1281     onKeyDown : function(e){\r
1282         var s = this.selNode || this.lastSelNode;\r
1283         // undesirable, but required\r
1284         var sm = this;\r
1285         if(!s){\r
1286             return;\r
1287         }\r
1288         var k = e.getKey();\r
1289         switch(k){\r
1290              case e.DOWN:\r
1291                  e.stopEvent();\r
1292                  this.selectNext();\r
1293              break;\r
1294              case e.UP:\r
1295                  e.stopEvent();\r
1296                  this.selectPrevious();\r
1297              break;\r
1298              case e.RIGHT:\r
1299                  e.preventDefault();\r
1300                  if(s.hasChildNodes()){\r
1301                      if(!s.isExpanded()){\r
1302                          s.expand();\r
1303                      }else if(s.firstChild){\r
1304                          this.select(s.firstChild, e);\r
1305                      }\r
1306                  }\r
1307              break;\r
1308              case e.LEFT:\r
1309                  e.preventDefault();\r
1310                  if(s.hasChildNodes() && s.isExpanded()){\r
1311                      s.collapse();\r
1312                  }else if(s.parentNode && (this.tree.rootVisible || s.parentNode != this.tree.getRootNode())){\r
1313                      this.select(s.parentNode, e);\r
1314                  }\r
1315              break;\r
1316         };\r
1317     }\r
1318 });\r
1319 \r
1320 /**\r
1321  * @class Ext.tree.MultiSelectionModel\r
1322  * @extends Ext.util.Observable\r
1323  * Multi selection for a TreePanel.\r
1324  */\r
1325 Ext.tree.MultiSelectionModel = function(config){\r
1326    this.selNodes = [];\r
1327    this.selMap = {};\r
1328    this.addEvents(\r
1329        /**\r
1330         * @event selectionchange\r
1331         * Fires when the selected nodes change\r
1332         * @param {MultiSelectionModel} this\r
1333         * @param {Array} nodes Array of the selected nodes\r
1334         */\r
1335        'selectionchange'\r
1336    );\r
1337     Ext.apply(this, config);\r
1338     Ext.tree.MultiSelectionModel.superclass.constructor.call(this);\r
1339 };\r
1340 \r
1341 Ext.extend(Ext.tree.MultiSelectionModel, Ext.util.Observable, {\r
1342     init : function(tree){\r
1343         this.tree = tree;\r
1344         tree.mon(tree.getTreeEl(), 'keydown', this.onKeyDown, this);\r
1345         tree.on('click', this.onNodeClick, this);\r
1346     },\r
1347     \r
1348     onNodeClick : function(node, e){\r
1349         if(e.ctrlKey && this.isSelected(node)){\r
1350             this.unselect(node);\r
1351         }else{\r
1352             this.select(node, e, e.ctrlKey);\r
1353         }\r
1354     },\r
1355     \r
1356     /**\r
1357      * Select a node.\r
1358      * @param {TreeNode} node The node to select\r
1359      * @param {EventObject} e (optional) An event associated with the selection\r
1360      * @param {Boolean} keepExisting True to retain existing selections\r
1361      * @return {TreeNode} The selected node\r
1362      */\r
1363     select : function(node, e, keepExisting){\r
1364         if(keepExisting !== true){\r
1365             this.clearSelections(true);\r
1366         }\r
1367         if(this.isSelected(node)){\r
1368             this.lastSelNode = node;\r
1369             return node;\r
1370         }\r
1371         this.selNodes.push(node);\r
1372         this.selMap[node.id] = node;\r
1373         this.lastSelNode = node;\r
1374         node.ui.onSelectedChange(true);\r
1375         this.fireEvent('selectionchange', this, this.selNodes);\r
1376         return node;\r
1377     },\r
1378     \r
1379     /**\r
1380      * Deselect a node.\r
1381      * @param {TreeNode} node The node to unselect\r
1382      */\r
1383     unselect : function(node){\r
1384         if(this.selMap[node.id]){\r
1385             node.ui.onSelectedChange(false);\r
1386             var sn = this.selNodes;\r
1387             var index = sn.indexOf(node);\r
1388             if(index != -1){\r
1389                 this.selNodes.splice(index, 1);\r
1390             }\r
1391             delete this.selMap[node.id];\r
1392             this.fireEvent('selectionchange', this, this.selNodes);\r
1393         }\r
1394     },\r
1395     \r
1396     /**\r
1397      * Clear all selections\r
1398      */\r
1399     clearSelections : function(suppressEvent){\r
1400         var sn = this.selNodes;\r
1401         if(sn.length > 0){\r
1402             for(var i = 0, len = sn.length; i < len; i++){\r
1403                 sn[i].ui.onSelectedChange(false);\r
1404             }\r
1405             this.selNodes = [];\r
1406             this.selMap = {};\r
1407             if(suppressEvent !== true){\r
1408                 this.fireEvent('selectionchange', this, this.selNodes);\r
1409             }\r
1410         }\r
1411     },\r
1412     \r
1413     /**\r
1414      * Returns true if the node is selected\r
1415      * @param {TreeNode} node The node to check\r
1416      * @return {Boolean}\r
1417      */\r
1418     isSelected : function(node){\r
1419         return this.selMap[node.id] ? true : false;  \r
1420     },\r
1421     \r
1422     /**\r
1423      * Returns an array of the selected nodes\r
1424      * @return {Array}\r
1425      */\r
1426     getSelectedNodes : function(){\r
1427         return this.selNodes;    \r
1428     },\r
1429 \r
1430     onKeyDown : Ext.tree.DefaultSelectionModel.prototype.onKeyDown,\r
1431 \r
1432     selectNext : Ext.tree.DefaultSelectionModel.prototype.selectNext,\r
1433 \r
1434     selectPrevious : Ext.tree.DefaultSelectionModel.prototype.selectPrevious\r
1435 });/**\r
1436  * @class Ext.data.Tree\r
1437  * @extends Ext.util.Observable\r
1438  * Represents a tree data structure and bubbles all the events for its nodes. The nodes\r
1439  * in the tree have most standard DOM functionality.\r
1440  * @constructor\r
1441  * @param {Node} root (optional) The root node\r
1442  */\r
1443 Ext.data.Tree = function(root){\r
1444    this.nodeHash = {};\r
1445    /**\r
1446     * The root node for this tree\r
1447     * @type Node\r
1448     */\r
1449    this.root = null;\r
1450    if(root){\r
1451        this.setRootNode(root);\r
1452    }\r
1453    this.addEvents(\r
1454        /**\r
1455         * @event append\r
1456         * Fires when a new child node is appended to a node in this tree.\r
1457         * @param {Tree} tree The owner tree\r
1458         * @param {Node} parent The parent node\r
1459         * @param {Node} node The newly appended node\r
1460         * @param {Number} index The index of the newly appended node\r
1461         */\r
1462        "append",\r
1463        /**\r
1464         * @event remove\r
1465         * Fires when a child node is removed from a node in this tree.\r
1466         * @param {Tree} tree The owner tree\r
1467         * @param {Node} parent The parent node\r
1468         * @param {Node} node The child node removed\r
1469         */\r
1470        "remove",\r
1471        /**\r
1472         * @event move\r
1473         * Fires when a node is moved to a new location in the tree\r
1474         * @param {Tree} tree The owner tree\r
1475         * @param {Node} node The node moved\r
1476         * @param {Node} oldParent The old parent of this node\r
1477         * @param {Node} newParent The new parent of this node\r
1478         * @param {Number} index The index it was moved to\r
1479         */\r
1480        "move",\r
1481        /**\r
1482         * @event insert\r
1483         * Fires when a new child node is inserted in a node in this tree.\r
1484         * @param {Tree} tree The owner tree\r
1485         * @param {Node} parent The parent node\r
1486         * @param {Node} node The child node inserted\r
1487         * @param {Node} refNode The child node the node was inserted before\r
1488         */\r
1489        "insert",\r
1490        /**\r
1491         * @event beforeappend\r
1492         * Fires before a new child is appended to a node in this tree, return false to cancel the append.\r
1493         * @param {Tree} tree The owner tree\r
1494         * @param {Node} parent The parent node\r
1495         * @param {Node} node The child node to be appended\r
1496         */\r
1497        "beforeappend",\r
1498        /**\r
1499         * @event beforeremove\r
1500         * Fires before a child is removed from a node in this tree, return false to cancel the remove.\r
1501         * @param {Tree} tree The owner tree\r
1502         * @param {Node} parent The parent node\r
1503         * @param {Node} node The child node to be removed\r
1504         */\r
1505        "beforeremove",\r
1506        /**\r
1507         * @event beforemove\r
1508         * Fires before a node is moved to a new location in the tree. Return false to cancel the move.\r
1509         * @param {Tree} tree The owner tree\r
1510         * @param {Node} node The node being moved\r
1511         * @param {Node} oldParent The parent of the node\r
1512         * @param {Node} newParent The new parent the node is moving to\r
1513         * @param {Number} index The index it is being moved to\r
1514         */\r
1515        "beforemove",\r
1516        /**\r
1517         * @event beforeinsert\r
1518         * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.\r
1519         * @param {Tree} tree The owner tree\r
1520         * @param {Node} parent The parent node\r
1521         * @param {Node} node The child node to be inserted\r
1522         * @param {Node} refNode The child node the node is being inserted before\r
1523         */\r
1524        "beforeinsert"\r
1525    );\r
1526 \r
1527     Ext.data.Tree.superclass.constructor.call(this);\r
1528 };\r
1529 \r
1530 Ext.extend(Ext.data.Tree, Ext.util.Observable, {\r
1531     /**\r
1532      * @cfg {String} pathSeparator\r
1533      * The token used to separate paths in node ids (defaults to '/').\r
1534      */\r
1535     pathSeparator: "/",\r
1536 \r
1537     // private\r
1538     proxyNodeEvent : function(){\r
1539         return this.fireEvent.apply(this, arguments);\r
1540     },\r
1541 \r
1542     /**\r
1543      * Returns the root node for this tree.\r
1544      * @return {Node}\r
1545      */\r
1546     getRootNode : function(){\r
1547         return this.root;\r
1548     },\r
1549 \r
1550     /**\r
1551      * Sets the root node for this tree.\r
1552      * @param {Node} node\r
1553      * @return {Node}\r
1554      */\r
1555     setRootNode : function(node){\r
1556         this.root = node;\r
1557         node.ownerTree = this;\r
1558         node.isRoot = true;\r
1559         this.registerNode(node);\r
1560         return node;\r
1561     },\r
1562 \r
1563     /**\r
1564      * Gets a node in this tree by its id.\r
1565      * @param {String} id\r
1566      * @return {Node}\r
1567      */\r
1568     getNodeById : function(id){\r
1569         return this.nodeHash[id];\r
1570     },\r
1571 \r
1572     // private\r
1573     registerNode : function(node){\r
1574         this.nodeHash[node.id] = node;\r
1575     },\r
1576 \r
1577     // private\r
1578     unregisterNode : function(node){\r
1579         delete this.nodeHash[node.id];\r
1580     },\r
1581 \r
1582     toString : function(){\r
1583         return "[Tree"+(this.id?" "+this.id:"")+"]";\r
1584     }\r
1585 });\r
1586 \r
1587 /**\r
1588  * @class Ext.data.Node\r
1589  * @extends Ext.util.Observable\r
1590  * @cfg {Boolean} leaf true if this node is a leaf and does not have children\r
1591  * @cfg {String} id The id for this node. If one is not specified, one is generated.\r
1592  * @constructor\r
1593  * @param {Object} attributes The attributes/config for the node\r
1594  */\r
1595 Ext.data.Node = function(attributes){\r
1596     /**\r
1597      * The attributes supplied for the node. You can use this property to access any custom attributes you supplied.\r
1598      * @type {Object}\r
1599      */\r
1600     this.attributes = attributes || {};\r
1601     this.leaf = this.attributes.leaf;\r
1602     /**\r
1603      * The node id. @type String\r
1604      */\r
1605     this.id = this.attributes.id;\r
1606     if(!this.id){\r
1607         this.id = Ext.id(null, "xnode-");\r
1608         this.attributes.id = this.id;\r
1609     }\r
1610     /**\r
1611      * All child nodes of this node. @type Array\r
1612      */\r
1613     this.childNodes = [];\r
1614     if(!this.childNodes.indexOf){ // indexOf is a must\r
1615         this.childNodes.indexOf = function(o){\r
1616             for(var i = 0, len = this.length; i < len; i++){\r
1617                 if(this[i] == o){\r
1618                     return i;\r
1619                 }\r
1620             }\r
1621             return -1;\r
1622         };\r
1623     }\r
1624     /**\r
1625      * The parent node for this node. @type Node\r
1626      */\r
1627     this.parentNode = null;\r
1628     /**\r
1629      * The first direct child node of this node, or null if this node has no child nodes. @type Node\r
1630      */\r
1631     this.firstChild = null;\r
1632     /**\r
1633      * The last direct child node of this node, or null if this node has no child nodes. @type Node\r
1634      */\r
1635     this.lastChild = null;\r
1636     /**\r
1637      * The node immediately preceding this node in the tree, or null if there is no sibling node. @type Node\r
1638      */\r
1639     this.previousSibling = null;\r
1640     /**\r
1641      * The node immediately following this node in the tree, or null if there is no sibling node. @type Node\r
1642      */\r
1643     this.nextSibling = null;\r
1644 \r
1645     this.addEvents({\r
1646        /**\r
1647         * @event append\r
1648         * Fires when a new child node is appended\r
1649         * @param {Tree} tree The owner tree\r
1650         * @param {Node} this This node\r
1651         * @param {Node} node The newly appended node\r
1652         * @param {Number} index The index of the newly appended node\r
1653         */\r
1654        "append" : true,\r
1655        /**\r
1656         * @event remove\r
1657         * Fires when a child node is removed\r
1658         * @param {Tree} tree The owner tree\r
1659         * @param {Node} this This node\r
1660         * @param {Node} node The removed node\r
1661         */\r
1662        "remove" : true,\r
1663        /**\r
1664         * @event move\r
1665         * Fires when this node is moved to a new location in the tree\r
1666         * @param {Tree} tree The owner tree\r
1667         * @param {Node} this This node\r
1668         * @param {Node} oldParent The old parent of this node\r
1669         * @param {Node} newParent The new parent of this node\r
1670         * @param {Number} index The index it was moved to\r
1671         */\r
1672        "move" : true,\r
1673        /**\r
1674         * @event insert\r
1675         * Fires when a new child node is inserted.\r
1676         * @param {Tree} tree The owner tree\r
1677         * @param {Node} this This node\r
1678         * @param {Node} node The child node inserted\r
1679         * @param {Node} refNode The child node the node was inserted before\r
1680         */\r
1681        "insert" : true,\r
1682        /**\r
1683         * @event beforeappend\r
1684         * Fires before a new child is appended, return false to cancel the append.\r
1685         * @param {Tree} tree The owner tree\r
1686         * @param {Node} this This node\r
1687         * @param {Node} node The child node to be appended\r
1688         */\r
1689        "beforeappend" : true,\r
1690        /**\r
1691         * @event beforeremove\r
1692         * Fires before a child is removed, return false to cancel the remove.\r
1693         * @param {Tree} tree The owner tree\r
1694         * @param {Node} this This node\r
1695         * @param {Node} node The child node to be removed\r
1696         */\r
1697        "beforeremove" : true,\r
1698        /**\r
1699         * @event beforemove\r
1700         * Fires before this node is moved to a new location in the tree. Return false to cancel the move.\r
1701         * @param {Tree} tree The owner tree\r
1702         * @param {Node} this This node\r
1703         * @param {Node} oldParent The parent of this node\r
1704         * @param {Node} newParent The new parent this node is moving to\r
1705         * @param {Number} index The index it is being moved to\r
1706         */\r
1707        "beforemove" : true,\r
1708        /**\r
1709         * @event beforeinsert\r
1710         * Fires before a new child is inserted, return false to cancel the insert.\r
1711         * @param {Tree} tree The owner tree\r
1712         * @param {Node} this This node\r
1713         * @param {Node} node The child node to be inserted\r
1714         * @param {Node} refNode The child node the node is being inserted before\r
1715         */\r
1716        "beforeinsert" : true\r
1717    });\r
1718     this.listeners = this.attributes.listeners;\r
1719     Ext.data.Node.superclass.constructor.call(this);\r
1720 };\r
1721 \r
1722 Ext.extend(Ext.data.Node, Ext.util.Observable, {\r
1723     // private\r
1724     fireEvent : function(evtName){\r
1725         // first do standard event for this node\r
1726         if(Ext.data.Node.superclass.fireEvent.apply(this, arguments) === false){\r
1727             return false;\r
1728         }\r
1729         // then bubble it up to the tree if the event wasn't cancelled\r
1730         var ot = this.getOwnerTree();\r
1731         if(ot){\r
1732             if(ot.proxyNodeEvent.apply(ot, arguments) === false){\r
1733                 return false;\r
1734             }\r
1735         }\r
1736         return true;\r
1737     },\r
1738 \r
1739     /**\r
1740      * Returns true if this node is a leaf\r
1741      * @return {Boolean}\r
1742      */\r
1743     isLeaf : function(){\r
1744         return this.leaf === true;\r
1745     },\r
1746 \r
1747     // private\r
1748     setFirstChild : function(node){\r
1749         this.firstChild = node;\r
1750     },\r
1751 \r
1752     //private\r
1753     setLastChild : function(node){\r
1754         this.lastChild = node;\r
1755     },\r
1756 \r
1757 \r
1758     /**\r
1759      * Returns true if this node is the last child of its parent\r
1760      * @return {Boolean}\r
1761      */\r
1762     isLast : function(){\r
1763        return (!this.parentNode ? true : this.parentNode.lastChild == this);\r
1764     },\r
1765 \r
1766     /**\r
1767      * Returns true if this node is the first child of its parent\r
1768      * @return {Boolean}\r
1769      */\r
1770     isFirst : function(){\r
1771        return (!this.parentNode ? true : this.parentNode.firstChild == this);\r
1772     },\r
1773 \r
1774     /**\r
1775      * Returns true if this node has one or more child nodes, else false.\r
1776      * @return {Boolean}\r
1777      */\r
1778     hasChildNodes : function(){\r
1779         return !this.isLeaf() && this.childNodes.length > 0;\r
1780     },\r
1781     \r
1782     /**\r
1783      * Returns true if this node has one or more child nodes, or if the <tt>expandable</tt>\r
1784      * node attribute is explicitly specified as true (see {@link #attributes}), otherwise returns false.\r
1785      * @return {Boolean}\r
1786      */\r
1787     isExpandable : function(){\r
1788         return this.attributes.expandable || this.hasChildNodes();\r
1789     },\r
1790 \r
1791     /**\r
1792      * Insert node(s) as the last child node of this node.\r
1793      * @param {Node/Array} node The node or Array of nodes to append\r
1794      * @return {Node} The appended node if single append, or null if an array was passed\r
1795      */\r
1796     appendChild : function(node){\r
1797         var multi = false;\r
1798         if(Ext.isArray(node)){\r
1799             multi = node;\r
1800         }else if(arguments.length > 1){\r
1801             multi = arguments;\r
1802         }\r
1803         // if passed an array or multiple args do them one by one\r
1804         if(multi){\r
1805             for(var i = 0, len = multi.length; i < len; i++) {\r
1806                 this.appendChild(multi[i]);\r
1807             }\r
1808         }else{\r
1809             if(this.fireEvent("beforeappend", this.ownerTree, this, node) === false){\r
1810                 return false;\r
1811             }\r
1812             var index = this.childNodes.length;\r
1813             var oldParent = node.parentNode;\r
1814             // it's a move, make sure we move it cleanly\r
1815             if(oldParent){\r
1816                 if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index) === false){\r
1817                     return false;\r
1818                 }\r
1819                 oldParent.removeChild(node);\r
1820             }\r
1821             index = this.childNodes.length;\r
1822             if(index === 0){\r
1823                 this.setFirstChild(node);\r
1824             }\r
1825             this.childNodes.push(node);\r
1826             node.parentNode = this;\r
1827             var ps = this.childNodes[index-1];\r
1828             if(ps){\r
1829                 node.previousSibling = ps;\r
1830                 ps.nextSibling = node;\r
1831             }else{\r
1832                 node.previousSibling = null;\r
1833             }\r
1834             node.nextSibling = null;\r
1835             this.setLastChild(node);\r
1836             node.setOwnerTree(this.getOwnerTree());\r
1837             this.fireEvent("append", this.ownerTree, this, node, index);\r
1838             if(oldParent){\r
1839                 node.fireEvent("move", this.ownerTree, node, oldParent, this, index);\r
1840             }\r
1841             return node;\r
1842         }\r
1843     },\r
1844 \r
1845     /**\r
1846      * Removes a child node from this node.\r
1847      * @param {Node} node The node to remove\r
1848      * @param {Boolean} destroy <tt>true</tt> to destroy the node upon removal. Defaults to <tt>false</tt>.\r
1849      * @return {Node} The removed node\r
1850      */\r
1851     removeChild : function(node, destroy){\r
1852         var index = this.childNodes.indexOf(node);\r
1853         if(index == -1){\r
1854             return false;\r
1855         }\r
1856         if(this.fireEvent("beforeremove", this.ownerTree, this, node) === false){\r
1857             return false;\r
1858         }\r
1859 \r
1860         // remove it from childNodes collection\r
1861         this.childNodes.splice(index, 1);\r
1862 \r
1863         // update siblings\r
1864         if(node.previousSibling){\r
1865             node.previousSibling.nextSibling = node.nextSibling;\r
1866         }\r
1867         if(node.nextSibling){\r
1868             node.nextSibling.previousSibling = node.previousSibling;\r
1869         }\r
1870 \r
1871         // update child refs\r
1872         if(this.firstChild == node){\r
1873             this.setFirstChild(node.nextSibling);\r
1874         }\r
1875         if(this.lastChild == node){\r
1876             this.setLastChild(node.previousSibling);\r
1877         }\r
1878 \r
1879         node.clear();\r
1880         this.fireEvent("remove", this.ownerTree, this, node);\r
1881         if(destroy){\r
1882             node.destroy();\r
1883         }\r
1884         return node;\r
1885     },\r
1886     \r
1887     // private\r
1888     clear : function(destroy){\r
1889         // clear any references from the node\r
1890         this.setOwnerTree(null, destroy);\r
1891         this.parentNode = this.previousSibling = this.nextSibling = null\r
1892         if(destroy){\r
1893             this.firstChild = this.lastChild = null; \r
1894         }\r
1895     },\r
1896     \r
1897     /**\r
1898      * Destroys the node.\r
1899      */\r
1900     destroy : function(){\r
1901         this.purgeListeners();\r
1902         this.clear(true);  \r
1903         Ext.each(this.childNodes, function(n){\r
1904             n.destroy();\r
1905         });\r
1906         this.childNodes = null;\r
1907     },\r
1908 \r
1909     /**\r
1910      * Inserts the first node before the second node in this nodes childNodes collection.\r
1911      * @param {Node} node The node to insert\r
1912      * @param {Node} refNode The node to insert before (if null the node is appended)\r
1913      * @return {Node} The inserted node\r
1914      */\r
1915     insertBefore : function(node, refNode){\r
1916         if(!refNode){ // like standard Dom, refNode can be null for append\r
1917             return this.appendChild(node);\r
1918         }\r
1919         // nothing to do\r
1920         if(node == refNode){\r
1921             return false;\r
1922         }\r
1923 \r
1924         if(this.fireEvent("beforeinsert", this.ownerTree, this, node, refNode) === false){\r
1925             return false;\r
1926         }\r
1927         var index = this.childNodes.indexOf(refNode);\r
1928         var oldParent = node.parentNode;\r
1929         var refIndex = index;\r
1930 \r
1931         // when moving internally, indexes will change after remove\r
1932         if(oldParent == this && this.childNodes.indexOf(node) < index){\r
1933             refIndex--;\r
1934         }\r
1935 \r
1936         // it's a move, make sure we move it cleanly\r
1937         if(oldParent){\r
1938             if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index, refNode) === false){\r
1939                 return false;\r
1940             }\r
1941             oldParent.removeChild(node);\r
1942         }\r
1943         if(refIndex === 0){\r
1944             this.setFirstChild(node);\r
1945         }\r
1946         this.childNodes.splice(refIndex, 0, node);\r
1947         node.parentNode = this;\r
1948         var ps = this.childNodes[refIndex-1];\r
1949         if(ps){\r
1950             node.previousSibling = ps;\r
1951             ps.nextSibling = node;\r
1952         }else{\r
1953             node.previousSibling = null;\r
1954         }\r
1955         node.nextSibling = refNode;\r
1956         refNode.previousSibling = node;\r
1957         node.setOwnerTree(this.getOwnerTree());\r
1958         this.fireEvent("insert", this.ownerTree, this, node, refNode);\r
1959         if(oldParent){\r
1960             node.fireEvent("move", this.ownerTree, node, oldParent, this, refIndex, refNode);\r
1961         }\r
1962         return node;\r
1963     },\r
1964 \r
1965     /**\r
1966      * Removes this node from its parent\r
1967      * @param {Boolean} destroy <tt>true</tt> to destroy the node upon removal. Defaults to <tt>false</tt>.\r
1968      * @return {Node} this\r
1969      */\r
1970     remove : function(destroy){\r
1971         this.parentNode.removeChild(this, destroy);\r
1972         return this;\r
1973     },\r
1974 \r
1975     /**\r
1976      * Returns the child node at the specified index.\r
1977      * @param {Number} index\r
1978      * @return {Node}\r
1979      */\r
1980     item : function(index){\r
1981         return this.childNodes[index];\r
1982     },\r
1983 \r
1984     /**\r
1985      * Replaces one child node in this node with another.\r
1986      * @param {Node} newChild The replacement node\r
1987      * @param {Node} oldChild The node to replace\r
1988      * @return {Node} The replaced node\r
1989      */\r
1990     replaceChild : function(newChild, oldChild){\r
1991         var s = oldChild ? oldChild.nextSibling : null;\r
1992         this.removeChild(oldChild);\r
1993         this.insertBefore(newChild, s);\r
1994         return oldChild;\r
1995     },\r
1996 \r
1997     /**\r
1998      * Returns the index of a child node\r
1999      * @param {Node} node\r
2000      * @return {Number} The index of the node or -1 if it was not found\r
2001      */\r
2002     indexOf : function(child){\r
2003         return this.childNodes.indexOf(child);\r
2004     },\r
2005 \r
2006     /**\r
2007      * Returns the tree this node is in.\r
2008      * @return {Tree}\r
2009      */\r
2010     getOwnerTree : function(){\r
2011         // if it doesn't have one, look for one\r
2012         if(!this.ownerTree){\r
2013             var p = this;\r
2014             while(p){\r
2015                 if(p.ownerTree){\r
2016                     this.ownerTree = p.ownerTree;\r
2017                     break;\r
2018                 }\r
2019                 p = p.parentNode;\r
2020             }\r
2021         }\r
2022         return this.ownerTree;\r
2023     },\r
2024 \r
2025     /**\r
2026      * Returns depth of this node (the root node has a depth of 0)\r
2027      * @return {Number}\r
2028      */\r
2029     getDepth : function(){\r
2030         var depth = 0;\r
2031         var p = this;\r
2032         while(p.parentNode){\r
2033             ++depth;\r
2034             p = p.parentNode;\r
2035         }\r
2036         return depth;\r
2037     },\r
2038 \r
2039     // private\r
2040     setOwnerTree : function(tree, destroy){\r
2041         // if it is a move, we need to update everyone\r
2042         if(tree != this.ownerTree){\r
2043             if(this.ownerTree){\r
2044                 this.ownerTree.unregisterNode(this);\r
2045             }\r
2046             this.ownerTree = tree;\r
2047             // If we're destroying, we don't need to recurse since it will be called on each child node\r
2048             if(destroy !== true){\r
2049                 Ext.each(this.childNodes, function(n){\r
2050                     n.setOwnerTree(tree);\r
2051                 });\r
2052             }\r
2053             if(tree){\r
2054                 tree.registerNode(this);\r
2055             }\r
2056         }\r
2057     },\r
2058     \r
2059     /**\r
2060      * Changes the id of this node.\r
2061      * @param {String} id The new id for the node.\r
2062      */\r
2063     setId: function(id){\r
2064         if(id !== this.id){\r
2065             var t = this.ownerTree;\r
2066             if(t){\r
2067                 t.unregisterNode(this);\r
2068             }\r
2069             this.id = this.attributes.id = id;\r
2070             if(t){\r
2071                 t.registerNode(this);\r
2072             }\r
2073             this.onIdChange(id);\r
2074         }\r
2075     },\r
2076     \r
2077     // private\r
2078     onIdChange: Ext.emptyFn,\r
2079 \r
2080     /**\r
2081      * Returns the path for this node. The path can be used to expand or select this node programmatically.\r
2082      * @param {String} attr (optional) The attr to use for the path (defaults to the node's id)\r
2083      * @return {String} The path\r
2084      */\r
2085     getPath : function(attr){\r
2086         attr = attr || "id";\r
2087         var p = this.parentNode;\r
2088         var b = [this.attributes[attr]];\r
2089         while(p){\r
2090             b.unshift(p.attributes[attr]);\r
2091             p = p.parentNode;\r
2092         }\r
2093         var sep = this.getOwnerTree().pathSeparator;\r
2094         return sep + b.join(sep);\r
2095     },\r
2096 \r
2097     /**\r
2098      * Bubbles up the tree from this node, calling the specified function with each node. The arguments to the function\r
2099      * will be the args provided or the current node. If the function returns false at any point,\r
2100      * the bubble is stopped.\r
2101      * @param {Function} fn The function to call\r
2102      * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the current Node.\r
2103      * @param {Array} args (optional) The args to call the function with (default to passing the current Node)\r
2104      */\r
2105     bubble : function(fn, scope, args){\r
2106         var p = this;\r
2107         while(p){\r
2108             if(fn.apply(scope || p, args || [p]) === false){\r
2109                 break;\r
2110             }\r
2111             p = p.parentNode;\r
2112         }\r
2113     },\r
2114 \r
2115     /**\r
2116      * Cascades down the tree from this node, calling the specified function with each node. The arguments to the function\r
2117      * will be the args provided or the current node. If the function returns false at any point,\r
2118      * the cascade is stopped on that branch.\r
2119      * @param {Function} fn The function to call\r
2120      * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the current Node.\r
2121      * @param {Array} args (optional) The args to call the function with (default to passing the current Node)\r
2122      */\r
2123     cascade : function(fn, scope, args){\r
2124         if(fn.apply(scope || this, args || [this]) !== false){\r
2125             var cs = this.childNodes;\r
2126             for(var i = 0, len = cs.length; i < len; i++) {\r
2127                 cs[i].cascade(fn, scope, args);\r
2128             }\r
2129         }\r
2130     },\r
2131 \r
2132     /**\r
2133      * Interates the child nodes of this node, calling the specified function with each node. The arguments to the function\r
2134      * will be the args provided or the current node. If the function returns false at any point,\r
2135      * the iteration stops.\r
2136      * @param {Function} fn The function to call\r
2137      * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the current Node in the iteration.\r
2138      * @param {Array} args (optional) The args to call the function with (default to passing the current Node)\r
2139      */\r
2140     eachChild : function(fn, scope, args){\r
2141         var cs = this.childNodes;\r
2142         for(var i = 0, len = cs.length; i < len; i++) {\r
2143                 if(fn.apply(scope || this, args || [cs[i]]) === false){\r
2144                     break;\r
2145                 }\r
2146         }\r
2147     },\r
2148 \r
2149     /**\r
2150      * Finds the first child that has the attribute with the specified value.\r
2151      * @param {String} attribute The attribute name\r
2152      * @param {Mixed} value The value to search for\r
2153      * @return {Node} The found child or null if none was found\r
2154      */\r
2155     findChild : function(attribute, value){\r
2156         var cs = this.childNodes;\r
2157         for(var i = 0, len = cs.length; i < len; i++) {\r
2158                 if(cs[i].attributes[attribute] == value){\r
2159                     return cs[i];\r
2160                 }\r
2161         }\r
2162         return null;\r
2163     },\r
2164 \r
2165     /**\r
2166      * Finds the first child by a custom function. The child matches if the function passed returns <code>true</code>.\r
2167      * @param {Function} fn A function which must return <code>true</code> if the passed Node is the required Node.\r
2168      * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the Node being tested.\r
2169      * @return {Node} The found child or null if none was found\r
2170      */\r
2171     findChildBy : function(fn, scope){\r
2172         var cs = this.childNodes;\r
2173         for(var i = 0, len = cs.length; i < len; i++) {\r
2174                 if(fn.call(scope||cs[i], cs[i]) === true){\r
2175                     return cs[i];\r
2176                 }\r
2177         }\r
2178         return null;\r
2179     },\r
2180 \r
2181     /**\r
2182      * Sorts this nodes children using the supplied sort function.\r
2183      * @param {Function} fn A function which, when passed two Nodes, returns -1, 0 or 1 depending upon required sort order.\r
2184      * @param {Object} scope (optional)The scope (<code>this</code> reference) in which the function is executed. Defaults to the browser window.\r
2185      */\r
2186     sort : function(fn, scope){\r
2187         var cs = this.childNodes;\r
2188         var len = cs.length;\r
2189         if(len > 0){\r
2190             var sortFn = scope ? function(){fn.apply(scope, arguments);} : fn;\r
2191             cs.sort(sortFn);\r
2192             for(var i = 0; i < len; i++){\r
2193                 var n = cs[i];\r
2194                 n.previousSibling = cs[i-1];\r
2195                 n.nextSibling = cs[i+1];\r
2196                 if(i === 0){\r
2197                     this.setFirstChild(n);\r
2198                 }\r
2199                 if(i == len-1){\r
2200                     this.setLastChild(n);\r
2201                 }\r
2202             }\r
2203         }\r
2204     },\r
2205 \r
2206     /**\r
2207      * Returns true if this node is an ancestor (at any point) of the passed node.\r
2208      * @param {Node} node\r
2209      * @return {Boolean}\r
2210      */\r
2211     contains : function(node){\r
2212         return node.isAncestor(this);\r
2213     },\r
2214 \r
2215     /**\r
2216      * Returns true if the passed node is an ancestor (at any point) of this node.\r
2217      * @param {Node} node\r
2218      * @return {Boolean}\r
2219      */\r
2220     isAncestor : function(node){\r
2221         var p = this.parentNode;\r
2222         while(p){\r
2223             if(p == node){\r
2224                 return true;\r
2225             }\r
2226             p = p.parentNode;\r
2227         }\r
2228         return false;\r
2229     },\r
2230 \r
2231     toString : function(){\r
2232         return "[Node"+(this.id?" "+this.id:"")+"]";\r
2233     }\r
2234 });/**\r
2235  * @class Ext.tree.TreeNode\r
2236  * @extends Ext.data.Node\r
2237  * @cfg {String} text The text for this node\r
2238  * @cfg {Boolean} expanded true to start the node expanded\r
2239  * @cfg {Boolean} allowDrag False to make this node undraggable if {@link #draggable} = true (defaults to true)\r
2240  * @cfg {Boolean} allowDrop False if this node cannot have child nodes dropped on it (defaults to true)\r
2241  * @cfg {Boolean} disabled true to start the node disabled\r
2242  * @cfg {String} icon The path to an icon for the node. The preferred way to do this\r
2243  * is to use the cls or iconCls attributes and add the icon via a CSS background image.\r
2244  * @cfg {String} cls A css class to be added to the node\r
2245  * @cfg {String} iconCls A css class to be added to the nodes icon element for applying css background images\r
2246  * @cfg {String} href URL of the link used for the node (defaults to #)\r
2247  * @cfg {String} hrefTarget target frame for the link\r
2248  * @cfg {Boolean} hidden True to render hidden. (Defaults to false).\r
2249  * @cfg {String} qtip An Ext QuickTip for the node\r
2250  * @cfg {Boolean} expandable If set to true, the node will always show a plus/minus icon, even when empty\r
2251  * @cfg {String} qtipCfg An Ext QuickTip config for the node (used instead of qtip)\r
2252  * @cfg {Boolean} singleClickExpand True for single click expand on this node\r
2253  * @cfg {Function} uiProvider A UI <b>class</b> to use for this node (defaults to Ext.tree.TreeNodeUI)\r
2254  * @cfg {Boolean} checked True to render a checked checkbox for this node, false to render an unchecked checkbox\r
2255  * (defaults to undefined with no checkbox rendered)\r
2256  * @cfg {Boolean} draggable True to make this node draggable (defaults to false)\r
2257  * @cfg {Boolean} isTarget False to not allow this node to act as a drop target (defaults to true)\r
2258  * @cfg {Boolean} allowChildren False to not allow this node to have child nodes (defaults to true)\r
2259  * @cfg {Boolean} editable False to not allow this node to be edited by an {@link Ext.tree.TreeEditor} (defaults to true)\r
2260  * @constructor\r
2261  * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node\r
2262  */\r
2263 Ext.tree.TreeNode = function(attributes){\r
2264     attributes = attributes || {};\r
2265     if(Ext.isString(attributes)){\r
2266         attributes = {text: attributes};\r
2267     }\r
2268     this.childrenRendered = false;\r
2269     this.rendered = false;\r
2270     Ext.tree.TreeNode.superclass.constructor.call(this, attributes);\r
2271     this.expanded = attributes.expanded === true;\r
2272     this.isTarget = attributes.isTarget !== false;\r
2273     this.draggable = attributes.draggable !== false && attributes.allowDrag !== false;\r
2274     this.allowChildren = attributes.allowChildren !== false && attributes.allowDrop !== false;\r
2275 \r
2276     /**\r
2277      * Read-only. The text for this node. To change it use <code>{@link #setText}</code>.\r
2278      * @type String\r
2279      */\r
2280     this.text = attributes.text;\r
2281     /**\r
2282      * True if this node is disabled.\r
2283      * @type Boolean\r
2284      */\r
2285     this.disabled = attributes.disabled === true;\r
2286     /**\r
2287      * True if this node is hidden.\r
2288      * @type Boolean\r
2289      */\r
2290     this.hidden = attributes.hidden === true;\r
2291 \r
2292     this.addEvents(\r
2293         /**\r
2294         * @event textchange\r
2295         * Fires when the text for this node is changed\r
2296         * @param {Node} this This node\r
2297         * @param {String} text The new text\r
2298         * @param {String} oldText The old text\r
2299         */\r
2300         'textchange',\r
2301         /**\r
2302         * @event beforeexpand\r
2303         * Fires before this node is expanded, return false to cancel.\r
2304         * @param {Node} this This node\r
2305         * @param {Boolean} deep\r
2306         * @param {Boolean} anim\r
2307         */\r
2308         'beforeexpand',\r
2309         /**\r
2310         * @event beforecollapse\r
2311         * Fires before this node is collapsed, return false to cancel.\r
2312         * @param {Node} this This node\r
2313         * @param {Boolean} deep\r
2314         * @param {Boolean} anim\r
2315         */\r
2316         'beforecollapse',\r
2317         /**\r
2318         * @event expand\r
2319         * Fires when this node is expanded\r
2320         * @param {Node} this This node\r
2321         */\r
2322         'expand',\r
2323         /**\r
2324         * @event disabledchange\r
2325         * Fires when the disabled status of this node changes\r
2326         * @param {Node} this This node\r
2327         * @param {Boolean} disabled\r
2328         */\r
2329         'disabledchange',\r
2330         /**\r
2331         * @event collapse\r
2332         * Fires when this node is collapsed\r
2333         * @param {Node} this This node\r
2334         */\r
2335         'collapse',\r
2336         /**\r
2337         * @event beforeclick\r
2338         * Fires before click processing. Return false to cancel the default action.\r
2339         * @param {Node} this This node\r
2340         * @param {Ext.EventObject} e The event object\r
2341         */\r
2342         'beforeclick',\r
2343         /**\r
2344         * @event click\r
2345         * Fires when this node is clicked\r
2346         * @param {Node} this This node\r
2347         * @param {Ext.EventObject} e The event object\r
2348         */\r
2349         'click',\r
2350         /**\r
2351         * @event checkchange\r
2352         * Fires when a node with a checkbox's checked property changes\r
2353         * @param {Node} this This node\r
2354         * @param {Boolean} checked\r
2355         */\r
2356         'checkchange',\r
2357         /**\r
2358         * @event beforedblclick\r
2359         * Fires before double click processing. Return false to cancel the default action.\r
2360         * @param {Node} this This node\r
2361         * @param {Ext.EventObject} e The event object\r
2362         */\r
2363         'beforedblclick',\r
2364         /**\r
2365         * @event dblclick\r
2366         * Fires when this node is double clicked\r
2367         * @param {Node} this This node\r
2368         * @param {Ext.EventObject} e The event object\r
2369         */\r
2370         'dblclick',\r
2371         /**\r
2372         * @event contextmenu\r
2373         * Fires when this node is right clicked\r
2374         * @param {Node} this This node\r
2375         * @param {Ext.EventObject} e The event object\r
2376         */\r
2377         'contextmenu',\r
2378         /**\r
2379         * @event beforechildrenrendered\r
2380         * Fires right before the child nodes for this node are rendered\r
2381         * @param {Node} this This node\r
2382         */\r
2383         'beforechildrenrendered'\r
2384     );\r
2385 \r
2386     var uiClass = this.attributes.uiProvider || this.defaultUI || Ext.tree.TreeNodeUI;\r
2387 \r
2388     /**\r
2389      * Read-only. The UI for this node\r
2390      * @type TreeNodeUI\r
2391      */\r
2392     this.ui = new uiClass(this);\r
2393 };\r
2394 Ext.extend(Ext.tree.TreeNode, Ext.data.Node, {\r
2395     preventHScroll : true,\r
2396     /**\r
2397      * Returns true if this node is expanded\r
2398      * @return {Boolean}\r
2399      */\r
2400     isExpanded : function(){\r
2401         return this.expanded;\r
2402     },\r
2403 \r
2404 /**\r
2405  * Returns the UI object for this node.\r
2406  * @return {TreeNodeUI} The object which is providing the user interface for this tree\r
2407  * node. Unless otherwise specified in the {@link #uiProvider}, this will be an instance\r
2408  * of {@link Ext.tree.TreeNodeUI}\r
2409  */\r
2410     getUI : function(){\r
2411         return this.ui;\r
2412     },\r
2413 \r
2414     getLoader : function(){\r
2415         var owner;\r
2416         return this.loader || ((owner = this.getOwnerTree()) && owner.loader ? owner.loader : (this.loader = new Ext.tree.TreeLoader()));\r
2417     },\r
2418 \r
2419     // private override\r
2420     setFirstChild : function(node){\r
2421         var of = this.firstChild;\r
2422         Ext.tree.TreeNode.superclass.setFirstChild.call(this, node);\r
2423         if(this.childrenRendered && of && node != of){\r
2424             of.renderIndent(true, true);\r
2425         }\r
2426         if(this.rendered){\r
2427             this.renderIndent(true, true);\r
2428         }\r
2429     },\r
2430 \r
2431     // private override\r
2432     setLastChild : function(node){\r
2433         var ol = this.lastChild;\r
2434         Ext.tree.TreeNode.superclass.setLastChild.call(this, node);\r
2435         if(this.childrenRendered && ol && node != ol){\r
2436             ol.renderIndent(true, true);\r
2437         }\r
2438         if(this.rendered){\r
2439             this.renderIndent(true, true);\r
2440         }\r
2441     },\r
2442 \r
2443     // these methods are overridden to provide lazy rendering support\r
2444     // private override\r
2445     appendChild : function(n){\r
2446         if(!n.render && !Ext.isArray(n)){\r
2447             n = this.getLoader().createNode(n);\r
2448         }\r
2449         var node = Ext.tree.TreeNode.superclass.appendChild.call(this, n);\r
2450         if(node && this.childrenRendered){\r
2451             node.render();\r
2452         }\r
2453         this.ui.updateExpandIcon();\r
2454         return node;\r
2455     },\r
2456 \r
2457     // private override\r
2458     removeChild : function(node, destroy){\r
2459         this.ownerTree.getSelectionModel().unselect(node);\r
2460         Ext.tree.TreeNode.superclass.removeChild.apply(this, arguments);\r
2461         // if it's been rendered remove dom node\r
2462         if(node.ui.rendered){\r
2463             node.ui.remove();\r
2464         }\r
2465         if(this.childNodes.length < 1){\r
2466             this.collapse(false, false);\r
2467         }else{\r
2468             this.ui.updateExpandIcon();\r
2469         }\r
2470         if(!this.firstChild && !this.isHiddenRoot()) {\r
2471             this.childrenRendered = false;\r
2472         }\r
2473         return node;\r
2474     },\r
2475 \r
2476     // private override\r
2477     insertBefore : function(node, refNode){\r
2478         if(!node.render){\r
2479             node = this.getLoader().createNode(node);\r
2480         }\r
2481         var newNode = Ext.tree.TreeNode.superclass.insertBefore.call(this, node, refNode);\r
2482         if(newNode && refNode && this.childrenRendered){\r
2483             node.render();\r
2484         }\r
2485         this.ui.updateExpandIcon();\r
2486         return newNode;\r
2487     },\r
2488 \r
2489     /**\r
2490      * Sets the text for this node\r
2491      * @param {String} text\r
2492      */\r
2493     setText : function(text){\r
2494         var oldText = this.text;\r
2495         this.text = this.attributes.text = text;\r
2496         if(this.rendered){ // event without subscribing\r
2497             this.ui.onTextChange(this, text, oldText);\r
2498         }\r
2499         this.fireEvent('textchange', this, text, oldText);\r
2500     },\r
2501 \r
2502     /**\r
2503      * Triggers selection of this node\r
2504      */\r
2505     select : function(){\r
2506         var t = this.getOwnerTree();\r
2507         if(t){\r
2508             t.getSelectionModel().select(this);\r
2509         }\r
2510     },\r
2511 \r
2512     /**\r
2513      * Triggers deselection of this node\r
2514      * @param {Boolean} silent (optional) True to stop selection change events from firing.\r
2515      */\r
2516     unselect : function(silent){\r
2517         var t = this.getOwnerTree();\r
2518         if(t){\r
2519             t.getSelectionModel().unselect(this, silent);\r
2520         }\r
2521     },\r
2522 \r
2523     /**\r
2524      * Returns true if this node is selected\r
2525      * @return {Boolean}\r
2526      */\r
2527     isSelected : function(){\r
2528         var t = this.getOwnerTree();\r
2529         return t ? t.getSelectionModel().isSelected(this) : false;\r
2530     },\r
2531 \r
2532     /**\r
2533      * Expand this node.\r
2534      * @param {Boolean} deep (optional) True to expand all children as well\r
2535      * @param {Boolean} anim (optional) false to cancel the default animation\r
2536      * @param {Function} callback (optional) A callback to be called when\r
2537      * expanding this node completes (does not wait for deep expand to complete).\r
2538      * Called with 1 parameter, this node.\r
2539      * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the callback is executed. Defaults to this TreeNode.\r
2540      */\r
2541     expand : function(deep, anim, callback, scope){\r
2542         if(!this.expanded){\r
2543             if(this.fireEvent('beforeexpand', this, deep, anim) === false){\r
2544                 return;\r
2545             }\r
2546             if(!this.childrenRendered){\r
2547                 this.renderChildren();\r
2548             }\r
2549             this.expanded = true;\r
2550             if(!this.isHiddenRoot() && (this.getOwnerTree().animate && anim !== false) || anim){\r
2551                 this.ui.animExpand(function(){\r
2552                     this.fireEvent('expand', this);\r
2553                     this.runCallback(callback, scope || this, [this]);\r
2554                     if(deep === true){\r
2555                         this.expandChildNodes(true);\r
2556                     }\r
2557                 }.createDelegate(this));\r
2558                 return;\r
2559             }else{\r
2560                 this.ui.expand();\r
2561                 this.fireEvent('expand', this);\r
2562                 this.runCallback(callback, scope || this, [this]);\r
2563             }\r
2564         }else{\r
2565            this.runCallback(callback, scope || this, [this]);\r
2566         }\r
2567         if(deep === true){\r
2568             this.expandChildNodes(true);\r
2569         }\r
2570     },\r
2571 \r
2572     runCallback : function(cb, scope, args){\r
2573         if(Ext.isFunction(cb)){\r
2574             cb.apply(scope, args);\r
2575         }\r
2576     },\r
2577 \r
2578     isHiddenRoot : function(){\r
2579         return this.isRoot && !this.getOwnerTree().rootVisible;\r
2580     },\r
2581 \r
2582     /**\r
2583      * Collapse this node.\r
2584      * @param {Boolean} deep (optional) True to collapse all children as well\r
2585      * @param {Boolean} anim (optional) false to cancel the default animation\r
2586      * @param {Function} callback (optional) A callback to be called when\r
2587      * expanding this node completes (does not wait for deep expand to complete).\r
2588      * Called with 1 parameter, this node.\r
2589      * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the callback is executed. Defaults to this TreeNode.\r
2590      */\r
2591     collapse : function(deep, anim, callback, scope){\r
2592         if(this.expanded && !this.isHiddenRoot()){\r
2593             if(this.fireEvent('beforecollapse', this, deep, anim) === false){\r
2594                 return;\r
2595             }\r
2596             this.expanded = false;\r
2597             if((this.getOwnerTree().animate && anim !== false) || anim){\r
2598                 this.ui.animCollapse(function(){\r
2599                     this.fireEvent('collapse', this);\r
2600                     this.runCallback(callback, scope || this, [this]);\r
2601                     if(deep === true){\r
2602                         this.collapseChildNodes(true);\r
2603                     }\r
2604                 }.createDelegate(this));\r
2605                 return;\r
2606             }else{\r
2607                 this.ui.collapse();\r
2608                 this.fireEvent('collapse', this);\r
2609                 this.runCallback(callback, scope || this, [this]);\r
2610             }\r
2611         }else if(!this.expanded){\r
2612             this.runCallback(callback, scope || this, [this]);\r
2613         }\r
2614         if(deep === true){\r
2615             var cs = this.childNodes;\r
2616             for(var i = 0, len = cs.length; i < len; i++) {\r
2617                 cs[i].collapse(true, false);\r
2618             }\r
2619         }\r
2620     },\r
2621 \r
2622     // private\r
2623     delayedExpand : function(delay){\r
2624         if(!this.expandProcId){\r
2625             this.expandProcId = this.expand.defer(delay, this);\r
2626         }\r
2627     },\r
2628 \r
2629     // private\r
2630     cancelExpand : function(){\r
2631         if(this.expandProcId){\r
2632             clearTimeout(this.expandProcId);\r
2633         }\r
2634         this.expandProcId = false;\r
2635     },\r
2636 \r
2637     /**\r
2638      * Toggles expanded/collapsed state of the node\r
2639      */\r
2640     toggle : function(){\r
2641         if(this.expanded){\r
2642             this.collapse();\r
2643         }else{\r
2644             this.expand();\r
2645         }\r
2646     },\r
2647 \r
2648     /**\r
2649      * Ensures all parent nodes are expanded, and if necessary, scrolls\r
2650      * the node into view.\r
2651      * @param {Function} callback (optional) A function to call when the node has been made visible.\r
2652      * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the callback is executed. Defaults to this TreeNode.\r
2653      */\r
2654     ensureVisible : function(callback, scope){\r
2655         var tree = this.getOwnerTree();\r
2656         tree.expandPath(this.parentNode ? this.parentNode.getPath() : this.getPath(), false, function(){\r
2657             var node = tree.getNodeById(this.id);  // Somehow if we don't do this, we lose changes that happened to node in the meantime\r
2658             tree.getTreeEl().scrollChildIntoView(node.ui.anchor);\r
2659             this.runCallback(callback, scope || this, [this]);\r
2660         }.createDelegate(this));\r
2661     },\r
2662 \r
2663     /**\r
2664      * Expand all child nodes\r
2665      * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes\r
2666      */\r
2667     expandChildNodes : function(deep){\r
2668         var cs = this.childNodes;\r
2669         for(var i = 0, len = cs.length; i < len; i++) {\r
2670                 cs[i].expand(deep);\r
2671         }\r
2672     },\r
2673 \r
2674     /**\r
2675      * Collapse all child nodes\r
2676      * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes\r
2677      */\r
2678     collapseChildNodes : function(deep){\r
2679         var cs = this.childNodes;\r
2680         for(var i = 0, len = cs.length; i < len; i++) {\r
2681                 cs[i].collapse(deep);\r
2682         }\r
2683     },\r
2684 \r
2685     /**\r
2686      * Disables this node\r
2687      */\r
2688     disable : function(){\r
2689         this.disabled = true;\r
2690         this.unselect();\r
2691         if(this.rendered && this.ui.onDisableChange){ // event without subscribing\r
2692             this.ui.onDisableChange(this, true);\r
2693         }\r
2694         this.fireEvent('disabledchange', this, true);\r
2695     },\r
2696 \r
2697     /**\r
2698      * Enables this node\r
2699      */\r
2700     enable : function(){\r
2701         this.disabled = false;\r
2702         if(this.rendered && this.ui.onDisableChange){ // event without subscribing\r
2703             this.ui.onDisableChange(this, false);\r
2704         }\r
2705         this.fireEvent('disabledchange', this, false);\r
2706     },\r
2707 \r
2708     // private\r
2709     renderChildren : function(suppressEvent){\r
2710         if(suppressEvent !== false){\r
2711             this.fireEvent('beforechildrenrendered', this);\r
2712         }\r
2713         var cs = this.childNodes;\r
2714         for(var i = 0, len = cs.length; i < len; i++){\r
2715             cs[i].render(true);\r
2716         }\r
2717         this.childrenRendered = true;\r
2718     },\r
2719 \r
2720     // private\r
2721     sort : function(fn, scope){\r
2722         Ext.tree.TreeNode.superclass.sort.apply(this, arguments);\r
2723         if(this.childrenRendered){\r
2724             var cs = this.childNodes;\r
2725             for(var i = 0, len = cs.length; i < len; i++){\r
2726                 cs[i].render(true);\r
2727             }\r
2728         }\r
2729     },\r
2730 \r
2731     // private\r
2732     render : function(bulkRender){\r
2733         this.ui.render(bulkRender);\r
2734         if(!this.rendered){\r
2735             // make sure it is registered\r
2736             this.getOwnerTree().registerNode(this);\r
2737             this.rendered = true;\r
2738             if(this.expanded){\r
2739                 this.expanded = false;\r
2740                 this.expand(false, false);\r
2741             }\r
2742         }\r
2743     },\r
2744 \r
2745     // private\r
2746     renderIndent : function(deep, refresh){\r
2747         if(refresh){\r
2748             this.ui.childIndent = null;\r
2749         }\r
2750         this.ui.renderIndent();\r
2751         if(deep === true && this.childrenRendered){\r
2752             var cs = this.childNodes;\r
2753             for(var i = 0, len = cs.length; i < len; i++){\r
2754                 cs[i].renderIndent(true, refresh);\r
2755             }\r
2756         }\r
2757     },\r
2758 \r
2759     beginUpdate : function(){\r
2760         this.childrenRendered = false;\r
2761     },\r
2762 \r
2763     endUpdate : function(){\r
2764         if(this.expanded && this.rendered){\r
2765             this.renderChildren();\r
2766         }\r
2767     },\r
2768 \r
2769     destroy : function(){\r
2770         this.unselect(true);\r
2771         Ext.tree.TreeNode.superclass.destroy.call(this);\r
2772         Ext.destroy(this.ui, this.loader);\r
2773         this.ui = this.loader = null;\r
2774     },\r
2775 \r
2776     // private\r
2777     onIdChange : function(id){\r
2778         this.ui.onIdChange(id);\r
2779     }\r
2780 });\r
2781 \r
2782 Ext.tree.TreePanel.nodeTypes.node = Ext.tree.TreeNode;/**\r
2783  * @class Ext.tree.AsyncTreeNode\r
2784  * @extends Ext.tree.TreeNode\r
2785  * @cfg {TreeLoader} loader A TreeLoader to be used by this node (defaults to the loader defined on the tree)\r
2786  * @constructor\r
2787  * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node \r
2788  */\r
2789  Ext.tree.AsyncTreeNode = function(config){\r
2790     this.loaded = config && config.loaded === true;\r
2791     this.loading = false;\r
2792     Ext.tree.AsyncTreeNode.superclass.constructor.apply(this, arguments);\r
2793     /**\r
2794     * @event beforeload\r
2795     * Fires before this node is loaded, return false to cancel\r
2796     * @param {Node} this This node\r
2797     */\r
2798     this.addEvents('beforeload', 'load');\r
2799     /**\r
2800     * @event load\r
2801     * Fires when this node is loaded\r
2802     * @param {Node} this This node\r
2803     */\r
2804     /**\r
2805      * The loader used by this node (defaults to using the tree's defined loader)\r
2806      * @type TreeLoader\r
2807      * @property loader\r
2808      */\r
2809 };\r
2810 Ext.extend(Ext.tree.AsyncTreeNode, Ext.tree.TreeNode, {\r
2811     expand : function(deep, anim, callback, scope){\r
2812         if(this.loading){ // if an async load is already running, waiting til it's done\r
2813             var timer;\r
2814             var f = function(){\r
2815                 if(!this.loading){ // done loading\r
2816                     clearInterval(timer);\r
2817                     this.expand(deep, anim, callback, scope);\r
2818                 }\r
2819             }.createDelegate(this);\r
2820             timer = setInterval(f, 200);\r
2821             return;\r
2822         }\r
2823         if(!this.loaded){\r
2824             if(this.fireEvent("beforeload", this) === false){\r
2825                 return;\r
2826             }\r
2827             this.loading = true;\r
2828             this.ui.beforeLoad(this);\r
2829             var loader = this.loader || this.attributes.loader || this.getOwnerTree().getLoader();\r
2830             if(loader){\r
2831                 loader.load(this, this.loadComplete.createDelegate(this, [deep, anim, callback, scope]), this);\r
2832                 return;\r
2833             }\r
2834         }\r
2835         Ext.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback, scope);\r
2836     },\r
2837     \r
2838     /**\r
2839      * Returns true if this node is currently loading\r
2840      * @return {Boolean}\r
2841      */\r
2842     isLoading : function(){\r
2843         return this.loading;  \r
2844     },\r
2845     \r
2846     loadComplete : function(deep, anim, callback, scope){\r
2847         this.loading = false;\r
2848         this.loaded = true;\r
2849         this.ui.afterLoad(this);\r
2850         this.fireEvent("load", this);\r
2851         this.expand(deep, anim, callback, scope);\r
2852     },\r
2853     \r
2854     /**\r
2855      * Returns true if this node has been loaded\r
2856      * @return {Boolean}\r
2857      */\r
2858     isLoaded : function(){\r
2859         return this.loaded;\r
2860     },\r
2861     \r
2862     hasChildNodes : function(){\r
2863         if(!this.isLeaf() && !this.loaded){\r
2864             return true;\r
2865         }else{\r
2866             return Ext.tree.AsyncTreeNode.superclass.hasChildNodes.call(this);\r
2867         }\r
2868     },\r
2869 \r
2870     /**\r
2871      * Trigger a reload for this node\r
2872      * @param {Function} callback\r
2873      * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the callback is executed. Defaults to this Node.\r
2874      */\r
2875     reload : function(callback, scope){\r
2876         this.collapse(false, false);\r
2877         while(this.firstChild){\r
2878             this.removeChild(this.firstChild).destroy();\r
2879         }\r
2880         this.childrenRendered = false;\r
2881         this.loaded = false;\r
2882         if(this.isHiddenRoot()){\r
2883             this.expanded = false;\r
2884         }\r
2885         this.expand(false, false, callback, scope);\r
2886     }\r
2887 });\r
2888 \r
2889 Ext.tree.TreePanel.nodeTypes.async = Ext.tree.AsyncTreeNode;/**\r
2890  * @class Ext.tree.TreeNodeUI\r
2891  * This class provides the default UI implementation for Ext TreeNodes.\r
2892  * The TreeNode UI implementation is separate from the\r
2893  * tree implementation, and allows customizing of the appearance of\r
2894  * tree nodes.<br>\r
2895  * <p>\r
2896  * If you are customizing the Tree's user interface, you\r
2897  * may need to extend this class, but you should never need to instantiate this class.<br>\r
2898  * <p>\r
2899  * This class provides access to the user interface components of an Ext TreeNode, through\r
2900  * {@link Ext.tree.TreeNode#getUI}\r
2901  */\r
2902 Ext.tree.TreeNodeUI = function(node){\r
2903     this.node = node;\r
2904     this.rendered = false;\r
2905     this.animating = false;\r
2906     this.wasLeaf = true;\r
2907     this.ecc = 'x-tree-ec-icon x-tree-elbow';\r
2908     this.emptyIcon = Ext.BLANK_IMAGE_URL;\r
2909 };\r
2910 \r
2911 Ext.tree.TreeNodeUI.prototype = {\r
2912     // private\r
2913     removeChild : function(node){\r
2914         if(this.rendered){\r
2915             this.ctNode.removeChild(node.ui.getEl());\r
2916         } \r
2917     },\r
2918 \r
2919     // private\r
2920     beforeLoad : function(){\r
2921          this.addClass("x-tree-node-loading");\r
2922     },\r
2923 \r
2924     // private\r
2925     afterLoad : function(){\r
2926          this.removeClass("x-tree-node-loading");\r
2927     },\r
2928 \r
2929     // private\r
2930     onTextChange : function(node, text, oldText){\r
2931         if(this.rendered){\r
2932             this.textNode.innerHTML = text;\r
2933         }\r
2934     },\r
2935 \r
2936     // private\r
2937     onDisableChange : function(node, state){\r
2938         this.disabled = state;\r
2939         if (this.checkbox) {\r
2940             this.checkbox.disabled = state;\r
2941         }        \r
2942         if(state){\r
2943             this.addClass("x-tree-node-disabled");\r
2944         }else{\r
2945             this.removeClass("x-tree-node-disabled");\r
2946         } \r
2947     },\r
2948 \r
2949     // private\r
2950     onSelectedChange : function(state){\r
2951         if(state){\r
2952             this.focus();\r
2953             this.addClass("x-tree-selected");\r
2954         }else{\r
2955             //this.blur();\r
2956             this.removeClass("x-tree-selected");\r
2957         }\r
2958     },\r
2959 \r
2960     // private\r
2961     onMove : function(tree, node, oldParent, newParent, index, refNode){\r
2962         this.childIndent = null;\r
2963         if(this.rendered){\r
2964             var targetNode = newParent.ui.getContainer();\r
2965             if(!targetNode){//target not rendered\r
2966                 this.holder = document.createElement("div");\r
2967                 this.holder.appendChild(this.wrap);\r
2968                 return;\r
2969             }\r
2970             var insertBefore = refNode ? refNode.ui.getEl() : null;\r
2971             if(insertBefore){\r
2972                 targetNode.insertBefore(this.wrap, insertBefore);\r
2973             }else{\r
2974                 targetNode.appendChild(this.wrap);\r
2975             }\r
2976             this.node.renderIndent(true, oldParent != newParent);\r
2977         }\r
2978     },\r
2979 \r
2980 /**\r
2981  * Adds one or more CSS classes to the node's UI element.\r
2982  * Duplicate classes are automatically filtered out.\r
2983  * @param {String/Array} className The CSS class to add, or an array of classes\r
2984  */\r
2985     addClass : function(cls){\r
2986         if(this.elNode){\r
2987             Ext.fly(this.elNode).addClass(cls);\r
2988         }\r
2989     },\r
2990 \r
2991 /**\r
2992  * Removes one or more CSS classes from the node's UI element.\r
2993  * @param {String/Array} className The CSS class to remove, or an array of classes\r
2994  */\r
2995     removeClass : function(cls){\r
2996         if(this.elNode){\r
2997             Ext.fly(this.elNode).removeClass(cls);  \r
2998         }\r
2999     },\r
3000 \r
3001     // private\r
3002     remove : function(){\r
3003         if(this.rendered){\r
3004             this.holder = document.createElement("div");\r
3005             this.holder.appendChild(this.wrap);\r
3006         }  \r
3007     },\r
3008 \r
3009     // private\r
3010     fireEvent : function(){\r
3011         return this.node.fireEvent.apply(this.node, arguments);  \r
3012     },\r
3013 \r
3014     // private\r
3015     initEvents : function(){\r
3016         this.node.on("move", this.onMove, this);\r
3017 \r
3018         if(this.node.disabled){\r
3019             this.onDisableChange(this.node, true);            \r
3020         }\r
3021         if(this.node.hidden){\r
3022             this.hide();\r
3023         }\r
3024         var ot = this.node.getOwnerTree();\r
3025         var dd = ot.enableDD || ot.enableDrag || ot.enableDrop;\r
3026         if(dd && (!this.node.isRoot || ot.rootVisible)){\r
3027             Ext.dd.Registry.register(this.elNode, {\r
3028                 node: this.node,\r
3029                 handles: this.getDDHandles(),\r
3030                 isHandle: false\r
3031             });\r
3032         }\r
3033     },\r
3034 \r
3035     // private\r
3036     getDDHandles : function(){\r
3037         return [this.iconNode, this.textNode, this.elNode];\r
3038     },\r
3039 \r
3040 /**\r
3041  * Hides this node.\r
3042  */\r
3043     hide : function(){\r
3044         this.node.hidden = true;\r
3045         if(this.wrap){\r
3046             this.wrap.style.display = "none";\r
3047         }\r
3048     },\r
3049 \r
3050 /**\r
3051  * Shows this node.\r
3052  */\r
3053     show : function(){\r
3054         this.node.hidden = false;\r
3055         if(this.wrap){\r
3056             this.wrap.style.display = "";\r
3057         } \r
3058     },\r
3059 \r
3060     // private\r
3061     onContextMenu : function(e){\r
3062         if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {\r
3063             e.preventDefault();\r
3064             this.focus();\r
3065             this.fireEvent("contextmenu", this.node, e);\r
3066         }\r
3067     },\r
3068 \r
3069     // private\r
3070     onClick : function(e){\r
3071         if(this.dropping){\r
3072             e.stopEvent();\r
3073             return;\r
3074         }\r
3075         if(this.fireEvent("beforeclick", this.node, e) !== false){\r
3076             var a = e.getTarget('a');\r
3077             if(!this.disabled && this.node.attributes.href && a){\r
3078                 this.fireEvent("click", this.node, e);\r
3079                 return;\r
3080             }else if(a && e.ctrlKey){\r
3081                 e.stopEvent();\r
3082             }\r
3083             e.preventDefault();\r
3084             if(this.disabled){\r
3085                 return;\r
3086             }\r
3087 \r
3088             if(this.node.attributes.singleClickExpand && !this.animating && this.node.isExpandable()){\r
3089                 this.node.toggle();\r
3090             }\r
3091 \r
3092             this.fireEvent("click", this.node, e);\r
3093         }else{\r
3094             e.stopEvent();\r
3095         }\r
3096     },\r
3097 \r
3098     // private\r
3099     onDblClick : function(e){\r
3100         e.preventDefault();\r
3101         if(this.disabled){\r
3102             return;\r
3103         }\r
3104         if(this.fireEvent("beforedblclick", this.node, e) !== false){\r
3105             if(this.checkbox){\r
3106                 this.toggleCheck();\r
3107             }\r
3108             if(!this.animating && this.node.isExpandable()){\r
3109                 this.node.toggle();\r
3110             }\r
3111             this.fireEvent("dblclick", this.node, e);\r
3112         }\r
3113     },\r
3114 \r
3115     onOver : function(e){\r
3116         this.addClass('x-tree-node-over');\r
3117     },\r
3118 \r
3119     onOut : function(e){\r
3120         this.removeClass('x-tree-node-over');\r
3121     },\r
3122 \r
3123     // private\r
3124     onCheckChange : function(){\r
3125         var checked = this.checkbox.checked;\r
3126         // fix for IE6\r
3127         this.checkbox.defaultChecked = checked;        \r
3128         this.node.attributes.checked = checked;\r
3129         this.fireEvent('checkchange', this.node, checked);\r
3130     },\r
3131 \r
3132     // private\r
3133     ecClick : function(e){\r
3134         if(!this.animating && this.node.isExpandable()){\r
3135             this.node.toggle();\r
3136         }\r
3137     },\r
3138 \r
3139     // private\r
3140     startDrop : function(){\r
3141         this.dropping = true;\r
3142     },\r
3143     \r
3144     // delayed drop so the click event doesn't get fired on a drop\r
3145     endDrop : function(){ \r
3146        setTimeout(function(){\r
3147            this.dropping = false;\r
3148        }.createDelegate(this), 50); \r
3149     },\r
3150 \r
3151     // private\r
3152     expand : function(){\r
3153         this.updateExpandIcon();\r
3154         this.ctNode.style.display = "";\r
3155     },\r
3156 \r
3157     // private\r
3158     focus : function(){\r
3159         if(!this.node.preventHScroll){\r
3160             try{this.anchor.focus();\r
3161             }catch(e){}\r
3162         }else{\r
3163             try{\r
3164                 var noscroll = this.node.getOwnerTree().getTreeEl().dom;\r
3165                 var l = noscroll.scrollLeft;\r
3166                 this.anchor.focus();\r
3167                 noscroll.scrollLeft = l;\r
3168             }catch(e){}\r
3169         }\r
3170     },\r
3171 \r
3172 /**\r
3173  * Sets the checked status of the tree node to the passed value, or, if no value was passed,\r
3174  * toggles the checked status. If the node was rendered with no checkbox, this has no effect.\r
3175  * @param {Boolean} (optional) The new checked status.\r
3176  */\r
3177     toggleCheck : function(value){\r
3178         var cb = this.checkbox;\r
3179         if(cb){\r
3180             cb.checked = (value === undefined ? !cb.checked : value);\r
3181             this.onCheckChange();\r
3182         }\r
3183     },\r
3184 \r
3185     // private\r
3186     blur : function(){\r
3187         try{\r
3188             this.anchor.blur();\r
3189         }catch(e){} \r
3190     },\r
3191 \r
3192     // private\r
3193     animExpand : function(callback){\r
3194         var ct = Ext.get(this.ctNode);\r
3195         ct.stopFx();\r
3196         if(!this.node.isExpandable()){\r
3197             this.updateExpandIcon();\r
3198             this.ctNode.style.display = "";\r
3199             Ext.callback(callback);\r
3200             return;\r
3201         }\r
3202         this.animating = true;\r
3203         this.updateExpandIcon();\r
3204         \r
3205         ct.slideIn('t', {\r
3206            callback : function(){\r
3207                this.animating = false;\r
3208                Ext.callback(callback);\r
3209             },\r
3210             scope: this,\r
3211             duration: this.node.ownerTree.duration || .25\r
3212         });\r
3213     },\r
3214 \r
3215     // private\r
3216     highlight : function(){\r
3217         var tree = this.node.getOwnerTree();\r
3218         Ext.fly(this.wrap).highlight(\r
3219             tree.hlColor || "C3DAF9",\r
3220             {endColor: tree.hlBaseColor}\r
3221         );\r
3222     },\r
3223 \r
3224     // private\r
3225     collapse : function(){\r
3226         this.updateExpandIcon();\r
3227         this.ctNode.style.display = "none";\r
3228     },\r
3229 \r
3230     // private\r
3231     animCollapse : function(callback){\r
3232         var ct = Ext.get(this.ctNode);\r
3233         ct.enableDisplayMode('block');\r
3234         ct.stopFx();\r
3235 \r
3236         this.animating = true;\r
3237         this.updateExpandIcon();\r
3238 \r
3239         ct.slideOut('t', {\r
3240             callback : function(){\r
3241                this.animating = false;\r
3242                Ext.callback(callback);\r
3243             },\r
3244             scope: this,\r
3245             duration: this.node.ownerTree.duration || .25\r
3246         });\r
3247     },\r
3248 \r
3249     // private\r
3250     getContainer : function(){\r
3251         return this.ctNode;  \r
3252     },\r
3253 \r
3254 /**\r
3255  * Returns the element which encapsulates this node.\r
3256  * @return {HtmlElement} The DOM element. The default implementation uses a <code>&lt;li></code>.\r
3257  */\r
3258     getEl : function(){\r
3259         return this.wrap;  \r
3260     },\r
3261 \r
3262     // private\r
3263     appendDDGhost : function(ghostNode){\r
3264         ghostNode.appendChild(this.elNode.cloneNode(true));\r
3265     },\r
3266 \r
3267     // private\r
3268     getDDRepairXY : function(){\r
3269         return Ext.lib.Dom.getXY(this.iconNode);\r
3270     },\r
3271 \r
3272     // private\r
3273     onRender : function(){\r
3274         this.render();    \r
3275     },\r
3276 \r
3277     // private\r
3278     render : function(bulkRender){\r
3279         var n = this.node, a = n.attributes;\r
3280         var targetNode = n.parentNode ? \r
3281               n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;\r
3282         \r
3283         if(!this.rendered){\r
3284             this.rendered = true;\r
3285 \r
3286             this.renderElements(n, a, targetNode, bulkRender);\r
3287 \r
3288             if(a.qtip){\r
3289                if(this.textNode.setAttributeNS){\r
3290                    this.textNode.setAttributeNS("ext", "qtip", a.qtip);\r
3291                    if(a.qtipTitle){\r
3292                        this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);\r
3293                    }\r
3294                }else{\r
3295                    this.textNode.setAttribute("ext:qtip", a.qtip);\r
3296                    if(a.qtipTitle){\r
3297                        this.textNode.setAttribute("ext:qtitle", a.qtipTitle);\r
3298                    }\r
3299                } \r
3300             }else if(a.qtipCfg){\r
3301                 a.qtipCfg.target = Ext.id(this.textNode);\r
3302                 Ext.QuickTips.register(a.qtipCfg);\r
3303             }\r
3304             this.initEvents();\r
3305             if(!this.node.expanded){\r
3306                 this.updateExpandIcon(true);\r
3307             }\r
3308         }else{\r
3309             if(bulkRender === true) {\r
3310                 targetNode.appendChild(this.wrap);\r
3311             }\r
3312         }\r
3313     },\r
3314 \r
3315     // private\r
3316     renderElements : function(n, a, targetNode, bulkRender){\r
3317         // add some indent caching, this helps performance when rendering a large tree\r
3318         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';\r
3319 \r
3320         var cb = Ext.isBoolean(a.checked),\r
3321             nel,\r
3322             href = a.href ? a.href : Ext.isGecko ? "" : "#",\r
3323             buf = ['<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on">',\r
3324             '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",\r
3325             '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',\r
3326             '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',\r
3327             cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',\r
3328             '<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',\r
3329              a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',n.text,"</span></a></div>",\r
3330             '<ul class="x-tree-node-ct" style="display:none;"></ul>',\r
3331             "</li>"].join('');\r
3332 \r
3333         if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){\r
3334             this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);\r
3335         }else{\r
3336             this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);\r
3337         }\r
3338         \r
3339         this.elNode = this.wrap.childNodes[0];\r
3340         this.ctNode = this.wrap.childNodes[1];\r
3341         var cs = this.elNode.childNodes;\r
3342         this.indentNode = cs[0];\r
3343         this.ecNode = cs[1];\r
3344         this.iconNode = cs[2];\r
3345         var index = 3;\r
3346         if(cb){\r
3347             this.checkbox = cs[3];\r
3348             // fix for IE6\r
3349             this.checkbox.defaultChecked = this.checkbox.checked;\r
3350             index++;\r
3351         }\r
3352         this.anchor = cs[index];\r
3353         this.textNode = cs[index].firstChild;\r
3354     },\r
3355 \r
3356 /**\r
3357  * Returns the &lt;a> element that provides focus for the node's UI.\r
3358  * @return {HtmlElement} The DOM anchor element.\r
3359  */\r
3360     getAnchor : function(){\r
3361         return this.anchor;\r
3362     },\r
3363     \r
3364 /**\r
3365  * Returns the text node.\r
3366  * @return {HtmlNode} The DOM text node.\r
3367  */\r
3368     getTextEl : function(){\r
3369         return this.textNode;\r
3370     },\r
3371     \r
3372 /**\r
3373  * Returns the icon &lt;img> element.\r
3374  * @return {HtmlElement} The DOM image element.\r
3375  */\r
3376     getIconEl : function(){\r
3377         return this.iconNode;\r
3378     },\r
3379 \r
3380 /**\r
3381  * Returns the checked status of the node. If the node was rendered with no\r
3382  * checkbox, it returns false.\r
3383  * @return {Boolean} The checked flag.\r
3384  */\r
3385     isChecked : function(){\r
3386         return this.checkbox ? this.checkbox.checked : false; \r
3387     },\r
3388 \r
3389     // private\r
3390     updateExpandIcon : function(){\r
3391         if(this.rendered){\r
3392             var n = this.node, \r
3393                 c1, \r
3394                 c2,\r
3395                 cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow",\r
3396                 hasChild = n.hasChildNodes();\r
3397             if(hasChild || n.attributes.expandable){\r
3398                 if(n.expanded){\r
3399                     cls += "-minus";\r
3400                     c1 = "x-tree-node-collapsed";\r
3401                     c2 = "x-tree-node-expanded";\r
3402                 }else{\r
3403                     cls += "-plus";\r
3404                     c1 = "x-tree-node-expanded";\r
3405                     c2 = "x-tree-node-collapsed";\r
3406                 }\r
3407                 if(this.wasLeaf){\r
3408                     this.removeClass("x-tree-node-leaf");\r
3409                     this.wasLeaf = false;\r
3410                 }\r
3411                 if(this.c1 != c1 || this.c2 != c2){\r
3412                     Ext.fly(this.elNode).replaceClass(c1, c2);\r
3413                     this.c1 = c1; this.c2 = c2;\r
3414                 }\r
3415             }else{\r
3416                 if(!this.wasLeaf){\r
3417                     Ext.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");\r
3418                     delete this.c1;\r
3419                     delete this.c2;\r
3420                     this.wasLeaf = true;\r
3421                 }\r
3422             }\r
3423             var ecc = "x-tree-ec-icon "+cls;\r
3424             if(this.ecc != ecc){\r
3425                 this.ecNode.className = ecc;\r
3426                 this.ecc = ecc;\r
3427             }\r
3428         }\r
3429     },\r
3430     \r
3431     // private\r
3432     onIdChange: function(id){\r
3433         if(this.rendered){\r
3434             this.elNode.setAttribute('ext:tree-node-id', id);\r
3435         }\r
3436     },\r
3437 \r
3438     // private\r
3439     getChildIndent : function(){\r
3440         if(!this.childIndent){\r
3441             var buf = [],\r
3442                 p = this.node;\r
3443             while(p){\r
3444                 if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){\r
3445                     if(!p.isLast()) {\r
3446                         buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-elbow-line" />');\r
3447                     } else {\r
3448                         buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-icon" />');\r
3449                     }\r
3450                 }\r
3451                 p = p.parentNode;\r
3452             }\r
3453             this.childIndent = buf.join("");\r
3454         }\r
3455         return this.childIndent;\r
3456     },\r
3457 \r
3458     // private\r
3459     renderIndent : function(){\r
3460         if(this.rendered){\r
3461             var indent = "",\r
3462                 p = this.node.parentNode;\r
3463             if(p){\r
3464                 indent = p.ui.getChildIndent();\r
3465             }\r
3466             if(this.indentMarkup != indent){ // don't rerender if not required\r
3467                 this.indentNode.innerHTML = indent;\r
3468                 this.indentMarkup = indent;\r
3469             }\r
3470             this.updateExpandIcon();\r
3471         }\r
3472     },\r
3473 \r
3474     destroy : function(){\r
3475         if(this.elNode){\r
3476             Ext.dd.Registry.unregister(this.elNode.id);\r
3477         }\r
3478         \r
3479         Ext.each(['textnode', 'anchor', 'checkbox', 'indentNode', 'ecNode', 'iconNode', 'elNode', 'ctNode', 'wrap', 'holder'], function(el){\r
3480             if(this[el]){\r
3481                 Ext.fly(this[el]).remove();\r
3482                 delete this[el];\r
3483             }\r
3484         }, this);\r
3485         delete this.node;\r
3486     }\r
3487 };\r
3488 \r
3489 /**\r
3490  * @class Ext.tree.RootTreeNodeUI\r
3491  * This class provides the default UI implementation for <b>root</b> Ext TreeNodes.\r
3492  * The RootTreeNode UI implementation allows customizing the appearance of the root tree node.<br>\r
3493  * <p>\r
3494  * If you are customizing the Tree's user interface, you\r
3495  * may need to extend this class, but you should never need to instantiate this class.<br>\r
3496  */\r
3497 Ext.tree.RootTreeNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {\r
3498     // private\r
3499     render : function(){\r
3500         if(!this.rendered){\r
3501             var targetNode = this.node.ownerTree.innerCt.dom;\r
3502             this.node.expanded = true;\r
3503             targetNode.innerHTML = '<div class="x-tree-root-node"></div>';\r
3504             this.wrap = this.ctNode = targetNode.firstChild;\r
3505         }\r
3506     },\r
3507     collapse : Ext.emptyFn,\r
3508     expand : Ext.emptyFn\r
3509 });/**\r
3510  * @class Ext.tree.TreeLoader\r
3511  * @extends Ext.util.Observable\r
3512  * A TreeLoader provides for lazy loading of an {@link Ext.tree.TreeNode}'s child\r
3513  * nodes from a specified URL. The response must be a JavaScript Array definition\r
3514  * whose elements are node definition objects. e.g.:\r
3515  * <pre><code>\r
3516     [{\r
3517         id: 1,\r
3518         text: 'A leaf Node',\r
3519         leaf: true\r
3520     },{\r
3521         id: 2,\r
3522         text: 'A folder Node',\r
3523         children: [{\r
3524             id: 3,\r
3525             text: 'A child Node',\r
3526             leaf: true\r
3527         }]\r
3528    }]\r
3529 </code></pre>\r
3530  * <br><br>\r
3531  * A server request is sent, and child nodes are loaded only when a node is expanded.\r
3532  * The loading node's id is passed to the server under the parameter name "node" to\r
3533  * enable the server to produce the correct child nodes.\r
3534  * <br><br>\r
3535  * To pass extra parameters, an event handler may be attached to the "beforeload"\r
3536  * event, and the parameters specified in the TreeLoader's baseParams property:\r
3537  * <pre><code>\r
3538     myTreeLoader.on("beforeload", function(treeLoader, node) {\r
3539         this.baseParams.category = node.attributes.category;\r
3540     }, this);\r
3541 </code></pre>\r
3542  * This would pass an HTTP parameter called "category" to the server containing\r
3543  * the value of the Node's "category" attribute.\r
3544  * @constructor\r
3545  * Creates a new Treeloader.\r
3546  * @param {Object} config A config object containing config properties.\r
3547  */\r
3548 Ext.tree.TreeLoader = function(config){\r
3549     this.baseParams = {};\r
3550     Ext.apply(this, config);\r
3551 \r
3552     this.addEvents(\r
3553         /**\r
3554          * @event beforeload\r
3555          * Fires before a network request is made to retrieve the Json text which specifies a node's children.\r
3556          * @param {Object} This TreeLoader object.\r
3557          * @param {Object} node The {@link Ext.tree.TreeNode} object being loaded.\r
3558          * @param {Object} callback The callback function specified in the {@link #load} call.\r
3559          */\r
3560         "beforeload",\r
3561         /**\r
3562          * @event load\r
3563          * Fires when the node has been successfuly loaded.\r
3564          * @param {Object} This TreeLoader object.\r
3565          * @param {Object} node The {@link Ext.tree.TreeNode} object being loaded.\r
3566          * @param {Object} response The response object containing the data from the server.\r
3567          */\r
3568         "load",\r
3569         /**\r
3570          * @event loadexception\r
3571          * Fires if the network request failed.\r
3572          * @param {Object} This TreeLoader object.\r
3573          * @param {Object} node The {@link Ext.tree.TreeNode} object being loaded.\r
3574          * @param {Object} response The response object containing the data from the server.\r
3575          */\r
3576         "loadexception"\r
3577     );\r
3578     Ext.tree.TreeLoader.superclass.constructor.call(this);\r
3579     if(Ext.isString(this.paramOrder)){\r
3580         this.paramOrder = this.paramOrder.split(/[\s,|]/);\r
3581     }\r
3582 };\r
3583 \r
3584 Ext.extend(Ext.tree.TreeLoader, Ext.util.Observable, {\r
3585     /**\r
3586     * @cfg {String} dataUrl The URL from which to request a Json string which\r
3587     * specifies an array of node definition objects representing the child nodes\r
3588     * to be loaded.\r
3589     */\r
3590     /**\r
3591      * @cfg {String} requestMethod The HTTP request method for loading data (defaults to the value of {@link Ext.Ajax#method}).\r
3592      */\r
3593     /**\r
3594      * @cfg {String} url Equivalent to {@link #dataUrl}.\r
3595      */\r
3596     /**\r
3597      * @cfg {Boolean} preloadChildren If set to true, the loader recursively loads "children" attributes when doing the first load on nodes.\r
3598      */\r
3599     /**\r
3600     * @cfg {Object} baseParams (optional) An object containing properties which\r
3601     * specify HTTP parameters to be passed to each request for child nodes.\r
3602     */\r
3603     /**\r
3604     * @cfg {Object} baseAttrs (optional) An object containing attributes to be added to all nodes\r
3605     * created by this loader. If the attributes sent by the server have an attribute in this object,\r
3606     * they take priority.\r
3607     */\r
3608     /**\r
3609     * @cfg {Object} uiProviders (optional) An object containing properties which\r
3610     * specify custom {@link Ext.tree.TreeNodeUI} implementations. If the optional\r
3611     * <i>uiProvider</i> attribute of a returned child node is a string rather\r
3612     * than a reference to a TreeNodeUI implementation, then that string value\r
3613     * is used as a property name in the uiProviders object.\r
3614     */\r
3615     uiProviders : {},\r
3616 \r
3617     /**\r
3618     * @cfg {Boolean} clearOnLoad (optional) Default to true. Remove previously existing\r
3619     * child nodes before loading.\r
3620     */\r
3621     clearOnLoad : true,\r
3622 \r
3623     /**\r
3624      * @cfg {Array/String} paramOrder Defaults to <tt>undefined</tt>. Only used when using directFn.\r
3625      * A list of params to be executed\r
3626      * server side.  Specify the params in the order in which they must be executed on the server-side\r
3627      * as either (1) an Array of String values, or (2) a String of params delimited by either whitespace,\r
3628      * comma, or pipe. For example,\r
3629      * any of the following would be acceptable:<pre><code>\r
3630 paramOrder: ['param1','param2','param3']\r
3631 paramOrder: 'param1 param2 param3'\r
3632 paramOrder: 'param1,param2,param3'\r
3633 paramOrder: 'param1|param2|param'\r
3634      </code></pre>\r
3635      */\r
3636     paramOrder: undefined,\r
3637 \r
3638     /**\r
3639      * @cfg {Boolean} paramsAsHash Only used when using directFn.\r
3640      * Send parameters as a collection of named arguments (defaults to <tt>false</tt>). Providing a\r
3641      * <tt>{@link #paramOrder}</tt> nullifies this configuration.\r
3642      */\r
3643     paramsAsHash: false,\r
3644     \r
3645     /**\r
3646      * @cfg {String} nodeParameter The name of the parameter sent to the server which contains\r
3647      * the identifier of the node. Defaults to <tt>'node'</tt>.\r
3648      */\r
3649     nodeParameter: 'node',\r
3650 \r
3651     /**\r
3652      * @cfg {Function} directFn\r
3653      * Function to call when executing a request.\r
3654      */\r
3655     directFn : undefined,\r
3656 \r
3657     /**\r
3658      * Load an {@link Ext.tree.TreeNode} from the URL specified in the constructor.\r
3659      * This is called automatically when a node is expanded, but may be used to reload\r
3660      * a node (or append new children if the {@link #clearOnLoad} option is false.)\r
3661      * @param {Ext.tree.TreeNode} node\r
3662      * @param {Function} callback Function to call after the node has been loaded. The \r
3663      * function is passed the TreeNode which was requested to be loaded.\r
3664      * @param (Object) scope The cope (<code>this</code> reference) in which the callback is executed.\r
3665      * defaults to the loaded TreeNode.\r
3666      */\r
3667     load : function(node, callback, scope){\r
3668         if(this.clearOnLoad){\r
3669             while(node.firstChild){\r
3670                 node.removeChild(node.firstChild);\r
3671             }\r
3672         }\r
3673         if(this.doPreload(node)){ // preloaded json children\r
3674             this.runCallback(callback, scope || node, [node]);\r
3675         }else if(this.directFn || this.dataUrl || this.url){\r
3676             this.requestData(node, callback, scope || node);\r
3677         }\r
3678     },\r
3679 \r
3680     doPreload : function(node){\r
3681         if(node.attributes.children){\r
3682             if(node.childNodes.length < 1){ // preloaded?\r
3683                 var cs = node.attributes.children;\r
3684                 node.beginUpdate();\r
3685                 for(var i = 0, len = cs.length; i < len; i++){\r
3686                     var cn = node.appendChild(this.createNode(cs[i]));\r
3687                     if(this.preloadChildren){\r
3688                         this.doPreload(cn);\r
3689                     }\r
3690                 }\r
3691                 node.endUpdate();\r
3692             }\r
3693             return true;\r
3694         }\r
3695         return false;\r
3696     },\r
3697 \r
3698     getParams: function(node){\r
3699         var buf = [], bp = this.baseParams;\r
3700         if(this.directFn){\r
3701             buf.push(node.id);\r
3702             if(bp){\r
3703                 if(this.paramOrder){\r
3704                     for(var i = 0, len = this.paramOrder.length; i < len; i++){\r
3705                         buf.push(bp[this.paramOrder[i]]);\r
3706                     }\r
3707                 }else if(this.paramsAsHash){\r
3708                     buf.push(bp);\r
3709                 }\r
3710             }\r
3711             return buf;\r
3712         }else{\r
3713             var o = Ext.apply({}, bp);\r
3714             o[this.nodeParameter] = node.id;\r
3715             return o;\r
3716         }\r
3717     },\r
3718 \r
3719     requestData : function(node, callback, scope){\r
3720         if(this.fireEvent("beforeload", this, node, callback) !== false){\r
3721             if(this.directFn){\r
3722                 var args = this.getParams(node);\r
3723                 args.push(this.processDirectResponse.createDelegate(this, [{callback: callback, node: node, scope: scope}], true));\r
3724                 this.directFn.apply(window, args);\r
3725             }else{\r
3726                 this.transId = Ext.Ajax.request({\r
3727                     method:this.requestMethod,\r
3728                     url: this.dataUrl||this.url,\r
3729                     success: this.handleResponse,\r
3730                     failure: this.handleFailure,\r
3731                     scope: this,\r
3732                     argument: {callback: callback, node: node, scope: scope},\r
3733                     params: this.getParams(node)\r
3734                 });\r
3735             }\r
3736         }else{\r
3737             // if the load is cancelled, make sure we notify\r
3738             // the node that we are done\r
3739             this.runCallback(callback, scope || node, []);\r
3740         }\r
3741     },\r
3742 \r
3743     processDirectResponse: function(result, response, args){\r
3744         if(response.status){\r
3745             this.handleResponse({\r
3746                 responseData: Ext.isArray(result) ? result : null,\r
3747                 responseText: result,\r
3748                 argument: args\r
3749             });\r
3750         }else{\r
3751             this.handleFailure({\r
3752                 argument: args\r
3753             });\r
3754         }\r
3755     },\r
3756 \r
3757     // private\r
3758     runCallback: function(cb, scope, args){\r
3759         if(Ext.isFunction(cb)){\r
3760             cb.apply(scope, args);\r
3761         }\r
3762     },\r
3763 \r
3764     isLoading : function(){\r
3765         return !!this.transId;\r
3766     },\r
3767 \r
3768     abort : function(){\r
3769         if(this.isLoading()){\r
3770             Ext.Ajax.abort(this.transId);\r
3771         }\r
3772     },\r
3773 \r
3774     /**\r
3775     * <p>Override this function for custom TreeNode node implementation, or to\r
3776     * modify the attributes at creation time.</p>\r
3777     * Example:<pre><code>\r
3778 new Ext.tree.TreePanel({\r
3779     ...\r
3780     loader: new Ext.tree.TreeLoader({\r
3781         url: 'dataUrl',\r
3782         createNode: function(attr) {\r
3783 //          Allow consolidation consignments to have\r
3784 //          consignments dropped into them.\r
3785             if (attr.isConsolidation) {\r
3786                 attr.iconCls = 'x-consol',\r
3787                 attr.allowDrop = true;\r
3788             }\r
3789             return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);\r
3790         }\r
3791     }),\r
3792     ...\r
3793 });\r
3794 </code></pre>\r
3795     * @param attr {Object} The attributes from which to create the new node.\r
3796     */\r
3797     createNode : function(attr){\r
3798         // apply baseAttrs, nice idea Corey!\r
3799         if(this.baseAttrs){\r
3800             Ext.applyIf(attr, this.baseAttrs);\r
3801         }\r
3802         if(this.applyLoader !== false && !attr.loader){\r
3803             attr.loader = this;\r
3804         }\r
3805         if(Ext.isString(attr.uiProvider)){\r
3806            attr.uiProvider = this.uiProviders[attr.uiProvider] || eval(attr.uiProvider);\r
3807         }\r
3808         if(attr.nodeType){\r
3809             return new Ext.tree.TreePanel.nodeTypes[attr.nodeType](attr);\r
3810         }else{\r
3811             return attr.leaf ?\r
3812                         new Ext.tree.TreeNode(attr) :\r
3813                         new Ext.tree.AsyncTreeNode(attr);\r
3814         }\r
3815     },\r
3816 \r
3817     processResponse : function(response, node, callback, scope){\r
3818         var json = response.responseText;\r
3819         try {\r
3820             var o = response.responseData || Ext.decode(json);\r
3821             node.beginUpdate();\r
3822             for(var i = 0, len = o.length; i < len; i++){\r
3823                 var n = this.createNode(o[i]);\r
3824                 if(n){\r
3825                     node.appendChild(n);\r
3826                 }\r
3827             }\r
3828             node.endUpdate();\r
3829             this.runCallback(callback, scope || node, [node]);\r
3830         }catch(e){\r
3831             this.handleFailure(response);\r
3832         }\r
3833     },\r
3834 \r
3835     handleResponse : function(response){\r
3836         this.transId = false;\r
3837         var a = response.argument;\r
3838         this.processResponse(response, a.node, a.callback, a.scope);\r
3839         this.fireEvent("load", this, a.node, response);\r
3840     },\r
3841 \r
3842     handleFailure : function(response){\r
3843         this.transId = false;\r
3844         var a = response.argument;\r
3845         this.fireEvent("loadexception", this, a.node, response);\r
3846         this.runCallback(a.callback, a.scope || a.node, [a.node]);\r
3847     },\r
3848     \r
3849     destroy : function(){\r
3850         this.purgeListeners();\r
3851     }\r
3852 });/**
3853  * @class Ext.tree.TreeFilter
3854  * Note this class is experimental and doesn't update the indent (lines) or expand collapse icons of the nodes
3855  * @param {TreePanel} tree
3856  * @param {Object} config (optional)
3857  */
3858 Ext.tree.TreeFilter = function(tree, config){
3859     this.tree = tree;
3860     this.filtered = {};
3861     Ext.apply(this, config);
3862 };
3863
3864 Ext.tree.TreeFilter.prototype = {
3865     clearBlank:false,
3866     reverse:false,
3867     autoClear:false,
3868     remove:false,
3869
3870      /**
3871      * Filter the data by a specific attribute.
3872      * @param {String/RegExp} value Either string that the attribute value
3873      * should start with or a RegExp to test against the attribute
3874      * @param {String} attr (optional) The attribute passed in your node's attributes collection. Defaults to "text".
3875      * @param {TreeNode} startNode (optional) The node to start the filter at.
3876      */
3877     filter : function(value, attr, startNode){
3878         attr = attr || "text";
3879         var f;
3880         if(typeof value == "string"){
3881             var vlen = value.length;
3882             // auto clear empty filter
3883             if(vlen == 0 && this.clearBlank){
3884                 this.clear();
3885                 return;
3886             }
3887             value = value.toLowerCase();
3888             f = function(n){
3889                 return n.attributes[attr].substr(0, vlen).toLowerCase() == value;
3890             };
3891         }else if(value.exec){ // regex?
3892             f = function(n){
3893                 return value.test(n.attributes[attr]);
3894             };
3895         }else{
3896             throw 'Illegal filter type, must be string or regex';
3897         }
3898         this.filterBy(f, null, startNode);
3899         },
3900
3901     /**
3902      * Filter by a function. The passed function will be called with each
3903      * node in the tree (or from the startNode). If the function returns true, the node is kept
3904      * otherwise it is filtered. If a node is filtered, its children are also filtered.
3905      * @param {Function} fn The filter function
3906      * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the current Node.
3907      */
3908     filterBy : function(fn, scope, startNode){
3909         startNode = startNode || this.tree.root;
3910         if(this.autoClear){
3911             this.clear();
3912         }
3913         var af = this.filtered, rv = this.reverse;
3914         var f = function(n){
3915             if(n == startNode){
3916                 return true;
3917             }
3918             if(af[n.id]){
3919                 return false;
3920             }
3921             var m = fn.call(scope || n, n);
3922             if(!m || rv){
3923                 af[n.id] = n;
3924                 n.ui.hide();
3925                 return false;
3926             }
3927             return true;
3928         };
3929         startNode.cascade(f);
3930         if(this.remove){
3931            for(var id in af){
3932                if(typeof id != "function"){
3933                    var n = af[id];
3934                    if(n && n.parentNode){
3935                        n.parentNode.removeChild(n);
3936                    }
3937                }
3938            }
3939         }
3940     },
3941
3942     /**
3943      * Clears the current filter. Note: with the "remove" option
3944      * set a filter cannot be cleared.
3945      */
3946     clear : function(){
3947         var t = this.tree;
3948         var af = this.filtered;
3949         for(var id in af){
3950             if(typeof id != "function"){
3951                 var n = af[id];
3952                 if(n){
3953                     n.ui.show();
3954                 }
3955             }
3956         }
3957         this.filtered = {};
3958     }
3959 };
3960 /**\r
3961  * @class Ext.tree.TreeSorter\r
3962  * Provides sorting of nodes in a {@link Ext.tree.TreePanel}.  The TreeSorter automatically monitors events on the \r
3963  * associated TreePanel that might affect the tree's sort order (beforechildrenrendered, append, insert and textchange).\r
3964  * Example usage:<br />\r
3965  * <pre><code>\r
3966 new Ext.tree.TreeSorter(myTree, {\r
3967     folderSort: true,\r
3968     dir: "desc",\r
3969     sortType: function(node) {\r
3970         // sort by a custom, typed attribute:\r
3971         return parseInt(node.id, 10);\r
3972     }\r
3973 });\r
3974 </code></pre>\r
3975  * @constructor\r
3976  * @param {TreePanel} tree\r
3977  * @param {Object} config\r
3978  */\r
3979 Ext.tree.TreeSorter = function(tree, config){\r
3980     /**\r
3981      * @cfg {Boolean} folderSort True to sort leaf nodes under non-leaf nodes (defaults to false)\r
3982      */\r
3983     /** \r
3984      * @cfg {String} property The named attribute on the node to sort by (defaults to "text").  Note that this \r
3985      * property is only used if no {@link #sortType} function is specified, otherwise it is ignored.\r
3986      */\r
3987     /** \r
3988      * @cfg {String} dir The direction to sort ("asc" or "desc," case-insensitive, defaults to "asc")\r
3989      */\r
3990     /** \r
3991      * @cfg {String} leafAttr The attribute used to determine leaf nodes when {@link #folderSort} = true (defaults to "leaf")\r
3992      */\r
3993     /** \r
3994      * @cfg {Boolean} caseSensitive true for case-sensitive sort (defaults to false)\r
3995      */\r
3996     /** \r
3997      * @cfg {Function} sortType A custom "casting" function used to convert node values before sorting.  The function\r
3998      * will be called with a single parameter (the {@link Ext.tree.TreeNode} being evaluated) and is expected to return\r
3999      * the node's sort value cast to the specific data type required for sorting.  This could be used, for example, when\r
4000      * a node's text (or other attribute) should be sorted as a date or numeric value.  See the class description for \r
4001      * example usage.  Note that if a sortType is specified, any {@link #property} config will be ignored.\r
4002      */\r
4003     \r
4004     Ext.apply(this, config);\r
4005     tree.on("beforechildrenrendered", this.doSort, this);\r
4006     tree.on("append", this.updateSort, this);\r
4007     tree.on("insert", this.updateSort, this);\r
4008     tree.on("textchange", this.updateSortParent, this);\r
4009     \r
4010     var dsc = this.dir && this.dir.toLowerCase() == "desc";\r
4011     var p = this.property || "text";\r
4012     var sortType = this.sortType;\r
4013     var fs = this.folderSort;\r
4014     var cs = this.caseSensitive === true;\r
4015     var leafAttr = this.leafAttr || 'leaf';\r
4016 \r
4017     this.sortFn = function(n1, n2){\r
4018         if(fs){\r
4019             if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){\r
4020                 return 1;\r
4021             }\r
4022             if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){\r
4023                 return -1;\r
4024             }\r
4025         }\r
4026         var v1 = sortType ? sortType(n1.attributes[p]) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());\r
4027         var v2 = sortType ? sortType(n2.attributes[p]) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());\r
4028         if(v1 < v2){\r
4029                         return dsc ? +1 : -1;\r
4030                 }else if(v1 > v2){\r
4031                         return dsc ? -1 : +1;\r
4032         }else{\r
4033                 return 0;\r
4034         }\r
4035     };\r
4036 };\r
4037 \r
4038 Ext.tree.TreeSorter.prototype = {\r
4039     doSort : function(node){\r
4040         node.sort(this.sortFn);\r
4041     },\r
4042     \r
4043     compareNodes : function(n1, n2){\r
4044         return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);\r
4045     },\r
4046     \r
4047     updateSort : function(tree, node){\r
4048         if(node.childrenRendered){\r
4049             this.doSort.defer(1, this, [node]);\r
4050         }\r
4051     },\r
4052     \r
4053     updateSortParent : function(node){\r
4054                 var p = node.parentNode;\r
4055                 if(p && p.childrenRendered){\r
4056             this.doSort.defer(1, this, [p]);\r
4057         }\r
4058     }\r
4059 };/**\r
4060  * @class Ext.tree.TreeDropZone\r
4061  * @extends Ext.dd.DropZone\r
4062  * @constructor\r
4063  * @param {String/HTMLElement/Element} tree The {@link Ext.tree.TreePanel} for which to enable dropping\r
4064  * @param {Object} config\r
4065  */\r
4066 if(Ext.dd.DropZone){\r
4067     \r
4068 Ext.tree.TreeDropZone = function(tree, config){\r
4069     /**\r
4070      * @cfg {Boolean} allowParentInsert\r
4071      * Allow inserting a dragged node between an expanded parent node and its first child that will become a\r
4072      * sibling of the parent when dropped (defaults to false)\r
4073      */\r
4074     this.allowParentInsert = config.allowParentInsert || false;\r
4075     /**\r
4076      * @cfg {String} allowContainerDrop\r
4077      * True if drops on the tree container (outside of a specific tree node) are allowed (defaults to false)\r
4078      */\r
4079     this.allowContainerDrop = config.allowContainerDrop || false;\r
4080     /**\r
4081      * @cfg {String} appendOnly\r
4082      * True if the tree should only allow append drops (use for trees which are sorted, defaults to false)\r
4083      */\r
4084     this.appendOnly = config.appendOnly || false;\r
4085 \r
4086     Ext.tree.TreeDropZone.superclass.constructor.call(this, tree.getTreeEl(), config);\r
4087     /**\r
4088     * The TreePanel for this drop zone\r
4089     * @type Ext.tree.TreePanel\r
4090     * @property\r
4091     */\r
4092     this.tree = tree;\r
4093     /**\r
4094     * Arbitrary data that can be associated with this tree and will be included in the event object that gets\r
4095     * passed to any nodedragover event handler (defaults to {})\r
4096     * @type Ext.tree.TreePanel\r
4097     * @property\r
4098     */\r
4099     this.dragOverData = {};\r
4100     // private\r
4101     this.lastInsertClass = "x-tree-no-status";\r
4102 };\r
4103 \r
4104 Ext.extend(Ext.tree.TreeDropZone, Ext.dd.DropZone, {\r
4105     /**\r
4106      * @cfg {String} ddGroup\r
4107      * A named drag drop group to which this object belongs.  If a group is specified, then this object will only\r
4108      * interact with other drag drop objects in the same group (defaults to 'TreeDD').\r
4109      */\r
4110     ddGroup : "TreeDD",\r
4111 \r
4112     /**\r
4113      * @cfg {String} expandDelay\r
4114      * The delay in milliseconds to wait before expanding a target tree node while dragging a droppable node\r
4115      * over the target (defaults to 1000)\r
4116      */\r
4117     expandDelay : 1000,\r
4118 \r
4119     // private\r
4120     expandNode : function(node){\r
4121         if(node.hasChildNodes() && !node.isExpanded()){\r
4122             node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));\r
4123         }\r
4124     },\r
4125 \r
4126     // private\r
4127     queueExpand : function(node){\r
4128         this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);\r
4129     },\r
4130 \r
4131     // private\r
4132     cancelExpand : function(){\r
4133         if(this.expandProcId){\r
4134             clearTimeout(this.expandProcId);\r
4135             this.expandProcId = false;\r
4136         }\r
4137     },\r
4138 \r
4139     // private\r
4140     isValidDropPoint : function(n, pt, dd, e, data){\r
4141         if(!n || !data){ return false; }\r
4142         var targetNode = n.node;\r
4143         var dropNode = data.node;\r
4144         // default drop rules\r
4145         if(!(targetNode && targetNode.isTarget && pt)){\r
4146             return false;\r
4147         }\r
4148         if(pt == "append" && targetNode.allowChildren === false){\r
4149             return false;\r
4150         }\r
4151         if((pt == "above" || pt == "below") && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)){\r
4152             return false;\r
4153         }\r
4154         if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode))){\r
4155             return false;\r
4156         }\r
4157         // reuse the object\r
4158         var overEvent = this.dragOverData;\r
4159         overEvent.tree = this.tree;\r
4160         overEvent.target = targetNode;\r
4161         overEvent.data = data;\r
4162         overEvent.point = pt;\r
4163         overEvent.source = dd;\r
4164         overEvent.rawEvent = e;\r
4165         overEvent.dropNode = dropNode;\r
4166         overEvent.cancel = false;  \r
4167         var result = this.tree.fireEvent("nodedragover", overEvent);\r
4168         return overEvent.cancel === false && result !== false;\r
4169     },\r
4170 \r
4171     // private\r
4172     getDropPoint : function(e, n, dd){\r
4173         var tn = n.node;\r
4174         if(tn.isRoot){\r
4175             return tn.allowChildren !== false ? "append" : false; // always append for root\r
4176         }\r
4177         var dragEl = n.ddel;\r
4178         var t = Ext.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;\r
4179         var y = Ext.lib.Event.getPageY(e);\r
4180         var noAppend = tn.allowChildren === false || tn.isLeaf();\r
4181         if(this.appendOnly || tn.parentNode.allowChildren === false){\r
4182             return noAppend ? false : "append";\r
4183         }\r
4184         var noBelow = false;\r
4185         if(!this.allowParentInsert){\r
4186             noBelow = tn.hasChildNodes() && tn.isExpanded();\r
4187         }\r
4188         var q = (b - t) / (noAppend ? 2 : 3);\r
4189         if(y >= t && y < (t + q)){\r
4190             return "above";\r
4191         }else if(!noBelow && (noAppend || y >= b-q && y <= b)){\r
4192             return "below";\r
4193         }else{\r
4194             return "append";\r
4195         }\r
4196     },\r
4197 \r
4198     // private\r
4199     onNodeEnter : function(n, dd, e, data){\r
4200         this.cancelExpand();\r
4201     },\r
4202     \r
4203     onContainerOver : function(dd, e, data) {\r
4204         if (this.allowContainerDrop && this.isValidDropPoint({ ddel: this.tree.getRootNode().ui.elNode, node: this.tree.getRootNode() }, "append", dd, e, data)) {\r
4205             return this.dropAllowed;\r
4206         }\r
4207         return this.dropNotAllowed;\r
4208     },\r
4209 \r
4210     // private\r
4211     onNodeOver : function(n, dd, e, data){\r
4212         var pt = this.getDropPoint(e, n, dd);\r
4213         var node = n.node;\r
4214         \r
4215         // auto node expand check\r
4216         if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){\r
4217             this.queueExpand(node);\r
4218         }else if(pt != "append"){\r
4219             this.cancelExpand();\r
4220         }\r
4221         \r
4222         // set the insert point style on the target node\r
4223         var returnCls = this.dropNotAllowed;\r
4224         if(this.isValidDropPoint(n, pt, dd, e, data)){\r
4225            if(pt){\r
4226                var el = n.ddel;\r
4227                var cls;\r
4228                if(pt == "above"){\r
4229                    returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";\r
4230                    cls = "x-tree-drag-insert-above";\r
4231                }else if(pt == "below"){\r
4232                    returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";\r
4233                    cls = "x-tree-drag-insert-below";\r
4234                }else{\r
4235                    returnCls = "x-tree-drop-ok-append";\r
4236                    cls = "x-tree-drag-append";\r
4237                }\r
4238                if(this.lastInsertClass != cls){\r
4239                    Ext.fly(el).replaceClass(this.lastInsertClass, cls);\r
4240                    this.lastInsertClass = cls;\r
4241                }\r
4242            }\r
4243        }\r
4244        return returnCls;\r
4245     },\r
4246 \r
4247     // private\r
4248     onNodeOut : function(n, dd, e, data){\r
4249         this.cancelExpand();\r
4250         this.removeDropIndicators(n);\r
4251     },\r
4252 \r
4253     // private\r
4254     onNodeDrop : function(n, dd, e, data){\r
4255         var point = this.getDropPoint(e, n, dd);\r
4256         var targetNode = n.node;\r
4257         targetNode.ui.startDrop();\r
4258         if(!this.isValidDropPoint(n, point, dd, e, data)){\r
4259             targetNode.ui.endDrop();\r
4260             return false;\r
4261         }\r
4262         // first try to find the drop node\r
4263         var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);\r
4264         return this.processDrop(targetNode, data, point, dd, e, dropNode);\r
4265     },\r
4266     \r
4267     onContainerDrop : function(dd, e, data){\r
4268         if (this.allowContainerDrop && this.isValidDropPoint({ ddel: this.tree.getRootNode().ui.elNode, node: this.tree.getRootNode() }, "append", dd, e, data)) {\r
4269             var targetNode = this.tree.getRootNode();       \r
4270             targetNode.ui.startDrop();\r
4271             var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, 'append', e) : null);\r
4272             return this.processDrop(targetNode, data, 'append', dd, e, dropNode);\r
4273         }\r
4274         return false;\r
4275     },\r
4276     \r
4277     // private\r
4278     processDrop: function(target, data, point, dd, e, dropNode){\r
4279         var dropEvent = {\r
4280             tree : this.tree,\r
4281             target: target,\r
4282             data: data,\r
4283             point: point,\r
4284             source: dd,\r
4285             rawEvent: e,\r
4286             dropNode: dropNode,\r
4287             cancel: !dropNode,\r
4288             dropStatus: false\r
4289         };\r
4290         var retval = this.tree.fireEvent("beforenodedrop", dropEvent);\r
4291         if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){\r
4292             target.ui.endDrop();\r
4293             return dropEvent.dropStatus;\r
4294         }\r
4295     \r
4296         target = dropEvent.target;\r
4297         if(point == 'append' && !target.isExpanded()){\r
4298             target.expand(false, null, function(){\r
4299                 this.completeDrop(dropEvent);\r
4300             }.createDelegate(this));\r
4301         }else{\r
4302             this.completeDrop(dropEvent);\r
4303         }\r
4304         return true;\r
4305     },\r
4306 \r
4307     // private\r
4308     completeDrop : function(de){\r
4309         var ns = de.dropNode, p = de.point, t = de.target;\r
4310         if(!Ext.isArray(ns)){\r
4311             ns = [ns];\r
4312         }\r
4313         var n;\r
4314         for(var i = 0, len = ns.length; i < len; i++){\r
4315             n = ns[i];\r
4316             if(p == "above"){\r
4317                 t.parentNode.insertBefore(n, t);\r
4318             }else if(p == "below"){\r
4319                 t.parentNode.insertBefore(n, t.nextSibling);\r
4320             }else{\r
4321                 t.appendChild(n);\r
4322             }\r
4323         }\r
4324         n.ui.focus();\r
4325         if(Ext.enableFx && this.tree.hlDrop){\r
4326             n.ui.highlight();\r
4327         }\r
4328         t.ui.endDrop();\r
4329         this.tree.fireEvent("nodedrop", de);\r
4330     },\r
4331 \r
4332     // private\r
4333     afterNodeMoved : function(dd, data, e, targetNode, dropNode){\r
4334         if(Ext.enableFx && this.tree.hlDrop){\r
4335             dropNode.ui.focus();\r
4336             dropNode.ui.highlight();\r
4337         }\r
4338         this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);\r
4339     },\r
4340 \r
4341     // private\r
4342     getTree : function(){\r
4343         return this.tree;\r
4344     },\r
4345 \r
4346     // private\r
4347     removeDropIndicators : function(n){\r
4348         if(n && n.ddel){\r
4349             var el = n.ddel;\r
4350             Ext.fly(el).removeClass([\r
4351                     "x-tree-drag-insert-above",\r
4352                     "x-tree-drag-insert-below",\r
4353                     "x-tree-drag-append"]);\r
4354             this.lastInsertClass = "_noclass";\r
4355         }\r
4356     },\r
4357 \r
4358     // private\r
4359     beforeDragDrop : function(target, e, id){\r
4360         this.cancelExpand();\r
4361         return true;\r
4362     },\r
4363 \r
4364     // private\r
4365     afterRepair : function(data){\r
4366         if(data && Ext.enableFx){\r
4367             data.node.ui.highlight();\r
4368         }\r
4369         this.hideProxy();\r
4370     }    \r
4371 });\r
4372 \r
4373 }/**\r
4374  * @class Ext.tree.TreeDragZone\r
4375  * @extends Ext.dd.DragZone\r
4376  * @constructor\r
4377  * @param {String/HTMLElement/Element} tree The {@link Ext.tree.TreePanel} for which to enable dragging\r
4378  * @param {Object} config\r
4379  */\r
4380 if(Ext.dd.DragZone){\r
4381 Ext.tree.TreeDragZone = function(tree, config){\r
4382     Ext.tree.TreeDragZone.superclass.constructor.call(this, tree.innerCt, config);\r
4383     /**\r
4384     * The TreePanel for this drag zone\r
4385     * @type Ext.tree.TreePanel\r
4386     * @property\r
4387     */\r
4388     this.tree = tree;\r
4389 };\r
4390 \r
4391 Ext.extend(Ext.tree.TreeDragZone, Ext.dd.DragZone, {\r
4392     /**\r
4393      * @cfg {String} ddGroup\r
4394      * A named drag drop group to which this object belongs.  If a group is specified, then this object will only\r
4395      * interact with other drag drop objects in the same group (defaults to 'TreeDD').\r
4396      */\r
4397     ddGroup : "TreeDD",\r
4398 \r
4399     // private\r
4400     onBeforeDrag : function(data, e){\r
4401         var n = data.node;\r
4402         return n && n.draggable && !n.disabled;\r
4403     },\r
4404 \r
4405     // private\r
4406     onInitDrag : function(e){\r
4407         var data = this.dragData;\r
4408         this.tree.getSelectionModel().select(data.node);\r
4409         this.tree.eventModel.disable();\r
4410         this.proxy.update("");\r
4411         data.node.ui.appendDDGhost(this.proxy.ghost.dom);\r
4412         this.tree.fireEvent("startdrag", this.tree, data.node, e);\r
4413     },\r
4414 \r
4415     // private\r
4416     getRepairXY : function(e, data){\r
4417         return data.node.ui.getDDRepairXY();\r
4418     },\r
4419 \r
4420     // private\r
4421     onEndDrag : function(data, e){\r
4422         this.tree.eventModel.enable.defer(100, this.tree.eventModel);\r
4423         this.tree.fireEvent("enddrag", this.tree, data.node, e);\r
4424     },\r
4425 \r
4426     // private\r
4427     onValidDrop : function(dd, e, id){\r
4428         this.tree.fireEvent("dragdrop", this.tree, this.dragData.node, dd, e);\r
4429         this.hideProxy();\r
4430     },\r
4431 \r
4432     // private\r
4433     beforeInvalidDrop : function(e, id){\r
4434         // this scrolls the original position back into view\r
4435         var sm = this.tree.getSelectionModel();\r
4436         sm.clearSelections();\r
4437         sm.select(this.dragData.node);\r
4438     },\r
4439     \r
4440     // private\r
4441     afterRepair : function(){\r
4442         if (Ext.enableFx && this.tree.hlDrop) {\r
4443             Ext.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");\r
4444         }\r
4445         this.dragging = false;\r
4446     }\r
4447 });\r
4448 }/**
4449  * @class Ext.tree.TreeEditor
4450  * @extends Ext.Editor
4451  * Provides editor functionality for inline tree node editing.  Any valid {@link Ext.form.Field} subclass can be used
4452  * as the editor field.
4453  * @constructor
4454  * @param {TreePanel} tree
4455  * @param {Object} fieldConfig (optional) Either a prebuilt {@link Ext.form.Field} instance or a Field config object
4456  * that will be applied to the default field instance (defaults to a {@link Ext.form.TextField}).
4457  * @param {Object} config (optional) A TreeEditor config object
4458  */
4459 Ext.tree.TreeEditor = function(tree, fc, config){
4460     fc = fc || {};
4461     var field = fc.events ? fc : new Ext.form.TextField(fc);
4462     Ext.tree.TreeEditor.superclass.constructor.call(this, field, config);
4463
4464     this.tree = tree;
4465
4466     if(!tree.rendered){
4467         tree.on('render', this.initEditor, this);
4468     }else{
4469         this.initEditor(tree);
4470     }
4471 };
4472
4473 Ext.extend(Ext.tree.TreeEditor, Ext.Editor, {
4474     /**
4475      * @cfg {String} alignment
4476      * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "l-l").
4477      */
4478     alignment: "l-l",
4479     // inherit
4480     autoSize: false,
4481     /**
4482      * @cfg {Boolean} hideEl
4483      * True to hide the bound element while the editor is displayed (defaults to false)
4484      */
4485     hideEl : false,
4486     /**
4487      * @cfg {String} cls
4488      * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
4489      */
4490     cls: "x-small-editor x-tree-editor",
4491     /**
4492      * @cfg {Boolean} shim
4493      * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
4494      */
4495     shim:false,
4496     // inherit
4497     shadow:"frame",
4498     /**
4499      * @cfg {Number} maxWidth
4500      * The maximum width in pixels of the editor field (defaults to 250).  Note that if the maxWidth would exceed
4501      * the containing tree element's size, it will be automatically limited for you to the container width, taking
4502      * scroll and client offsets into account prior to each edit.
4503      */
4504     maxWidth: 250,
4505     /**
4506      * @cfg {Number} editDelay The number of milliseconds between clicks to register a double-click that will trigger
4507      * editing on the current node (defaults to 350).  If two clicks occur on the same node within this time span,
4508      * the editor for the node will display, otherwise it will be processed as a regular click.
4509      */
4510     editDelay : 350,
4511
4512     initEditor : function(tree){
4513         tree.on({
4514             scope: this,
4515             beforeclick: this.beforeNodeClick,
4516             dblclick: this.onNodeDblClick
4517         });
4518         this.on({
4519             scope: this,
4520             complete: this.updateNode,
4521             beforestartedit: this.fitToTree,
4522             specialkey: this.onSpecialKey
4523         });
4524         this.on('startedit', this.bindScroll, this, {delay:10});
4525     },
4526
4527     // private
4528     fitToTree : function(ed, el){
4529         var td = this.tree.getTreeEl().dom, nd = el.dom;
4530         if(td.scrollLeft >  nd.offsetLeft){ // ensure the node left point is visible
4531             td.scrollLeft = nd.offsetLeft;
4532         }
4533         var w = Math.min(
4534                 this.maxWidth,
4535                 (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
4536         this.setSize(w, '');
4537     },
4538
4539     /**
4540      * Edit the text of the passed {@link Ext.tree.TreeNode TreeNode}.
4541      * @param node {Ext.tree.TreeNode} The TreeNode to edit. The TreeNode must be {@link Ext.tree.TreeNode#editable editable}.
4542      */
4543     triggerEdit : function(node, defer){
4544         this.completeEdit();
4545                 if(node.attributes.editable !== false){
4546            /**
4547             * The {@link Ext.tree.TreeNode TreeNode} this editor is bound to. Read-only.
4548             * @type Ext.tree.TreeNode
4549             * @property editNode
4550             */
4551                         this.editNode = node;
4552             if(this.tree.autoScroll){
4553                 Ext.fly(node.ui.getEl()).scrollIntoView(this.tree.body);
4554             }
4555             var value = node.text || '';
4556             if (!Ext.isGecko && Ext.isEmpty(node.text)){
4557                 node.setText('&#160;');
4558             }
4559             this.autoEditTimer = this.startEdit.defer(this.editDelay, this, [node.ui.textNode, value]);
4560             return false;
4561         }
4562     },
4563
4564     // private
4565     bindScroll : function(){
4566         this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
4567     },
4568
4569     // private
4570     beforeNodeClick : function(node, e){
4571         clearTimeout(this.autoEditTimer);
4572         if(this.tree.getSelectionModel().isSelected(node)){
4573             e.stopEvent();
4574             return this.triggerEdit(node);
4575         }
4576     },
4577
4578     onNodeDblClick : function(node, e){
4579         clearTimeout(this.autoEditTimer);
4580     },
4581
4582     // private
4583     updateNode : function(ed, value){
4584         this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
4585         this.editNode.setText(value);
4586     },
4587
4588     // private
4589     onHide : function(){
4590         Ext.tree.TreeEditor.superclass.onHide.call(this);
4591         if(this.editNode){
4592             this.editNode.ui.focus.defer(50, this.editNode.ui);
4593         }
4594     },
4595
4596     // private
4597     onSpecialKey : function(field, e){
4598         var k = e.getKey();
4599         if(k == e.ESC){
4600             e.stopEvent();
4601             this.cancelEdit();
4602         }else if(k == e.ENTER && !e.hasModifier()){
4603             e.stopEvent();
4604             this.completeEdit();
4605         }
4606     },
4607
4608     onDestroy : function(){
4609         clearTimeout(this.autoEditTimer);
4610         Ext.tree.TreeEditor.superclass.onDestroy.call(this);
4611         var tree = this.tree;
4612         tree.un('beforeclick', this.beforeNodeClick, this);
4613         tree.un('dblclick', this.onNodeDblClick, this);
4614     }
4615 });