docs/source/TreePanel.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.2.0
  11  * Copyright(c) 2006-2010 Ext JS, Inc.
  12  * licensing@extjs.com
  13  * http://www.extjs.com/license
  14  */
  15 <div id="cls-Ext.tree.TreePanel"></div>/**
  16  * @class Ext.tree.TreePanel
  17  * @extends Ext.Panel
  18  * <p>The TreePanel provides tree-structured UI representation of tree-structured data.</p>
  19  * <p>{@link Ext.tree.TreeNode TreeNode}s added to the TreePanel may each contain metadata
  20  * used by your application in their {@link Ext.tree.TreeNode#attributes attributes} property.</p>
  21  * <p><b>A TreePanel must have a {@link #root} node before it is rendered.</b> This may either be
  22  * specified using the {@link #root} config option, or using the {@link #setRootNode} method.
  23  * <p>An example of tree rendered to an existing div:</p><pre><code>
  24 var tree = new Ext.tree.TreePanel({
  25     renderTo: 'tree-div',
  26     useArrows: true,
  27     autoScroll: true,
  28     animate: true,
  29     enableDD: true,
  30     containerScroll: true,
  31     border: false,
  32     // auto create TreeLoader
  33     dataUrl: 'get-nodes.php',
  34
  35     root: {
  36         nodeType: 'async',
  37         text: 'Ext JS',
  38         draggable: false,
  39         id: 'source'
  40     }
  41 });
  42
  43 tree.getRootNode().expand();
  44  * </code></pre>
  45  * <p>The example above would work with a data packet similar to this:</p><pre><code>
  46 [{
  47     "text": "adapter",
  48     "id": "source\/adapter",
  49     "cls": "folder"
  50 }, {
  51     "text": "dd",
  52     "id": "source\/dd",
  53     "cls": "folder"
  54 }, {
  55     "text": "debug.js",
  56     "id": "source\/debug.js",
  57     "leaf": true,
  58     "cls": "file"
  59 }]
  60  * </code></pre>
  61  * <p>An example of tree within a Viewport:</p><pre><code>
  62 new Ext.Viewport({
  63     layout: 'border',
  64     items: [{
  65         region: 'west',
  66         collapsible: true,
  67         title: 'Navigation',
  68         xtype: 'treepanel',
  69         width: 200,
  70         autoScroll: true,
  71         split: true,
  72         loader: new Ext.tree.TreeLoader(),
  73         root: new Ext.tree.AsyncTreeNode({
  74             expanded: true,
  75             children: [{
  76                 text: 'Menu Option 1',
  77                 leaf: true
  78             }, {
  79                 text: 'Menu Option 2',
  80                 leaf: true
  81             }, {
  82                 text: 'Menu Option 3',
  83                 leaf: true
  84             }]
  85         }),
  86         rootVisible: false,
  87         listeners: {
  88             click: function(n) {
  89                 Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
  90             }
  91         }
  92     }, {
  93         region: 'center',
  94         xtype: 'tabpanel',
  95         // remaining code not shown ...
  96     }]
  97 });
  98 </code></pre>
  99  *
 100  * @cfg {Ext.tree.TreeNode} root The root node for the tree.
 101  * @cfg {Boolean} rootVisible <tt>false</tt> to hide the root node (defaults to <tt>true</tt>)
 102  * @cfg {Boolean} lines <tt>false</tt> to disable tree lines (defaults to <tt>true</tt>)
 103  * @cfg {Boolean} enableDD <tt>true</tt> to enable drag and drop
 104  * @cfg {Boolean} enableDrag <tt>true</tt> to enable just drag
 105  * @cfg {Boolean} enableDrop <tt>true</tt> to enable just drop
 106  * @cfg {Object} dragConfig Custom config to pass to the {@link Ext.tree.TreeDragZone} instance
 107  * @cfg {Object} dropConfig Custom config to pass to the {@link Ext.tree.TreeDropZone} instance
 108  * @cfg {String} ddGroup The DD group this TreePanel belongs to
 109  * @cfg {Boolean} ddAppendOnly <tt>true</tt> if the tree should only allow append drops (use for trees which are sorted)
 110  * @cfg {Boolean} ddScroll <tt>true</tt> to enable body scrolling
 111  * @cfg {Boolean} containerScroll <tt>true</tt> to register this container with ScrollManager
 112  * @cfg {Boolean} hlDrop <tt>false</tt> to disable node highlight on drop (defaults to the value of {@link Ext#enableFx})
 113  * @cfg {String} hlColor The color of the node highlight (defaults to <tt>'C3DAF9'</tt>)
 114  * @cfg {Boolean} animate <tt>true</tt> to enable animated expand/collapse (defaults to the value of {@link Ext#enableFx})
 115  * @cfg {Boolean} singleExpand <tt>true</tt> if only 1 node per branch may be expanded
 116  * @cfg {Object} selModel A tree selection model to use with this TreePanel (defaults to an {@link Ext.tree.DefaultSelectionModel})
 117  * @cfg {Boolean} trackMouseOver <tt>false</tt> to disable mouse over highlighting
 118  * @cfg {Ext.tree.TreeLoader} loader A {@link Ext.tree.TreeLoader} for use with this TreePanel
 119  * @cfg {String} pathSeparator The token used to separate sub-paths in path strings (defaults to <tt>'/'</tt>)
 120  * @cfg {Boolean} useArrows <tt>true</tt> to use Vista-style arrows in the tree (defaults to <tt>false</tt>)
 121  * @cfg {String} requestMethod The HTTP request method for loading data (defaults to the value of {@link Ext.Ajax#method}).
 122  *
 123  * @constructor
 124  * @param {Object} config
 125  * @xtype treepanel
 126  */
 127 Ext.tree.TreePanel = Ext.extend(Ext.Panel, {
 128     rootVisible : true,
 129     animate : Ext.enableFx,
 130     lines : true,
 131     enableDD : false,
 132     hlDrop : Ext.enableFx,
 133     pathSeparator : '/',
 134
 135     /**
 136      * @cfg {Array} bubbleEvents
 137      * <p>An array of events that, when fired, should be bubbled to any parent container.
 138      * See {@link Ext.util.Observable#enableBubble}.
 139      * Defaults to <tt>[]</tt>.
 140      */
 141     bubbleEvents : [],
 142
 143     initComponent : function(){
 144         Ext.tree.TreePanel.superclass.initComponent.call(this);
 145
 146         if(!this.eventModel){
 147             this.eventModel = new Ext.tree.TreeEventModel(this);
 148         }
 149
 150         // initialize the loader
 151         var l = this.loader;
 152         if(!l){
 153             l = new Ext.tree.TreeLoader({
 154                 dataUrl: this.dataUrl,
 155                 requestMethod: this.requestMethod
 156             });
 157         }else if(Ext.isObject(l) && !l.load){
 158             l = new Ext.tree.TreeLoader(l);
 159         }
 160         this.loader = l;
 161
 162         this.nodeHash = {};
 163
 164         /**
 165         * The root node of this tree.
 166         * @type Ext.tree.TreeNode
 167         * @property root
 168         */
 169         if(this.root){
 170             var r = this.root;
 171             delete this.root;
 172             this.setRootNode(r);
 173         }
 174
 175
 176         this.addEvents(
 177
 178             /**
 179             * @event append
 180             * Fires when a new child node is appended to a node in this tree.
 181             * @param {Tree} tree The owner tree
 182             * @param {Node} parent The parent node
 183             * @param {Node} node The newly appended node
 184             * @param {Number} index The index of the newly appended node
 185             */
 186            'append',
 187            /**
 188             * @event remove
 189             * Fires when a child node is removed from a node in this tree.
 190             * @param {Tree} tree The owner tree
 191             * @param {Node} parent The parent node
 192             * @param {Node} node The child node removed
 193             */
 194            'remove',
 195            /**
 196             * @event movenode
 197             * Fires when a node is moved to a new location in the tree
 198             * @param {Tree} tree The owner tree
 199             * @param {Node} node The node moved
 200             * @param {Node} oldParent The old parent of this node
 201             * @param {Node} newParent The new parent of this node
 202             * @param {Number} index The index it was moved to
 203             */
 204            'movenode',
 205            /**
 206             * @event insert
 207             * Fires when a new child node is inserted in a node in this tree.
 208             * @param {Tree} tree The owner tree
 209             * @param {Node} parent The parent node
 210             * @param {Node} node The child node inserted
 211             * @param {Node} refNode The child node the node was inserted before
 212             */
 213            'insert',
 214            /**
 215             * @event beforeappend
 216             * Fires before a new child is appended to a node in this tree, return false to cancel the append.
 217             * @param {Tree} tree The owner tree
 218             * @param {Node} parent The parent node
 219             * @param {Node} node The child node to be appended
 220             */
 221            'beforeappend',
 222            /**
 223             * @event beforeremove
 224             * Fires before a child is removed from a node in this tree, return false to cancel the remove.
 225             * @param {Tree} tree The owner tree
 226             * @param {Node} parent The parent node
 227             * @param {Node} node The child node to be removed
 228             */
 229            'beforeremove',
 230            /**
 231             * @event beforemovenode
 232             * Fires before a node is moved to a new location in the tree. Return false to cancel the move.
 233             * @param {Tree} tree The owner tree
 234             * @param {Node} node The node being moved
 235             * @param {Node} oldParent The parent of the node
 236             * @param {Node} newParent The new parent the node is moving to
 237             * @param {Number} index The index it is being moved to
 238             */
 239            'beforemovenode',
 240            /**
 241             * @event beforeinsert
 242             * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
 243             * @param {Tree} tree The owner tree
 244             * @param {Node} parent The parent node
 245             * @param {Node} node The child node to be inserted
 246             * @param {Node} refNode The child node the node is being inserted before
 247             */
 248             'beforeinsert',
 249
 250             /**
 251             * @event beforeload
 252             * Fires before a node is loaded, return false to cancel
 253             * @param {Node} node The node being loaded
 254             */
 255             'beforeload',
 256             /**
 257             * @event load
 258             * Fires when a node is loaded
 259             * @param {Node} node The node that was loaded
 260             */
 261             'load',
 262             /**
 263             * @event textchange
 264             * Fires when the text for a node is changed
 265             * @param {Node} node The node
 266             * @param {String} text The new text
 267             * @param {String} oldText The old text
 268             */
 269             'textchange',
 270             /**
 271             * @event beforeexpandnode
 272             * Fires before a node is expanded, return false to cancel.
 273             * @param {Node} node The node
 274             * @param {Boolean} deep
 275             * @param {Boolean} anim
 276             */
 277             'beforeexpandnode',
 278             /**
 279             * @event beforecollapsenode
 280             * Fires before a node is collapsed, return false to cancel.
 281             * @param {Node} node The node
 282             * @param {Boolean} deep
 283             * @param {Boolean} anim
 284             */
 285             'beforecollapsenode',
 286             /**
 287             * @event expandnode
 288             * Fires when a node is expanded
 289             * @param {Node} node The node
 290             */
 291             'expandnode',
 292             /**
 293             * @event disabledchange
 294             * Fires when the disabled status of a node changes
 295             * @param {Node} node The node
 296             * @param {Boolean} disabled
 297             */
 298             'disabledchange',
 299             /**
 300             * @event collapsenode
 301             * Fires when a node is collapsed
 302             * @param {Node} node The node
 303             */
 304             'collapsenode',
 305             /**
 306             * @event beforeclick
 307             * Fires before click processing on a node. Return false to cancel the default action.
 308             * @param {Node} node The node
 309             * @param {Ext.EventObject} e The event object
 310             */
 311             'beforeclick',
 312             /**
 313             * @event click
 314             * Fires when a node is clicked
 315             * @param {Node} node The node
 316             * @param {Ext.EventObject} e The event object
 317             */
 318             'click',
 319             /**
 320             * @event containerclick
 321             * Fires when the tree container is clicked
 322             * @param {Tree} this
 323             * @param {Ext.EventObject} e The event object
 324             */
 325             'containerclick',
 326             /**
 327             * @event checkchange
 328             * Fires when a node with a checkbox's checked property changes
 329             * @param {Node} this This node
 330             * @param {Boolean} checked
 331             */
 332             'checkchange',
 333             /**
 334             * @event beforedblclick
 335             * Fires before double click processing on a node. Return false to cancel the default action.
 336             * @param {Node} node The node
 337             * @param {Ext.EventObject} e The event object
 338             */
 339             'beforedblclick',
 340             /**
 341             * @event dblclick
 342             * Fires when a node is double clicked
 343             * @param {Node} node The node
 344             * @param {Ext.EventObject} e The event object
 345             */
 346             'dblclick',
 347             /**
 348             * @event containerdblclick
 349             * Fires when the tree container is double clicked
 350             * @param {Tree} this
 351             * @param {Ext.EventObject} e The event object
 352             */
 353             'containerdblclick',
 354             /**
 355             * @event contextmenu
 356             * Fires when a node is right clicked. To display a context menu in response to this
 357             * event, first create a Menu object (see {@link Ext.menu.Menu} for details), then add
 358             * a handler for this event:<pre><code>
 359 new Ext.tree.TreePanel({
 360     title: 'My TreePanel',
 361     root: new Ext.tree.AsyncTreeNode({
 362         text: 'The Root',
 363         children: [
 364             { text: 'Child node 1', leaf: true },
 365             { text: 'Child node 2', leaf: true }
 366         ]
 367     }),
 368     contextMenu: new Ext.menu.Menu({
 369         items: [{
 370             id: 'delete-node',
 371             text: 'Delete Node'
 372         }],
 373         listeners: {
 374             itemclick: function(item) {
 375                 switch (item.id) {
 376                     case 'delete-node':
 377                         var n = item.parentMenu.contextNode;
 378                         if (n.parentNode) {
 379                             n.remove();
 380                         }
 381                         break;
 382                 }
 383             }
 384         }
 385     }),
 386     listeners: {
 387         contextmenu: function(node, e) {
 388 //          Register the context node with the menu so that a Menu Item's handler function can access
 389 //          it via its {@link Ext.menu.BaseItem#parentMenu parentMenu} property.
 390             node.select();
 391             var c = node.getOwnerTree().contextMenu;
 392             c.contextNode = node;
 393             c.showAt(e.getXY());
 394         }
 395     }
 396 });
 397 </code></pre>
 398             * @param {Node} node The node
 399             * @param {Ext.EventObject} e The event object
 400             */
 401             'contextmenu',
 402             /**
 403             * @event containercontextmenu
 404             * Fires when the tree container is right clicked
 405             * @param {Tree} this
 406             * @param {Ext.EventObject} e The event object
 407             */
 408             'containercontextmenu',
 409             /**
 410             * @event beforechildrenrendered
 411             * Fires right before the child nodes for a node are rendered
 412             * @param {Node} node The node
 413             */
 414             'beforechildrenrendered',
 415            /**
 416              * @event startdrag
 417              * Fires when a node starts being dragged
 418              * @param {Ext.tree.TreePanel} this
 419              * @param {Ext.tree.TreeNode} node
 420              * @param {event} e The raw browser event
 421              */
 422             'startdrag',
 423             /**
 424              * @event enddrag
 425              * Fires when a drag operation is complete
 426              * @param {Ext.tree.TreePanel} this
 427              * @param {Ext.tree.TreeNode} node
 428              * @param {event} e The raw browser event
 429              */
 430             'enddrag',
 431             /**
 432              * @event dragdrop
 433              * Fires when a dragged node is dropped on a valid DD target
 434              * @param {Ext.tree.TreePanel} this
 435              * @param {Ext.tree.TreeNode} node
 436              * @param {DD} dd The dd it was dropped on
 437              * @param {event} e The raw browser event
 438              */
 439             'dragdrop',
 440             /**
 441              * @event beforenodedrop
 442              * Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The dropEvent
 443              * passed to handlers has the following properties:<br />
 444              * <ul style="padding:5px;padding-left:16px;">
 445              * <li>tree - The TreePanel</li>
 446              * <li>target - The node being targeted for the drop</li>
 447              * <li>data - The drag data from the drag source</li>
 448              * <li>point - The point of the drop - append, above or below</li>
 449              * <li>source - The drag source</li>
 450              * <li>rawEvent - Raw mouse event</li>
 451              * <li>dropNode - Drop node(s) provided by the source <b>OR</b> you can supply node(s)
 452              * to be inserted by setting them on this object.</li>
 453              * <li>cancel - Set this to true to cancel the drop.</li>
 454              * <li>dropStatus - If the default drop action is cancelled but the drop is valid, setting this to true
 455              * will prevent the animated 'repair' from appearing.</li>
 456              * </ul>
 457              * @param {Object} dropEvent
 458              */
 459             'beforenodedrop',
 460             /**
 461              * @event nodedrop
 462              * Fires after a DD object is dropped on a node in this tree. The dropEvent
 463              * passed to handlers has the following properties:<br />
 464              * <ul style="padding:5px;padding-left:16px;">
 465              * <li>tree - The TreePanel</li>
 466              * <li>target - The node being targeted for the drop</li>
 467              * <li>data - The drag data from the drag source</li>
 468              * <li>point - The point of the drop - append, above or below</li>
 469              * <li>source - The drag source</li>
 470              * <li>rawEvent - Raw mouse event</li>
 471              * <li>dropNode - Dropped node(s).</li>
 472              * </ul>
 473              * @param {Object} dropEvent
 474              */
 475             'nodedrop',
 476              /**
 477              * @event nodedragover
 478              * Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent
 479              * passed to handlers has the following properties:<br />
 480              * <ul style="padding:5px;padding-left:16px;">
 481              * <li>tree - The TreePanel</li>
 482              * <li>target - The node being targeted for the drop</li>
 483              * <li>data - The drag data from the drag source</li>
 484              * <li>point - The point of the drop - append, above or below</li>
 485              * <li>source - The drag source</li>
 486              * <li>rawEvent - Raw mouse event</li>
 487              * <li>dropNode - Drop node(s) provided by the source.</li>
 488              * <li>cancel - Set this to true to signal drop not allowed.</li>
 489              * </ul>
 490              * @param {Object} dragOverEvent
 491              */
 492             'nodedragover'
 493         );
 494         if(this.singleExpand){
 495             this.on('beforeexpandnode', this.restrictExpand, this);
 496         }
 497     },
 498
 499     // private
 500     proxyNodeEvent : function(ename, a1, a2, a3, a4, a5, a6){
 501         if(ename == 'collapse' || ename == 'expand' || ename == 'beforecollapse' || ename == 'beforeexpand' || ename == 'move' || ename == 'beforemove'){
 502             ename = ename+'node';
 503         }
 504         // args inline for performance while bubbling events
 505         return this.fireEvent(ename, a1, a2, a3, a4, a5, a6);
 506     },
 507
 508
 509     /**
 510      * Returns this root node for this tree
 511      * @return {Node}
 512      */
 513     getRootNode : function(){
 514         return this.root;
 515     },
 516
 517     /**
 518      * Sets the root node for this tree. If the TreePanel has already rendered a root node, the
 519      * previous root node (and all of its descendants) are destroyed before the new root node is rendered.
 520      * @param {Node} node
 521      * @return {Node}
 522      */
 523     setRootNode : function(node){
 524         this.destroyRoot();
 525         if(!node.render){ // attributes passed
 526             node = this.loader.createNode(node);
 527         }
 528         this.root = node;
 529         node.ownerTree = this;
 530         node.isRoot = true;
 531         this.registerNode(node);
 532         if(!this.rootVisible){
 533             var uiP = node.attributes.uiProvider;
 534             node.ui = uiP ? new uiP(node) : new Ext.tree.RootTreeNodeUI(node);
 535         }
 536         if(this.innerCt){
 537             this.clearInnerCt();
 538             this.renderRoot();
 539         }
 540         return node;
 541     },
 542
 543     clearInnerCt : function(){
 544         this.innerCt.update('');
 545     },
 546
 547     // private
 548     renderRoot : function(){
 549         this.root.render();
 550         if(!this.rootVisible){
 551             this.root.renderChildren();
 552         }
 553     },
 554
 555     /**
 556      * Gets a node in this tree by its id
 557      * @param {String} id
 558      * @return {Node}
 559      */
 560     getNodeById : function(id){
 561         return this.nodeHash[id];
 562     },
 563
 564     // private
 565     registerNode : function(node){
 566         this.nodeHash[node.id] = node;
 567     },
 568
 569     // private
 570     unregisterNode : function(node){
 571         delete this.nodeHash[node.id];
 572     },
 573
 574     // private
 575     toString : function(){
 576         return '[Tree'+(this.id?' '+this.id:'')+']';
 577     },
 578
 579     // private
 580     restrictExpand : function(node){
 581         var p = node.parentNode;
 582         if(p){
 583             if(p.expandedChild && p.expandedChild.parentNode == p){
 584                 p.expandedChild.collapse();
 585             }
 586             p.expandedChild = node;
 587         }
 588     },
 589
 590     /**
 591      * Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. 'id')
 592      * @param {String} attribute (optional) Defaults to null (return the actual nodes)
 593      * @param {TreeNode} startNode (optional) The node to start from, defaults to the root
 594      * @return {Array}
 595      */
 596     getChecked : function(a, startNode){
 597         startNode = startNode || this.root;
 598         var r = [];
 599         var f = function(){
 600             if(this.attributes.checked){
 601                 r.push(!a ? this : (a == 'id' ? this.id : this.attributes[a]));
 602             }
 603         };
 604         startNode.cascade(f);
 605         return r;
 606     },
 607
 608     /**
 609      * Returns the default {@link Ext.tree.TreeLoader} for this TreePanel.
 610      * @return {Ext.tree.TreeLoader} The TreeLoader for this TreePanel.
 611      */
 612     getLoader : function(){
 613         return this.loader;
 614     },
 615
 616     /**
 617      * Expand all nodes
 618      */
 619     expandAll : function(){
 620         this.root.expand(true);
 621     },
 622
 623     /**
 624      * Collapse all nodes
 625      */
 626     collapseAll : function(){
 627         this.root.collapse(true);
 628     },
 629
 630     /**
 631      * Returns the selection model used by this TreePanel.
 632      * @return {TreeSelectionModel} The selection model used by this TreePanel
 633      */
 634     getSelectionModel : function(){
 635         if(!this.selModel){
 636             this.selModel = new Ext.tree.DefaultSelectionModel();
 637         }
 638         return this.selModel;
 639     },
 640
 641     /**
 642      * Expands a specified path in this TreePanel. A path can be retrieved from a node with {@link Ext.data.Node#getPath}
 643      * @param {String} path
 644      * @param {String} attr (optional) The attribute used in the path (see {@link Ext.data.Node#getPath} for more info)
 645      * @param {Function} callback (optional) The callback to call when the expand is complete. The callback will be called with
 646      * (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded.
 647      */
 648     expandPath : function(path, attr, callback){
 649         attr = attr || 'id';
 650         var keys = path.split(this.pathSeparator);
 651         var curNode = this.root;
 652         if(curNode.attributes[attr] != keys[1]){ // invalid root
 653             if(callback){
 654                 callback(false, null);
 655             }
 656             return;
 657         }
 658         var index = 1;
 659         var f = function(){
 660             if(++index == keys.length){
 661                 if(callback){
 662                     callback(true, curNode);
 663                 }
 664                 return;
 665             }
 666             var c = curNode.findChild(attr, keys[index]);
 667             if(!c){
 668                 if(callback){
 669                     callback(false, curNode);
 670                 }
 671                 return;
 672             }
 673             curNode = c;
 674             c.expand(false, false, f);
 675         };
 676         curNode.expand(false, false, f);
 677     },
 678
 679     /**
 680      * Selects the node in this tree at the specified path. A path can be retrieved from a node with {@link Ext.data.Node#getPath}
 681      * @param {String} path
 682      * @param {String} attr (optional) The attribute used in the path (see {@link Ext.data.Node#getPath} for more info)
 683      * @param {Function} callback (optional) The callback to call when the selection is complete. The callback will be called with
 684      * (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node.
 685      */
 686     selectPath : function(path, attr, callback){
 687         attr = attr || 'id';
 688         var keys = path.split(this.pathSeparator),
 689             v = keys.pop();
 690         if(keys.length > 1){
 691             var f = function(success, node){
 692                 if(success && node){
 693                     var n = node.findChild(attr, v);
 694                     if(n){
 695                         n.select();
 696                         if(callback){
 697                             callback(true, n);
 698                         }
 699                     }else if(callback){
 700                         callback(false, n);
 701                     }
 702                 }else{
 703                     if(callback){
 704                         callback(false, n);
 705                     }
 706                 }
 707             };
 708             this.expandPath(keys.join(this.pathSeparator), attr, f);
 709         }else{
 710             this.root.select();
 711             if(callback){
 712                 callback(true, this.root);
 713             }
 714         }
 715     },
 716
 717     /**
 718      * Returns the underlying Element for this tree
 719      * @return {Ext.Element} The Element
 720      */
 721     getTreeEl : function(){
 722         return this.body;
 723     },
 724
 725     // private
 726     onRender : function(ct, position){
 727         Ext.tree.TreePanel.superclass.onRender.call(this, ct, position);
 728         this.el.addClass('x-tree');
 729         this.innerCt = this.body.createChild({tag:'ul',
 730                cls:'x-tree-root-ct ' +
 731                (this.useArrows ? 'x-tree-arrows' : this.lines ? 'x-tree-lines' : 'x-tree-no-lines')});
 732     },
 733
 734     // private
 735     initEvents : function(){
 736         Ext.tree.TreePanel.superclass.initEvents.call(this);
 737
 738         if(this.containerScroll){
 739             Ext.dd.ScrollManager.register(this.body);
 740         }
 741         if((this.enableDD || this.enableDrop) && !this.dropZone){
 742            /**
 743             * The dropZone used by this tree if drop is enabled (see {@link #enableDD} or {@link #enableDrop})
 744             * @property dropZone
 745             * @type Ext.tree.TreeDropZone
 746             */
 747              this.dropZone = new Ext.tree.TreeDropZone(this, this.dropConfig || {
 748                ddGroup: this.ddGroup || 'TreeDD', appendOnly: this.ddAppendOnly === true
 749            });
 750         }
 751         if((this.enableDD || this.enableDrag) && !this.dragZone){
 752            /**
 753             * The dragZone used by this tree if drag is enabled (see {@link #enableDD} or {@link #enableDrag})
 754             * @property dragZone
 755             * @type Ext.tree.TreeDragZone
 756             */
 757             this.dragZone = new Ext.tree.TreeDragZone(this, this.dragConfig || {
 758                ddGroup: this.ddGroup || 'TreeDD',
 759                scroll: this.ddScroll
 760            });
 761         }
 762         this.getSelectionModel().init(this);
 763     },
 764
 765     // private
 766     afterRender : function(){
 767         Ext.tree.TreePanel.superclass.afterRender.call(this);
 768         this.renderRoot();
 769     },
 770
 771     beforeDestroy : function(){
 772         if(this.rendered){
 773             Ext.dd.ScrollManager.unregister(this.body);
 774             Ext.destroy(this.dropZone, this.dragZone);
 775         }
 776         this.destroyRoot();
 777         Ext.destroy(this.loader);
 778         this.nodeHash = this.root = this.loader = null;
 779         Ext.tree.TreePanel.superclass.beforeDestroy.call(this);
 780     },
 781
 782     /**
 783      * Destroy the root node. Not included by itself because we need to pass the silent parameter.
 784      * @private
 785      */
 786     destroyRoot : function(){
 787         if(this.root && this.root.destroy){
 788             this.root.destroy(true);
 789         }
 790     }
 791
 792     /**
 793      * @cfg {String/Number} activeItem
 794      * @hide
 795      */
 796     /**
 797      * @cfg {Boolean} autoDestroy
 798      * @hide
 799      */
 800     /**
 801      * @cfg {Object/String/Function} autoLoad
 802      * @hide
 803      */
 804     /**
 805      * @cfg {Boolean} autoWidth
 806      * @hide
 807      */
 808     /**
 809      * @cfg {Boolean/Number} bufferResize
 810      * @hide
 811      */
 812     /**
 813      * @cfg {String} defaultType
 814      * @hide
 815      */
 816     /**
 817      * @cfg {Object} defaults
 818      * @hide
 819      */
 820     /**
 821      * @cfg {Boolean} hideBorders
 822      * @hide
 823      */
 824     /**
 825      * @cfg {Mixed} items
 826      * @hide
 827      */
 828     /**
 829      * @cfg {String} layout
 830      * @hide
 831      */
 832     /**
 833      * @cfg {Object} layoutConfig
 834      * @hide
 835      */
 836     /**
 837      * @cfg {Boolean} monitorResize
 838      * @hide
 839      */
 840     /**
 841      * @property items
 842      * @hide
 843      */
 844     /**
 845      * @method cascade
 846      * @hide
 847      */
 848     /**
 849      * @method doLayout
 850      * @hide
 851      */
 852     /**
 853      * @method find
 854      * @hide
 855      */
 856     /**
 857      * @method findBy
 858      * @hide
 859      */
 860     /**
 861      * @method findById
 862      * @hide
 863      */
 864     /**
 865      * @method findByType
 866      * @hide
 867      */
 868     /**
 869      * @method getComponent
 870      * @hide
 871      */
 872     /**
 873      * @method getLayout
 874      * @hide
 875      */
 876     /**
 877      * @method getUpdater
 878      * @hide
 879      */
 880     /**
 881      * @method insert
 882      * @hide
 883      */
 884     /**
 885      * @method load
 886      * @hide
 887      */
 888     /**
 889      * @method remove
 890      * @hide
 891      */
 892     /**
 893      * @event add
 894      * @hide
 895      */
 896     /**
 897      * @method removeAll
 898      * @hide
 899      */
 900     /**
 901      * @event afterLayout
 902      * @hide
 903      */
 904     /**
 905      * @event beforeadd
 906      * @hide
 907      */
 908     /**
 909      * @event beforeremove
 910      * @hide
 911      */
 912     /**
 913      * @event remove
 914      * @hide
 915      */
 916
 917
 918
 919     /**
 920      * @cfg {String} allowDomMove  @hide
 921      */
 922     /**
 923      * @cfg {String} autoEl @hide
 924      */
 925     /**
 926      * @cfg {String} applyTo  @hide
 927      */
 928     /**
 929      * @cfg {String} contentEl  @hide
 930      */
 931     /**
 932      * @cfg {Mixed} data  @hide
 933      */
 934     /**
 935      * @cfg {Mixed} tpl  @hide
 936      */
 937     /**
 938      * @cfg {String} tplWriteMode  @hide
 939      */
 940     /**
 941      * @cfg {String} disabledClass  @hide
 942      */
 943     /**
 944      * @cfg {String} elements  @hide
 945      */
 946     /**
 947      * @cfg {String} html  @hide
 948      */
 949     /**
 950      * @cfg {Boolean} preventBodyReset
 951      * @hide
 952      */
 953     /**
 954      * @property disabled
 955      * @hide
 956      */
 957     /**
 958      * @method applyToMarkup
 959      * @hide
 960      */
 961     /**
 962      * @method enable
 963      * @hide
 964      */
 965     /**
 966      * @method disable
 967      * @hide
 968      */
 969     /**
 970      * @method setDisabled
 971      * @hide
 972      */
 973 });
 974
 975 Ext.tree.TreePanel.nodeTypes = {};
 976
 977 Ext.reg('treepanel', Ext.tree.TreePanel);</pre>
 978 </body>
 979 </html>