docs/source/TreeNode.html

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