Upgrade to ExtJS 3.1.1 - Released 02/08/2010
[extjs.git] / pkgs / pkg-tree-debug.js
index 2553a85..639fb78 100644 (file)
@@ -1,6 +1,6 @@
 /*!
- * Ext JS Library 3.1.0
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.1.1
+ * Copyright(c) 2006-2010 Ext JS, LLC
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
@@ -525,12 +525,24 @@ new Ext.tree.TreePanel({
             var uiP = node.attributes.uiProvider;\r
             node.ui = uiP ? new uiP(node) : new Ext.tree.RootTreeNodeUI(node);\r
         }\r
-        if (this.innerCt) {\r
-            this.innerCt.update('');\r
-            this.afterRender();\r
+        if(this.innerCt){\r
+            this.clearInnerCt();\r
+            this.renderRoot();\r
         }\r
         return node;\r
     },\r
+    \r
+    clearInnerCt : function(){\r
+        this.innerCt.update('');    \r
+    },\r
+    \r
+    // private\r
+    renderRoot : function(){\r
+        this.root.render();\r
+        if(!this.rootVisible){\r
+            this.root.renderChildren();\r
+        }\r
+    },\r
 \r
     /**\r
      * Gets a node in this tree by its id\r
@@ -745,10 +757,7 @@ new Ext.tree.TreePanel({
     // private\r
     afterRender : function(){\r
         Ext.tree.TreePanel.superclass.afterRender.call(this);\r
-        this.root.render();\r
-        if(!this.rootVisible){\r
-            this.root.renderChildren();\r
-        }\r
+        this.renderRoot();\r
     },\r
 \r
     beforeDestroy : function(){\r
@@ -900,6 +909,15 @@ new Ext.tree.TreePanel({
     /**\r
      * @cfg {String} contentEl  @hide\r
      */\r
+    /**\r
+     * @cfg {Mixed} data  @hide\r
+     */\r
+    /**\r
+     * @cfg {Mixed} tpl  @hide\r
+     */\r
+    /**\r
+     * @cfg {String} tplWriteMode  @hide\r
+     */\r
     /**\r
      * @cfg {String} disabledClass  @hide\r
      */\r
@@ -945,7 +963,7 @@ Ext.reg('treepanel', Ext.tree.TreePanel);Ext.tree.TreeEventModel = function(tree
 Ext.tree.TreeEventModel.prototype = {\r
     initEvents : function(){\r
         var t = this.tree;\r
-            \r
+\r
         if(t.trackMouseOver !== false){\r
             t.mon(t.innerCt, {\r
                 scope: this,\r
@@ -1018,12 +1036,15 @@ Ext.tree.TreeEventModel.prototype = {
     },\r
 \r
     trackExit : function(e){\r
-        if(this.lastOverNode && !e.within(this.lastOverNode.ui.getEl())){\r
-            this.onNodeOut(e, this.lastOverNode);\r
+        if(this.lastOverNode){\r
+            if(this.lastOverNode.ui && !e.within(this.lastOverNode.ui.getEl())){\r
+                this.onNodeOut(e, this.lastOverNode);\r
+            }\r
             delete this.lastOverNode;\r
             Ext.getBody().un('mouseover', this.trackExit, this);\r
             this.trackingDoc = false;\r
         }\r
+\r
     },\r
 \r
     delegateClick : function(e, t){\r
@@ -1045,7 +1066,7 @@ Ext.tree.TreeEventModel.prototype = {
             if(this.getNodeTarget(e)){\r
                 this.onNodeDblClick(e, this.getNode(e));\r
             }else{\r
-                this.onContainerEvent(e, 'dblclick');    \r
+                this.onContainerEvent(e, 'dblclick');\r
             }\r
         }\r
     },\r
@@ -1055,13 +1076,13 @@ Ext.tree.TreeEventModel.prototype = {
             if(this.getNodeTarget(e)){\r
                 this.onNodeContextMenu(e, this.getNode(e));\r
             }else{\r
-                this.onContainerEvent(e, 'contextmenu');    \r
+                this.onContainerEvent(e, 'contextmenu');\r
             }\r
         }\r
     },\r
-    \r
+\r
     onContainerEvent: function(e, type){\r
-        this.tree.fireEvent('container' + type, this.tree, e); \r
+        this.tree.fireEvent('container' + type, this.tree, e);\r
     },\r
 \r
     onNodeClick : function(e, node){\r
@@ -1102,7 +1123,8 @@ Ext.tree.TreeEventModel.prototype = {
     },\r
 \r
     beforeEvent : function(e){\r
-        if(this.disabled){\r
+        var node = this.getNode(e);\r
+        if(this.disabled || !node || !node.ui){\r
             e.stopEvent();\r
             return false;\r
         }\r
@@ -1971,6 +1993,20 @@ Ext.extend(Ext.data.Node, Ext.util.Observable, {
         this.parentNode.removeChild(this, destroy);\r
         return this;\r
     },\r
+    \r
+    /**\r
+     * Removes all child nodes from this node.\r
+     * @param {Boolean} destroy <tt>true</tt> to destroy the node upon removal. Defaults to <tt>false</tt>.\r
+     * @return {Node} this\r
+     */\r
+    removeAll : function(destroy){\r
+        var cn = this.childNodes,\r
+            n;\r
+        while((n = cn[0])){\r
+            this.removeChild(n, destroy);\r
+        }\r
+        return this;\r
+    },\r
 \r
     /**\r
      * Returns the child node at the specified index.\r
@@ -2231,554 +2267,571 @@ Ext.extend(Ext.data.Node, Ext.util.Observable, {
     toString : function(){\r
         return "[Node"+(this.id?" "+this.id:"")+"]";\r
     }\r
-});/**\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
+});/**
+ * @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 = 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);
+};
+Ext.extend(Ext.tree.TreeNode, Ext.data.Node, {
+    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){
+        var node, exists;
+        if(!n.render && !Ext.isArray(n)){
+            n = this.getLoader().createNode(n);
+        }else{
+            exists = !n.parentNode;
+        }
+        node = Ext.tree.TreeNode.superclass.appendChild.call(this, n);
+        if(node){
+            this.afterAdd(node, exists);
+        }
+        this.ui.updateExpandIcon();
+        return node;
+    },
+
+    // private override
+    removeChild : function(node, destroy){
+        this.ownerTree.getSelectionModel().unselect(node);
+        Ext.tree.TreeNode.superclass.removeChild.apply(this, arguments);
+        // if it's been rendered remove dom node
+        if(node.ui.rendered){
+            node.ui.remove();
+        }
+        if(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){
+        var newNode, exists;
+        if(!node.render){
+            node = this.getLoader().createNode(node);
+        } else {
+            exists = Ext.isObject(node.parentNode);
+        }
+        newNode = Ext.tree.TreeNode.superclass.insertBefore.call(this, node, refNode);
+        if(newNode && refNode){
+            this.afterAdd(newNode, exists);
+        }
+        this.ui.updateExpandIcon();
+        return newNode;
+    },
+    
+    // private
+    afterAdd : function(node, exists){
+        if(this.childrenRendered){
+            // bulk render if the node already exists
+            node.render(exists);
+        }else if(exists){
+            // make sure we update the indent
+            node.renderIndent(true, true);
+        }
+    },
+
+    /**
+     * 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);
+    },
+
+    /**
+     * 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);
+                    }
+                }.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){
+        var cs = this.childNodes;
+        for(var i = 0, len = cs.length; i < len; i++) {
+               cs[i].expand(deep);
+        }
+    },
+
+    /**
+     * 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();
+        }
+    },
+
+    destroy : function(){
+        this.unselect(true);
+        Ext.tree.TreeNode.superclass.destroy.call(this);
+        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;/**\r
  * @class Ext.tree.AsyncTreeNode\r
  * @extends Ext.tree.TreeNode\r
@@ -2913,7 +2966,7 @@ Ext.tree.TreeNodeUI.prototype = {
     removeChild : function(node){\r
         if(this.rendered){\r
             this.ctNode.removeChild(node.ui.getEl());\r
-        } \r
+        }\r
     },\r
 \r
     // private\r
@@ -2938,12 +2991,12 @@ Ext.tree.TreeNodeUI.prototype = {
         this.disabled = state;\r
         if (this.checkbox) {\r
             this.checkbox.disabled = state;\r
-        }        \r
+        }\r
         if(state){\r
             this.addClass("x-tree-node-disabled");\r
         }else{\r
             this.removeClass("x-tree-node-disabled");\r
-        } \r
+        }\r
     },\r
 \r
     // private\r
@@ -2994,7 +3047,7 @@ Ext.tree.TreeNodeUI.prototype = {
  */\r
     removeClass : function(cls){\r
         if(this.elNode){\r
-            Ext.fly(this.elNode).removeClass(cls);  \r
+            Ext.fly(this.elNode).removeClass(cls);\r
         }\r
     },\r
 \r
@@ -3003,12 +3056,12 @@ Ext.tree.TreeNodeUI.prototype = {
         if(this.rendered){\r
             this.holder = document.createElement("div");\r
             this.holder.appendChild(this.wrap);\r
-        }  \r
+        }\r
     },\r
 \r
     // private\r
     fireEvent : function(){\r
-        return this.node.fireEvent.apply(this.node, arguments);  \r
+        return this.node.fireEvent.apply(this.node, arguments);\r
     },\r
 \r
     // private\r
@@ -3016,7 +3069,7 @@ Ext.tree.TreeNodeUI.prototype = {
         this.node.on("move", this.onMove, this);\r
 \r
         if(this.node.disabled){\r
-            this.onDisableChange(this.node, true);            \r
+            this.onDisableChange(this.node, true);\r
         }\r
         if(this.node.hidden){\r
             this.hide();\r
@@ -3054,7 +3107,7 @@ Ext.tree.TreeNodeUI.prototype = {
         this.node.hidden = false;\r
         if(this.wrap){\r
             this.wrap.style.display = "";\r
-        } \r
+        }\r
     },\r
 \r
     // private\r
@@ -3124,7 +3177,7 @@ Ext.tree.TreeNodeUI.prototype = {
     onCheckChange : function(){\r
         var checked = this.checkbox.checked;\r
         // fix for IE6\r
-        this.checkbox.defaultChecked = checked;        \r
+        this.checkbox.defaultChecked = checked;\r
         this.node.attributes.checked = checked;\r
         this.fireEvent('checkchange', this.node, checked);\r
     },\r
@@ -3140,12 +3193,12 @@ Ext.tree.TreeNodeUI.prototype = {
     startDrop : function(){\r
         this.dropping = true;\r
     },\r
-    \r
+\r
     // delayed drop so the click event doesn't get fired on a drop\r
-    endDrop : function(){ \r
+    endDrop : function(){\r
        setTimeout(function(){\r
            this.dropping = false;\r
-       }.createDelegate(this), 50); \r
+       }.createDelegate(this), 50);\r
     },\r
 \r
     // private\r
@@ -3186,7 +3239,7 @@ Ext.tree.TreeNodeUI.prototype = {
     blur : function(){\r
         try{\r
             this.anchor.blur();\r
-        }catch(e){} \r
+        }catch(e){}\r
     },\r
 \r
     // private\r
@@ -3201,7 +3254,7 @@ Ext.tree.TreeNodeUI.prototype = {
         }\r
         this.animating = true;\r
         this.updateExpandIcon();\r
-        \r
+\r
         ct.slideIn('t', {\r
            callback : function(){\r
                this.animating = false;\r
@@ -3248,7 +3301,7 @@ Ext.tree.TreeNodeUI.prototype = {
 \r
     // private\r
     getContainer : function(){\r
-        return this.ctNode;  \r
+        return this.ctNode;\r
     },\r
 \r
 /**\r
@@ -3256,7 +3309,7 @@ Ext.tree.TreeNodeUI.prototype = {
  * @return {HtmlElement} The DOM element. The default implementation uses a <code>&lt;li></code>.\r
  */\r
     getEl : function(){\r
-        return this.wrap;  \r
+        return this.wrap;\r
     },\r
 \r
     // private\r
@@ -3271,15 +3324,15 @@ Ext.tree.TreeNodeUI.prototype = {
 \r
     // private\r
     onRender : function(){\r
-        this.render();    \r
+        this.render();\r
     },\r
 \r
     // private\r
     render : function(bulkRender){\r
         var n = this.node, a = n.attributes;\r
-        var targetNode = n.parentNode ? \r
+        var targetNode = n.parentNode ?\r
               n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;\r
-        \r
+\r
         if(!this.rendered){\r
             this.rendered = true;\r
 \r
@@ -3296,7 +3349,7 @@ Ext.tree.TreeNodeUI.prototype = {
                    if(a.qtipTitle){\r
                        this.textNode.setAttribute("ext:qtitle", a.qtipTitle);\r
                    }\r
-               } \r
+               }\r
             }else if(a.qtipCfg){\r
                 a.qtipCfg.target = Ext.id(this.textNode);\r
                 Ext.QuickTips.register(a.qtipCfg);\r
@@ -3335,7 +3388,7 @@ Ext.tree.TreeNodeUI.prototype = {
         }else{\r
             this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);\r
         }\r
-        \r
+\r
         this.elNode = this.wrap.childNodes[0];\r
         this.ctNode = this.wrap.childNodes[1];\r
         var cs = this.elNode.childNodes;\r
@@ -3360,7 +3413,7 @@ Ext.tree.TreeNodeUI.prototype = {
     getAnchor : function(){\r
         return this.anchor;\r
     },\r
-    \r
+\r
 /**\r
  * Returns the text node.\r
  * @return {HtmlNode} The DOM text node.\r
@@ -3368,7 +3421,7 @@ Ext.tree.TreeNodeUI.prototype = {
     getTextEl : function(){\r
         return this.textNode;\r
     },\r
-    \r
+\r
 /**\r
  * Returns the icon &lt;img> element.\r
  * @return {HtmlElement} The DOM image element.\r
@@ -3383,14 +3436,14 @@ Ext.tree.TreeNodeUI.prototype = {
  * @return {Boolean} The checked flag.\r
  */\r
     isChecked : function(){\r
-        return this.checkbox ? this.checkbox.checked : false; \r
+        return this.checkbox ? this.checkbox.checked : false;\r
     },\r
 \r
     // private\r
     updateExpandIcon : function(){\r
         if(this.rendered){\r
-            var n = this.node, \r
-                c1, \r
+            var n = this.node,\r
+                c1,\r
                 c2,\r
                 cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow",\r
                 hasChild = n.hasChildNodes();\r
@@ -3414,7 +3467,7 @@ Ext.tree.TreeNodeUI.prototype = {
                 }\r
             }else{\r
                 if(!this.wasLeaf){\r
-                    Ext.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");\r
+                    Ext.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-collapsed");\r
                     delete this.c1;\r
                     delete this.c2;\r
                     this.wasLeaf = true;\r
@@ -3427,7 +3480,7 @@ Ext.tree.TreeNodeUI.prototype = {
             }\r
         }\r
     },\r
-    \r
+\r
     // private\r
     onIdChange: function(id){\r
         if(this.rendered){\r
@@ -3475,7 +3528,7 @@ Ext.tree.TreeNodeUI.prototype = {
         if(this.elNode){\r
             Ext.dd.Registry.unregister(this.elNode.id);\r
         }\r
-        \r
+\r
         Ext.each(['textnode', 'anchor', 'checkbox', 'indentNode', 'ecNode', 'iconNode', 'elNode', 'ctNode', 'wrap', 'holder'], function(el){\r
             if(this[el]){\r
                 Ext.fly(this[el]).remove();\r
@@ -3622,15 +3675,15 @@ Ext.extend(Ext.tree.TreeLoader, Ext.util.Observable, {
 \r
     /**\r
      * @cfg {Array/String} paramOrder Defaults to <tt>undefined</tt>. Only used when using directFn.\r
-     * A list of params to be executed\r
-     * server side.  Specify the params in the order in which they must be executed on the server-side\r
+     * Specifies the params in the order in which they must be passed to the server-side Direct method\r
      * as either (1) an Array of String values, or (2) a String of params delimited by either whitespace,\r
      * comma, or pipe. For example,\r
      * any of the following would be acceptable:<pre><code>\r
+nodeParameter: 'node',\r
 paramOrder: ['param1','param2','param3']\r
-paramOrder: 'param1 param2 param3'\r
-paramOrder: 'param1,param2,param3'\r
-paramOrder: 'param1|param2|param'\r
+paramOrder: 'node param1 param2 param3'\r
+paramOrder: 'param1,node,param2,param3'\r
+paramOrder: 'param1|param2|param|node'\r
      </code></pre>\r
      */\r
     paramOrder: undefined,\r
@@ -3641,7 +3694,7 @@ paramOrder: 'param1|param2|param'
      * <tt>{@link #paramOrder}</tt> nullifies this configuration.\r
      */\r
     paramsAsHash: false,\r
-    \r
+\r
     /**\r
      * @cfg {String} nodeParameter The name of the parameter sent to the server which contains\r
      * the identifier of the node. Defaults to <tt>'node'</tt>.\r
@@ -3659,7 +3712,7 @@ paramOrder: 'param1|param2|param'
      * This is called automatically when a node is expanded, but may be used to reload\r
      * a node (or append new children if the {@link #clearOnLoad} option is false.)\r
      * @param {Ext.tree.TreeNode} node\r
-     * @param {Function} callback Function to call after the node has been loaded. The \r
+     * @param {Function} callback Function to call after the node has been loaded. The\r
      * function is passed the TreeNode which was requested to be loaded.\r
      * @param (Object) scope The cope (<code>this</code> reference) in which the callback is executed.\r
      * defaults to the loaded TreeNode.\r
@@ -3696,23 +3749,29 @@ paramOrder: 'param1|param2|param'
     },\r
 \r
     getParams: function(node){\r
-        var buf = [], bp = this.baseParams;\r
+        var bp = Ext.apply({}, this.baseParams),\r
+            np = this.nodeParameter,\r
+            po = this.paramOrder;\r
+\r
+        np && (bp[ np ] = node.id);\r
+\r
         if(this.directFn){\r
-            buf.push(node.id);\r
-            if(bp){\r
-                if(this.paramOrder){\r
-                    for(var i = 0, len = this.paramOrder.length; i < len; i++){\r
-                        buf.push(bp[this.paramOrder[i]]);\r
-                    }\r
-                }else if(this.paramsAsHash){\r
-                    buf.push(bp);\r
+            var buf = [node.id];\r
+            if(po){\r
+                // reset 'buf' if the nodeParameter was included in paramOrder\r
+                if(np && po.indexOf(np) > -1){\r
+                    buf = [];\r
+                }\r
+\r
+                for(var i = 0, len = po.length; i < len; i++){\r
+                    buf.push(bp[ po[i] ]);\r
                 }\r
+            }else if(this.paramsAsHash){\r
+                buf = [bp];\r
             }\r
             return buf;\r
         }else{\r
-            var o = Ext.apply({}, bp);\r
-            o[this.nodeParameter] = node.id;\r
-            return o;\r
+            return bp;\r
         }\r
     },\r
 \r
@@ -3845,8 +3904,9 @@ new Ext.tree.TreePanel({
         this.fireEvent("loadexception", this, a.node, response);\r
         this.runCallback(a.callback, a.scope || a.node, [a.node]);\r
     },\r
-    \r
+\r
     destroy : function(){\r
+        this.abort();\r
         this.purgeListeners();\r
     }\r
 });/**
@@ -3959,7 +4019,7 @@ Ext.tree.TreeFilter.prototype = {
 };
 /**\r
  * @class Ext.tree.TreeSorter\r
- * Provides sorting of nodes in a {@link Ext.tree.TreePanel}.  The TreeSorter automatically monitors events on the \r
+ * Provides sorting of nodes in a {@link Ext.tree.TreePanel}.  The TreeSorter automatically monitors events on the\r
  * associated TreePanel that might affect the tree's sort order (beforechildrenrendered, append, insert and textchange).\r
  * Example usage:<br />\r
  * <pre><code>\r
@@ -3980,33 +4040,33 @@ Ext.tree.TreeSorter = function(tree, config){
     /**\r
      * @cfg {Boolean} folderSort True to sort leaf nodes under non-leaf nodes (defaults to false)\r
      */\r
-    /** \r
-     * @cfg {String} property The named attribute on the node to sort by (defaults to "text").  Note that this \r
+    /**\r
+     * @cfg {String} property The named attribute on the node to sort by (defaults to "text").  Note that this\r
      * property is only used if no {@link #sortType} function is specified, otherwise it is ignored.\r
      */\r
-    /** \r
+    /**\r
      * @cfg {String} dir The direction to sort ("asc" or "desc," case-insensitive, defaults to "asc")\r
      */\r
-    /** \r
+    /**\r
      * @cfg {String} leafAttr The attribute used to determine leaf nodes when {@link #folderSort} = true (defaults to "leaf")\r
      */\r
-    /** \r
+    /**\r
      * @cfg {Boolean} caseSensitive true for case-sensitive sort (defaults to false)\r
      */\r
-    /** \r
+    /**\r
      * @cfg {Function} sortType A custom "casting" function used to convert node values before sorting.  The function\r
      * will be called with a single parameter (the {@link Ext.tree.TreeNode} being evaluated) and is expected to return\r
      * the node's sort value cast to the specific data type required for sorting.  This could be used, for example, when\r
-     * a node's text (or other attribute) should be sorted as a date or numeric value.  See the class description for \r
+     * a node's text (or other attribute) should be sorted as a date or numeric value.  See the class description for\r
      * example usage.  Note that if a sortType is specified, any {@link #property} config will be ignored.\r
      */\r
-    \r
+\r
     Ext.apply(this, config);\r
     tree.on("beforechildrenrendered", this.doSort, this);\r
     tree.on("append", this.updateSort, this);\r
     tree.on("insert", this.updateSort, this);\r
     tree.on("textchange", this.updateSortParent, this);\r
-    \r
+\r
     var dsc = this.dir && this.dir.toLowerCase() == "desc";\r
     var p = this.property || "text";\r
     var sortType = this.sortType;\r
@@ -4023,14 +4083,14 @@ Ext.tree.TreeSorter = function(tree, config){
                 return -1;\r
             }\r
         }\r
-       var v1 = sortType ? sortType(n1.attributes[p]) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());\r
-       var v2 = sortType ? sortType(n2.attributes[p]) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());\r
-       if(v1 < v2){\r
-                       return dsc ? +1 : -1;\r
-               }else if(v1 > v2){\r
-                       return dsc ? -1 : +1;\r
+        var v1 = sortType ? sortType(n1) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());\r
+        var v2 = sortType ? sortType(n2) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());\r
+        if(v1 < v2){\r
+            return dsc ? +1 : -1;\r
+        }else if(v1 > v2){\r
+            return dsc ? -1 : +1;\r
         }else{\r
-               return 0;\r
+            return 0;\r
         }\r
     };\r
 };\r
@@ -4039,20 +4099,20 @@ Ext.tree.TreeSorter.prototype = {
     doSort : function(node){\r
         node.sort(this.sortFn);\r
     },\r
-    \r
+\r
     compareNodes : function(n1, n2){\r
         return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);\r
     },\r
-    \r
+\r
     updateSort : function(tree, node){\r
         if(node.childrenRendered){\r
             this.doSort.defer(1, this, [node]);\r
         }\r
     },\r
-    \r
+\r
     updateSortParent : function(node){\r
-               var p = node.parentNode;\r
-               if(p && p.childrenRendered){\r
+        var p = node.parentNode;\r
+        if(p && p.childrenRendered){\r
             this.doSort.defer(1, this, [p]);\r
         }\r
     }\r
@@ -4459,6 +4519,7 @@ Ext.extend(Ext.tree.TreeDragZone, Ext.dd.DragZone, {
 Ext.tree.TreeEditor = function(tree, fc, config){
     fc = fc || {};
     var field = fc.events ? fc : new Ext.form.TextField(fc);
+    
     Ext.tree.TreeEditor.superclass.constructor.call(this, field, config);
 
     this.tree = tree;
@@ -4511,16 +4572,18 @@ Ext.extend(Ext.tree.TreeEditor, Ext.Editor, {
 
     initEditor : function(tree){
         tree.on({
-            scope: this,
+            scope      : this,
             beforeclick: this.beforeNodeClick,
-            dblclick: this.onNodeDblClick
+            dblclick   : this.onNodeDblClick
         });
+        
         this.on({
-            scope: this,
-            complete: this.updateNode,
+            scope          : this,
+            complete       : this.updateNode,
             beforestartedit: this.fitToTree,
-            specialkey: this.onSpecialKey
+            specialkey     : this.onSpecialKey
         });
+        
         this.on('startedit', this.bindScroll, this, {delay:10});
     },