source/widgets/tree/TreeNode.js

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