src/widgets/tree/TreeNode.js

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