docs/source/TreeNode.html

   1 <html>
   2 <head>
   3   <title>The source code</title>
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   6 </head>
   7 <body  onload="prettyPrint();">
   8     <pre class="prettyprint lang-js">/*!
   9  * Ext JS Library 3.0.3
  10  * Copyright(c) 2006-2009 Ext JS, LLC
  11  * licensing@extjs.com
  12  * http://www.extjs.com/license
  13  */
  14 <div id="cls-Ext.tree.TreeNode"></div>/**\r
  15  * @class Ext.tree.TreeNode\r
  16  * @extends Ext.data.Node\r
  17  * @cfg {String} text The text for this node\r
  18  * @cfg {Boolean} expanded true to start the node expanded\r
  19  * @cfg {Boolean} allowDrag False to make this node undraggable if {@link #draggable} = true (defaults to true)\r
  20  * @cfg {Boolean} allowDrop False if this node cannot have child nodes dropped on it (defaults to true)\r
  21  * @cfg {Boolean} disabled true to start the node disabled\r
  22  * @cfg {String} icon The path to an icon for the node. The preferred way to do this\r
  23  * is to use the cls or iconCls attributes and add the icon via a CSS background image.\r
  24  * @cfg {String} cls A css class to be added to the node\r
  25  * @cfg {String} iconCls A css class to be added to the nodes icon element for applying css background images\r
  26  * @cfg {String} href URL of the link used for the node (defaults to #)\r
  27  * @cfg {String} hrefTarget target frame for the link\r
  28  * @cfg {Boolean} hidden True to render hidden. (Defaults to false).\r
  29  * @cfg {String} qtip An Ext QuickTip for the node\r
  30  * @cfg {Boolean} expandable If set to true, the node will always show a plus/minus icon, even when empty\r
  31  * @cfg {String} qtipCfg An Ext QuickTip config for the node (used instead of qtip)\r
  32  * @cfg {Boolean} singleClickExpand True for single click expand on this node\r
  33  * @cfg {Function} uiProvider A UI <b>class</b> to use for this node (defaults to Ext.tree.TreeNodeUI)\r
  34  * @cfg {Boolean} checked True to render a checked checkbox for this node, false to render an unchecked checkbox\r
  35  * (defaults to undefined with no checkbox rendered)\r
  36  * @cfg {Boolean} draggable True to make this node draggable (defaults to false)\r
  37  * @cfg {Boolean} isTarget False to not allow this node to act as a drop target (defaults to true)\r
  38  * @cfg {Boolean} allowChildren False to not allow this node to have child nodes (defaults to true)\r
  39  * @cfg {Boolean} editable False to not allow this node to be edited by an (@link Ext.tree.TreeEditor} (defaults to true)\r
  40  * @constructor\r
  41  * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node\r
  42  */\r
  43 Ext.tree.TreeNode = function(attributes){\r
  44     attributes = attributes || {};\r
  45     if(typeof attributes == 'string'){\r
  46         attributes = {text: attributes};\r
  47     }\r
  48     this.childrenRendered = false;\r
  49     this.rendered = false;\r
  50     Ext.tree.TreeNode.superclass.constructor.call(this, attributes);\r
  51     this.expanded = attributes.expanded === true;\r
  52     this.isTarget = attributes.isTarget !== false;\r
  53     this.draggable = attributes.draggable !== false && attributes.allowDrag !== false;\r
  54     this.allowChildren = attributes.allowChildren !== false && attributes.allowDrop !== false;\r
  55 \r
  56     /**\r
  57      * Read-only. The text for this node. To change it use <code>{@link #setText}</code>.\r
  58      * @type String\r
  59      */\r
  60     this.text = attributes.text;\r
  61     /**\r
  62      * True if this node is disabled.\r
  63      * @type Boolean\r
  64      */\r
  65     this.disabled = attributes.disabled === true;\r
  66     /**\r
  67      * True if this node is hidden.\r
  68      * @type Boolean\r
  69      */\r
  70     this.hidden = attributes.hidden === true;\r
  71 \r
  72     this.addEvents(\r
  73         /**\r
  74         * @event textchange\r
  75         * Fires when the text for this node is changed\r
  76         * @param {Node} this This node\r
  77         * @param {String} text The new text\r
  78         * @param {String} oldText The old text\r
  79         */\r
  80         'textchange',\r
  81         /**\r
  82         * @event beforeexpand\r
  83         * Fires before this node is expanded, return false to cancel.\r
  84         * @param {Node} this This node\r
  85         * @param {Boolean} deep\r
  86         * @param {Boolean} anim\r
  87         */\r
  88         'beforeexpand',\r
  89         /**\r
  90         * @event beforecollapse\r
  91         * Fires before this node is collapsed, return false to cancel.\r
  92         * @param {Node} this This node\r
  93         * @param {Boolean} deep\r
  94         * @param {Boolean} anim\r
  95         */\r
  96         'beforecollapse',\r
  97         /**\r
  98         * @event expand\r
  99         * Fires when this node is expanded\r
 100         * @param {Node} this This node\r
 101         */\r
 102         'expand',\r
 103         /**\r
 104         * @event disabledchange\r
 105         * Fires when the disabled status of this node changes\r
 106         * @param {Node} this This node\r
 107         * @param {Boolean} disabled\r
 108         */\r
 109         'disabledchange',\r
 110         /**\r
 111         * @event collapse\r
 112         * Fires when this node is collapsed\r
 113         * @param {Node} this This node\r
 114         */\r
 115         'collapse',\r
 116         /**\r
 117         * @event beforeclick\r
 118         * Fires before click processing. Return false to cancel the default action.\r
 119         * @param {Node} this This node\r
 120         * @param {Ext.EventObject} e The event object\r
 121         */\r
 122         'beforeclick',\r
 123         /**\r
 124         * @event click\r
 125         * Fires when this node is clicked\r
 126         * @param {Node} this This node\r
 127         * @param {Ext.EventObject} e The event object\r
 128         */\r
 129         'click',\r
 130         /**\r
 131         * @event checkchange\r
 132         * Fires when a node with a checkbox's checked property changes\r
 133         * @param {Node} this This node\r
 134         * @param {Boolean} checked\r
 135         */\r
 136         'checkchange',\r
 137         /**\r
 138         * @event beforedblclick\r
 139         * Fires before double click processing. Return false to cancel the default action.\r
 140         * @param {Node} this This node\r
 141         * @param {Ext.EventObject} e The event object\r
 142         */\r
 143         'beforedblclick',\r
 144         /**\r
 145         * @event dblclick\r
 146         * Fires when this node is double clicked\r
 147         * @param {Node} this This node\r
 148         * @param {Ext.EventObject} e The event object\r
 149         */\r
 150         'dblclick',\r
 151         /**\r
 152         * @event contextmenu\r
 153         * Fires when this node is right clicked\r
 154         * @param {Node} this This node\r
 155         * @param {Ext.EventObject} e The event object\r
 156         */\r
 157         'contextmenu',\r
 158         /**\r
 159         * @event beforechildrenrendered\r
 160         * Fires right before the child nodes for this node are rendered\r
 161         * @param {Node} this This node\r
 162         */\r
 163         'beforechildrenrendered'\r
 164     );\r
 165 \r
 166     var uiClass = this.attributes.uiProvider || this.defaultUI || Ext.tree.TreeNodeUI;\r
 167 \r
 168     /**\r
 169      * Read-only. The UI for this node\r
 170      * @type TreeNodeUI\r
 171      */\r
 172     this.ui = new uiClass(this);\r
 173 };\r
 174 Ext.extend(Ext.tree.TreeNode, Ext.data.Node, {\r
 175     preventHScroll : true,\r
 176     /**\r
 177      * Returns true if this node is expanded\r
 178      * @return {Boolean}\r
 179      */\r
 180     isExpanded : function(){\r
 181         return this.expanded;\r
 182     },\r
 183 \r
 184 /**\r
 185  * Returns the UI object for this node.\r
 186  * @return {TreeNodeUI} The object which is providing the user interface for this tree\r
 187  * node. Unless otherwise specified in the {@link #uiProvider}, this will be an instance\r
 188  * of {@link Ext.tree.TreeNodeUI}\r
 189  */\r
 190     getUI : function(){\r
 191         return this.ui;\r
 192     },\r
 193 \r
 194     getLoader : function(){\r
 195         var owner;\r
 196         return this.loader || ((owner = this.getOwnerTree()) && owner.loader ? owner.loader : new Ext.tree.TreeLoader());\r
 197     },\r
 198 \r
 199     // private override\r
 200     setFirstChild : function(node){\r
 201         var of = this.firstChild;\r
 202         Ext.tree.TreeNode.superclass.setFirstChild.call(this, node);\r
 203         if(this.childrenRendered && of && node != of){\r
 204             of.renderIndent(true, true);\r
 205         }\r
 206         if(this.rendered){\r
 207             this.renderIndent(true, true);\r
 208         }\r
 209     },\r
 210 \r
 211     // private override\r
 212     setLastChild : function(node){\r
 213         var ol = this.lastChild;\r
 214         Ext.tree.TreeNode.superclass.setLastChild.call(this, node);\r
 215         if(this.childrenRendered && ol && node != ol){\r
 216             ol.renderIndent(true, true);\r
 217         }\r
 218         if(this.rendered){\r
 219             this.renderIndent(true, true);\r
 220         }\r
 221     },\r
 222 \r
 223     // these methods are overridden to provide lazy rendering support\r
 224     // private override\r
 225     appendChild : function(n){\r
 226         if(!n.render && !Ext.isArray(n)){\r
 227             n = this.getLoader().createNode(n);\r
 228         }\r
 229         var node = Ext.tree.TreeNode.superclass.appendChild.call(this, n);\r
 230         if(node && this.childrenRendered){\r
 231             node.render();\r
 232         }\r
 233         this.ui.updateExpandIcon();\r
 234         return node;\r
 235     },\r
 236 \r
 237     // private override\r
 238     removeChild : function(node){\r
 239         this.ownerTree.getSelectionModel().unselect(node);\r
 240         Ext.tree.TreeNode.superclass.removeChild.apply(this, arguments);\r
 241         // if it's been rendered remove dom node\r
 242         if(this.childrenRendered){\r
 243             node.ui.remove();\r
 244         }\r
 245         if(this.childNodes.length < 1){\r
 246             this.collapse(false, false);\r
 247         }else{\r
 248             this.ui.updateExpandIcon();\r
 249         }\r
 250         if(!this.firstChild && !this.isHiddenRoot()) {\r
 251             this.childrenRendered = false;\r
 252         }\r
 253         return node;\r
 254     },\r
 255 \r
 256     // private override\r
 257     insertBefore : function(node, refNode){\r
 258         if(!node.render){\r
 259             node = this.getLoader().createNode(node);\r
 260         }\r
 261         var newNode = Ext.tree.TreeNode.superclass.insertBefore.call(this, node, refNode);\r
 262         if(newNode && refNode && this.childrenRendered){\r
 263             node.render();\r
 264         }\r
 265         this.ui.updateExpandIcon();\r
 266         return newNode;\r
 267     },\r
 268 \r
 269     /**\r
 270      * Sets the text for this node\r
 271      * @param {String} text\r
 272      */\r
 273     setText : function(text){\r
 274         var oldText = this.text;\r
 275         this.text = text;\r
 276         this.attributes.text = text;\r
 277         if(this.rendered){ // event without subscribing\r
 278             this.ui.onTextChange(this, text, oldText);\r
 279         }\r
 280         this.fireEvent('textchange', this, text, oldText);\r
 281     },\r
 282 \r
 283     /**\r
 284      * Triggers selection of this node\r
 285      */\r
 286     select : function(){\r
 287         this.getOwnerTree().getSelectionModel().select(this);\r
 288     },\r
 289 \r
 290     /**\r
 291      * Triggers deselection of this node\r
 292      */\r
 293     unselect : function(){\r
 294         this.getOwnerTree().getSelectionModel().unselect(this);\r
 295     },\r
 296 \r
 297     /**\r
 298      * Returns true if this node is selected\r
 299      * @return {Boolean}\r
 300      */\r
 301     isSelected : function(){\r
 302         return this.getOwnerTree().getSelectionModel().isSelected(this);\r
 303     },\r
 304 \r
 305     /**\r
 306      * Expand this node.\r
 307      * @param {Boolean} deep (optional) True to expand all children as well\r
 308      * @param {Boolean} anim (optional) false to cancel the default animation\r
 309      * @param {Function} callback (optional) A callback to be called when\r
 310      * expanding this node completes (does not wait for deep expand to complete).\r
 311      * Called with 1 parameter, this node.\r
 312      * @param {Object} scope (optional) The scope in which to execute the callback.\r
 313      */\r
 314     expand : function(deep, anim, callback, scope){\r
 315         if(!this.expanded){\r
 316             if(this.fireEvent('beforeexpand', this, deep, anim) === false){\r
 317                 return;\r
 318             }\r
 319             if(!this.childrenRendered){\r
 320                 this.renderChildren();\r
 321             }\r
 322             this.expanded = true;\r
 323             if(!this.isHiddenRoot() && (this.getOwnerTree().animate && anim !== false) || anim){\r
 324                 this.ui.animExpand(function(){\r
 325                     this.fireEvent('expand', this);\r
 326                     this.runCallback(callback, scope || this, [this]);\r
 327                     if(deep === true){\r
 328                         this.expandChildNodes(true);\r
 329                     }\r
 330                 }.createDelegate(this));\r
 331                 return;\r
 332             }else{\r
 333                 this.ui.expand();\r
 334                 this.fireEvent('expand', this);\r
 335                 this.runCallback(callback, scope || this, [this]);\r
 336             }\r
 337         }else{\r
 338            this.runCallback(callback, scope || this, [this]);\r
 339         }\r
 340         if(deep === true){\r
 341             this.expandChildNodes(true);\r
 342         }\r
 343     },\r
 344 \r
 345     runCallback : function(cb, scope, args){\r
 346         if(Ext.isFunction(cb)){\r
 347             cb.apply(scope, args);\r
 348         }\r
 349     },\r
 350 \r
 351     isHiddenRoot : function(){\r
 352         return this.isRoot && !this.getOwnerTree().rootVisible;\r
 353     },\r
 354 \r
 355     /**\r
 356      * Collapse this node.\r
 357      * @param {Boolean} deep (optional) True to collapse all children as well\r
 358      * @param {Boolean} anim (optional) false to cancel the default animation\r
 359      * @param {Function} callback (optional) A callback to be called when\r
 360      * expanding this node completes (does not wait for deep expand to complete).\r
 361      * Called with 1 parameter, this node.\r
 362      * @param {Object} scope (optional) The scope in which to execute the callback.\r
 363      */\r
 364     collapse : function(deep, anim, callback, scope){\r
 365         if(this.expanded && !this.isHiddenRoot()){\r
 366             if(this.fireEvent('beforecollapse', this, deep, anim) === false){\r
 367                 return;\r
 368             }\r
 369             this.expanded = false;\r
 370             if((this.getOwnerTree().animate && anim !== false) || anim){\r
 371                 this.ui.animCollapse(function(){\r
 372                     this.fireEvent('collapse', this);\r
 373                     this.runCallback(callback, scope || this, [this]);\r
 374                     if(deep === true){\r
 375                         this.collapseChildNodes(true);\r
 376                     }\r
 377                 }.createDelegate(this));\r
 378                 return;\r
 379             }else{\r
 380                 this.ui.collapse();\r
 381                 this.fireEvent('collapse', this);\r
 382                 this.runCallback(callback, scope || this, [this]);\r
 383             }\r
 384         }else if(!this.expanded){\r
 385             this.runCallback(callback, scope || this, [this]);\r
 386         }\r
 387         if(deep === true){\r
 388             var cs = this.childNodes;\r
 389             for(var i = 0, len = cs.length; i < len; i++) {\r
 390                 cs[i].collapse(true, false);\r
 391             }\r
 392         }\r
 393     },\r
 394 \r
 395     // private\r
 396     delayedExpand : function(delay){\r
 397         if(!this.expandProcId){\r
 398             this.expandProcId = this.expand.defer(delay, this);\r
 399         }\r
 400     },\r
 401 \r
 402     // private\r
 403     cancelExpand : function(){\r
 404         if(this.expandProcId){\r
 405             clearTimeout(this.expandProcId);\r
 406         }\r
 407         this.expandProcId = false;\r
 408     },\r
 409 \r
 410     /**\r
 411      * Toggles expanded/collapsed state of the node\r
 412      */\r
 413     toggle : function(){\r
 414         if(this.expanded){\r
 415             this.collapse();\r
 416         }else{\r
 417             this.expand();\r
 418         }\r
 419     },\r
 420 \r
 421     /**\r
 422      * Ensures all parent nodes are expanded, and if necessary, scrolls\r
 423      * the node into view.\r
 424      * @param {Function} callback (optional) A function to call when the node has been made visible.\r
 425      * @param {Object} scope (optional) The scope in which to execute the callback.\r
 426      */\r
 427     ensureVisible : function(callback, scope){\r
 428         var tree = this.getOwnerTree();\r
 429         tree.expandPath(this.parentNode ? this.parentNode.getPath() : this.getPath(), false, function(){\r
 430             var node = tree.getNodeById(this.id);  // Somehow if we don't do this, we lose changes that happened to node in the meantime\r
 431             tree.getTreeEl().scrollChildIntoView(node.ui.anchor);\r
 432             this.runCallback(callback, scope || this, [this]);\r
 433         }.createDelegate(this));\r
 434     },\r
 435 \r
 436     /**\r
 437      * Expand all child nodes\r
 438      * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes\r
 439      */\r
 440     expandChildNodes : function(deep){\r
 441         var cs = this.childNodes;\r
 442         for(var i = 0, len = cs.length; i < len; i++) {\r
 443                 cs[i].expand(deep);\r
 444         }\r
 445     },\r
 446 \r
 447     /**\r
 448      * Collapse all child nodes\r
 449      * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes\r
 450      */\r
 451     collapseChildNodes : function(deep){\r
 452         var cs = this.childNodes;\r
 453         for(var i = 0, len = cs.length; i < len; i++) {\r
 454                 cs[i].collapse(deep);\r
 455         }\r
 456     },\r
 457 \r
 458     /**\r
 459      * Disables this node\r
 460      */\r
 461     disable : function(){\r
 462         this.disabled = true;\r
 463         this.unselect();\r
 464         if(this.rendered && this.ui.onDisableChange){ // event without subscribing\r
 465             this.ui.onDisableChange(this, true);\r
 466         }\r
 467         this.fireEvent('disabledchange', this, true);\r
 468     },\r
 469 \r
 470     /**\r
 471      * Enables this node\r
 472      */\r
 473     enable : function(){\r
 474         this.disabled = false;\r
 475         if(this.rendered && this.ui.onDisableChange){ // event without subscribing\r
 476             this.ui.onDisableChange(this, false);\r
 477         }\r
 478         this.fireEvent('disabledchange', this, false);\r
 479     },\r
 480 \r
 481     // private\r
 482     renderChildren : function(suppressEvent){\r
 483         if(suppressEvent !== false){\r
 484             this.fireEvent('beforechildrenrendered', this);\r
 485         }\r
 486         var cs = this.childNodes;\r
 487         for(var i = 0, len = cs.length; i < len; i++){\r
 488             cs[i].render(true);\r
 489         }\r
 490         this.childrenRendered = true;\r
 491     },\r
 492 \r
 493     // private\r
 494     sort : function(fn, scope){\r
 495         Ext.tree.TreeNode.superclass.sort.apply(this, arguments);\r
 496         if(this.childrenRendered){\r
 497             var cs = this.childNodes;\r
 498             for(var i = 0, len = cs.length; i < len; i++){\r
 499                 cs[i].render(true);\r
 500             }\r
 501         }\r
 502     },\r
 503 \r
 504     // private\r
 505     render : function(bulkRender){\r
 506         this.ui.render(bulkRender);\r
 507         if(!this.rendered){\r
 508             // make sure it is registered\r
 509             this.getOwnerTree().registerNode(this);\r
 510             this.rendered = true;\r
 511             if(this.expanded){\r
 512                 this.expanded = false;\r
 513                 this.expand(false, false);\r
 514             }\r
 515         }\r
 516     },\r
 517 \r
 518     // private\r
 519     renderIndent : function(deep, refresh){\r
 520         if(refresh){\r
 521             this.ui.childIndent = null;\r
 522         }\r
 523         this.ui.renderIndent();\r
 524         if(deep === true && this.childrenRendered){\r
 525             var cs = this.childNodes;\r
 526             for(var i = 0, len = cs.length; i < len; i++){\r
 527                 cs[i].renderIndent(true, refresh);\r
 528             }\r
 529         }\r
 530     },\r
 531 \r
 532     beginUpdate : function(){\r
 533         this.childrenRendered = false;\r
 534     },\r
 535 \r
 536     endUpdate : function(){\r
 537         if(this.expanded && this.rendered){\r
 538             this.renderChildren();\r
 539         }\r
 540     },\r
 541 \r
 542     destroy : function(){\r
 543         if(this.childNodes){\r
 544             for(var i = 0,l = this.childNodes.length; i < l; i++){\r
 545                 this.childNodes[i].destroy();\r
 546             }\r
 547             this.childNodes = null;\r
 548         }\r
 549         if(this.ui.destroy){\r
 550             this.ui.destroy();\r
 551         }\r
 552     },\r
 553 \r
 554     // private\r
 555     onIdChange : function(id){\r
 556         this.ui.onIdChange(id);\r
 557     }\r
 558 });\r
 559 \r
 560 Ext.tree.TreePanel.nodeTypes.node = Ext.tree.TreeNode;</pre>
 561 </body>
 562 </html>