pkgs/pkg-tree-debug.js

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