docs/source/TreeNode.html

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