Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / docs / source / TreeNode.html
index c766ccb..d572ac3 100644 (file)
-<html>\r
-<head>\r
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
-  <title>The source code</title>\r
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body  onload="prettyPrint();">\r
-    <pre class="prettyprint lang-js"><div id="cls-Ext.tree.TreeNode"></div>/**\r
- * @class Ext.tree.TreeNode\r
- * @extends Ext.data.Node\r
- * @cfg {String} text The text for this node\r
- * @cfg {Boolean} expanded true to start the node expanded\r
- * @cfg {Boolean} allowDrag False to make this node undraggable if {@link #draggable} = true (defaults to true)\r
- * @cfg {Boolean} allowDrop False if this node cannot have child nodes dropped on it (defaults to true)\r
- * @cfg {Boolean} disabled true to start the node disabled\r
- * @cfg {String} icon The path to an icon for the node. The preferred way to do this\r
- * is to use the cls or iconCls attributes and add the icon via a CSS background image.\r
- * @cfg {String} cls A css class to be added to the node\r
- * @cfg {String} iconCls A css class to be added to the nodes icon element for applying css background images\r
- * @cfg {String} href URL of the link used for the node (defaults to #)\r
- * @cfg {String} hrefTarget target frame for the link\r
- * @cfg {Boolean} hidden True to render hidden. (Defaults to false).\r
- * @cfg {String} qtip An Ext QuickTip for the node\r
- * @cfg {Boolean} expandable If set to true, the node will always show a plus/minus icon, even when empty\r
- * @cfg {String} qtipCfg An Ext QuickTip config for the node (used instead of qtip)\r
- * @cfg {Boolean} singleClickExpand True for single click expand on this node\r
- * @cfg {Function} uiProvider A UI <b>class</b> to use for this node (defaults to Ext.tree.TreeNodeUI)\r
- * @cfg {Boolean} checked True to render a checked checkbox for this node, false to render an unchecked checkbox\r
- * (defaults to undefined with no checkbox rendered)\r
- * @cfg {Boolean} draggable True to make this node draggable (defaults to false)\r
- * @cfg {Boolean} isTarget False to not allow this node to act as a drop target (defaults to true)\r
- * @cfg {Boolean} allowChildren False to not allow this node to have child nodes (defaults to true)\r
- * @cfg {Boolean} editable False to not allow this node to be edited by an {@link Ext.tree.TreeEditor} (defaults to true)\r
- * @constructor\r
- * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node\r
- */\r
-Ext.tree.TreeNode = function(attributes){\r
-    attributes = attributes || {};\r
-    if(Ext.isString(attributes)){\r
-        attributes = {text: attributes};\r
-    }\r
-    this.childrenRendered = false;\r
-    this.rendered = false;\r
-    Ext.tree.TreeNode.superclass.constructor.call(this, attributes);\r
-    this.expanded = attributes.expanded === true;\r
-    this.isTarget = attributes.isTarget !== false;\r
-    this.draggable = attributes.draggable !== false && attributes.allowDrag !== false;\r
-    this.allowChildren = attributes.allowChildren !== false && attributes.allowDrop !== false;\r
-\r
-    /**\r
-     * Read-only. The text for this node. To change it use <code>{@link #setText}</code>.\r
-     * @type String\r
-     */\r
-    this.text = attributes.text;\r
-    /**\r
-     * True if this node is disabled.\r
-     * @type Boolean\r
-     */\r
-    this.disabled = attributes.disabled === true;\r
-    /**\r
-     * True if this node is hidden.\r
-     * @type Boolean\r
-     */\r
-    this.hidden = attributes.hidden === true;\r
-\r
-    this.addEvents(\r
-        /**\r
-        * @event textchange\r
-        * Fires when the text for this node is changed\r
-        * @param {Node} this This node\r
-        * @param {String} text The new text\r
-        * @param {String} oldText The old text\r
-        */\r
-        'textchange',\r
-        /**\r
-        * @event beforeexpand\r
-        * Fires before this node is expanded, return false to cancel.\r
-        * @param {Node} this This node\r
-        * @param {Boolean} deep\r
-        * @param {Boolean} anim\r
-        */\r
-        'beforeexpand',\r
-        /**\r
-        * @event beforecollapse\r
-        * Fires before this node is collapsed, return false to cancel.\r
-        * @param {Node} this This node\r
-        * @param {Boolean} deep\r
-        * @param {Boolean} anim\r
-        */\r
-        'beforecollapse',\r
-        /**\r
-        * @event expand\r
-        * Fires when this node is expanded\r
-        * @param {Node} this This node\r
-        */\r
-        'expand',\r
-        /**\r
-        * @event disabledchange\r
-        * Fires when the disabled status of this node changes\r
-        * @param {Node} this This node\r
-        * @param {Boolean} disabled\r
-        */\r
-        'disabledchange',\r
-        /**\r
-        * @event collapse\r
-        * Fires when this node is collapsed\r
-        * @param {Node} this This node\r
-        */\r
-        'collapse',\r
-        /**\r
-        * @event beforeclick\r
-        * Fires before click processing. Return false to cancel the default action.\r
-        * @param {Node} this This node\r
-        * @param {Ext.EventObject} e The event object\r
-        */\r
-        'beforeclick',\r
-        /**\r
-        * @event click\r
-        * Fires when this node is clicked\r
-        * @param {Node} this This node\r
-        * @param {Ext.EventObject} e The event object\r
-        */\r
-        'click',\r
-        /**\r
-        * @event checkchange\r
-        * Fires when a node with a checkbox's checked property changes\r
-        * @param {Node} this This node\r
-        * @param {Boolean} checked\r
-        */\r
-        'checkchange',\r
-        /**\r
-        * @event beforedblclick\r
-        * Fires before double click processing. Return false to cancel the default action.\r
-        * @param {Node} this This node\r
-        * @param {Ext.EventObject} e The event object\r
-        */\r
-        'beforedblclick',\r
-        /**\r
-        * @event dblclick\r
-        * Fires when this node is double clicked\r
-        * @param {Node} this This node\r
-        * @param {Ext.EventObject} e The event object\r
-        */\r
-        'dblclick',\r
-        /**\r
-        * @event contextmenu\r
-        * Fires when this node is right clicked\r
-        * @param {Node} this This node\r
-        * @param {Ext.EventObject} e The event object\r
-        */\r
-        'contextmenu',\r
-        /**\r
-        * @event beforechildrenrendered\r
-        * Fires right before the child nodes for this node are rendered\r
-        * @param {Node} this This node\r
-        */\r
-        'beforechildrenrendered'\r
-    );\r
-\r
-    var uiClass = this.attributes.uiProvider || this.defaultUI || Ext.tree.TreeNodeUI;\r
-\r
-    /**\r
-     * Read-only. The UI for this node\r
-     * @type TreeNodeUI\r
-     */\r
-    this.ui = new uiClass(this);\r
-};\r
-Ext.extend(Ext.tree.TreeNode, Ext.data.Node, {\r
-    preventHScroll : true,\r
-    /**\r
-     * Returns true if this node is expanded\r
-     * @return {Boolean}\r
-     */\r
-    isExpanded : function(){\r
-        return this.expanded;\r
-    },\r
-\r
-/**\r
- * Returns the UI object for this node.\r
- * @return {TreeNodeUI} The object which is providing the user interface for this tree\r
- * node. Unless otherwise specified in the {@link #uiProvider}, this will be an instance\r
- * of {@link Ext.tree.TreeNodeUI}\r
- */\r
-    getUI : function(){\r
-        return this.ui;\r
-    },\r
-\r
-    getLoader : function(){\r
-        var owner;\r
-        return this.loader || ((owner = this.getOwnerTree()) && owner.loader ? owner.loader : (this.loader = new Ext.tree.TreeLoader()));\r
-    },\r
-\r
-    // private override\r
-    setFirstChild : function(node){\r
-        var of = this.firstChild;\r
-        Ext.tree.TreeNode.superclass.setFirstChild.call(this, node);\r
-        if(this.childrenRendered && of && node != of){\r
-            of.renderIndent(true, true);\r
-        }\r
-        if(this.rendered){\r
-            this.renderIndent(true, true);\r
-        }\r
-    },\r
-\r
-    // private override\r
-    setLastChild : function(node){\r
-        var ol = this.lastChild;\r
-        Ext.tree.TreeNode.superclass.setLastChild.call(this, node);\r
-        if(this.childrenRendered && ol && node != ol){\r
-            ol.renderIndent(true, true);\r
-        }\r
-        if(this.rendered){\r
-            this.renderIndent(true, true);\r
-        }\r
-    },\r
-\r
-    // these methods are overridden to provide lazy rendering support\r
-    // private override\r
-    appendChild : function(n){\r
-        if(!n.render && !Ext.isArray(n)){\r
-            n = this.getLoader().createNode(n);\r
-        }\r
-        var node = Ext.tree.TreeNode.superclass.appendChild.call(this, n);\r
-        if(node && this.childrenRendered){\r
-            node.render();\r
-        }\r
-        this.ui.updateExpandIcon();\r
-        return node;\r
-    },\r
-\r
-    // private override\r
-    removeChild : function(node, destroy){\r
-        this.ownerTree.getSelectionModel().unselect(node);\r
-        Ext.tree.TreeNode.superclass.removeChild.apply(this, arguments);\r
-        // if it's been rendered remove dom node\r
-        if(node.ui.rendered){\r
-            node.ui.remove();\r
-        }\r
-        if(this.childNodes.length < 1){\r
-            this.collapse(false, false);\r
-        }else{\r
-            this.ui.updateExpandIcon();\r
-        }\r
-        if(!this.firstChild && !this.isHiddenRoot()) {\r
-            this.childrenRendered = false;\r
-        }\r
-        return node;\r
-    },\r
-\r
-    // private override\r
-    insertBefore : function(node, refNode){\r
-        if(!node.render){\r
-            node = this.getLoader().createNode(node);\r
-        }\r
-        var newNode = Ext.tree.TreeNode.superclass.insertBefore.call(this, node, refNode);\r
-        if(newNode && refNode && this.childrenRendered){\r
-            node.render();\r
-        }\r
-        this.ui.updateExpandIcon();\r
-        return newNode;\r
-    },\r
-\r
-    /**\r
-     * Sets the text for this node\r
-     * @param {String} text\r
-     */\r
-    setText : function(text){\r
-        var oldText = this.text;\r
-        this.text = this.attributes.text = text;\r
-        if(this.rendered){ // event without subscribing\r
-            this.ui.onTextChange(this, text, oldText);\r
-        }\r
-        this.fireEvent('textchange', this, text, oldText);\r
-    },\r
-\r
-    /**\r
-     * Triggers selection of this node\r
-     */\r
-    select : function(){\r
-        var t = this.getOwnerTree();\r
-        if(t){\r
-            t.getSelectionModel().select(this);\r
-        }\r
-    },\r
-\r
-    /**\r
-     * Triggers deselection of this node\r
-     * @param {Boolean} silent (optional) True to stop selection change events from firing.\r
-     */\r
-    unselect : function(silent){\r
-        var t = this.getOwnerTree();\r
-        if(t){\r
-            t.getSelectionModel().unselect(this, silent);\r
-        }\r
-    },\r
-\r
-    /**\r
-     * Returns true if this node is selected\r
-     * @return {Boolean}\r
-     */\r
-    isSelected : function(){\r
-        var t = this.getOwnerTree();\r
-        return t ? t.getSelectionModel().isSelected(this) : false;\r
-    },\r
-\r
-    /**\r
-     * Expand this node.\r
-     * @param {Boolean} deep (optional) True to expand all children as well\r
-     * @param {Boolean} anim (optional) false to cancel the default animation\r
-     * @param {Function} callback (optional) A callback to be called when\r
-     * expanding this node completes (does not wait for deep expand to complete).\r
-     * Called with 1 parameter, this node.\r
-     * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the callback is executed. Defaults to this TreeNode.\r
-     */\r
-    expand : function(deep, anim, callback, scope){\r
-        if(!this.expanded){\r
-            if(this.fireEvent('beforeexpand', this, deep, anim) === false){\r
-                return;\r
-            }\r
-            if(!this.childrenRendered){\r
-                this.renderChildren();\r
-            }\r
-            this.expanded = true;\r
-            if(!this.isHiddenRoot() && (this.getOwnerTree().animate && anim !== false) || anim){\r
-                this.ui.animExpand(function(){\r
-                    this.fireEvent('expand', this);\r
-                    this.runCallback(callback, scope || this, [this]);\r
-                    if(deep === true){\r
-                        this.expandChildNodes(true);\r
-                    }\r
-                }.createDelegate(this));\r
-                return;\r
-            }else{\r
-                this.ui.expand();\r
-                this.fireEvent('expand', this);\r
-                this.runCallback(callback, scope || this, [this]);\r
-            }\r
-        }else{\r
-           this.runCallback(callback, scope || this, [this]);\r
-        }\r
-        if(deep === true){\r
-            this.expandChildNodes(true);\r
-        }\r
-    },\r
-\r
-    runCallback : function(cb, scope, args){\r
-        if(Ext.isFunction(cb)){\r
-            cb.apply(scope, args);\r
-        }\r
-    },\r
-\r
-    isHiddenRoot : function(){\r
-        return this.isRoot && !this.getOwnerTree().rootVisible;\r
-    },\r
-\r
-    /**\r
-     * Collapse this node.\r
-     * @param {Boolean} deep (optional) True to collapse all children as well\r
-     * @param {Boolean} anim (optional) false to cancel the default animation\r
-     * @param {Function} callback (optional) A callback to be called when\r
-     * expanding this node completes (does not wait for deep expand to complete).\r
-     * Called with 1 parameter, this node.\r
-     * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the callback is executed. Defaults to this TreeNode.\r
-     */\r
-    collapse : function(deep, anim, callback, scope){\r
-        if(this.expanded && !this.isHiddenRoot()){\r
-            if(this.fireEvent('beforecollapse', this, deep, anim) === false){\r
-                return;\r
-            }\r
-            this.expanded = false;\r
-            if((this.getOwnerTree().animate && anim !== false) || anim){\r
-                this.ui.animCollapse(function(){\r
-                    this.fireEvent('collapse', this);\r
-                    this.runCallback(callback, scope || this, [this]);\r
-                    if(deep === true){\r
-                        this.collapseChildNodes(true);\r
-                    }\r
-                }.createDelegate(this));\r
-                return;\r
-            }else{\r
-                this.ui.collapse();\r
-                this.fireEvent('collapse', this);\r
-                this.runCallback(callback, scope || this, [this]);\r
-            }\r
-        }else if(!this.expanded){\r
-            this.runCallback(callback, scope || this, [this]);\r
-        }\r
-        if(deep === true){\r
-            var cs = this.childNodes;\r
-            for(var i = 0, len = cs.length; i < len; i++) {\r
-               cs[i].collapse(true, false);\r
-            }\r
-        }\r
-    },\r
-\r
-    // private\r
-    delayedExpand : function(delay){\r
-        if(!this.expandProcId){\r
-            this.expandProcId = this.expand.defer(delay, this);\r
-        }\r
-    },\r
-\r
-    // private\r
-    cancelExpand : function(){\r
-        if(this.expandProcId){\r
-            clearTimeout(this.expandProcId);\r
-        }\r
-        this.expandProcId = false;\r
-    },\r
-\r
-    /**\r
-     * Toggles expanded/collapsed state of the node\r
-     */\r
-    toggle : function(){\r
-        if(this.expanded){\r
-            this.collapse();\r
-        }else{\r
-            this.expand();\r
-        }\r
-    },\r
-\r
-    /**\r
-     * Ensures all parent nodes are expanded, and if necessary, scrolls\r
-     * the node into view.\r
-     * @param {Function} callback (optional) A function to call when the node has been made visible.\r
-     * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the callback is executed. Defaults to this TreeNode.\r
-     */\r
-    ensureVisible : function(callback, scope){\r
-        var tree = this.getOwnerTree();\r
-        tree.expandPath(this.parentNode ? this.parentNode.getPath() : this.getPath(), false, function(){\r
-            var node = tree.getNodeById(this.id);  // Somehow if we don't do this, we lose changes that happened to node in the meantime\r
-            tree.getTreeEl().scrollChildIntoView(node.ui.anchor);\r
-            this.runCallback(callback, scope || this, [this]);\r
-        }.createDelegate(this));\r
-    },\r
-\r
-    /**\r
-     * Expand all child nodes\r
-     * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes\r
-     */\r
-    expandChildNodes : function(deep){\r
-        var cs = this.childNodes;\r
-        for(var i = 0, len = cs.length; i < len; i++) {\r
-               cs[i].expand(deep);\r
-        }\r
-    },\r
-\r
-    /**\r
-     * Collapse all child nodes\r
-     * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes\r
-     */\r
-    collapseChildNodes : function(deep){\r
-        var cs = this.childNodes;\r
-        for(var i = 0, len = cs.length; i < len; i++) {\r
-               cs[i].collapse(deep);\r
-        }\r
-    },\r
-\r
-    /**\r
-     * Disables this node\r
-     */\r
-    disable : function(){\r
-        this.disabled = true;\r
-        this.unselect();\r
-        if(this.rendered && this.ui.onDisableChange){ // event without subscribing\r
-            this.ui.onDisableChange(this, true);\r
-        }\r
-        this.fireEvent('disabledchange', this, true);\r
-    },\r
-\r
-    /**\r
-     * Enables this node\r
-     */\r
-    enable : function(){\r
-        this.disabled = false;\r
-        if(this.rendered && this.ui.onDisableChange){ // event without subscribing\r
-            this.ui.onDisableChange(this, false);\r
-        }\r
-        this.fireEvent('disabledchange', this, false);\r
-    },\r
-\r
-    // private\r
-    renderChildren : function(suppressEvent){\r
-        if(suppressEvent !== false){\r
-            this.fireEvent('beforechildrenrendered', this);\r
-        }\r
-        var cs = this.childNodes;\r
-        for(var i = 0, len = cs.length; i < len; i++){\r
-            cs[i].render(true);\r
-        }\r
-        this.childrenRendered = true;\r
-    },\r
-\r
-    // private\r
-    sort : function(fn, scope){\r
-        Ext.tree.TreeNode.superclass.sort.apply(this, arguments);\r
-        if(this.childrenRendered){\r
-            var cs = this.childNodes;\r
-            for(var i = 0, len = cs.length; i < len; i++){\r
-                cs[i].render(true);\r
-            }\r
-        }\r
-    },\r
-\r
-    // private\r
-    render : function(bulkRender){\r
-        this.ui.render(bulkRender);\r
-        if(!this.rendered){\r
-            // make sure it is registered\r
-            this.getOwnerTree().registerNode(this);\r
-            this.rendered = true;\r
-            if(this.expanded){\r
-                this.expanded = false;\r
-                this.expand(false, false);\r
-            }\r
-        }\r
-    },\r
-\r
-    // private\r
-    renderIndent : function(deep, refresh){\r
-        if(refresh){\r
-            this.ui.childIndent = null;\r
-        }\r
-        this.ui.renderIndent();\r
-        if(deep === true && this.childrenRendered){\r
-            var cs = this.childNodes;\r
-            for(var i = 0, len = cs.length; i < len; i++){\r
-                cs[i].renderIndent(true, refresh);\r
-            }\r
-        }\r
-    },\r
-\r
-    beginUpdate : function(){\r
-        this.childrenRendered = false;\r
-    },\r
-\r
-    endUpdate : function(){\r
-        if(this.expanded && this.rendered){\r
-            this.renderChildren();\r
-        }\r
-    },\r
-\r
-    destroy : function(){\r
-        this.unselect(true);\r
-        Ext.tree.TreeNode.superclass.destroy.call(this);\r
-        Ext.destroy(this.ui, this.loader);\r
-        this.ui = this.loader = null;\r
-    },\r
-\r
-    // private\r
-    onIdChange : function(id){\r
-        this.ui.onIdChange(id);\r
-    }\r
-});\r
-\r
-Ext.tree.TreePanel.nodeTypes.node = Ext.tree.TreeNode;</pre>    \r
-</body>\r
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <title>The source code</title>
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+</head>
+<body  onload="prettyPrint();">
+    <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
+ */
+<div id="cls-Ext.tree.TreeNode"></div>/**
+ * @class Ext.tree.TreeNode
+ * @extends Ext.data.Node
+ * @cfg {String} text The text for this node
+ * @cfg {Boolean} expanded true to start the node expanded
+ * @cfg {Boolean} allowDrag False to make this node undraggable if {@link #draggable} = true (defaults to true)
+ * @cfg {Boolean} allowDrop False if this node cannot have child nodes dropped on it (defaults to true)
+ * @cfg {Boolean} disabled true to start the node disabled
+ * @cfg {String} icon The path to an icon for the node. The preferred way to do this
+ * is to use the cls or iconCls attributes and add the icon via a CSS background image.
+ * @cfg {String} cls A css class to be added to the node
+ * @cfg {String} iconCls A css class to be added to the nodes icon element for applying css background images
+ * @cfg {String} href URL of the link used for the node (defaults to #)
+ * @cfg {String} hrefTarget target frame for the link
+ * @cfg {Boolean} hidden True to render hidden. (Defaults to false).
+ * @cfg {String} qtip An Ext QuickTip for the node
+ * @cfg {Boolean} expandable If set to true, the node will always show a plus/minus icon, even when empty
+ * @cfg {String} qtipCfg An Ext QuickTip config for the node (used instead of qtip)
+ * @cfg {Boolean} singleClickExpand True for single click expand on this node
+ * @cfg {Function} uiProvider A UI <b>class</b> to use for this node (defaults to Ext.tree.TreeNodeUI)
+ * @cfg {Boolean} checked True to render a checked checkbox for this node, false to render an unchecked checkbox
+ * (defaults to undefined with no checkbox rendered)
+ * @cfg {Boolean} draggable True to make this node draggable (defaults to false)
+ * @cfg {Boolean} isTarget False to not allow this node to act as a drop target (defaults to true)
+ * @cfg {Boolean} allowChildren False to not allow this node to have child nodes (defaults to true)
+ * @cfg {Boolean} editable False to not allow this node to be edited by an {@link Ext.tree.TreeEditor} (defaults to true)
+ * @constructor
+ * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
+ */
+Ext.tree.TreeNode = Ext.extend(Ext.data.Node, {
+    
+    constructor : function(attributes){
+        attributes = attributes || {};
+        if(Ext.isString(attributes)){
+            attributes = {text: attributes};
+        }
+        this.childrenRendered = false;
+        this.rendered = false;
+        Ext.tree.TreeNode.superclass.constructor.call(this, attributes);
+        this.expanded = attributes.expanded === true;
+        this.isTarget = attributes.isTarget !== false;
+        this.draggable = attributes.draggable !== false && attributes.allowDrag !== false;
+        this.allowChildren = attributes.allowChildren !== false && attributes.allowDrop !== false;
+
+        /**
+         * Read-only. The text for this node. To change it use <code>{@link #setText}</code>.
+         * @type String
+         */
+        this.text = attributes.text;
+        /**
+         * True if this node is disabled.
+         * @type Boolean
+         */
+        this.disabled = attributes.disabled === true;
+        /**
+         * True if this node is hidden.
+         * @type Boolean
+         */
+        this.hidden = attributes.hidden === true;
+    
+        this.addEvents(
+            /**
+            * @event textchange
+            * Fires when the text for this node is changed
+            * @param {Node} this This node
+            * @param {String} text The new text
+            * @param {String} oldText The old text
+            */
+            'textchange',
+            /**
+            * @event beforeexpand
+            * Fires before this node is expanded, return false to cancel.
+            * @param {Node} this This node
+            * @param {Boolean} deep
+            * @param {Boolean} anim
+            */
+            'beforeexpand',
+            /**
+            * @event beforecollapse
+            * Fires before this node is collapsed, return false to cancel.
+            * @param {Node} this This node
+            * @param {Boolean} deep
+            * @param {Boolean} anim
+            */
+            'beforecollapse',
+            /**
+            * @event expand
+            * Fires when this node is expanded
+            * @param {Node} this This node
+            */
+            'expand',
+            /**
+            * @event disabledchange
+            * Fires when the disabled status of this node changes
+            * @param {Node} this This node
+            * @param {Boolean} disabled
+            */
+            'disabledchange',
+            /**
+            * @event collapse
+            * Fires when this node is collapsed
+            * @param {Node} this This node
+            */
+            'collapse',
+            /**
+            * @event beforeclick
+            * Fires before click processing. Return false to cancel the default action.
+            * @param {Node} this This node
+            * @param {Ext.EventObject} e The event object
+            */
+            'beforeclick',
+            /**
+            * @event click
+            * Fires when this node is clicked
+            * @param {Node} this This node
+            * @param {Ext.EventObject} e The event object
+            */
+            'click',
+            /**
+            * @event checkchange
+            * Fires when a node with a checkbox's checked property changes
+            * @param {Node} this This node
+            * @param {Boolean} checked
+            */
+            'checkchange',
+            /**
+            * @event beforedblclick
+            * Fires before double click processing. Return false to cancel the default action.
+            * @param {Node} this This node
+            * @param {Ext.EventObject} e The event object
+            */
+            'beforedblclick',
+            /**
+            * @event dblclick
+            * Fires when this node is double clicked
+            * @param {Node} this This node
+            * @param {Ext.EventObject} e The event object
+            */
+            'dblclick',
+            /**
+            * @event contextmenu
+            * Fires when this node is right clicked
+            * @param {Node} this This node
+            * @param {Ext.EventObject} e The event object
+            */
+            'contextmenu',
+            /**
+            * @event beforechildrenrendered
+            * Fires right before the child nodes for this node are rendered
+            * @param {Node} this This node
+            */
+            'beforechildrenrendered'
+        );
+    
+        var uiClass = this.attributes.uiProvider || this.defaultUI || Ext.tree.TreeNodeUI;
+    
+        /**
+         * Read-only. The UI for this node
+         * @type TreeNodeUI
+         */
+        this.ui = new uiClass(this);    
+    },
+    
+    preventHScroll : true,
+    /**
+     * Returns true if this node is expanded
+     * @return {Boolean}
+     */
+    isExpanded : function(){
+        return this.expanded;
+    },
+
+/**
+ * Returns the UI object for this node.
+ * @return {TreeNodeUI} The object which is providing the user interface for this tree
+ * node. Unless otherwise specified in the {@link #uiProvider}, this will be an instance
+ * of {@link Ext.tree.TreeNodeUI}
+ */
+    getUI : function(){
+        return this.ui;
+    },
+
+    getLoader : function(){
+        var owner;
+        return this.loader || ((owner = this.getOwnerTree()) && owner.loader ? owner.loader : (this.loader = new Ext.tree.TreeLoader()));
+    },
+
+    // private override
+    setFirstChild : function(node){
+        var of = this.firstChild;
+        Ext.tree.TreeNode.superclass.setFirstChild.call(this, node);
+        if(this.childrenRendered && of && node != of){
+            of.renderIndent(true, true);
+        }
+        if(this.rendered){
+            this.renderIndent(true, true);
+        }
+    },
+
+    // private override
+    setLastChild : function(node){
+        var ol = this.lastChild;
+        Ext.tree.TreeNode.superclass.setLastChild.call(this, node);
+        if(this.childrenRendered && ol && node != ol){
+            ol.renderIndent(true, true);
+        }
+        if(this.rendered){
+            this.renderIndent(true, true);
+        }
+    },
+
+    // these methods are overridden to provide lazy rendering support
+    // private override
+    appendChild : function(n){
+        if(!n.render && !Ext.isArray(n)){
+            n = this.getLoader().createNode(n);
+        }
+        var node = Ext.tree.TreeNode.superclass.appendChild.call(this, n);
+        if(node && this.childrenRendered){
+            node.render();
+        }
+        this.ui.updateExpandIcon();
+        return node;
+    },
+
+    // private override
+    removeChild : function(node, destroy){
+        this.ownerTree.getSelectionModel().unselect(node);
+        Ext.tree.TreeNode.superclass.removeChild.apply(this, arguments);
+        // only update the ui if we're not destroying
+        if(!destroy){
+            var rendered = node.ui.rendered;
+            // if it's been rendered remove dom node
+            if(rendered){
+                node.ui.remove();
+            }
+            if(rendered && this.childNodes.length < 1){
+                this.collapse(false, false);
+            }else{
+                this.ui.updateExpandIcon();
+            }
+            if(!this.firstChild && !this.isHiddenRoot()){
+                this.childrenRendered = false;
+            }
+        }
+        return node;
+    },
+
+    // private override
+    insertBefore : function(node, refNode){
+        if(!node.render){
+            node = this.getLoader().createNode(node);
+        }
+        var newNode = Ext.tree.TreeNode.superclass.insertBefore.call(this, node, refNode);
+        if(newNode && refNode && this.childrenRendered){
+            node.render();
+        }
+        this.ui.updateExpandIcon();
+        return newNode;
+    },
+
+    /**
+     * Sets the text for this node
+     * @param {String} text
+     */
+    setText : function(text){
+        var oldText = this.text;
+        this.text = this.attributes.text = text;
+        if(this.rendered){ // event without subscribing
+            this.ui.onTextChange(this, text, oldText);
+        }
+        this.fireEvent('textchange', this, text, oldText);
+    },
+    
+    /**
+     * Sets the icon class for this node.
+     * @param {String} cls
+     */
+    setIconCls : function(cls){
+        var old = this.attributes.iconCls;
+        this.attributes.iconCls = cls;
+        if(this.rendered){
+            this.ui.onIconClsChange(this, cls, old);
+        }
+    },
+    
+    /**
+     * Sets the tooltip for this node.
+     * @param {String} tip The text for the tip
+     * @param {String} title (Optional) The title for the tip
+     */
+    setTooltip : function(tip, title){
+        this.attributes.qtip = tip;
+        this.attributes.qtipTitle = title;
+        if(this.rendered){
+            this.ui.onTipChange(this, tip, title);
+        }
+    },
+    
+    /**
+     * Sets the icon for this node.
+     * @param {String} icon
+     */
+    setIcon : function(icon){
+        this.attributes.icon = icon;
+        if(this.rendered){
+            this.ui.onIconChange(this, icon);
+        }
+    },
+    
+    /**
+     * Sets the href for the node.
+     * @param {String} href The href to set
+     * @param {String} (Optional) target The target of the href
+     */
+    setHref : function(href, target){
+        this.attributes.href = href;
+        this.attributes.hrefTarget = target;
+        if(this.rendered){
+            this.ui.onHrefChange(this, href, target);
+        }
+    },
+    
+    /**
+     * Sets the class on this node.
+     * @param {String} cls
+     */
+    setCls : function(cls){
+        var old = this.attributes.cls;
+        this.attributes.cls = cls;
+        if(this.rendered){
+            this.ui.onClsChange(this, cls, old);
+        }
+    },
+
+    /**
+     * Triggers selection of this node
+     */
+    select : function(){
+        var t = this.getOwnerTree();
+        if(t){
+            t.getSelectionModel().select(this);
+        }
+    },
+
+    /**
+     * Triggers deselection of this node
+     * @param {Boolean} silent (optional) True to stop selection change events from firing.
+     */
+    unselect : function(silent){
+        var t = this.getOwnerTree();
+        if(t){
+            t.getSelectionModel().unselect(this, silent);
+        }
+    },
+
+    /**
+     * Returns true if this node is selected
+     * @return {Boolean}
+     */
+    isSelected : function(){
+        var t = this.getOwnerTree();
+        return t ? t.getSelectionModel().isSelected(this) : false;
+    },
+
+    /**
+     * Expand this node.
+     * @param {Boolean} deep (optional) True to expand all children as well
+     * @param {Boolean} anim (optional) false to cancel the default animation
+     * @param {Function} callback (optional) A callback to be called when
+     * expanding this node completes (does not wait for deep expand to complete).
+     * Called with 1 parameter, this node.
+     * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the callback is executed. Defaults to this TreeNode.
+     */
+    expand : function(deep, anim, callback, scope){
+        if(!this.expanded){
+            if(this.fireEvent('beforeexpand', this, deep, anim) === false){
+                return;
+            }
+            if(!this.childrenRendered){
+                this.renderChildren();
+            }
+            this.expanded = true;
+            if(!this.isHiddenRoot() && (this.getOwnerTree().animate && anim !== false) || anim){
+                this.ui.animExpand(function(){
+                    this.fireEvent('expand', this);
+                    this.runCallback(callback, scope || this, [this]);
+                    if(deep === true){
+                        this.expandChildNodes(true, true);
+                    }
+                }.createDelegate(this));
+                return;
+            }else{
+                this.ui.expand();
+                this.fireEvent('expand', this);
+                this.runCallback(callback, scope || this, [this]);
+            }
+        }else{
+           this.runCallback(callback, scope || this, [this]);
+        }
+        if(deep === true){
+            this.expandChildNodes(true);
+        }
+    },
+
+    runCallback : function(cb, scope, args){
+        if(Ext.isFunction(cb)){
+            cb.apply(scope, args);
+        }
+    },
+
+    isHiddenRoot : function(){
+        return this.isRoot && !this.getOwnerTree().rootVisible;
+    },
+
+    /**
+     * Collapse this node.
+     * @param {Boolean} deep (optional) True to collapse all children as well
+     * @param {Boolean} anim (optional) false to cancel the default animation
+     * @param {Function} callback (optional) A callback to be called when
+     * expanding this node completes (does not wait for deep expand to complete).
+     * Called with 1 parameter, this node.
+     * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the callback is executed. Defaults to this TreeNode.
+     */
+    collapse : function(deep, anim, callback, scope){
+        if(this.expanded && !this.isHiddenRoot()){
+            if(this.fireEvent('beforecollapse', this, deep, anim) === false){
+                return;
+            }
+            this.expanded = false;
+            if((this.getOwnerTree().animate && anim !== false) || anim){
+                this.ui.animCollapse(function(){
+                    this.fireEvent('collapse', this);
+                    this.runCallback(callback, scope || this, [this]);
+                    if(deep === true){
+                        this.collapseChildNodes(true);
+                    }
+                }.createDelegate(this));
+                return;
+            }else{
+                this.ui.collapse();
+                this.fireEvent('collapse', this);
+                this.runCallback(callback, scope || this, [this]);
+            }
+        }else if(!this.expanded){
+            this.runCallback(callback, scope || this, [this]);
+        }
+        if(deep === true){
+            var cs = this.childNodes;
+            for(var i = 0, len = cs.length; i < len; i++) {
+               cs[i].collapse(true, false);
+            }
+        }
+    },
+
+    // private
+    delayedExpand : function(delay){
+        if(!this.expandProcId){
+            this.expandProcId = this.expand.defer(delay, this);
+        }
+    },
+
+    // private
+    cancelExpand : function(){
+        if(this.expandProcId){
+            clearTimeout(this.expandProcId);
+        }
+        this.expandProcId = false;
+    },
+
+    /**
+     * Toggles expanded/collapsed state of the node
+     */
+    toggle : function(){
+        if(this.expanded){
+            this.collapse();
+        }else{
+            this.expand();
+        }
+    },
+
+    /**
+     * Ensures all parent nodes are expanded, and if necessary, scrolls
+     * the node into view.
+     * @param {Function} callback (optional) A function to call when the node has been made visible.
+     * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the callback is executed. Defaults to this TreeNode.
+     */
+    ensureVisible : function(callback, scope){
+        var tree = this.getOwnerTree();
+        tree.expandPath(this.parentNode ? this.parentNode.getPath() : this.getPath(), false, function(){
+            var node = tree.getNodeById(this.id);  // Somehow if we don't do this, we lose changes that happened to node in the meantime
+            tree.getTreeEl().scrollChildIntoView(node.ui.anchor);
+            this.runCallback(callback, scope || this, [this]);
+        }.createDelegate(this));
+    },
+
+    /**
+     * Expand all child nodes
+     * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes
+     */
+    expandChildNodes : function(deep, anim) {
+        var cs = this.childNodes,
+            i,
+            len = cs.length;
+        for (i = 0; i < len; i++) {
+               cs[i].expand(deep, anim);
+        }
+    },
+
+    /**
+     * Collapse all child nodes
+     * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
+     */
+    collapseChildNodes : function(deep){
+        var cs = this.childNodes;
+        for(var i = 0, len = cs.length; i < len; i++) {
+               cs[i].collapse(deep);
+        }
+    },
+
+    /**
+     * Disables this node
+     */
+    disable : function(){
+        this.disabled = true;
+        this.unselect();
+        if(this.rendered && this.ui.onDisableChange){ // event without subscribing
+            this.ui.onDisableChange(this, true);
+        }
+        this.fireEvent('disabledchange', this, true);
+    },
+
+    /**
+     * Enables this node
+     */
+    enable : function(){
+        this.disabled = false;
+        if(this.rendered && this.ui.onDisableChange){ // event without subscribing
+            this.ui.onDisableChange(this, false);
+        }
+        this.fireEvent('disabledchange', this, false);
+    },
+
+    // private
+    renderChildren : function(suppressEvent){
+        if(suppressEvent !== false){
+            this.fireEvent('beforechildrenrendered', this);
+        }
+        var cs = this.childNodes;
+        for(var i = 0, len = cs.length; i < len; i++){
+            cs[i].render(true);
+        }
+        this.childrenRendered = true;
+    },
+
+    // private
+    sort : function(fn, scope){
+        Ext.tree.TreeNode.superclass.sort.apply(this, arguments);
+        if(this.childrenRendered){
+            var cs = this.childNodes;
+            for(var i = 0, len = cs.length; i < len; i++){
+                cs[i].render(true);
+            }
+        }
+    },
+
+    // private
+    render : function(bulkRender){
+        this.ui.render(bulkRender);
+        if(!this.rendered){
+            // make sure it is registered
+            this.getOwnerTree().registerNode(this);
+            this.rendered = true;
+            if(this.expanded){
+                this.expanded = false;
+                this.expand(false, false);
+            }
+        }
+    },
+
+    // private
+    renderIndent : function(deep, refresh){
+        if(refresh){
+            this.ui.childIndent = null;
+        }
+        this.ui.renderIndent();
+        if(deep === true && this.childrenRendered){
+            var cs = this.childNodes;
+            for(var i = 0, len = cs.length; i < len; i++){
+                cs[i].renderIndent(true, refresh);
+            }
+        }
+    },
+
+    beginUpdate : function(){
+        this.childrenRendered = false;
+    },
+
+    endUpdate : function(){
+        if(this.expanded && this.rendered){
+            this.renderChildren();
+        }
+    },
+
+    //inherit docs
+    destroy : function(silent){
+        if(silent === true){
+            this.unselect(true);
+        }
+        Ext.tree.TreeNode.superclass.destroy.call(this, silent);
+        Ext.destroy(this.ui, this.loader);
+        this.ui = this.loader = null;
+    },
+
+    // private
+    onIdChange : function(id){
+        this.ui.onIdChange(id);
+    }
+});
+
+Ext.tree.TreePanel.nodeTypes.node = Ext.tree.TreeNode;</pre>    
+</body>
 </html>
\ No newline at end of file
 </html>
\ No newline at end of file