/*!
- * Ext JS Library 3.1.1
- * Copyright(c) 2006-2010 Ext JS, LLC
+ * Ext JS Library 3.2.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
-/**\r
- * @class Ext.tree.TreePanel\r
- * @extends Ext.Panel\r
- * <p>The TreePanel provides tree-structured UI representation of tree-structured data.</p>\r
- * <p>{@link Ext.tree.TreeNode TreeNode}s added to the TreePanel may each contain metadata\r
- * used by your application in their {@link Ext.tree.TreeNode#attributes attributes} property.</p>\r
- * <p><b>A TreePanel must have a {@link #root} node before it is rendered.</b> This may either be\r
- * specified using the {@link #root} config option, or using the {@link #setRootNode} method.\r
- * <p>An example of tree rendered to an existing div:</p><pre><code>\r
-var tree = new Ext.tree.TreePanel({\r
- renderTo: 'tree-div',\r
- useArrows: true,\r
- autoScroll: true,\r
- animate: true,\r
- enableDD: true,\r
- containerScroll: true,\r
- border: false,\r
- // auto create TreeLoader\r
- dataUrl: 'get-nodes.php',\r
-\r
- root: {\r
- nodeType: 'async',\r
- text: 'Ext JS',\r
- draggable: false,\r
- id: 'source'\r
- }\r
-});\r
-\r
-tree.getRootNode().expand();\r
- * </code></pre>\r
- * <p>The example above would work with a data packet similar to this:</p><pre><code>\r
-[{\r
- "text": "adapter",\r
- "id": "source\/adapter",\r
- "cls": "folder"\r
-}, {\r
- "text": "dd",\r
- "id": "source\/dd",\r
- "cls": "folder"\r
-}, {\r
- "text": "debug.js",\r
- "id": "source\/debug.js",\r
- "leaf": true,\r
- "cls": "file"\r
-}]\r
- * </code></pre>\r
- * <p>An example of tree within a Viewport:</p><pre><code>\r
-new Ext.Viewport({\r
- layout: 'border',\r
- items: [{\r
- region: 'west',\r
- collapsible: true,\r
- title: 'Navigation',\r
- xtype: 'treepanel',\r
- width: 200,\r
- autoScroll: true,\r
- split: true,\r
- loader: new Ext.tree.TreeLoader(),\r
- root: new Ext.tree.AsyncTreeNode({\r
- expanded: true,\r
- children: [{\r
- text: 'Menu Option 1',\r
- leaf: true\r
- }, {\r
- text: 'Menu Option 2',\r
- leaf: true\r
- }, {\r
- text: 'Menu Option 3',\r
- leaf: true\r
- }]\r
- }),\r
- rootVisible: false,\r
- listeners: {\r
- click: function(n) {\r
- Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');\r
- }\r
- }\r
- }, {\r
- region: 'center',\r
- xtype: 'tabpanel',\r
- // remaining code not shown ...\r
- }]\r
-});\r
-</code></pre>\r
- *\r
- * @cfg {Ext.tree.TreeNode} root The root node for the tree.\r
- * @cfg {Boolean} rootVisible <tt>false</tt> to hide the root node (defaults to <tt>true</tt>)\r
- * @cfg {Boolean} lines <tt>false</tt> to disable tree lines (defaults to <tt>true</tt>)\r
- * @cfg {Boolean} enableDD <tt>true</tt> to enable drag and drop\r
- * @cfg {Boolean} enableDrag <tt>true</tt> to enable just drag\r
- * @cfg {Boolean} enableDrop <tt>true</tt> to enable just drop\r
- * @cfg {Object} dragConfig Custom config to pass to the {@link Ext.tree.TreeDragZone} instance\r
- * @cfg {Object} dropConfig Custom config to pass to the {@link Ext.tree.TreeDropZone} instance\r
- * @cfg {String} ddGroup The DD group this TreePanel belongs to\r
- * @cfg {Boolean} ddAppendOnly <tt>true</tt> if the tree should only allow append drops (use for trees which are sorted)\r
- * @cfg {Boolean} ddScroll <tt>true</tt> to enable body scrolling\r
- * @cfg {Boolean} containerScroll <tt>true</tt> to register this container with ScrollManager\r
- * @cfg {Boolean} hlDrop <tt>false</tt> to disable node highlight on drop (defaults to the value of {@link Ext#enableFx})\r
- * @cfg {String} hlColor The color of the node highlight (defaults to <tt>'C3DAF9'</tt>)\r
- * @cfg {Boolean} animate <tt>true</tt> to enable animated expand/collapse (defaults to the value of {@link Ext#enableFx})\r
- * @cfg {Boolean} singleExpand <tt>true</tt> if only 1 node per branch may be expanded\r
- * @cfg {Object} selModel A tree selection model to use with this TreePanel (defaults to an {@link Ext.tree.DefaultSelectionModel})\r
- * @cfg {Boolean} trackMouseOver <tt>false</tt> to disable mouse over highlighting\r
- * @cfg {Ext.tree.TreeLoader} loader A {@link Ext.tree.TreeLoader} for use with this TreePanel\r
- * @cfg {String} pathSeparator The token used to separate sub-paths in path strings (defaults to <tt>'/'</tt>)\r
- * @cfg {Boolean} useArrows <tt>true</tt> to use Vista-style arrows in the tree (defaults to <tt>false</tt>)\r
- * @cfg {String} requestMethod The HTTP request method for loading data (defaults to the value of {@link Ext.Ajax#method}).\r
- *\r
- * @constructor\r
- * @param {Object} config\r
- * @xtype treepanel\r
- */\r
-Ext.tree.TreePanel = Ext.extend(Ext.Panel, {\r
- rootVisible : true,\r
- animate : Ext.enableFx,\r
- lines : true,\r
- enableDD : false,\r
- hlDrop : Ext.enableFx,\r
- pathSeparator : '/',\r
-\r
- /**\r
- * @cfg {Array} bubbleEvents\r
- * <p>An array of events that, when fired, should be bubbled to any parent container.\r
- * See {@link Ext.util.Observable#enableBubble}.\r
- * Defaults to <tt>[]</tt>.\r
- */\r
- bubbleEvents : [],\r
-\r
- initComponent : function(){\r
- Ext.tree.TreePanel.superclass.initComponent.call(this);\r
-\r
- if(!this.eventModel){\r
- this.eventModel = new Ext.tree.TreeEventModel(this);\r
- }\r
-\r
- // initialize the loader\r
- var l = this.loader;\r
- if(!l){\r
- l = new Ext.tree.TreeLoader({\r
- dataUrl: this.dataUrl,\r
- requestMethod: this.requestMethod\r
- });\r
- }else if(Ext.isObject(l) && !l.load){\r
- l = new Ext.tree.TreeLoader(l);\r
- }\r
- this.loader = l;\r
-\r
- this.nodeHash = {};\r
-\r
- /**\r
- * The root node of this tree.\r
- * @type Ext.tree.TreeNode\r
- * @property root\r
- */\r
- if(this.root){\r
- var r = this.root;\r
- delete this.root;\r
- this.setRootNode(r);\r
- }\r
-\r
-\r
- this.addEvents(\r
-\r
- /**\r
- * @event append\r
- * Fires when a new child node is appended to a node in this tree.\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} parent The parent node\r
- * @param {Node} node The newly appended node\r
- * @param {Number} index The index of the newly appended node\r
- */\r
- 'append',\r
- /**\r
- * @event remove\r
- * Fires when a child node is removed from a node in this tree.\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} parent The parent node\r
- * @param {Node} node The child node removed\r
- */\r
- 'remove',\r
- /**\r
- * @event movenode\r
- * Fires when a node is moved to a new location in the tree\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} node The node moved\r
- * @param {Node} oldParent The old parent of this node\r
- * @param {Node} newParent The new parent of this node\r
- * @param {Number} index The index it was moved to\r
- */\r
- 'movenode',\r
- /**\r
- * @event insert\r
- * Fires when a new child node is inserted in a node in this tree.\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} parent The parent node\r
- * @param {Node} node The child node inserted\r
- * @param {Node} refNode The child node the node was inserted before\r
- */\r
- 'insert',\r
- /**\r
- * @event beforeappend\r
- * Fires before a new child is appended to a node in this tree, return false to cancel the append.\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} parent The parent node\r
- * @param {Node} node The child node to be appended\r
- */\r
- 'beforeappend',\r
- /**\r
- * @event beforeremove\r
- * Fires before a child is removed from a node in this tree, return false to cancel the remove.\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} parent The parent node\r
- * @param {Node} node The child node to be removed\r
- */\r
- 'beforeremove',\r
- /**\r
- * @event beforemovenode\r
- * Fires before a node is moved to a new location in the tree. Return false to cancel the move.\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} node The node being moved\r
- * @param {Node} oldParent The parent of the node\r
- * @param {Node} newParent The new parent the node is moving to\r
- * @param {Number} index The index it is being moved to\r
- */\r
- 'beforemovenode',\r
- /**\r
- * @event beforeinsert\r
- * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} parent The parent node\r
- * @param {Node} node The child node to be inserted\r
- * @param {Node} refNode The child node the node is being inserted before\r
- */\r
- 'beforeinsert',\r
-\r
- /**\r
- * @event beforeload\r
- * Fires before a node is loaded, return false to cancel\r
- * @param {Node} node The node being loaded\r
- */\r
- 'beforeload',\r
- /**\r
- * @event load\r
- * Fires when a node is loaded\r
- * @param {Node} node The node that was loaded\r
- */\r
- 'load',\r
- /**\r
- * @event textchange\r
- * Fires when the text for a node is changed\r
- * @param {Node} node The node\r
- * @param {String} text The new text\r
- * @param {String} oldText The old text\r
- */\r
- 'textchange',\r
- /**\r
- * @event beforeexpandnode\r
- * Fires before a node is expanded, return false to cancel.\r
- * @param {Node} node The node\r
- * @param {Boolean} deep\r
- * @param {Boolean} anim\r
- */\r
- 'beforeexpandnode',\r
- /**\r
- * @event beforecollapsenode\r
- * Fires before a node is collapsed, return false to cancel.\r
- * @param {Node} node The node\r
- * @param {Boolean} deep\r
- * @param {Boolean} anim\r
- */\r
- 'beforecollapsenode',\r
- /**\r
- * @event expandnode\r
- * Fires when a node is expanded\r
- * @param {Node} node The node\r
- */\r
- 'expandnode',\r
- /**\r
- * @event disabledchange\r
- * Fires when the disabled status of a node changes\r
- * @param {Node} node The node\r
- * @param {Boolean} disabled\r
- */\r
- 'disabledchange',\r
- /**\r
- * @event collapsenode\r
- * Fires when a node is collapsed\r
- * @param {Node} node The node\r
- */\r
- 'collapsenode',\r
- /**\r
- * @event beforeclick\r
- * Fires before click processing on a node. Return false to cancel the default action.\r
- * @param {Node} node The node\r
- * @param {Ext.EventObject} e The event object\r
- */\r
- 'beforeclick',\r
- /**\r
- * @event click\r
- * Fires when a node is clicked\r
- * @param {Node} node The node\r
- * @param {Ext.EventObject} e The event object\r
- */\r
- 'click',\r
- /**\r
- * @event containerclick\r
- * Fires when the tree container is clicked\r
- * @param {Tree} this\r
- * @param {Ext.EventObject} e The event object\r
- */\r
- 'containerclick',\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 on a node. Return false to cancel the default action.\r
- * @param {Node} node The node\r
- * @param {Ext.EventObject} e The event object\r
- */\r
- 'beforedblclick',\r
- /**\r
- * @event dblclick\r
- * Fires when a node is double clicked\r
- * @param {Node} node The node\r
- * @param {Ext.EventObject} e The event object\r
- */\r
- 'dblclick',\r
- /**\r
- * @event containerdblclick\r
- * Fires when the tree container is double clicked\r
- * @param {Tree} this\r
- * @param {Ext.EventObject} e The event object\r
- */\r
- 'containerdblclick',\r
- /**\r
- * @event contextmenu\r
- * Fires when a node is right clicked. To display a context menu in response to this\r
- * event, first create a Menu object (see {@link Ext.menu.Menu} for details), then add\r
- * a handler for this event:<pre><code>\r
-new Ext.tree.TreePanel({\r
- title: 'My TreePanel',\r
- root: new Ext.tree.AsyncTreeNode({\r
- text: 'The Root',\r
- children: [\r
- { text: 'Child node 1', leaf: true },\r
- { text: 'Child node 2', leaf: true }\r
- ]\r
- }),\r
- contextMenu: new Ext.menu.Menu({\r
- items: [{\r
- id: 'delete-node',\r
- text: 'Delete Node'\r
- }],\r
- listeners: {\r
- itemclick: function(item) {\r
- switch (item.id) {\r
- case 'delete-node':\r
- var n = item.parentMenu.contextNode;\r
- if (n.parentNode) {\r
- n.remove();\r
- }\r
- break;\r
- }\r
- }\r
- }\r
- }),\r
- listeners: {\r
- contextmenu: function(node, e) {\r
-// Register the context node with the menu so that a Menu Item's handler function can access\r
-// it via its {@link Ext.menu.BaseItem#parentMenu parentMenu} property.\r
- node.select();\r
- var c = node.getOwnerTree().contextMenu;\r
- c.contextNode = node;\r
- c.showAt(e.getXY());\r
- }\r
- }\r
-});\r
-</code></pre>\r
- * @param {Node} node The node\r
- * @param {Ext.EventObject} e The event object\r
- */\r
- 'contextmenu',\r
- /**\r
- * @event containercontextmenu\r
- * Fires when the tree container is right clicked\r
- * @param {Tree} this\r
- * @param {Ext.EventObject} e The event object\r
- */\r
- 'containercontextmenu',\r
- /**\r
- * @event beforechildrenrendered\r
- * Fires right before the child nodes for a node are rendered\r
- * @param {Node} node The node\r
- */\r
- 'beforechildrenrendered',\r
- /**\r
- * @event startdrag\r
- * Fires when a node starts being dragged\r
- * @param {Ext.tree.TreePanel} this\r
- * @param {Ext.tree.TreeNode} node\r
- * @param {event} e The raw browser event\r
- */\r
- 'startdrag',\r
- /**\r
- * @event enddrag\r
- * Fires when a drag operation is complete\r
- * @param {Ext.tree.TreePanel} this\r
- * @param {Ext.tree.TreeNode} node\r
- * @param {event} e The raw browser event\r
- */\r
- 'enddrag',\r
- /**\r
- * @event dragdrop\r
- * Fires when a dragged node is dropped on a valid DD target\r
- * @param {Ext.tree.TreePanel} this\r
- * @param {Ext.tree.TreeNode} node\r
- * @param {DD} dd The dd it was dropped on\r
- * @param {event} e The raw browser event\r
- */\r
- 'dragdrop',\r
- /**\r
- * @event beforenodedrop\r
- * Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The dropEvent\r
- * passed to handlers has the following properties:<br />\r
- * <ul style="padding:5px;padding-left:16px;">\r
- * <li>tree - The TreePanel</li>\r
- * <li>target - The node being targeted for the drop</li>\r
- * <li>data - The drag data from the drag source</li>\r
- * <li>point - The point of the drop - append, above or below</li>\r
- * <li>source - The drag source</li>\r
- * <li>rawEvent - Raw mouse event</li>\r
- * <li>dropNode - Drop node(s) provided by the source <b>OR</b> you can supply node(s)\r
- * to be inserted by setting them on this object.</li>\r
- * <li>cancel - Set this to true to cancel the drop.</li>\r
- * <li>dropStatus - If the default drop action is cancelled but the drop is valid, setting this to true\r
- * will prevent the animated 'repair' from appearing.</li>\r
- * </ul>\r
- * @param {Object} dropEvent\r
- */\r
- 'beforenodedrop',\r
- /**\r
- * @event nodedrop\r
- * Fires after a DD object is dropped on a node in this tree. The dropEvent\r
- * passed to handlers has the following properties:<br />\r
- * <ul style="padding:5px;padding-left:16px;">\r
- * <li>tree - The TreePanel</li>\r
- * <li>target - The node being targeted for the drop</li>\r
- * <li>data - The drag data from the drag source</li>\r
- * <li>point - The point of the drop - append, above or below</li>\r
- * <li>source - The drag source</li>\r
- * <li>rawEvent - Raw mouse event</li>\r
- * <li>dropNode - Dropped node(s).</li>\r
- * </ul>\r
- * @param {Object} dropEvent\r
- */\r
- 'nodedrop',\r
- /**\r
- * @event nodedragover\r
- * Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent\r
- * passed to handlers has the following properties:<br />\r
- * <ul style="padding:5px;padding-left:16px;">\r
- * <li>tree - The TreePanel</li>\r
- * <li>target - The node being targeted for the drop</li>\r
- * <li>data - The drag data from the drag source</li>\r
- * <li>point - The point of the drop - append, above or below</li>\r
- * <li>source - The drag source</li>\r
- * <li>rawEvent - Raw mouse event</li>\r
- * <li>dropNode - Drop node(s) provided by the source.</li>\r
- * <li>cancel - Set this to true to signal drop not allowed.</li>\r
- * </ul>\r
- * @param {Object} dragOverEvent\r
- */\r
- 'nodedragover'\r
- );\r
- if(this.singleExpand){\r
- this.on('beforeexpandnode', this.restrictExpand, this);\r
- }\r
- },\r
-\r
- // private\r
- proxyNodeEvent : function(ename, a1, a2, a3, a4, a5, a6){\r
- if(ename == 'collapse' || ename == 'expand' || ename == 'beforecollapse' || ename == 'beforeexpand' || ename == 'move' || ename == 'beforemove'){\r
- ename = ename+'node';\r
- }\r
- // args inline for performance while bubbling events\r
- return this.fireEvent(ename, a1, a2, a3, a4, a5, a6);\r
- },\r
-\r
-\r
- /**\r
- * Returns this root node for this tree\r
- * @return {Node}\r
- */\r
- getRootNode : function(){\r
- return this.root;\r
- },\r
-\r
- /**\r
- * Sets the root node for this tree. If the TreePanel has already rendered a root node, the\r
- * previous root node (and all of its descendants) are destroyed before the new root node is rendered.\r
- * @param {Node} node\r
- * @return {Node}\r
- */\r
- setRootNode : function(node){\r
- Ext.destroy(this.root);\r
- if(!node.render){ // attributes passed\r
- node = this.loader.createNode(node);\r
- }\r
- this.root = node;\r
- node.ownerTree = this;\r
- node.isRoot = true;\r
- this.registerNode(node);\r
- if(!this.rootVisible){\r
- var uiP = node.attributes.uiProvider;\r
- node.ui = uiP ? new uiP(node) : new Ext.tree.RootTreeNodeUI(node);\r
- }\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
- * @param {String} id\r
- * @return {Node}\r
- */\r
- getNodeById : function(id){\r
- return this.nodeHash[id];\r
- },\r
-\r
- // private\r
- registerNode : function(node){\r
- this.nodeHash[node.id] = node;\r
- },\r
-\r
- // private\r
- unregisterNode : function(node){\r
- delete this.nodeHash[node.id];\r
- },\r
-\r
- // private\r
- toString : function(){\r
- return '[Tree'+(this.id?' '+this.id:'')+']';\r
- },\r
-\r
- // private\r
- restrictExpand : function(node){\r
- var p = node.parentNode;\r
- if(p){\r
- if(p.expandedChild && p.expandedChild.parentNode == p){\r
- p.expandedChild.collapse();\r
- }\r
- p.expandedChild = node;\r
- }\r
- },\r
-\r
- /**\r
- * Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. 'id')\r
- * @param {String} attribute (optional) Defaults to null (return the actual nodes)\r
- * @param {TreeNode} startNode (optional) The node to start from, defaults to the root\r
- * @return {Array}\r
- */\r
- getChecked : function(a, startNode){\r
- startNode = startNode || this.root;\r
- var r = [];\r
- var f = function(){\r
- if(this.attributes.checked){\r
- r.push(!a ? this : (a == 'id' ? this.id : this.attributes[a]));\r
- }\r
- };\r
- startNode.cascade(f);\r
- return r;\r
- },\r
-\r
- /**\r
- * Returns the default {@link Ext.tree.TreeLoader} for this TreePanel.\r
- * @return {Ext.tree.TreeLoader} The TreeLoader for this TreePanel.\r
- */\r
- getLoader : function(){\r
- return this.loader;\r
- },\r
-\r
- /**\r
- * Expand all nodes\r
- */\r
- expandAll : function(){\r
- this.root.expand(true);\r
- },\r
-\r
- /**\r
- * Collapse all nodes\r
- */\r
- collapseAll : function(){\r
- this.root.collapse(true);\r
- },\r
-\r
- /**\r
- * Returns the selection model used by this TreePanel.\r
- * @return {TreeSelectionModel} The selection model used by this TreePanel\r
- */\r
- getSelectionModel : function(){\r
- if(!this.selModel){\r
- this.selModel = new Ext.tree.DefaultSelectionModel();\r
- }\r
- return this.selModel;\r
- },\r
-\r
- /**\r
- * Expands a specified path in this TreePanel. A path can be retrieved from a node with {@link Ext.data.Node#getPath}\r
- * @param {String} path\r
- * @param {String} attr (optional) The attribute used in the path (see {@link Ext.data.Node#getPath} for more info)\r
- * @param {Function} callback (optional) The callback to call when the expand is complete. The callback will be called with\r
- * (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded.\r
- */\r
- expandPath : function(path, attr, callback){\r
- attr = attr || 'id';\r
- var keys = path.split(this.pathSeparator);\r
- var curNode = this.root;\r
- if(curNode.attributes[attr] != keys[1]){ // invalid root\r
- if(callback){\r
- callback(false, null);\r
- }\r
- return;\r
- }\r
- var index = 1;\r
- var f = function(){\r
- if(++index == keys.length){\r
- if(callback){\r
- callback(true, curNode);\r
- }\r
- return;\r
- }\r
- var c = curNode.findChild(attr, keys[index]);\r
- if(!c){\r
- if(callback){\r
- callback(false, curNode);\r
- }\r
- return;\r
- }\r
- curNode = c;\r
- c.expand(false, false, f);\r
- };\r
- curNode.expand(false, false, f);\r
- },\r
-\r
- /**\r
- * Selects the node in this tree at the specified path. A path can be retrieved from a node with {@link Ext.data.Node#getPath}\r
- * @param {String} path\r
- * @param {String} attr (optional) The attribute used in the path (see {@link Ext.data.Node#getPath} for more info)\r
- * @param {Function} callback (optional) The callback to call when the selection is complete. The callback will be called with\r
- * (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node.\r
- */\r
- selectPath : function(path, attr, callback){\r
- attr = attr || 'id';\r
- var keys = path.split(this.pathSeparator),\r
- v = keys.pop();\r
- if(keys.length > 1){\r
- var f = function(success, node){\r
- if(success && node){\r
- var n = node.findChild(attr, v);\r
- if(n){\r
- n.select();\r
- if(callback){\r
- callback(true, n);\r
- }\r
- }else if(callback){\r
- callback(false, n);\r
- }\r
- }else{\r
- if(callback){\r
- callback(false, n);\r
- }\r
- }\r
- };\r
- this.expandPath(keys.join(this.pathSeparator), attr, f);\r
- }else{\r
- this.root.select();\r
- if(callback){\r
- callback(true, this.root);\r
- }\r
- }\r
- },\r
-\r
- /**\r
- * Returns the underlying Element for this tree\r
- * @return {Ext.Element} The Element\r
- */\r
- getTreeEl : function(){\r
- return this.body;\r
- },\r
-\r
- // private\r
- onRender : function(ct, position){\r
- Ext.tree.TreePanel.superclass.onRender.call(this, ct, position);\r
- this.el.addClass('x-tree');\r
- this.innerCt = this.body.createChild({tag:'ul',\r
- cls:'x-tree-root-ct ' +\r
- (this.useArrows ? 'x-tree-arrows' : this.lines ? 'x-tree-lines' : 'x-tree-no-lines')});\r
- },\r
-\r
- // private\r
- initEvents : function(){\r
- Ext.tree.TreePanel.superclass.initEvents.call(this);\r
-\r
- if(this.containerScroll){\r
- Ext.dd.ScrollManager.register(this.body);\r
- }\r
- if((this.enableDD || this.enableDrop) && !this.dropZone){\r
- /**\r
- * The dropZone used by this tree if drop is enabled (see {@link #enableDD} or {@link #enableDrop})\r
- * @property dropZone\r
- * @type Ext.tree.TreeDropZone\r
- */\r
- this.dropZone = new Ext.tree.TreeDropZone(this, this.dropConfig || {\r
- ddGroup: this.ddGroup || 'TreeDD', appendOnly: this.ddAppendOnly === true\r
- });\r
- }\r
- if((this.enableDD || this.enableDrag) && !this.dragZone){\r
- /**\r
- * The dragZone used by this tree if drag is enabled (see {@link #enableDD} or {@link #enableDrag})\r
- * @property dragZone\r
- * @type Ext.tree.TreeDragZone\r
- */\r
- this.dragZone = new Ext.tree.TreeDragZone(this, this.dragConfig || {\r
- ddGroup: this.ddGroup || 'TreeDD',\r
- scroll: this.ddScroll\r
- });\r
- }\r
- this.getSelectionModel().init(this);\r
- },\r
-\r
- // private\r
- afterRender : function(){\r
- Ext.tree.TreePanel.superclass.afterRender.call(this);\r
- this.renderRoot();\r
- },\r
-\r
- beforeDestroy : function(){\r
- if(this.rendered){\r
- Ext.dd.ScrollManager.unregister(this.body);\r
- Ext.destroy(this.dropZone, this.dragZone);\r
- }\r
- Ext.destroy(this.root, this.loader);\r
- this.nodeHash = this.root = this.loader = null;\r
- Ext.tree.TreePanel.superclass.beforeDestroy.call(this);\r
- }\r
-\r
- /**\r
- * @cfg {String/Number} activeItem\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Boolean} autoDestroy\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Object/String/Function} autoLoad\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Boolean} autoWidth\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Boolean/Number} bufferResize\r
- * @hide\r
- */\r
- /**\r
- * @cfg {String} defaultType\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Object} defaults\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Boolean} hideBorders\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Mixed} items\r
- * @hide\r
- */\r
- /**\r
- * @cfg {String} layout\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Object} layoutConfig\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Boolean} monitorResize\r
- * @hide\r
- */\r
- /**\r
- * @property items\r
- * @hide\r
- */\r
- /**\r
- * @method cascade\r
- * @hide\r
- */\r
- /**\r
- * @method doLayout\r
- * @hide\r
- */\r
- /**\r
- * @method find\r
- * @hide\r
- */\r
- /**\r
- * @method findBy\r
- * @hide\r
- */\r
- /**\r
- * @method findById\r
- * @hide\r
- */\r
- /**\r
- * @method findByType\r
- * @hide\r
- */\r
- /**\r
- * @method getComponent\r
- * @hide\r
- */\r
- /**\r
- * @method getLayout\r
- * @hide\r
- */\r
- /**\r
- * @method getUpdater\r
- * @hide\r
- */\r
- /**\r
- * @method insert\r
- * @hide\r
- */\r
- /**\r
- * @method load\r
- * @hide\r
- */\r
- /**\r
- * @method remove\r
- * @hide\r
- */\r
- /**\r
- * @event add\r
- * @hide\r
- */\r
- /**\r
- * @method removeAll\r
- * @hide\r
- */\r
- /**\r
- * @event afterLayout\r
- * @hide\r
- */\r
- /**\r
- * @event beforeadd\r
- * @hide\r
- */\r
- /**\r
- * @event beforeremove\r
- * @hide\r
- */\r
- /**\r
- * @event remove\r
- * @hide\r
- */\r
-\r
-\r
-\r
- /**\r
- * @cfg {String} allowDomMove @hide\r
- */\r
- /**\r
- * @cfg {String} autoEl @hide\r
- */\r
- /**\r
- * @cfg {String} applyTo @hide\r
- */\r
- /**\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
- /**\r
- * @cfg {String} elements @hide\r
- */\r
- /**\r
- * @cfg {String} html @hide\r
- */\r
- /**\r
- * @cfg {Boolean} preventBodyReset\r
- * @hide\r
- */\r
- /**\r
- * @property disabled\r
- * @hide\r
- */\r
- /**\r
- * @method applyToMarkup\r
- * @hide\r
- */\r
- /**\r
- * @method enable\r
- * @hide\r
- */\r
- /**\r
- * @method disable\r
- * @hide\r
- */\r
- /**\r
- * @method setDisabled\r
- * @hide\r
- */\r
-});\r
-\r
-Ext.tree.TreePanel.nodeTypes = {};\r
-\r
-Ext.reg('treepanel', Ext.tree.TreePanel);Ext.tree.TreeEventModel = function(tree){\r
- this.tree = tree;\r
- this.tree.on('render', this.initEvents, this);\r
-}\r
-\r
-Ext.tree.TreeEventModel.prototype = {\r
- initEvents : function(){\r
- var t = this.tree;\r
-\r
- if(t.trackMouseOver !== false){\r
- t.mon(t.innerCt, {\r
- scope: this,\r
- mouseover: this.delegateOver,\r
- mouseout: this.delegateOut\r
- });\r
- }\r
- t.mon(t.getTreeEl(), {\r
- scope: this,\r
- click: this.delegateClick,\r
- dblclick: this.delegateDblClick,\r
- contextmenu: this.delegateContextMenu\r
- });\r
- },\r
-\r
- getNode : function(e){\r
- var t;\r
- if(t = e.getTarget('.x-tree-node-el', 10)){\r
- var id = Ext.fly(t, '_treeEvents').getAttribute('tree-node-id', 'ext');\r
- if(id){\r
- return this.tree.getNodeById(id);\r
- }\r
- }\r
- return null;\r
- },\r
-\r
- getNodeTarget : function(e){\r
- var t = e.getTarget('.x-tree-node-icon', 1);\r
- if(!t){\r
- t = e.getTarget('.x-tree-node-el', 6);\r
- }\r
- return t;\r
- },\r
-\r
- delegateOut : function(e, t){\r
- if(!this.beforeEvent(e)){\r
- return;\r
- }\r
- if(e.getTarget('.x-tree-ec-icon', 1)){\r
- var n = this.getNode(e);\r
- this.onIconOut(e, n);\r
- if(n == this.lastEcOver){\r
- delete this.lastEcOver;\r
- }\r
- }\r
- if((t = this.getNodeTarget(e)) && !e.within(t, true)){\r
- this.onNodeOut(e, this.getNode(e));\r
- }\r
- },\r
-\r
- delegateOver : function(e, t){\r
- if(!this.beforeEvent(e)){\r
- return;\r
- }\r
- if(Ext.isGecko && !this.trackingDoc){ // prevent hanging in FF\r
- Ext.getBody().on('mouseover', this.trackExit, this);\r
- this.trackingDoc = true;\r
- }\r
- if(this.lastEcOver){ // prevent hung highlight\r
- this.onIconOut(e, this.lastEcOver);\r
- delete this.lastEcOver;\r
- }\r
- if(e.getTarget('.x-tree-ec-icon', 1)){\r
- this.lastEcOver = this.getNode(e);\r
- this.onIconOver(e, this.lastEcOver);\r
- }\r
- if(t = this.getNodeTarget(e)){\r
- this.onNodeOver(e, this.getNode(e));\r
- }\r
- },\r
-\r
- trackExit : function(e){\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
- if(this.beforeEvent(e)){\r
- if(e.getTarget('input[type=checkbox]', 1)){\r
- this.onCheckboxClick(e, this.getNode(e));\r
- }else if(e.getTarget('.x-tree-ec-icon', 1)){\r
- this.onIconClick(e, this.getNode(e));\r
- }else if(this.getNodeTarget(e)){\r
- this.onNodeClick(e, this.getNode(e));\r
- }else{\r
- this.onContainerEvent(e, 'click');\r
- }\r
- }\r
- },\r
-\r
- delegateDblClick : function(e, t){\r
- if(this.beforeEvent(e)){\r
- if(this.getNodeTarget(e)){\r
- this.onNodeDblClick(e, this.getNode(e));\r
- }else{\r
- this.onContainerEvent(e, 'dblclick');\r
- }\r
- }\r
- },\r
-\r
- delegateContextMenu : function(e, t){\r
- if(this.beforeEvent(e)){\r
- if(this.getNodeTarget(e)){\r
- this.onNodeContextMenu(e, this.getNode(e));\r
- }else{\r
- this.onContainerEvent(e, 'contextmenu');\r
- }\r
- }\r
- },\r
-\r
- onContainerEvent: function(e, type){\r
- this.tree.fireEvent('container' + type, this.tree, e);\r
- },\r
-\r
- onNodeClick : function(e, node){\r
- node.ui.onClick(e);\r
- },\r
-\r
- onNodeOver : function(e, node){\r
- this.lastOverNode = node;\r
- node.ui.onOver(e);\r
- },\r
-\r
- onNodeOut : function(e, node){\r
- node.ui.onOut(e);\r
- },\r
-\r
- onIconOver : function(e, node){\r
- node.ui.addClass('x-tree-ec-over');\r
- },\r
-\r
- onIconOut : function(e, node){\r
- node.ui.removeClass('x-tree-ec-over');\r
- },\r
-\r
- onIconClick : function(e, node){\r
- node.ui.ecClick(e);\r
- },\r
-\r
- onCheckboxClick : function(e, node){\r
- node.ui.onCheckChange(e);\r
- },\r
-\r
- onNodeDblClick : function(e, node){\r
- node.ui.onDblClick(e);\r
- },\r
-\r
- onNodeContextMenu : function(e, node){\r
- node.ui.onContextMenu(e);\r
- },\r
-\r
- beforeEvent : function(e){\r
- var node = this.getNode(e);\r
- if(this.disabled || !node || !node.ui){\r
- e.stopEvent();\r
- return false;\r
- }\r
- return true;\r
- },\r
-\r
- disable: function(){\r
- this.disabled = true;\r
- },\r
-\r
- enable: function(){\r
- this.disabled = false;\r
- }\r
-};/**\r
- * @class Ext.tree.DefaultSelectionModel\r
- * @extends Ext.util.Observable\r
- * The default single selection for a TreePanel.\r
- */\r
-Ext.tree.DefaultSelectionModel = function(config){\r
- this.selNode = null;\r
- \r
- this.addEvents(\r
- /**\r
- * @event selectionchange\r
- * Fires when the selected node changes\r
- * @param {DefaultSelectionModel} this\r
- * @param {TreeNode} node the new selection\r
- */\r
- 'selectionchange',\r
-\r
- /**\r
- * @event beforeselect\r
- * Fires before the selected node changes, return false to cancel the change\r
- * @param {DefaultSelectionModel} this\r
- * @param {TreeNode} node the new selection\r
- * @param {TreeNode} node the old selection\r
- */\r
- 'beforeselect'\r
- );\r
-\r
- Ext.apply(this, config);\r
- Ext.tree.DefaultSelectionModel.superclass.constructor.call(this);\r
-};\r
-\r
-Ext.extend(Ext.tree.DefaultSelectionModel, Ext.util.Observable, {\r
- init : function(tree){\r
- this.tree = tree;\r
- tree.mon(tree.getTreeEl(), 'keydown', this.onKeyDown, this);\r
- tree.on('click', this.onNodeClick, this);\r
- },\r
- \r
- onNodeClick : function(node, e){\r
- this.select(node);\r
- },\r
- \r
- /**\r
- * Select a node.\r
- * @param {TreeNode} node The node to select\r
- * @return {TreeNode} The selected node\r
- */\r
- select : function(node, /* private*/ selectNextNode){\r
- // If node is hidden, select the next node in whatever direction was being moved in.\r
- if (!Ext.fly(node.ui.wrap).isVisible() && selectNextNode) {\r
- return selectNextNode.call(this, node);\r
- }\r
- var last = this.selNode;\r
- if(node == last){\r
- node.ui.onSelectedChange(true);\r
- }else if(this.fireEvent('beforeselect', this, node, last) !== false){\r
- if(last && last.ui){\r
- last.ui.onSelectedChange(false);\r
- }\r
- this.selNode = node;\r
- node.ui.onSelectedChange(true);\r
- this.fireEvent('selectionchange', this, node, last);\r
- }\r
- return node;\r
- },\r
- \r
- /**\r
- * Deselect a node.\r
- * @param {TreeNode} node The node to unselect\r
- * @param {Boolean} silent True to stop the selectionchange event from firing.\r
- */\r
- unselect : function(node, silent){\r
- if(this.selNode == node){\r
- this.clearSelections(silent);\r
- } \r
- },\r
- \r
- /**\r
- * Clear all selections\r
- * @param {Boolean} silent True to stop the selectionchange event from firing.\r
- */\r
- clearSelections : function(silent){\r
- var n = this.selNode;\r
- if(n){\r
- n.ui.onSelectedChange(false);\r
- this.selNode = null;\r
- if(silent !== true){\r
- this.fireEvent('selectionchange', this, null);\r
- }\r
- }\r
- return n;\r
- },\r
- \r
- /**\r
- * Get the selected node\r
- * @return {TreeNode} The selected node\r
- */\r
- getSelectedNode : function(){\r
- return this.selNode; \r
- },\r
- \r
- /**\r
- * Returns true if the node is selected\r
- * @param {TreeNode} node The node to check\r
- * @return {Boolean}\r
- */\r
- isSelected : function(node){\r
- return this.selNode == node; \r
- },\r
-\r
- /**\r
- * Selects the node above the selected node in the tree, intelligently walking the nodes\r
- * @return TreeNode The new selection\r
- */\r
- selectPrevious : function(/* private */ s){\r
- if(!(s = s || this.selNode || this.lastSelNode)){\r
- return null;\r
- }\r
- // Here we pass in the current function to select to indicate the direction we're moving\r
- var ps = s.previousSibling;\r
- if(ps){\r
- if(!ps.isExpanded() || ps.childNodes.length < 1){\r
- return this.select(ps, this.selectPrevious);\r
- } else{\r
- var lc = ps.lastChild;\r
- while(lc && lc.isExpanded() && Ext.fly(lc.ui.wrap).isVisible() && lc.childNodes.length > 0){\r
- lc = lc.lastChild;\r
- }\r
- return this.select(lc, this.selectPrevious);\r
- }\r
- } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){\r
- return this.select(s.parentNode, this.selectPrevious);\r
- }\r
- return null;\r
- },\r
-\r
- /**\r
- * Selects the node above the selected node in the tree, intelligently walking the nodes\r
- * @return TreeNode The new selection\r
- */\r
- selectNext : function(/* private */ s){\r
- if(!(s = s || this.selNode || this.lastSelNode)){\r
- return null;\r
- }\r
- // Here we pass in the current function to select to indicate the direction we're moving\r
- if(s.firstChild && s.isExpanded() && Ext.fly(s.ui.wrap).isVisible()){\r
- return this.select(s.firstChild, this.selectNext);\r
- }else if(s.nextSibling){\r
- return this.select(s.nextSibling, this.selectNext);\r
- }else if(s.parentNode){\r
- var newS = null;\r
- s.parentNode.bubble(function(){\r
- if(this.nextSibling){\r
- newS = this.getOwnerTree().selModel.select(this.nextSibling, this.selectNext);\r
- return false;\r
- }\r
- });\r
- return newS;\r
- }\r
- return null;\r
- },\r
-\r
- onKeyDown : function(e){\r
- var s = this.selNode || this.lastSelNode;\r
- // undesirable, but required\r
- var sm = this;\r
- if(!s){\r
- return;\r
- }\r
- var k = e.getKey();\r
- switch(k){\r
- case e.DOWN:\r
- e.stopEvent();\r
- this.selectNext();\r
- break;\r
- case e.UP:\r
- e.stopEvent();\r
- this.selectPrevious();\r
- break;\r
- case e.RIGHT:\r
- e.preventDefault();\r
- if(s.hasChildNodes()){\r
- if(!s.isExpanded()){\r
- s.expand();\r
- }else if(s.firstChild){\r
- this.select(s.firstChild, e);\r
- }\r
- }\r
- break;\r
- case e.LEFT:\r
- e.preventDefault();\r
- if(s.hasChildNodes() && s.isExpanded()){\r
- s.collapse();\r
- }else if(s.parentNode && (this.tree.rootVisible || s.parentNode != this.tree.getRootNode())){\r
- this.select(s.parentNode, e);\r
- }\r
- break;\r
- };\r
- }\r
-});\r
-\r
-/**\r
- * @class Ext.tree.MultiSelectionModel\r
- * @extends Ext.util.Observable\r
- * Multi selection for a TreePanel.\r
- */\r
-Ext.tree.MultiSelectionModel = function(config){\r
- this.selNodes = [];\r
- this.selMap = {};\r
- this.addEvents(\r
- /**\r
- * @event selectionchange\r
- * Fires when the selected nodes change\r
- * @param {MultiSelectionModel} this\r
- * @param {Array} nodes Array of the selected nodes\r
- */\r
- 'selectionchange'\r
- );\r
- Ext.apply(this, config);\r
- Ext.tree.MultiSelectionModel.superclass.constructor.call(this);\r
-};\r
-\r
-Ext.extend(Ext.tree.MultiSelectionModel, Ext.util.Observable, {\r
- init : function(tree){\r
- this.tree = tree;\r
- tree.mon(tree.getTreeEl(), 'keydown', this.onKeyDown, this);\r
- tree.on('click', this.onNodeClick, this);\r
- },\r
- \r
- onNodeClick : function(node, e){\r
- if(e.ctrlKey && this.isSelected(node)){\r
- this.unselect(node);\r
- }else{\r
- this.select(node, e, e.ctrlKey);\r
- }\r
- },\r
- \r
- /**\r
- * Select a node.\r
- * @param {TreeNode} node The node to select\r
- * @param {EventObject} e (optional) An event associated with the selection\r
- * @param {Boolean} keepExisting True to retain existing selections\r
- * @return {TreeNode} The selected node\r
- */\r
- select : function(node, e, keepExisting){\r
- if(keepExisting !== true){\r
- this.clearSelections(true);\r
- }\r
- if(this.isSelected(node)){\r
- this.lastSelNode = node;\r
- return node;\r
- }\r
- this.selNodes.push(node);\r
- this.selMap[node.id] = node;\r
- this.lastSelNode = node;\r
- node.ui.onSelectedChange(true);\r
- this.fireEvent('selectionchange', this, this.selNodes);\r
- return node;\r
- },\r
- \r
- /**\r
- * Deselect a node.\r
- * @param {TreeNode} node The node to unselect\r
- */\r
- unselect : function(node){\r
- if(this.selMap[node.id]){\r
- node.ui.onSelectedChange(false);\r
- var sn = this.selNodes;\r
- var index = sn.indexOf(node);\r
- if(index != -1){\r
- this.selNodes.splice(index, 1);\r
- }\r
- delete this.selMap[node.id];\r
- this.fireEvent('selectionchange', this, this.selNodes);\r
- }\r
- },\r
- \r
- /**\r
- * Clear all selections\r
- */\r
- clearSelections : function(suppressEvent){\r
- var sn = this.selNodes;\r
- if(sn.length > 0){\r
- for(var i = 0, len = sn.length; i < len; i++){\r
- sn[i].ui.onSelectedChange(false);\r
- }\r
- this.selNodes = [];\r
- this.selMap = {};\r
- if(suppressEvent !== true){\r
- this.fireEvent('selectionchange', this, this.selNodes);\r
- }\r
- }\r
- },\r
- \r
- /**\r
- * Returns true if the node is selected\r
- * @param {TreeNode} node The node to check\r
- * @return {Boolean}\r
- */\r
- isSelected : function(node){\r
- return this.selMap[node.id] ? true : false; \r
- },\r
- \r
- /**\r
- * Returns an array of the selected nodes\r
- * @return {Array}\r
- */\r
- getSelectedNodes : function(){\r
- return this.selNodes; \r
- },\r
-\r
- onKeyDown : Ext.tree.DefaultSelectionModel.prototype.onKeyDown,\r
-\r
- selectNext : Ext.tree.DefaultSelectionModel.prototype.selectNext,\r
-\r
- selectPrevious : Ext.tree.DefaultSelectionModel.prototype.selectPrevious\r
-});/**\r
- * @class Ext.data.Tree\r
- * @extends Ext.util.Observable\r
- * Represents a tree data structure and bubbles all the events for its nodes. The nodes\r
- * in the tree have most standard DOM functionality.\r
- * @constructor\r
- * @param {Node} root (optional) The root node\r
- */\r
-Ext.data.Tree = function(root){\r
- this.nodeHash = {};\r
- /**\r
- * The root node for this tree\r
- * @type Node\r
- */\r
- this.root = null;\r
- if(root){\r
- this.setRootNode(root);\r
- }\r
- this.addEvents(\r
- /**\r
- * @event append\r
- * Fires when a new child node is appended to a node in this tree.\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} parent The parent node\r
- * @param {Node} node The newly appended node\r
- * @param {Number} index The index of the newly appended node\r
- */\r
- "append",\r
- /**\r
- * @event remove\r
- * Fires when a child node is removed from a node in this tree.\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} parent The parent node\r
- * @param {Node} node The child node removed\r
- */\r
- "remove",\r
- /**\r
- * @event move\r
- * Fires when a node is moved to a new location in the tree\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} node The node moved\r
- * @param {Node} oldParent The old parent of this node\r
- * @param {Node} newParent The new parent of this node\r
- * @param {Number} index The index it was moved to\r
- */\r
- "move",\r
- /**\r
- * @event insert\r
- * Fires when a new child node is inserted in a node in this tree.\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} parent The parent node\r
- * @param {Node} node The child node inserted\r
- * @param {Node} refNode The child node the node was inserted before\r
- */\r
- "insert",\r
- /**\r
- * @event beforeappend\r
- * Fires before a new child is appended to a node in this tree, return false to cancel the append.\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} parent The parent node\r
- * @param {Node} node The child node to be appended\r
- */\r
- "beforeappend",\r
- /**\r
- * @event beforeremove\r
- * Fires before a child is removed from a node in this tree, return false to cancel the remove.\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} parent The parent node\r
- * @param {Node} node The child node to be removed\r
- */\r
- "beforeremove",\r
- /**\r
- * @event beforemove\r
- * Fires before a node is moved to a new location in the tree. Return false to cancel the move.\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} node The node being moved\r
- * @param {Node} oldParent The parent of the node\r
- * @param {Node} newParent The new parent the node is moving to\r
- * @param {Number} index The index it is being moved to\r
- */\r
- "beforemove",\r
- /**\r
- * @event beforeinsert\r
- * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} parent The parent node\r
- * @param {Node} node The child node to be inserted\r
- * @param {Node} refNode The child node the node is being inserted before\r
- */\r
- "beforeinsert"\r
- );\r
-\r
- Ext.data.Tree.superclass.constructor.call(this);\r
-};\r
-\r
-Ext.extend(Ext.data.Tree, Ext.util.Observable, {\r
- /**\r
- * @cfg {String} pathSeparator\r
- * The token used to separate paths in node ids (defaults to '/').\r
- */\r
- pathSeparator: "/",\r
-\r
- // private\r
- proxyNodeEvent : function(){\r
- return this.fireEvent.apply(this, arguments);\r
- },\r
-\r
- /**\r
- * Returns the root node for this tree.\r
- * @return {Node}\r
- */\r
- getRootNode : function(){\r
- return this.root;\r
- },\r
-\r
- /**\r
- * Sets the root node for this tree.\r
- * @param {Node} node\r
- * @return {Node}\r
- */\r
- setRootNode : function(node){\r
- this.root = node;\r
- node.ownerTree = this;\r
- node.isRoot = true;\r
- this.registerNode(node);\r
- return node;\r
- },\r
-\r
- /**\r
- * Gets a node in this tree by its id.\r
- * @param {String} id\r
- * @return {Node}\r
- */\r
- getNodeById : function(id){\r
- return this.nodeHash[id];\r
- },\r
-\r
- // private\r
- registerNode : function(node){\r
- this.nodeHash[node.id] = node;\r
- },\r
-\r
- // private\r
- unregisterNode : function(node){\r
- delete this.nodeHash[node.id];\r
- },\r
-\r
- toString : function(){\r
- return "[Tree"+(this.id?" "+this.id:"")+"]";\r
- }\r
-});\r
-\r
-/**\r
- * @class Ext.data.Node\r
- * @extends Ext.util.Observable\r
- * @cfg {Boolean} leaf true if this node is a leaf and does not have children\r
- * @cfg {String} id The id for this node. If one is not specified, one is generated.\r
- * @constructor\r
- * @param {Object} attributes The attributes/config for the node\r
- */\r
-Ext.data.Node = function(attributes){\r
- /**\r
- * The attributes supplied for the node. You can use this property to access any custom attributes you supplied.\r
- * @type {Object}\r
- */\r
- this.attributes = attributes || {};\r
- this.leaf = this.attributes.leaf;\r
- /**\r
- * The node id. @type String\r
- */\r
- this.id = this.attributes.id;\r
- if(!this.id){\r
- this.id = Ext.id(null, "xnode-");\r
- this.attributes.id = this.id;\r
- }\r
- /**\r
- * All child nodes of this node. @type Array\r
- */\r
- this.childNodes = [];\r
- if(!this.childNodes.indexOf){ // indexOf is a must\r
- this.childNodes.indexOf = function(o){\r
- for(var i = 0, len = this.length; i < len; i++){\r
- if(this[i] == o){\r
- return i;\r
- }\r
- }\r
- return -1;\r
- };\r
- }\r
- /**\r
- * The parent node for this node. @type Node\r
- */\r
- this.parentNode = null;\r
- /**\r
- * The first direct child node of this node, or null if this node has no child nodes. @type Node\r
- */\r
- this.firstChild = null;\r
- /**\r
- * The last direct child node of this node, or null if this node has no child nodes. @type Node\r
- */\r
- this.lastChild = null;\r
- /**\r
- * The node immediately preceding this node in the tree, or null if there is no sibling node. @type Node\r
- */\r
- this.previousSibling = null;\r
- /**\r
- * The node immediately following this node in the tree, or null if there is no sibling node. @type Node\r
- */\r
- this.nextSibling = null;\r
-\r
- this.addEvents({\r
- /**\r
- * @event append\r
- * Fires when a new child node is appended\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} this This node\r
- * @param {Node} node The newly appended node\r
- * @param {Number} index The index of the newly appended node\r
- */\r
- "append" : true,\r
- /**\r
- * @event remove\r
- * Fires when a child node is removed\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} this This node\r
- * @param {Node} node The removed node\r
- */\r
- "remove" : true,\r
- /**\r
- * @event move\r
- * Fires when this node is moved to a new location in the tree\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} this This node\r
- * @param {Node} oldParent The old parent of this node\r
- * @param {Node} newParent The new parent of this node\r
- * @param {Number} index The index it was moved to\r
- */\r
- "move" : true,\r
- /**\r
- * @event insert\r
- * Fires when a new child node is inserted.\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} this This node\r
- * @param {Node} node The child node inserted\r
- * @param {Node} refNode The child node the node was inserted before\r
- */\r
- "insert" : true,\r
- /**\r
- * @event beforeappend\r
- * Fires before a new child is appended, return false to cancel the append.\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} this This node\r
- * @param {Node} node The child node to be appended\r
- */\r
- "beforeappend" : true,\r
- /**\r
- * @event beforeremove\r
- * Fires before a child is removed, return false to cancel the remove.\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} this This node\r
- * @param {Node} node The child node to be removed\r
- */\r
- "beforeremove" : true,\r
- /**\r
- * @event beforemove\r
- * Fires before this node is moved to a new location in the tree. Return false to cancel the move.\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} this This node\r
- * @param {Node} oldParent The parent of this node\r
- * @param {Node} newParent The new parent this node is moving to\r
- * @param {Number} index The index it is being moved to\r
- */\r
- "beforemove" : true,\r
- /**\r
- * @event beforeinsert\r
- * Fires before a new child is inserted, return false to cancel the insert.\r
- * @param {Tree} tree The owner tree\r
- * @param {Node} this This node\r
- * @param {Node} node The child node to be inserted\r
- * @param {Node} refNode The child node the node is being inserted before\r
- */\r
- "beforeinsert" : true\r
- });\r
- this.listeners = this.attributes.listeners;\r
- Ext.data.Node.superclass.constructor.call(this);\r
-};\r
-\r
-Ext.extend(Ext.data.Node, Ext.util.Observable, {\r
- // private\r
- fireEvent : function(evtName){\r
- // first do standard event for this node\r
- if(Ext.data.Node.superclass.fireEvent.apply(this, arguments) === false){\r
- return false;\r
- }\r
- // then bubble it up to the tree if the event wasn't cancelled\r
- var ot = this.getOwnerTree();\r
- if(ot){\r
- if(ot.proxyNodeEvent.apply(ot, arguments) === false){\r
- return false;\r
- }\r
- }\r
- return true;\r
- },\r
-\r
- /**\r
- * Returns true if this node is a leaf\r
- * @return {Boolean}\r
- */\r
- isLeaf : function(){\r
- return this.leaf === true;\r
- },\r
-\r
- // private\r
- setFirstChild : function(node){\r
- this.firstChild = node;\r
- },\r
-\r
- //private\r
- setLastChild : function(node){\r
- this.lastChild = node;\r
- },\r
-\r
-\r
- /**\r
- * Returns true if this node is the last child of its parent\r
- * @return {Boolean}\r
- */\r
- isLast : function(){\r
- return (!this.parentNode ? true : this.parentNode.lastChild == this);\r
- },\r
-\r
- /**\r
- * Returns true if this node is the first child of its parent\r
- * @return {Boolean}\r
- */\r
- isFirst : function(){\r
- return (!this.parentNode ? true : this.parentNode.firstChild == this);\r
- },\r
-\r
- /**\r
- * Returns true if this node has one or more child nodes, else false.\r
- * @return {Boolean}\r
- */\r
- hasChildNodes : function(){\r
- return !this.isLeaf() && this.childNodes.length > 0;\r
- },\r
- \r
- /**\r
- * Returns true if this node has one or more child nodes, or if the <tt>expandable</tt>\r
- * node attribute is explicitly specified as true (see {@link #attributes}), otherwise returns false.\r
- * @return {Boolean}\r
- */\r
- isExpandable : function(){\r
- return this.attributes.expandable || this.hasChildNodes();\r
- },\r
-\r
- /**\r
- * Insert node(s) as the last child node of this node.\r
- * @param {Node/Array} node The node or Array of nodes to append\r
- * @return {Node} The appended node if single append, or null if an array was passed\r
- */\r
- appendChild : function(node){\r
- var multi = false;\r
- if(Ext.isArray(node)){\r
- multi = node;\r
- }else if(arguments.length > 1){\r
- multi = arguments;\r
- }\r
- // if passed an array or multiple args do them one by one\r
- if(multi){\r
- for(var i = 0, len = multi.length; i < len; i++) {\r
- this.appendChild(multi[i]);\r
- }\r
- }else{\r
- if(this.fireEvent("beforeappend", this.ownerTree, this, node) === false){\r
- return false;\r
- }\r
- var index = this.childNodes.length;\r
- var oldParent = node.parentNode;\r
- // it's a move, make sure we move it cleanly\r
- if(oldParent){\r
- if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index) === false){\r
- return false;\r
- }\r
- oldParent.removeChild(node);\r
- }\r
- index = this.childNodes.length;\r
- if(index === 0){\r
- this.setFirstChild(node);\r
- }\r
- this.childNodes.push(node);\r
- node.parentNode = this;\r
- var ps = this.childNodes[index-1];\r
- if(ps){\r
- node.previousSibling = ps;\r
- ps.nextSibling = node;\r
- }else{\r
- node.previousSibling = null;\r
- }\r
- node.nextSibling = null;\r
- this.setLastChild(node);\r
- node.setOwnerTree(this.getOwnerTree());\r
- this.fireEvent("append", this.ownerTree, this, node, index);\r
- if(oldParent){\r
- node.fireEvent("move", this.ownerTree, node, oldParent, this, index);\r
- }\r
- return node;\r
- }\r
- },\r
-\r
- /**\r
- * Removes a child node from this node.\r
- * @param {Node} node The node to remove\r
- * @param {Boolean} destroy <tt>true</tt> to destroy the node upon removal. Defaults to <tt>false</tt>.\r
- * @return {Node} The removed node\r
- */\r
- removeChild : function(node, destroy){\r
- var index = this.childNodes.indexOf(node);\r
- if(index == -1){\r
- return false;\r
- }\r
- if(this.fireEvent("beforeremove", this.ownerTree, this, node) === false){\r
- return false;\r
- }\r
-\r
- // remove it from childNodes collection\r
- this.childNodes.splice(index, 1);\r
-\r
- // update siblings\r
- if(node.previousSibling){\r
- node.previousSibling.nextSibling = node.nextSibling;\r
- }\r
- if(node.nextSibling){\r
- node.nextSibling.previousSibling = node.previousSibling;\r
- }\r
-\r
- // update child refs\r
- if(this.firstChild == node){\r
- this.setFirstChild(node.nextSibling);\r
- }\r
- if(this.lastChild == node){\r
- this.setLastChild(node.previousSibling);\r
- }\r
-\r
- node.clear();\r
- this.fireEvent("remove", this.ownerTree, this, node);\r
- if(destroy){\r
- node.destroy();\r
- }\r
- return node;\r
- },\r
- \r
- // private\r
- clear : function(destroy){\r
- // clear any references from the node\r
- this.setOwnerTree(null, destroy);\r
- this.parentNode = this.previousSibling = this.nextSibling = null\r
- if(destroy){\r
- this.firstChild = this.lastChild = null; \r
- }\r
- },\r
- \r
- /**\r
- * Destroys the node.\r
- */\r
- destroy : function(){\r
- this.purgeListeners();\r
- this.clear(true); \r
- Ext.each(this.childNodes, function(n){\r
- n.destroy();\r
- });\r
- this.childNodes = null;\r
- },\r
-\r
- /**\r
- * Inserts the first node before the second node in this nodes childNodes collection.\r
- * @param {Node} node The node to insert\r
- * @param {Node} refNode The node to insert before (if null the node is appended)\r
- * @return {Node} The inserted node\r
- */\r
- insertBefore : function(node, refNode){\r
- if(!refNode){ // like standard Dom, refNode can be null for append\r
- return this.appendChild(node);\r
- }\r
- // nothing to do\r
- if(node == refNode){\r
- return false;\r
- }\r
-\r
- if(this.fireEvent("beforeinsert", this.ownerTree, this, node, refNode) === false){\r
- return false;\r
- }\r
- var index = this.childNodes.indexOf(refNode);\r
- var oldParent = node.parentNode;\r
- var refIndex = index;\r
-\r
- // when moving internally, indexes will change after remove\r
- if(oldParent == this && this.childNodes.indexOf(node) < index){\r
- refIndex--;\r
- }\r
-\r
- // it's a move, make sure we move it cleanly\r
- if(oldParent){\r
- if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index, refNode) === false){\r
- return false;\r
- }\r
- oldParent.removeChild(node);\r
- }\r
- if(refIndex === 0){\r
- this.setFirstChild(node);\r
- }\r
- this.childNodes.splice(refIndex, 0, node);\r
- node.parentNode = this;\r
- var ps = this.childNodes[refIndex-1];\r
- if(ps){\r
- node.previousSibling = ps;\r
- ps.nextSibling = node;\r
- }else{\r
- node.previousSibling = null;\r
- }\r
- node.nextSibling = refNode;\r
- refNode.previousSibling = node;\r
- node.setOwnerTree(this.getOwnerTree());\r
- this.fireEvent("insert", this.ownerTree, this, node, refNode);\r
- if(oldParent){\r
- node.fireEvent("move", this.ownerTree, node, oldParent, this, refIndex, refNode);\r
- }\r
- return node;\r
- },\r
-\r
- /**\r
- * Removes this node from its parent\r
- * @param {Boolean} destroy <tt>true</tt> to destroy the node upon removal. Defaults to <tt>false</tt>.\r
- * @return {Node} this\r
- */\r
- remove : function(destroy){\r
- 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
- * @param {Number} index\r
- * @return {Node}\r
- */\r
- item : function(index){\r
- return this.childNodes[index];\r
- },\r
-\r
- /**\r
- * Replaces one child node in this node with another.\r
- * @param {Node} newChild The replacement node\r
- * @param {Node} oldChild The node to replace\r
- * @return {Node} The replaced node\r
- */\r
- replaceChild : function(newChild, oldChild){\r
- var s = oldChild ? oldChild.nextSibling : null;\r
- this.removeChild(oldChild);\r
- this.insertBefore(newChild, s);\r
- return oldChild;\r
- },\r
-\r
- /**\r
- * Returns the index of a child node\r
- * @param {Node} node\r
- * @return {Number} The index of the node or -1 if it was not found\r
- */\r
- indexOf : function(child){\r
- return this.childNodes.indexOf(child);\r
- },\r
-\r
- /**\r
- * Returns the tree this node is in.\r
- * @return {Tree}\r
- */\r
- getOwnerTree : function(){\r
- // if it doesn't have one, look for one\r
- if(!this.ownerTree){\r
- var p = this;\r
- while(p){\r
- if(p.ownerTree){\r
- this.ownerTree = p.ownerTree;\r
- break;\r
- }\r
- p = p.parentNode;\r
- }\r
- }\r
- return this.ownerTree;\r
- },\r
-\r
- /**\r
- * Returns depth of this node (the root node has a depth of 0)\r
- * @return {Number}\r
- */\r
- getDepth : function(){\r
- var depth = 0;\r
- var p = this;\r
- while(p.parentNode){\r
- ++depth;\r
- p = p.parentNode;\r
- }\r
- return depth;\r
- },\r
-\r
- // private\r
- setOwnerTree : function(tree, destroy){\r
- // if it is a move, we need to update everyone\r
- if(tree != this.ownerTree){\r
- if(this.ownerTree){\r
- this.ownerTree.unregisterNode(this);\r
- }\r
- this.ownerTree = tree;\r
- // If we're destroying, we don't need to recurse since it will be called on each child node\r
- if(destroy !== true){\r
- Ext.each(this.childNodes, function(n){\r
- n.setOwnerTree(tree);\r
- });\r
- }\r
- if(tree){\r
- tree.registerNode(this);\r
- }\r
- }\r
- },\r
- \r
- /**\r
- * Changes the id of this node.\r
- * @param {String} id The new id for the node.\r
- */\r
- setId: function(id){\r
- if(id !== this.id){\r
- var t = this.ownerTree;\r
- if(t){\r
- t.unregisterNode(this);\r
- }\r
- this.id = this.attributes.id = id;\r
- if(t){\r
- t.registerNode(this);\r
- }\r
- this.onIdChange(id);\r
- }\r
- },\r
- \r
- // private\r
- onIdChange: Ext.emptyFn,\r
-\r
- /**\r
- * Returns the path for this node. The path can be used to expand or select this node programmatically.\r
- * @param {String} attr (optional) The attr to use for the path (defaults to the node's id)\r
- * @return {String} The path\r
- */\r
- getPath : function(attr){\r
- attr = attr || "id";\r
- var p = this.parentNode;\r
- var b = [this.attributes[attr]];\r
- while(p){\r
- b.unshift(p.attributes[attr]);\r
- p = p.parentNode;\r
- }\r
- var sep = this.getOwnerTree().pathSeparator;\r
- return sep + b.join(sep);\r
- },\r
-\r
- /**\r
- * Bubbles up the tree from this node, calling the specified function with each node. The arguments to the function\r
- * will be the args provided or the current node. If the function returns false at any point,\r
- * the bubble is stopped.\r
- * @param {Function} fn The function to call\r
- * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the current Node.\r
- * @param {Array} args (optional) The args to call the function with (default to passing the current Node)\r
- */\r
- bubble : function(fn, scope, args){\r
- var p = this;\r
- while(p){\r
- if(fn.apply(scope || p, args || [p]) === false){\r
- break;\r
- }\r
- p = p.parentNode;\r
- }\r
- },\r
-\r
- /**\r
- * Cascades down the tree from this node, calling the specified function with each node. The arguments to the function\r
- * will be the args provided or the current node. If the function returns false at any point,\r
- * the cascade is stopped on that branch.\r
- * @param {Function} fn The function to call\r
- * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the current Node.\r
- * @param {Array} args (optional) The args to call the function with (default to passing the current Node)\r
- */\r
- cascade : function(fn, scope, args){\r
- if(fn.apply(scope || this, args || [this]) !== false){\r
- var cs = this.childNodes;\r
- for(var i = 0, len = cs.length; i < len; i++) {\r
- cs[i].cascade(fn, scope, args);\r
- }\r
- }\r
- },\r
-\r
- /**\r
- * Interates the child nodes of this node, calling the specified function with each node. The arguments to the function\r
- * will be the args provided or the current node. If the function returns false at any point,\r
- * the iteration stops.\r
- * @param {Function} fn The function to call\r
- * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the current Node in the iteration.\r
- * @param {Array} args (optional) The args to call the function with (default to passing the current Node)\r
- */\r
- eachChild : function(fn, scope, args){\r
- var cs = this.childNodes;\r
- for(var i = 0, len = cs.length; i < len; i++) {\r
- if(fn.apply(scope || this, args || [cs[i]]) === false){\r
- break;\r
- }\r
- }\r
- },\r
-\r
- /**\r
- * Finds the first child that has the attribute with the specified value.\r
- * @param {String} attribute The attribute name\r
- * @param {Mixed} value The value to search for\r
- * @return {Node} The found child or null if none was found\r
- */\r
- findChild : function(attribute, value){\r
- var cs = this.childNodes;\r
- for(var i = 0, len = cs.length; i < len; i++) {\r
- if(cs[i].attributes[attribute] == value){\r
- return cs[i];\r
- }\r
- }\r
- return null;\r
- },\r
-\r
- /**\r
- * Finds the first child by a custom function. The child matches if the function passed returns <code>true</code>.\r
- * @param {Function} fn A function which must return <code>true</code> if the passed Node is the required Node.\r
- * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the Node being tested.\r
- * @return {Node} The found child or null if none was found\r
- */\r
- findChildBy : function(fn, scope){\r
- var cs = this.childNodes;\r
- for(var i = 0, len = cs.length; i < len; i++) {\r
- if(fn.call(scope||cs[i], cs[i]) === true){\r
- return cs[i];\r
- }\r
- }\r
- return null;\r
- },\r
-\r
- /**\r
- * Sorts this nodes children using the supplied sort function.\r
- * @param {Function} fn A function which, when passed two Nodes, returns -1, 0 or 1 depending upon required sort order.\r
- * @param {Object} scope (optional)The scope (<code>this</code> reference) in which the function is executed. Defaults to the browser window.\r
- */\r
- sort : function(fn, scope){\r
- var cs = this.childNodes;\r
- var len = cs.length;\r
- if(len > 0){\r
- var sortFn = scope ? function(){fn.apply(scope, arguments);} : fn;\r
- cs.sort(sortFn);\r
- for(var i = 0; i < len; i++){\r
- var n = cs[i];\r
- n.previousSibling = cs[i-1];\r
- n.nextSibling = cs[i+1];\r
- if(i === 0){\r
- this.setFirstChild(n);\r
- }\r
- if(i == len-1){\r
- this.setLastChild(n);\r
- }\r
- }\r
- }\r
- },\r
-\r
- /**\r
- * Returns true if this node is an ancestor (at any point) of the passed node.\r
- * @param {Node} node\r
- * @return {Boolean}\r
- */\r
- contains : function(node){\r
- return node.isAncestor(this);\r
- },\r
-\r
- /**\r
- * Returns true if the passed node is an ancestor (at any point) of this node.\r
- * @param {Node} node\r
- * @return {Boolean}\r
- */\r
- isAncestor : function(node){\r
- var p = this.parentNode;\r
- while(p){\r
- if(p == node){\r
- return true;\r
- }\r
- p = p.parentNode;\r
- }\r
- return false;\r
- },\r
-\r
- toString : function(){\r
- return "[Node"+(this.id?" "+this.id:"")+"]";\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)
+/**
+ * @class Ext.tree.TreePanel
+ * @extends Ext.Panel
+ * <p>The TreePanel provides tree-structured UI representation of tree-structured data.</p>
+ * <p>{@link Ext.tree.TreeNode TreeNode}s added to the TreePanel may each contain metadata
+ * used by your application in their {@link Ext.tree.TreeNode#attributes attributes} property.</p>
+ * <p><b>A TreePanel must have a {@link #root} node before it is rendered.</b> This may either be
+ * specified using the {@link #root} config option, or using the {@link #setRootNode} method.
+ * <p>An example of tree rendered to an existing div:</p><pre><code>
+var tree = new Ext.tree.TreePanel({
+ renderTo: 'tree-div',
+ useArrows: true,
+ autoScroll: true,
+ animate: true,
+ enableDD: true,
+ containerScroll: true,
+ border: false,
+ // auto create TreeLoader
+ dataUrl: 'get-nodes.php',
+
+ root: {
+ nodeType: 'async',
+ text: 'Ext JS',
+ draggable: false,
+ id: 'source'
+ }
+});
+
+tree.getRootNode().expand();
+ * </code></pre>
+ * <p>The example above would work with a data packet similar to this:</p><pre><code>
+[{
+ "text": "adapter",
+ "id": "source\/adapter",
+ "cls": "folder"
+}, {
+ "text": "dd",
+ "id": "source\/dd",
+ "cls": "folder"
+}, {
+ "text": "debug.js",
+ "id": "source\/debug.js",
+ "leaf": true,
+ "cls": "file"
+}]
+ * </code></pre>
+ * <p>An example of tree within a Viewport:</p><pre><code>
+new Ext.Viewport({
+ layout: 'border',
+ items: [{
+ region: 'west',
+ collapsible: true,
+ title: 'Navigation',
+ xtype: 'treepanel',
+ width: 200,
+ autoScroll: true,
+ split: true,
+ loader: new Ext.tree.TreeLoader(),
+ root: new Ext.tree.AsyncTreeNode({
+ expanded: true,
+ children: [{
+ text: 'Menu Option 1',
+ leaf: true
+ }, {
+ text: 'Menu Option 2',
+ leaf: true
+ }, {
+ text: 'Menu Option 3',
+ leaf: true
+ }]
+ }),
+ rootVisible: false,
+ listeners: {
+ click: function(n) {
+ Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
+ }
+ }
+ }, {
+ region: 'center',
+ xtype: 'tabpanel',
+ // remaining code not shown ...
+ }]
+});
+</code></pre>
+ *
+ * @cfg {Ext.tree.TreeNode} root The root node for the tree.
+ * @cfg {Boolean} rootVisible <tt>false</tt> to hide the root node (defaults to <tt>true</tt>)
+ * @cfg {Boolean} lines <tt>false</tt> to disable tree lines (defaults to <tt>true</tt>)
+ * @cfg {Boolean} enableDD <tt>true</tt> to enable drag and drop
+ * @cfg {Boolean} enableDrag <tt>true</tt> to enable just drag
+ * @cfg {Boolean} enableDrop <tt>true</tt> to enable just drop
+ * @cfg {Object} dragConfig Custom config to pass to the {@link Ext.tree.TreeDragZone} instance
+ * @cfg {Object} dropConfig Custom config to pass to the {@link Ext.tree.TreeDropZone} instance
+ * @cfg {String} ddGroup The DD group this TreePanel belongs to
+ * @cfg {Boolean} ddAppendOnly <tt>true</tt> if the tree should only allow append drops (use for trees which are sorted)
+ * @cfg {Boolean} ddScroll <tt>true</tt> to enable body scrolling
+ * @cfg {Boolean} containerScroll <tt>true</tt> to register this container with ScrollManager
+ * @cfg {Boolean} hlDrop <tt>false</tt> to disable node highlight on drop (defaults to the value of {@link Ext#enableFx})
+ * @cfg {String} hlColor The color of the node highlight (defaults to <tt>'C3DAF9'</tt>)
+ * @cfg {Boolean} animate <tt>true</tt> to enable animated expand/collapse (defaults to the value of {@link Ext#enableFx})
+ * @cfg {Boolean} singleExpand <tt>true</tt> if only 1 node per branch may be expanded
+ * @cfg {Object} selModel A tree selection model to use with this TreePanel (defaults to an {@link Ext.tree.DefaultSelectionModel})
+ * @cfg {Boolean} trackMouseOver <tt>false</tt> to disable mouse over highlighting
+ * @cfg {Ext.tree.TreeLoader} loader A {@link Ext.tree.TreeLoader} for use with this TreePanel
+ * @cfg {String} pathSeparator The token used to separate sub-paths in path strings (defaults to <tt>'/'</tt>)
+ * @cfg {Boolean} useArrows <tt>true</tt> to use Vista-style arrows in the tree (defaults to <tt>false</tt>)
+ * @cfg {String} requestMethod The HTTP request method for loading data (defaults to the value of {@link Ext.Ajax#method}).
+ *
* @constructor
- * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
+ * @param {Object} config
+ * @xtype treepanel
*/
-Ext.tree.TreeNode = function(attributes){
- attributes = attributes || {};
- if(Ext.isString(attributes)){
- attributes = {text: attributes};
+Ext.tree.TreePanel = Ext.extend(Ext.Panel, {
+ rootVisible : true,
+ animate : Ext.enableFx,
+ lines : true,
+ enableDD : false,
+ hlDrop : Ext.enableFx,
+ pathSeparator : '/',
+
+ /**
+ * @cfg {Array} bubbleEvents
+ * <p>An array of events that, when fired, should be bubbled to any parent container.
+ * See {@link Ext.util.Observable#enableBubble}.
+ * Defaults to <tt>[]</tt>.
+ */
+ bubbleEvents : [],
+
+ initComponent : function(){
+ Ext.tree.TreePanel.superclass.initComponent.call(this);
+
+ if(!this.eventModel){
+ this.eventModel = new Ext.tree.TreeEventModel(this);
+ }
+
+ // initialize the loader
+ var l = this.loader;
+ if(!l){
+ l = new Ext.tree.TreeLoader({
+ dataUrl: this.dataUrl,
+ requestMethod: this.requestMethod
+ });
+ }else if(Ext.isObject(l) && !l.load){
+ l = new Ext.tree.TreeLoader(l);
+ }
+ this.loader = l;
+
+ this.nodeHash = {};
+
+ /**
+ * The root node of this tree.
+ * @type Ext.tree.TreeNode
+ * @property root
+ */
+ if(this.root){
+ var r = this.root;
+ delete this.root;
+ this.setRootNode(r);
+ }
+
+
+ this.addEvents(
+
+ /**
+ * @event append
+ * Fires when a new child node is appended to a node in this tree.
+ * @param {Tree} tree The owner tree
+ * @param {Node} parent The parent node
+ * @param {Node} node The newly appended node
+ * @param {Number} index The index of the newly appended node
+ */
+ 'append',
+ /**
+ * @event remove
+ * Fires when a child node is removed from a node in this tree.
+ * @param {Tree} tree The owner tree
+ * @param {Node} parent The parent node
+ * @param {Node} node The child node removed
+ */
+ 'remove',
+ /**
+ * @event movenode
+ * Fires when a node is moved to a new location in the tree
+ * @param {Tree} tree The owner tree
+ * @param {Node} node The node moved
+ * @param {Node} oldParent The old parent of this node
+ * @param {Node} newParent The new parent of this node
+ * @param {Number} index The index it was moved to
+ */
+ 'movenode',
+ /**
+ * @event insert
+ * Fires when a new child node is inserted in a node in this tree.
+ * @param {Tree} tree The owner tree
+ * @param {Node} parent The parent node
+ * @param {Node} node The child node inserted
+ * @param {Node} refNode The child node the node was inserted before
+ */
+ 'insert',
+ /**
+ * @event beforeappend
+ * Fires before a new child is appended to a node in this tree, return false to cancel the append.
+ * @param {Tree} tree The owner tree
+ * @param {Node} parent The parent node
+ * @param {Node} node The child node to be appended
+ */
+ 'beforeappend',
+ /**
+ * @event beforeremove
+ * Fires before a child is removed from a node in this tree, return false to cancel the remove.
+ * @param {Tree} tree The owner tree
+ * @param {Node} parent The parent node
+ * @param {Node} node The child node to be removed
+ */
+ 'beforeremove',
+ /**
+ * @event beforemovenode
+ * Fires before a node is moved to a new location in the tree. Return false to cancel the move.
+ * @param {Tree} tree The owner tree
+ * @param {Node} node The node being moved
+ * @param {Node} oldParent The parent of the node
+ * @param {Node} newParent The new parent the node is moving to
+ * @param {Number} index The index it is being moved to
+ */
+ 'beforemovenode',
+ /**
+ * @event beforeinsert
+ * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
+ * @param {Tree} tree The owner tree
+ * @param {Node} parent The parent node
+ * @param {Node} node The child node to be inserted
+ * @param {Node} refNode The child node the node is being inserted before
+ */
+ 'beforeinsert',
+
+ /**
+ * @event beforeload
+ * Fires before a node is loaded, return false to cancel
+ * @param {Node} node The node being loaded
+ */
+ 'beforeload',
+ /**
+ * @event load
+ * Fires when a node is loaded
+ * @param {Node} node The node that was loaded
+ */
+ 'load',
+ /**
+ * @event textchange
+ * Fires when the text for a node is changed
+ * @param {Node} node The node
+ * @param {String} text The new text
+ * @param {String} oldText The old text
+ */
+ 'textchange',
+ /**
+ * @event beforeexpandnode
+ * Fires before a node is expanded, return false to cancel.
+ * @param {Node} node The node
+ * @param {Boolean} deep
+ * @param {Boolean} anim
+ */
+ 'beforeexpandnode',
+ /**
+ * @event beforecollapsenode
+ * Fires before a node is collapsed, return false to cancel.
+ * @param {Node} node The node
+ * @param {Boolean} deep
+ * @param {Boolean} anim
+ */
+ 'beforecollapsenode',
+ /**
+ * @event expandnode
+ * Fires when a node is expanded
+ * @param {Node} node The node
+ */
+ 'expandnode',
+ /**
+ * @event disabledchange
+ * Fires when the disabled status of a node changes
+ * @param {Node} node The node
+ * @param {Boolean} disabled
+ */
+ 'disabledchange',
+ /**
+ * @event collapsenode
+ * Fires when a node is collapsed
+ * @param {Node} node The node
+ */
+ 'collapsenode',
+ /**
+ * @event beforeclick
+ * Fires before click processing on a node. Return false to cancel the default action.
+ * @param {Node} node The node
+ * @param {Ext.EventObject} e The event object
+ */
+ 'beforeclick',
+ /**
+ * @event click
+ * Fires when a node is clicked
+ * @param {Node} node The node
+ * @param {Ext.EventObject} e The event object
+ */
+ 'click',
+ /**
+ * @event containerclick
+ * Fires when the tree container is clicked
+ * @param {Tree} this
+ * @param {Ext.EventObject} e The event object
+ */
+ 'containerclick',
+ /**
+ * @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 on a node. Return false to cancel the default action.
+ * @param {Node} node The node
+ * @param {Ext.EventObject} e The event object
+ */
+ 'beforedblclick',
+ /**
+ * @event dblclick
+ * Fires when a node is double clicked
+ * @param {Node} node The node
+ * @param {Ext.EventObject} e The event object
+ */
+ 'dblclick',
+ /**
+ * @event containerdblclick
+ * Fires when the tree container is double clicked
+ * @param {Tree} this
+ * @param {Ext.EventObject} e The event object
+ */
+ 'containerdblclick',
+ /**
+ * @event contextmenu
+ * Fires when a node is right clicked. To display a context menu in response to this
+ * event, first create a Menu object (see {@link Ext.menu.Menu} for details), then add
+ * a handler for this event:<pre><code>
+new Ext.tree.TreePanel({
+ title: 'My TreePanel',
+ root: new Ext.tree.AsyncTreeNode({
+ text: 'The Root',
+ children: [
+ { text: 'Child node 1', leaf: true },
+ { text: 'Child node 2', leaf: true }
+ ]
+ }),
+ contextMenu: new Ext.menu.Menu({
+ items: [{
+ id: 'delete-node',
+ text: 'Delete Node'
+ }],
+ listeners: {
+ itemclick: function(item) {
+ switch (item.id) {
+ case 'delete-node':
+ var n = item.parentMenu.contextNode;
+ if (n.parentNode) {
+ n.remove();
+ }
+ break;
+ }
+ }
+ }
+ }),
+ listeners: {
+ contextmenu: function(node, e) {
+// Register the context node with the menu so that a Menu Item's handler function can access
+// it via its {@link Ext.menu.BaseItem#parentMenu parentMenu} property.
+ node.select();
+ var c = node.getOwnerTree().contextMenu;
+ c.contextNode = node;
+ c.showAt(e.getXY());
+ }
}
- 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;
+});
+</code></pre>
+ * @param {Node} node The node
+ * @param {Ext.EventObject} e The event object
+ */
+ 'contextmenu',
+ /**
+ * @event containercontextmenu
+ * Fires when the tree container is right clicked
+ * @param {Tree} this
+ * @param {Ext.EventObject} e The event object
+ */
+ 'containercontextmenu',
+ /**
+ * @event beforechildrenrendered
+ * Fires right before the child nodes for a node are rendered
+ * @param {Node} node The node
+ */
+ 'beforechildrenrendered',
+ /**
+ * @event startdrag
+ * Fires when a node starts being dragged
+ * @param {Ext.tree.TreePanel} this
+ * @param {Ext.tree.TreeNode} node
+ * @param {event} e The raw browser event
+ */
+ 'startdrag',
+ /**
+ * @event enddrag
+ * Fires when a drag operation is complete
+ * @param {Ext.tree.TreePanel} this
+ * @param {Ext.tree.TreeNode} node
+ * @param {event} e The raw browser event
+ */
+ 'enddrag',
+ /**
+ * @event dragdrop
+ * Fires when a dragged node is dropped on a valid DD target
+ * @param {Ext.tree.TreePanel} this
+ * @param {Ext.tree.TreeNode} node
+ * @param {DD} dd The dd it was dropped on
+ * @param {event} e The raw browser event
+ */
+ 'dragdrop',
+ /**
+ * @event beforenodedrop
+ * Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The dropEvent
+ * passed to handlers has the following properties:<br />
+ * <ul style="padding:5px;padding-left:16px;">
+ * <li>tree - The TreePanel</li>
+ * <li>target - The node being targeted for the drop</li>
+ * <li>data - The drag data from the drag source</li>
+ * <li>point - The point of the drop - append, above or below</li>
+ * <li>source - The drag source</li>
+ * <li>rawEvent - Raw mouse event</li>
+ * <li>dropNode - Drop node(s) provided by the source <b>OR</b> you can supply node(s)
+ * to be inserted by setting them on this object.</li>
+ * <li>cancel - Set this to true to cancel the drop.</li>
+ * <li>dropStatus - If the default drop action is cancelled but the drop is valid, setting this to true
+ * will prevent the animated 'repair' from appearing.</li>
+ * </ul>
+ * @param {Object} dropEvent
+ */
+ 'beforenodedrop',
+ /**
+ * @event nodedrop
+ * Fires after a DD object is dropped on a node in this tree. The dropEvent
+ * passed to handlers has the following properties:<br />
+ * <ul style="padding:5px;padding-left:16px;">
+ * <li>tree - The TreePanel</li>
+ * <li>target - The node being targeted for the drop</li>
+ * <li>data - The drag data from the drag source</li>
+ * <li>point - The point of the drop - append, above or below</li>
+ * <li>source - The drag source</li>
+ * <li>rawEvent - Raw mouse event</li>
+ * <li>dropNode - Dropped node(s).</li>
+ * </ul>
+ * @param {Object} dropEvent
+ */
+ 'nodedrop',
+ /**
+ * @event nodedragover
+ * Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent
+ * passed to handlers has the following properties:<br />
+ * <ul style="padding:5px;padding-left:16px;">
+ * <li>tree - The TreePanel</li>
+ * <li>target - The node being targeted for the drop</li>
+ * <li>data - The drag data from the drag source</li>
+ * <li>point - The point of the drop - append, above or below</li>
+ * <li>source - The drag source</li>
+ * <li>rawEvent - Raw mouse event</li>
+ * <li>dropNode - Drop node(s) provided by the source.</li>
+ * <li>cancel - Set this to true to signal drop not allowed.</li>
+ * </ul>
+ * @param {Object} dragOverEvent
+ */
+ 'nodedragover'
+ );
+ if(this.singleExpand){
+ this.on('beforeexpandnode', this.restrictExpand, this);
+ }
+ },
+
+ // private
+ proxyNodeEvent : function(ename, a1, a2, a3, a4, a5, a6){
+ if(ename == 'collapse' || ename == 'expand' || ename == 'beforecollapse' || ename == 'beforeexpand' || ename == 'move' || ename == 'beforemove'){
+ ename = ename+'node';
+ }
+ // args inline for performance while bubbling events
+ return this.fireEvent(ename, a1, a2, a3, a4, a5, a6);
+ },
+
/**
- * Read-only. The text for this node. To change it use <code>{@link #setText}</code>.
- * @type String
+ * Returns this root node for this tree
+ * @return {Node}
*/
- this.text = attributes.text;
+ getRootNode : function(){
+ return this.root;
+ },
+
/**
- * True if this node is disabled.
- * @type Boolean
+ * Sets the root node for this tree. If the TreePanel has already rendered a root node, the
+ * previous root node (and all of its descendants) are destroyed before the new root node is rendered.
+ * @param {Node} node
+ * @return {Node}
*/
- this.disabled = attributes.disabled === true;
+ setRootNode : function(node){
+ this.destroyRoot();
+ if(!node.render){ // attributes passed
+ node = this.loader.createNode(node);
+ }
+ this.root = node;
+ node.ownerTree = this;
+ node.isRoot = true;
+ this.registerNode(node);
+ if(!this.rootVisible){
+ var uiP = node.attributes.uiProvider;
+ node.ui = uiP ? new uiP(node) : new Ext.tree.RootTreeNodeUI(node);
+ }
+ if(this.innerCt){
+ this.clearInnerCt();
+ this.renderRoot();
+ }
+ return node;
+ },
+
+ clearInnerCt : function(){
+ this.innerCt.update('');
+ },
+
+ // private
+ renderRoot : function(){
+ this.root.render();
+ if(!this.rootVisible){
+ this.root.renderChildren();
+ }
+ },
+
/**
- * True if this node is hidden.
- * @type Boolean
+ * Gets a node in this tree by its id
+ * @param {String} id
+ * @return {Node}
*/
- this.hidden = attributes.hidden === true;
+ getNodeById : function(id){
+ return this.nodeHash[id];
+ },
- 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'
- );
+ // private
+ registerNode : function(node){
+ this.nodeHash[node.id] = node;
+ },
+
+ // private
+ unregisterNode : function(node){
+ delete this.nodeHash[node.id];
+ },
+
+ // private
+ toString : function(){
+ return '[Tree'+(this.id?' '+this.id:'')+']';
+ },
+
+ // private
+ restrictExpand : function(node){
+ var p = node.parentNode;
+ if(p){
+ if(p.expandedChild && p.expandedChild.parentNode == p){
+ p.expandedChild.collapse();
+ }
+ p.expandedChild = node;
+ }
+ },
+
+ /**
+ * Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. 'id')
+ * @param {String} attribute (optional) Defaults to null (return the actual nodes)
+ * @param {TreeNode} startNode (optional) The node to start from, defaults to the root
+ * @return {Array}
+ */
+ getChecked : function(a, startNode){
+ startNode = startNode || this.root;
+ var r = [];
+ var f = function(){
+ if(this.attributes.checked){
+ r.push(!a ? this : (a == 'id' ? this.id : this.attributes[a]));
+ }
+ };
+ startNode.cascade(f);
+ return r;
+ },
+
+ /**
+ * Returns the default {@link Ext.tree.TreeLoader} for this TreePanel.
+ * @return {Ext.tree.TreeLoader} The TreeLoader for this TreePanel.
+ */
+ getLoader : function(){
+ return this.loader;
+ },
+
+ /**
+ * Expand all nodes
+ */
+ expandAll : function(){
+ this.root.expand(true);
+ },
+
+ /**
+ * Collapse all nodes
+ */
+ collapseAll : function(){
+ this.root.collapse(true);
+ },
+
+ /**
+ * Returns the selection model used by this TreePanel.
+ * @return {TreeSelectionModel} The selection model used by this TreePanel
+ */
+ getSelectionModel : function(){
+ if(!this.selModel){
+ this.selModel = new Ext.tree.DefaultSelectionModel();
+ }
+ return this.selModel;
+ },
+
+ /**
+ * Expands a specified path in this TreePanel. A path can be retrieved from a node with {@link Ext.data.Node#getPath}
+ * @param {String} path
+ * @param {String} attr (optional) The attribute used in the path (see {@link Ext.data.Node#getPath} for more info)
+ * @param {Function} callback (optional) The callback to call when the expand is complete. The callback will be called with
+ * (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded.
+ */
+ expandPath : function(path, attr, callback){
+ attr = attr || 'id';
+ var keys = path.split(this.pathSeparator);
+ var curNode = this.root;
+ if(curNode.attributes[attr] != keys[1]){ // invalid root
+ if(callback){
+ callback(false, null);
+ }
+ return;
+ }
+ var index = 1;
+ var f = function(){
+ if(++index == keys.length){
+ if(callback){
+ callback(true, curNode);
+ }
+ return;
+ }
+ var c = curNode.findChild(attr, keys[index]);
+ if(!c){
+ if(callback){
+ callback(false, curNode);
+ }
+ return;
+ }
+ curNode = c;
+ c.expand(false, false, f);
+ };
+ curNode.expand(false, false, f);
+ },
+
+ /**
+ * Selects the node in this tree at the specified path. A path can be retrieved from a node with {@link Ext.data.Node#getPath}
+ * @param {String} path
+ * @param {String} attr (optional) The attribute used in the path (see {@link Ext.data.Node#getPath} for more info)
+ * @param {Function} callback (optional) The callback to call when the selection is complete. The callback will be called with
+ * (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node.
+ */
+ selectPath : function(path, attr, callback){
+ attr = attr || 'id';
+ var keys = path.split(this.pathSeparator),
+ v = keys.pop();
+ if(keys.length > 1){
+ var f = function(success, node){
+ if(success && node){
+ var n = node.findChild(attr, v);
+ if(n){
+ n.select();
+ if(callback){
+ callback(true, n);
+ }
+ }else if(callback){
+ callback(false, n);
+ }
+ }else{
+ if(callback){
+ callback(false, n);
+ }
+ }
+ };
+ this.expandPath(keys.join(this.pathSeparator), attr, f);
+ }else{
+ this.root.select();
+ if(callback){
+ callback(true, this.root);
+ }
+ }
+ },
+
+ /**
+ * Returns the underlying Element for this tree
+ * @return {Ext.Element} The Element
+ */
+ getTreeEl : function(){
+ return this.body;
+ },
+
+ // private
+ onRender : function(ct, position){
+ Ext.tree.TreePanel.superclass.onRender.call(this, ct, position);
+ this.el.addClass('x-tree');
+ this.innerCt = this.body.createChild({tag:'ul',
+ cls:'x-tree-root-ct ' +
+ (this.useArrows ? 'x-tree-arrows' : this.lines ? 'x-tree-lines' : 'x-tree-no-lines')});
+ },
+
+ // private
+ initEvents : function(){
+ Ext.tree.TreePanel.superclass.initEvents.call(this);
+
+ if(this.containerScroll){
+ Ext.dd.ScrollManager.register(this.body);
+ }
+ if((this.enableDD || this.enableDrop) && !this.dropZone){
+ /**
+ * The dropZone used by this tree if drop is enabled (see {@link #enableDD} or {@link #enableDrop})
+ * @property dropZone
+ * @type Ext.tree.TreeDropZone
+ */
+ this.dropZone = new Ext.tree.TreeDropZone(this, this.dropConfig || {
+ ddGroup: this.ddGroup || 'TreeDD', appendOnly: this.ddAppendOnly === true
+ });
+ }
+ if((this.enableDD || this.enableDrag) && !this.dragZone){
+ /**
+ * The dragZone used by this tree if drag is enabled (see {@link #enableDD} or {@link #enableDrag})
+ * @property dragZone
+ * @type Ext.tree.TreeDragZone
+ */
+ this.dragZone = new Ext.tree.TreeDragZone(this, this.dragConfig || {
+ ddGroup: this.ddGroup || 'TreeDD',
+ scroll: this.ddScroll
+ });
+ }
+ this.getSelectionModel().init(this);
+ },
+
+ // private
+ afterRender : function(){
+ Ext.tree.TreePanel.superclass.afterRender.call(this);
+ this.renderRoot();
+ },
+
+ beforeDestroy : function(){
+ if(this.rendered){
+ Ext.dd.ScrollManager.unregister(this.body);
+ Ext.destroy(this.dropZone, this.dragZone);
+ }
+ this.destroyRoot();
+ Ext.destroy(this.loader);
+ this.nodeHash = this.root = this.loader = null;
+ Ext.tree.TreePanel.superclass.beforeDestroy.call(this);
+ },
+
+ /**
+ * Destroy the root node. Not included by itself because we need to pass the silent parameter.
+ * @private
+ */
+ destroyRoot : function(){
+ if(this.root && this.root.destroy){
+ this.root.destroy(true);
+ }
+ }
+
+ /**
+ * @cfg {String/Number} activeItem
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} autoDestroy
+ * @hide
+ */
+ /**
+ * @cfg {Object/String/Function} autoLoad
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} autoWidth
+ * @hide
+ */
+ /**
+ * @cfg {Boolean/Number} bufferResize
+ * @hide
+ */
+ /**
+ * @cfg {String} defaultType
+ * @hide
+ */
+ /**
+ * @cfg {Object} defaults
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} hideBorders
+ * @hide
+ */
+ /**
+ * @cfg {Mixed} items
+ * @hide
+ */
+ /**
+ * @cfg {String} layout
+ * @hide
+ */
+ /**
+ * @cfg {Object} layoutConfig
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} monitorResize
+ * @hide
+ */
+ /**
+ * @property items
+ * @hide
+ */
+ /**
+ * @method cascade
+ * @hide
+ */
+ /**
+ * @method doLayout
+ * @hide
+ */
+ /**
+ * @method find
+ * @hide
+ */
+ /**
+ * @method findBy
+ * @hide
+ */
+ /**
+ * @method findById
+ * @hide
+ */
+ /**
+ * @method findByType
+ * @hide
+ */
+ /**
+ * @method getComponent
+ * @hide
+ */
+ /**
+ * @method getLayout
+ * @hide
+ */
+ /**
+ * @method getUpdater
+ * @hide
+ */
+ /**
+ * @method insert
+ * @hide
+ */
+ /**
+ * @method load
+ * @hide
+ */
+ /**
+ * @method remove
+ * @hide
+ */
+ /**
+ * @event add
+ * @hide
+ */
+ /**
+ * @method removeAll
+ * @hide
+ */
+ /**
+ * @event afterLayout
+ * @hide
+ */
+ /**
+ * @event beforeadd
+ * @hide
+ */
+ /**
+ * @event beforeremove
+ * @hide
+ */
+ /**
+ * @event remove
+ * @hide
+ */
+
+
+
+ /**
+ * @cfg {String} allowDomMove @hide
+ */
+ /**
+ * @cfg {String} autoEl @hide
+ */
+ /**
+ * @cfg {String} applyTo @hide
+ */
+ /**
+ * @cfg {String} contentEl @hide
+ */
+ /**
+ * @cfg {Mixed} data @hide
+ */
+ /**
+ * @cfg {Mixed} tpl @hide
+ */
+ /**
+ * @cfg {String} tplWriteMode @hide
+ */
+ /**
+ * @cfg {String} disabledClass @hide
+ */
+ /**
+ * @cfg {String} elements @hide
+ */
+ /**
+ * @cfg {String} html @hide
+ */
+ /**
+ * @cfg {Boolean} preventBodyReset
+ * @hide
+ */
+ /**
+ * @property disabled
+ * @hide
+ */
+ /**
+ * @method applyToMarkup
+ * @hide
+ */
+ /**
+ * @method enable
+ * @hide
+ */
+ /**
+ * @method disable
+ * @hide
+ */
+ /**
+ * @method setDisabled
+ * @hide
+ */
+});
+
+Ext.tree.TreePanel.nodeTypes = {};
+
+Ext.reg('treepanel', Ext.tree.TreePanel);Ext.tree.TreeEventModel = function(tree){
+ this.tree = tree;
+ this.tree.on('render', this.initEvents, this);
+};
+
+Ext.tree.TreeEventModel.prototype = {
+ initEvents : function(){
+ var t = this.tree;
+
+ if(t.trackMouseOver !== false){
+ t.mon(t.innerCt, {
+ scope: this,
+ mouseover: this.delegateOver,
+ mouseout: this.delegateOut
+ });
+ }
+ t.mon(t.getTreeEl(), {
+ scope: this,
+ click: this.delegateClick,
+ dblclick: this.delegateDblClick,
+ contextmenu: this.delegateContextMenu
+ });
+ },
+
+ getNode : function(e){
+ var t;
+ if(t = e.getTarget('.x-tree-node-el', 10)){
+ var id = Ext.fly(t, '_treeEvents').getAttribute('tree-node-id', 'ext');
+ if(id){
+ return this.tree.getNodeById(id);
+ }
+ }
+ return null;
+ },
+
+ getNodeTarget : function(e){
+ var t = e.getTarget('.x-tree-node-icon', 1);
+ if(!t){
+ t = e.getTarget('.x-tree-node-el', 6);
+ }
+ return t;
+ },
+
+ delegateOut : function(e, t){
+ if(!this.beforeEvent(e)){
+ return;
+ }
+ if(e.getTarget('.x-tree-ec-icon', 1)){
+ var n = this.getNode(e);
+ this.onIconOut(e, n);
+ if(n == this.lastEcOver){
+ delete this.lastEcOver;
+ }
+ }
+ if((t = this.getNodeTarget(e)) && !e.within(t, true)){
+ this.onNodeOut(e, this.getNode(e));
+ }
+ },
+
+ delegateOver : function(e, t){
+ if(!this.beforeEvent(e)){
+ return;
+ }
+ if(Ext.isGecko && !this.trackingDoc){ // prevent hanging in FF
+ Ext.getBody().on('mouseover', this.trackExit, this);
+ this.trackingDoc = true;
+ }
+ if(this.lastEcOver){ // prevent hung highlight
+ this.onIconOut(e, this.lastEcOver);
+ delete this.lastEcOver;
+ }
+ if(e.getTarget('.x-tree-ec-icon', 1)){
+ this.lastEcOver = this.getNode(e);
+ this.onIconOver(e, this.lastEcOver);
+ }
+ if(t = this.getNodeTarget(e)){
+ this.onNodeOver(e, this.getNode(e));
+ }
+ },
+
+ trackExit : function(e){
+ if(this.lastOverNode){
+ if(this.lastOverNode.ui && !e.within(this.lastOverNode.ui.getEl())){
+ this.onNodeOut(e, this.lastOverNode);
+ }
+ delete this.lastOverNode;
+ Ext.getBody().un('mouseover', this.trackExit, this);
+ this.trackingDoc = false;
+ }
+
+ },
+
+ delegateClick : function(e, t){
+ if(this.beforeEvent(e)){
+ if(e.getTarget('input[type=checkbox]', 1)){
+ this.onCheckboxClick(e, this.getNode(e));
+ }else if(e.getTarget('.x-tree-ec-icon', 1)){
+ this.onIconClick(e, this.getNode(e));
+ }else if(this.getNodeTarget(e)){
+ this.onNodeClick(e, this.getNode(e));
+ }
+ }else{
+ this.checkContainerEvent(e, 'click');
+ }
+ },
+
+ delegateDblClick : function(e, t){
+ if(this.beforeEvent(e)){
+ if(this.getNodeTarget(e)){
+ this.onNodeDblClick(e, this.getNode(e));
+ }
+ }else{
+ this.checkContainerEvent(e, 'dblclick');
+ }
+ },
+
+ delegateContextMenu : function(e, t){
+ if(this.beforeEvent(e)){
+ if(this.getNodeTarget(e)){
+ this.onNodeContextMenu(e, this.getNode(e));
+ }
+ }else{
+ this.checkContainerEvent(e, 'contextmenu');
+ }
+ },
+
+ checkContainerEvent: function(e, type){
+ if(this.disabled){
+ e.stopEvent();
+ return false;
+ }
+ this.onContainerEvent(e, type);
+ },
+
+ onContainerEvent: function(e, type){
+ this.tree.fireEvent('container' + type, this.tree, e);
+ },
+
+ onNodeClick : function(e, node){
+ node.ui.onClick(e);
+ },
+
+ onNodeOver : function(e, node){
+ this.lastOverNode = node;
+ node.ui.onOver(e);
+ },
+
+ onNodeOut : function(e, node){
+ node.ui.onOut(e);
+ },
+
+ onIconOver : function(e, node){
+ node.ui.addClass('x-tree-ec-over');
+ },
+
+ onIconOut : function(e, node){
+ node.ui.removeClass('x-tree-ec-over');
+ },
+
+ onIconClick : function(e, node){
+ node.ui.ecClick(e);
+ },
+
+ onCheckboxClick : function(e, node){
+ node.ui.onCheckChange(e);
+ },
+
+ onNodeDblClick : function(e, node){
+ node.ui.onDblClick(e);
+ },
+
+ onNodeContextMenu : function(e, node){
+ node.ui.onContextMenu(e);
+ },
+
+ beforeEvent : function(e){
+ var node = this.getNode(e);
+ if(this.disabled || !node || !node.ui){
+ e.stopEvent();
+ return false;
+ }
+ return true;
+ },
+
+ disable: function(){
+ this.disabled = true;
+ },
+
+ enable: function(){
+ this.disabled = false;
+ }
+};/**
+ * @class Ext.tree.DefaultSelectionModel
+ * @extends Ext.util.Observable
+ * The default single selection for a TreePanel.
+ */
+Ext.tree.DefaultSelectionModel = function(config){
+ this.selNode = null;
+
+ this.addEvents(
+ /**
+ * @event selectionchange
+ * Fires when the selected node changes
+ * @param {DefaultSelectionModel} this
+ * @param {TreeNode} node the new selection
+ */
+ 'selectionchange',
+
+ /**
+ * @event beforeselect
+ * Fires before the selected node changes, return false to cancel the change
+ * @param {DefaultSelectionModel} this
+ * @param {TreeNode} node the new selection
+ * @param {TreeNode} node the old selection
+ */
+ 'beforeselect'
+ );
+
+ Ext.apply(this, config);
+ Ext.tree.DefaultSelectionModel.superclass.constructor.call(this);
+};
+
+Ext.extend(Ext.tree.DefaultSelectionModel, Ext.util.Observable, {
+ init : function(tree){
+ this.tree = tree;
+ tree.mon(tree.getTreeEl(), 'keydown', this.onKeyDown, this);
+ tree.on('click', this.onNodeClick, this);
+ },
+
+ onNodeClick : function(node, e){
+ this.select(node);
+ },
+
+ /**
+ * Select a node.
+ * @param {TreeNode} node The node to select
+ * @return {TreeNode} The selected node
+ */
+ select : function(node, /* private*/ selectNextNode){
+ // If node is hidden, select the next node in whatever direction was being moved in.
+ if (!Ext.fly(node.ui.wrap).isVisible() && selectNextNode) {
+ return selectNextNode.call(this, node);
+ }
+ var last = this.selNode;
+ if(node == last){
+ node.ui.onSelectedChange(true);
+ }else if(this.fireEvent('beforeselect', this, node, last) !== false){
+ if(last && last.ui){
+ last.ui.onSelectedChange(false);
+ }
+ this.selNode = node;
+ node.ui.onSelectedChange(true);
+ this.fireEvent('selectionchange', this, node, last);
+ }
+ return node;
+ },
+
+ /**
+ * Deselect a node.
+ * @param {TreeNode} node The node to unselect
+ * @param {Boolean} silent True to stop the selectionchange event from firing.
+ */
+ unselect : function(node, silent){
+ if(this.selNode == node){
+ this.clearSelections(silent);
+ }
+ },
+
+ /**
+ * Clear all selections
+ * @param {Boolean} silent True to stop the selectionchange event from firing.
+ */
+ clearSelections : function(silent){
+ var n = this.selNode;
+ if(n){
+ n.ui.onSelectedChange(false);
+ this.selNode = null;
+ if(silent !== true){
+ this.fireEvent('selectionchange', this, null);
+ }
+ }
+ return n;
+ },
+
+ /**
+ * Get the selected node
+ * @return {TreeNode} The selected node
+ */
+ getSelectedNode : function(){
+ return this.selNode;
+ },
+
+ /**
+ * Returns true if the node is selected
+ * @param {TreeNode} node The node to check
+ * @return {Boolean}
+ */
+ isSelected : function(node){
+ return this.selNode == node;
+ },
+
+ /**
+ * Selects the node above the selected node in the tree, intelligently walking the nodes
+ * @return TreeNode The new selection
+ */
+ selectPrevious : function(/* private */ s){
+ if(!(s = s || this.selNode || this.lastSelNode)){
+ return null;
+ }
+ // Here we pass in the current function to select to indicate the direction we're moving
+ var ps = s.previousSibling;
+ if(ps){
+ if(!ps.isExpanded() || ps.childNodes.length < 1){
+ return this.select(ps, this.selectPrevious);
+ } else{
+ var lc = ps.lastChild;
+ while(lc && lc.isExpanded() && Ext.fly(lc.ui.wrap).isVisible() && lc.childNodes.length > 0){
+ lc = lc.lastChild;
+ }
+ return this.select(lc, this.selectPrevious);
+ }
+ } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){
+ return this.select(s.parentNode, this.selectPrevious);
+ }
+ return null;
+ },
+
+ /**
+ * Selects the node above the selected node in the tree, intelligently walking the nodes
+ * @return TreeNode The new selection
+ */
+ selectNext : function(/* private */ s){
+ if(!(s = s || this.selNode || this.lastSelNode)){
+ return null;
+ }
+ // Here we pass in the current function to select to indicate the direction we're moving
+ if(s.firstChild && s.isExpanded() && Ext.fly(s.ui.wrap).isVisible()){
+ return this.select(s.firstChild, this.selectNext);
+ }else if(s.nextSibling){
+ return this.select(s.nextSibling, this.selectNext);
+ }else if(s.parentNode){
+ var newS = null;
+ s.parentNode.bubble(function(){
+ if(this.nextSibling){
+ newS = this.getOwnerTree().selModel.select(this.nextSibling, this.selectNext);
+ return false;
+ }
+ });
+ return newS;
+ }
+ return null;
+ },
+
+ onKeyDown : function(e){
+ var s = this.selNode || this.lastSelNode;
+ // undesirable, but required
+ var sm = this;
+ if(!s){
+ return;
+ }
+ var k = e.getKey();
+ switch(k){
+ case e.DOWN:
+ e.stopEvent();
+ this.selectNext();
+ break;
+ case e.UP:
+ e.stopEvent();
+ this.selectPrevious();
+ break;
+ case e.RIGHT:
+ e.preventDefault();
+ if(s.hasChildNodes()){
+ if(!s.isExpanded()){
+ s.expand();
+ }else if(s.firstChild){
+ this.select(s.firstChild, e);
+ }
+ }
+ break;
+ case e.LEFT:
+ e.preventDefault();
+ if(s.hasChildNodes() && s.isExpanded()){
+ s.collapse();
+ }else if(s.parentNode && (this.tree.rootVisible || s.parentNode != this.tree.getRootNode())){
+ this.select(s.parentNode, e);
+ }
+ break;
+ };
+ }
+});
+
+/**
+ * @class Ext.tree.MultiSelectionModel
+ * @extends Ext.util.Observable
+ * Multi selection for a TreePanel.
+ */
+Ext.tree.MultiSelectionModel = function(config){
+ this.selNodes = [];
+ this.selMap = {};
+ this.addEvents(
+ /**
+ * @event selectionchange
+ * Fires when the selected nodes change
+ * @param {MultiSelectionModel} this
+ * @param {Array} nodes Array of the selected nodes
+ */
+ 'selectionchange'
+ );
+ Ext.apply(this, config);
+ Ext.tree.MultiSelectionModel.superclass.constructor.call(this);
+};
+
+Ext.extend(Ext.tree.MultiSelectionModel, Ext.util.Observable, {
+ init : function(tree){
+ this.tree = tree;
+ tree.mon(tree.getTreeEl(), 'keydown', this.onKeyDown, this);
+ tree.on('click', this.onNodeClick, this);
+ },
+
+ onNodeClick : function(node, e){
+ if(e.ctrlKey && this.isSelected(node)){
+ this.unselect(node);
+ }else{
+ this.select(node, e, e.ctrlKey);
+ }
+ },
+
+ /**
+ * Select a node.
+ * @param {TreeNode} node The node to select
+ * @param {EventObject} e (optional) An event associated with the selection
+ * @param {Boolean} keepExisting True to retain existing selections
+ * @return {TreeNode} The selected node
+ */
+ select : function(node, e, keepExisting){
+ if(keepExisting !== true){
+ this.clearSelections(true);
+ }
+ if(this.isSelected(node)){
+ this.lastSelNode = node;
+ return node;
+ }
+ this.selNodes.push(node);
+ this.selMap[node.id] = node;
+ this.lastSelNode = node;
+ node.ui.onSelectedChange(true);
+ this.fireEvent('selectionchange', this, this.selNodes);
+ return node;
+ },
+
+ /**
+ * Deselect a node.
+ * @param {TreeNode} node The node to unselect
+ */
+ unselect : function(node){
+ if(this.selMap[node.id]){
+ node.ui.onSelectedChange(false);
+ var sn = this.selNodes;
+ var index = sn.indexOf(node);
+ if(index != -1){
+ this.selNodes.splice(index, 1);
+ }
+ delete this.selMap[node.id];
+ this.fireEvent('selectionchange', this, this.selNodes);
+ }
+ },
+
+ /**
+ * Clear all selections
+ */
+ clearSelections : function(suppressEvent){
+ var sn = this.selNodes;
+ if(sn.length > 0){
+ for(var i = 0, len = sn.length; i < len; i++){
+ sn[i].ui.onSelectedChange(false);
+ }
+ this.selNodes = [];
+ this.selMap = {};
+ if(suppressEvent !== true){
+ this.fireEvent('selectionchange', this, this.selNodes);
+ }
+ }
+ },
+
+ /**
+ * Returns true if the node is selected
+ * @param {TreeNode} node The node to check
+ * @return {Boolean}
+ */
+ isSelected : function(node){
+ return this.selMap[node.id] ? true : false;
+ },
+
+ /**
+ * Returns an array of the selected nodes
+ * @return {Array}
+ */
+ getSelectedNodes : function(){
+ return this.selNodes;
+ },
+
+ onKeyDown : Ext.tree.DefaultSelectionModel.prototype.onKeyDown,
+
+ selectNext : Ext.tree.DefaultSelectionModel.prototype.selectNext,
+
+ selectPrevious : Ext.tree.DefaultSelectionModel.prototype.selectPrevious
+});/**
+ * @class Ext.data.Tree
+ * @extends Ext.util.Observable
+ * Represents a tree data structure and bubbles all the events for its nodes. The nodes
+ * in the tree have most standard DOM functionality.
+ * @constructor
+ * @param {Node} root (optional) The root node
+ */
+Ext.data.Tree = function(root){
+ this.nodeHash = {};
+ /**
+ * The root node for this tree
+ * @type Node
+ */
+ this.root = null;
+ if(root){
+ this.setRootNode(root);
+ }
+ this.addEvents(
+ /**
+ * @event append
+ * Fires when a new child node is appended to a node in this tree.
+ * @param {Tree} tree The owner tree
+ * @param {Node} parent The parent node
+ * @param {Node} node The newly appended node
+ * @param {Number} index The index of the newly appended node
+ */
+ "append",
+ /**
+ * @event remove
+ * Fires when a child node is removed from a node in this tree.
+ * @param {Tree} tree The owner tree
+ * @param {Node} parent The parent node
+ * @param {Node} node The child node removed
+ */
+ "remove",
+ /**
+ * @event move
+ * Fires when a node is moved to a new location in the tree
+ * @param {Tree} tree The owner tree
+ * @param {Node} node The node moved
+ * @param {Node} oldParent The old parent of this node
+ * @param {Node} newParent The new parent of this node
+ * @param {Number} index The index it was moved to
+ */
+ "move",
+ /**
+ * @event insert
+ * Fires when a new child node is inserted in a node in this tree.
+ * @param {Tree} tree The owner tree
+ * @param {Node} parent The parent node
+ * @param {Node} node The child node inserted
+ * @param {Node} refNode The child node the node was inserted before
+ */
+ "insert",
+ /**
+ * @event beforeappend
+ * Fires before a new child is appended to a node in this tree, return false to cancel the append.
+ * @param {Tree} tree The owner tree
+ * @param {Node} parent The parent node
+ * @param {Node} node The child node to be appended
+ */
+ "beforeappend",
+ /**
+ * @event beforeremove
+ * Fires before a child is removed from a node in this tree, return false to cancel the remove.
+ * @param {Tree} tree The owner tree
+ * @param {Node} parent The parent node
+ * @param {Node} node The child node to be removed
+ */
+ "beforeremove",
+ /**
+ * @event beforemove
+ * Fires before a node is moved to a new location in the tree. Return false to cancel the move.
+ * @param {Tree} tree The owner tree
+ * @param {Node} node The node being moved
+ * @param {Node} oldParent The parent of the node
+ * @param {Node} newParent The new parent the node is moving to
+ * @param {Number} index The index it is being moved to
+ */
+ "beforemove",
+ /**
+ * @event beforeinsert
+ * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
+ * @param {Tree} tree The owner tree
+ * @param {Node} parent The parent node
+ * @param {Node} node The child node to be inserted
+ * @param {Node} refNode The child node the node is being inserted before
+ */
+ "beforeinsert"
+ );
+
+ Ext.data.Tree.superclass.constructor.call(this);
+};
+
+Ext.extend(Ext.data.Tree, Ext.util.Observable, {
+ /**
+ * @cfg {String} pathSeparator
+ * The token used to separate paths in node ids (defaults to '/').
+ */
+ pathSeparator: "/",
+
+ // private
+ proxyNodeEvent : function(){
+ return this.fireEvent.apply(this, arguments);
+ },
+
+ /**
+ * Returns the root node for this tree.
+ * @return {Node}
+ */
+ getRootNode : function(){
+ return this.root;
+ },
+
+ /**
+ * Sets the root node for this tree.
+ * @param {Node} node
+ * @return {Node}
+ */
+ setRootNode : function(node){
+ this.root = node;
+ node.ownerTree = this;
+ node.isRoot = true;
+ this.registerNode(node);
+ return node;
+ },
+
+ /**
+ * Gets a node in this tree by its id.
+ * @param {String} id
+ * @return {Node}
+ */
+ getNodeById : function(id){
+ return this.nodeHash[id];
+ },
+
+ // private
+ registerNode : function(node){
+ this.nodeHash[node.id] = node;
+ },
+
+ // private
+ unregisterNode : function(node){
+ delete this.nodeHash[node.id];
+ },
+
+ toString : function(){
+ return "[Tree"+(this.id?" "+this.id:"")+"]";
+ }
+});
+
+/**
+ * @class Ext.data.Node
+ * @extends Ext.util.Observable
+ * @cfg {Boolean} leaf true if this node is a leaf and does not have children
+ * @cfg {String} id The id for this node. If one is not specified, one is generated.
+ * @constructor
+ * @param {Object} attributes The attributes/config for the node
+ */
+Ext.data.Node = function(attributes){
+ /**
+ * The attributes supplied for the node. You can use this property to access any custom attributes you supplied.
+ * @type {Object}
+ */
+ this.attributes = attributes || {};
+ this.leaf = this.attributes.leaf;
+ /**
+ * The node id. @type String
+ */
+ this.id = this.attributes.id;
+ if(!this.id){
+ this.id = Ext.id(null, "xnode-");
+ this.attributes.id = this.id;
+ }
+ /**
+ * All child nodes of this node. @type Array
+ */
+ this.childNodes = [];
+ if(!this.childNodes.indexOf){ // indexOf is a must
+ this.childNodes.indexOf = function(o){
+ for(var i = 0, len = this.length; i < len; i++){
+ if(this[i] == o){
+ return i;
+ }
+ }
+ return -1;
+ };
+ }
+ /**
+ * The parent node for this node. @type Node
+ */
+ this.parentNode = null;
+ /**
+ * The first direct child node of this node, or null if this node has no child nodes. @type Node
+ */
+ this.firstChild = null;
+ /**
+ * The last direct child node of this node, or null if this node has no child nodes. @type Node
+ */
+ this.lastChild = null;
+ /**
+ * The node immediately preceding this node in the tree, or null if there is no sibling node. @type Node
+ */
+ this.previousSibling = null;
+ /**
+ * The node immediately following this node in the tree, or null if there is no sibling node. @type Node
+ */
+ this.nextSibling = null;
+
+ this.addEvents({
+ /**
+ * @event append
+ * Fires when a new child node is appended
+ * @param {Tree} tree The owner tree
+ * @param {Node} this This node
+ * @param {Node} node The newly appended node
+ * @param {Number} index The index of the newly appended node
+ */
+ "append" : true,
+ /**
+ * @event remove
+ * Fires when a child node is removed
+ * @param {Tree} tree The owner tree
+ * @param {Node} this This node
+ * @param {Node} node The removed node
+ */
+ "remove" : true,
+ /**
+ * @event move
+ * Fires when this node is moved to a new location in the tree
+ * @param {Tree} tree The owner tree
+ * @param {Node} this This node
+ * @param {Node} oldParent The old parent of this node
+ * @param {Node} newParent The new parent of this node
+ * @param {Number} index The index it was moved to
+ */
+ "move" : true,
+ /**
+ * @event insert
+ * Fires when a new child node is inserted.
+ * @param {Tree} tree The owner tree
+ * @param {Node} this This node
+ * @param {Node} node The child node inserted
+ * @param {Node} refNode The child node the node was inserted before
+ */
+ "insert" : true,
+ /**
+ * @event beforeappend
+ * Fires before a new child is appended, return false to cancel the append.
+ * @param {Tree} tree The owner tree
+ * @param {Node} this This node
+ * @param {Node} node The child node to be appended
+ */
+ "beforeappend" : true,
+ /**
+ * @event beforeremove
+ * Fires before a child is removed, return false to cancel the remove.
+ * @param {Tree} tree The owner tree
+ * @param {Node} this This node
+ * @param {Node} node The child node to be removed
+ */
+ "beforeremove" : true,
+ /**
+ * @event beforemove
+ * Fires before this node is moved to a new location in the tree. Return false to cancel the move.
+ * @param {Tree} tree The owner tree
+ * @param {Node} this This node
+ * @param {Node} oldParent The parent of this node
+ * @param {Node} newParent The new parent this node is moving to
+ * @param {Number} index The index it is being moved to
+ */
+ "beforemove" : true,
+ /**
+ * @event beforeinsert
+ * Fires before a new child is inserted, return false to cancel the insert.
+ * @param {Tree} tree The owner tree
+ * @param {Node} this This node
+ * @param {Node} node The child node to be inserted
+ * @param {Node} refNode The child node the node is being inserted before
+ */
+ "beforeinsert" : true
+ });
+ this.listeners = this.attributes.listeners;
+ Ext.data.Node.superclass.constructor.call(this);
+};
+
+Ext.extend(Ext.data.Node, Ext.util.Observable, {
+ // private
+ fireEvent : function(evtName){
+ // first do standard event for this node
+ if(Ext.data.Node.superclass.fireEvent.apply(this, arguments) === false){
+ return false;
+ }
+ // then bubble it up to the tree if the event wasn't cancelled
+ var ot = this.getOwnerTree();
+ if(ot){
+ if(ot.proxyNodeEvent.apply(ot, arguments) === false){
+ return false;
+ }
+ }
+ return true;
+ },
+
+ /**
+ * Returns true if this node is a leaf
+ * @return {Boolean}
+ */
+ isLeaf : function(){
+ return this.leaf === true;
+ },
+
+ // private
+ setFirstChild : function(node){
+ this.firstChild = node;
+ },
+
+ //private
+ setLastChild : function(node){
+ this.lastChild = node;
+ },
+
+
+ /**
+ * Returns true if this node is the last child of its parent
+ * @return {Boolean}
+ */
+ isLast : function(){
+ return (!this.parentNode ? true : this.parentNode.lastChild == this);
+ },
+
+ /**
+ * Returns true if this node is the first child of its parent
+ * @return {Boolean}
+ */
+ isFirst : function(){
+ return (!this.parentNode ? true : this.parentNode.firstChild == this);
+ },
+
+ /**
+ * Returns true if this node has one or more child nodes, else false.
+ * @return {Boolean}
+ */
+ hasChildNodes : function(){
+ return !this.isLeaf() && this.childNodes.length > 0;
+ },
+
+ /**
+ * Returns true if this node has one or more child nodes, or if the <tt>expandable</tt>
+ * node attribute is explicitly specified as true (see {@link #attributes}), otherwise returns false.
+ * @return {Boolean}
+ */
+ isExpandable : function(){
+ return this.attributes.expandable || this.hasChildNodes();
+ },
+
+ /**
+ * Insert node(s) as the last child node of this node.
+ * @param {Node/Array} node The node or Array of nodes to append
+ * @return {Node} The appended node if single append, or null if an array was passed
+ */
+ appendChild : function(node){
+ var multi = false;
+ if(Ext.isArray(node)){
+ multi = node;
+ }else if(arguments.length > 1){
+ multi = arguments;
+ }
+ // if passed an array or multiple args do them one by one
+ if(multi){
+ for(var i = 0, len = multi.length; i < len; i++) {
+ this.appendChild(multi[i]);
+ }
+ }else{
+ if(this.fireEvent("beforeappend", this.ownerTree, this, node) === false){
+ return false;
+ }
+ var index = this.childNodes.length;
+ var oldParent = node.parentNode;
+ // it's a move, make sure we move it cleanly
+ if(oldParent){
+ if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index) === false){
+ return false;
+ }
+ oldParent.removeChild(node);
+ }
+ index = this.childNodes.length;
+ if(index === 0){
+ this.setFirstChild(node);
+ }
+ this.childNodes.push(node);
+ node.parentNode = this;
+ var ps = this.childNodes[index-1];
+ if(ps){
+ node.previousSibling = ps;
+ ps.nextSibling = node;
+ }else{
+ node.previousSibling = null;
+ }
+ node.nextSibling = null;
+ this.setLastChild(node);
+ node.setOwnerTree(this.getOwnerTree());
+ this.fireEvent("append", this.ownerTree, this, node, index);
+ if(oldParent){
+ node.fireEvent("move", this.ownerTree, node, oldParent, this, index);
+ }
+ return node;
+ }
+ },
+
+ /**
+ * Removes a child node from this node.
+ * @param {Node} node The node to remove
+ * @param {Boolean} destroy <tt>true</tt> to destroy the node upon removal. Defaults to <tt>false</tt>.
+ * @return {Node} The removed node
+ */
+ removeChild : function(node, destroy){
+ var index = this.childNodes.indexOf(node);
+ if(index == -1){
+ return false;
+ }
+ if(this.fireEvent("beforeremove", this.ownerTree, this, node) === false){
+ return false;
+ }
+
+ // remove it from childNodes collection
+ this.childNodes.splice(index, 1);
+
+ // update siblings
+ if(node.previousSibling){
+ node.previousSibling.nextSibling = node.nextSibling;
+ }
+ if(node.nextSibling){
+ node.nextSibling.previousSibling = node.previousSibling;
+ }
+
+ // update child refs
+ if(this.firstChild == node){
+ this.setFirstChild(node.nextSibling);
+ }
+ if(this.lastChild == node){
+ this.setLastChild(node.previousSibling);
+ }
+
+ this.fireEvent("remove", this.ownerTree, this, node);
+ if(destroy){
+ node.destroy(true);
+ }else{
+ node.clear();
+ }
+ return node;
+ },
+
+ // private
+ clear : function(destroy){
+ // clear any references from the node
+ this.setOwnerTree(null, destroy);
+ this.parentNode = this.previousSibling = this.nextSibling = null;
+ if(destroy){
+ this.firstChild = this.lastChild = null;
+ }
+ },
+
+ /**
+ * Destroys the node.
+ */
+ destroy : function(/* private */ silent){
+ /*
+ * Silent is to be used in a number of cases
+ * 1) When setRootNode is called.
+ * 2) When destroy on the tree is called
+ * 3) For destroying child nodes on a node
+ */
+ if(silent === true){
+ this.purgeListeners();
+ this.clear(true);
+ Ext.each(this.childNodes, function(n){
+ n.destroy(true);
+ });
+ this.childNodes = null;
+ }else{
+ this.remove(true);
+ }
+ },
+
+ /**
+ * Inserts the first node before the second node in this nodes childNodes collection.
+ * @param {Node} node The node to insert
+ * @param {Node} refNode The node to insert before (if null the node is appended)
+ * @return {Node} The inserted node
+ */
+ insertBefore : function(node, refNode){
+ if(!refNode){ // like standard Dom, refNode can be null for append
+ return this.appendChild(node);
+ }
+ // nothing to do
+ if(node == refNode){
+ return false;
+ }
+
+ if(this.fireEvent("beforeinsert", this.ownerTree, this, node, refNode) === false){
+ return false;
+ }
+ var index = this.childNodes.indexOf(refNode);
+ var oldParent = node.parentNode;
+ var refIndex = index;
+
+ // when moving internally, indexes will change after remove
+ if(oldParent == this && this.childNodes.indexOf(node) < index){
+ refIndex--;
+ }
+
+ // it's a move, make sure we move it cleanly
+ if(oldParent){
+ if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index, refNode) === false){
+ return false;
+ }
+ oldParent.removeChild(node);
+ }
+ if(refIndex === 0){
+ this.setFirstChild(node);
+ }
+ this.childNodes.splice(refIndex, 0, node);
+ node.parentNode = this;
+ var ps = this.childNodes[refIndex-1];
+ if(ps){
+ node.previousSibling = ps;
+ ps.nextSibling = node;
+ }else{
+ node.previousSibling = null;
+ }
+ node.nextSibling = refNode;
+ refNode.previousSibling = node;
+ node.setOwnerTree(this.getOwnerTree());
+ this.fireEvent("insert", this.ownerTree, this, node, refNode);
+ if(oldParent){
+ node.fireEvent("move", this.ownerTree, node, oldParent, this, refIndex, refNode);
+ }
+ return node;
+ },
+
+ /**
+ * Removes this node from its parent
+ * @param {Boolean} destroy <tt>true</tt> to destroy the node upon removal. Defaults to <tt>false</tt>.
+ * @return {Node} this
+ */
+ remove : function(destroy){
+ if (this.parentNode) {
+ this.parentNode.removeChild(this, destroy);
+ }
+ return this;
+ },
+
+ /**
+ * Removes all child nodes from this node.
+ * @param {Boolean} destroy <tt>true</tt> to destroy the node upon removal. Defaults to <tt>false</tt>.
+ * @return {Node} this
+ */
+ removeAll : function(destroy){
+ var cn = this.childNodes,
+ n;
+ while((n = cn[0])){
+ this.removeChild(n, destroy);
+ }
+ return this;
+ },
+
+ /**
+ * Returns the child node at the specified index.
+ * @param {Number} index
+ * @return {Node}
+ */
+ item : function(index){
+ return this.childNodes[index];
+ },
+
+ /**
+ * Replaces one child node in this node with another.
+ * @param {Node} newChild The replacement node
+ * @param {Node} oldChild The node to replace
+ * @return {Node} The replaced node
+ */
+ replaceChild : function(newChild, oldChild){
+ var s = oldChild ? oldChild.nextSibling : null;
+ this.removeChild(oldChild);
+ this.insertBefore(newChild, s);
+ return oldChild;
+ },
+
+ /**
+ * Returns the index of a child node
+ * @param {Node} node
+ * @return {Number} The index of the node or -1 if it was not found
+ */
+ indexOf : function(child){
+ return this.childNodes.indexOf(child);
+ },
+
+ /**
+ * Returns the tree this node is in.
+ * @return {Tree}
+ */
+ getOwnerTree : function(){
+ // if it doesn't have one, look for one
+ if(!this.ownerTree){
+ var p = this;
+ while(p){
+ if(p.ownerTree){
+ this.ownerTree = p.ownerTree;
+ break;
+ }
+ p = p.parentNode;
+ }
+ }
+ return this.ownerTree;
+ },
+
+ /**
+ * Returns depth of this node (the root node has a depth of 0)
+ * @return {Number}
+ */
+ getDepth : function(){
+ var depth = 0;
+ var p = this;
+ while(p.parentNode){
+ ++depth;
+ p = p.parentNode;
+ }
+ return depth;
+ },
+
+ // private
+ setOwnerTree : function(tree, destroy){
+ // if it is a move, we need to update everyone
+ if(tree != this.ownerTree){
+ if(this.ownerTree){
+ this.ownerTree.unregisterNode(this);
+ }
+ this.ownerTree = tree;
+ // If we're destroying, we don't need to recurse since it will be called on each child node
+ if(destroy !== true){
+ Ext.each(this.childNodes, function(n){
+ n.setOwnerTree(tree);
+ });
+ }
+ if(tree){
+ tree.registerNode(this);
+ }
+ }
+ },
+
+ /**
+ * Changes the id of this node.
+ * @param {String} id The new id for the node.
+ */
+ setId: function(id){
+ if(id !== this.id){
+ var t = this.ownerTree;
+ if(t){
+ t.unregisterNode(this);
+ }
+ this.id = this.attributes.id = id;
+ if(t){
+ t.registerNode(this);
+ }
+ this.onIdChange(id);
+ }
+ },
+
+ // private
+ onIdChange: Ext.emptyFn,
+
+ /**
+ * Returns the path for this node. The path can be used to expand or select this node programmatically.
+ * @param {String} attr (optional) The attr to use for the path (defaults to the node's id)
+ * @return {String} The path
+ */
+ getPath : function(attr){
+ attr = attr || "id";
+ var p = this.parentNode;
+ var b = [this.attributes[attr]];
+ while(p){
+ b.unshift(p.attributes[attr]);
+ p = p.parentNode;
+ }
+ var sep = this.getOwnerTree().pathSeparator;
+ return sep + b.join(sep);
+ },
+
+ /**
+ * Bubbles up the tree from this node, calling the specified function with each node. The arguments to the function
+ * will be the args provided or the current node. If the function returns false at any point,
+ * the bubble is stopped.
+ * @param {Function} fn The function to call
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the current Node.
+ * @param {Array} args (optional) The args to call the function with (default to passing the current Node)
+ */
+ bubble : function(fn, scope, args){
+ var p = this;
+ while(p){
+ if(fn.apply(scope || p, args || [p]) === false){
+ break;
+ }
+ p = p.parentNode;
+ }
+ },
+
+ /**
+ * Cascades down the tree from this node, calling the specified function with each node. The arguments to the function
+ * will be the args provided or the current node. If the function returns false at any point,
+ * the cascade is stopped on that branch.
+ * @param {Function} fn The function to call
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the current Node.
+ * @param {Array} args (optional) The args to call the function with (default to passing the current Node)
+ */
+ cascade : function(fn, scope, args){
+ if(fn.apply(scope || this, args || [this]) !== false){
+ var cs = this.childNodes;
+ for(var i = 0, len = cs.length; i < len; i++) {
+ cs[i].cascade(fn, scope, args);
+ }
+ }
+ },
+
+ /**
+ * Interates the child nodes of this node, calling the specified function with each node. The arguments to the function
+ * will be the args provided or the current node. If the function returns false at any point,
+ * the iteration stops.
+ * @param {Function} fn The function to call
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the current Node in the iteration.
+ * @param {Array} args (optional) The args to call the function with (default to passing the current Node)
+ */
+ eachChild : function(fn, scope, args){
+ var cs = this.childNodes;
+ for(var i = 0, len = cs.length; i < len; i++) {
+ if(fn.apply(scope || this, args || [cs[i]]) === false){
+ break;
+ }
+ }
+ },
+
+ /**
+ * Finds the first child that has the attribute with the specified value.
+ * @param {String} attribute The attribute name
+ * @param {Mixed} value The value to search for
+ * @param {Boolean} deep (Optional) True to search through nodes deeper than the immediate children
+ * @return {Node} The found child or null if none was found
+ */
+ findChild : function(attribute, value, deep){
+ return this.findChildBy(function(){
+ return this.attributes[attribute] == value;
+ }, null, deep);
+ },
+
+ /**
+ * Finds the first child by a custom function. The child matches if the function passed returns <code>true</code>.
+ * @param {Function} fn A function which must return <code>true</code> if the passed Node is the required Node.
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the Node being tested.
+ * @param {Boolean} deep (Optional) True to search through nodes deeper than the immediate children
+ * @return {Node} The found child or null if none was found
+ */
+ findChildBy : function(fn, scope, deep){
+ var cs = this.childNodes,
+ len = cs.length,
+ i = 0,
+ n,
+ res;
+ for(; i < len; i++){
+ n = cs[i];
+ if(fn.call(scope || n, n) === true){
+ return n;
+ }else if (deep){
+ res = n.findChildBy(fn, scope, deep);
+ if(res != null){
+ return res;
+ }
+ }
+
+ }
+ return null;
+ },
+
+ /**
+ * Sorts this nodes children using the supplied sort function.
+ * @param {Function} fn A function which, when passed two Nodes, returns -1, 0 or 1 depending upon required sort order.
+ * @param {Object} scope (optional)The scope (<code>this</code> reference) in which the function is executed. Defaults to the browser window.
+ */
+ sort : function(fn, scope){
+ var cs = this.childNodes;
+ var len = cs.length;
+ if(len > 0){
+ var sortFn = scope ? function(){fn.apply(scope, arguments);} : fn;
+ cs.sort(sortFn);
+ for(var i = 0; i < len; i++){
+ var n = cs[i];
+ n.previousSibling = cs[i-1];
+ n.nextSibling = cs[i+1];
+ if(i === 0){
+ this.setFirstChild(n);
+ }
+ if(i == len-1){
+ this.setLastChild(n);
+ }
+ }
+ }
+ },
+
+ /**
+ * Returns true if this node is an ancestor (at any point) of the passed node.
+ * @param {Node} node
+ * @return {Boolean}
+ */
+ contains : function(node){
+ return node.isAncestor(this);
+ },
+
+ /**
+ * Returns true if the passed node is an ancestor (at any point) of this node.
+ * @param {Node} node
+ * @return {Boolean}
+ */
+ isAncestor : function(node){
+ var p = this.parentNode;
+ while(p){
+ if(p == node){
+ return true;
+ }
+ p = p.parentNode;
+ }
+ return false;
+ },
+
+ toString : function(){
+ return "[Node"+(this.id?" "+this.id:"")+"]";
+ }
+});/**
+ * @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){
+ 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){
+ // 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){
+ 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);
+ },
+
+ /**
+ * 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();
+ }
+ },
- var uiClass = this.attributes.uiProvider || this.defaultUI || Ext.tree.TreeNodeUI;
+ //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;/**
+ * @class Ext.tree.AsyncTreeNode
+ * @extends Ext.tree.TreeNode
+ * @cfg {TreeLoader} loader A TreeLoader to be used by this node (defaults to the loader defined on the tree)
+ * @constructor
+ * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
+ */
+ Ext.tree.AsyncTreeNode = function(config){
+ this.loaded = config && config.loaded === true;
+ this.loading = false;
+ Ext.tree.AsyncTreeNode.superclass.constructor.apply(this, arguments);
/**
- * Read-only. The UI for this node
- * @type TreeNodeUI
+ * @event beforeload
+ * Fires before this node is loaded, return false to cancel
+ * @param {Node} this This node
+ */
+ this.addEvents('beforeload', 'load');
+ /**
+ * @event load
+ * Fires when this node is loaded
+ * @param {Node} this This node
+ */
+ /**
+ * The loader used by this node (defaults to using the tree's defined loader)
+ * @type TreeLoader
+ * @property loader
*/
- this.ui = new uiClass(this);
};
-Ext.extend(Ext.tree.TreeNode, Ext.data.Node, {
- preventHScroll : true,
+Ext.extend(Ext.tree.AsyncTreeNode, Ext.tree.TreeNode, {
+ expand : function(deep, anim, callback, scope){
+ if(this.loading){ // if an async load is already running, waiting til it's done
+ var timer;
+ var f = function(){
+ if(!this.loading){ // done loading
+ clearInterval(timer);
+ this.expand(deep, anim, callback, scope);
+ }
+ }.createDelegate(this);
+ timer = setInterval(f, 200);
+ return;
+ }
+ if(!this.loaded){
+ if(this.fireEvent("beforeload", this) === false){
+ return;
+ }
+ this.loading = true;
+ this.ui.beforeLoad(this);
+ var loader = this.loader || this.attributes.loader || this.getOwnerTree().getLoader();
+ if(loader){
+ loader.load(this, this.loadComplete.createDelegate(this, [deep, anim, callback, scope]), this);
+ return;
+ }
+ }
+ Ext.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback, scope);
+ },
+
/**
- * Returns true if this node is expanded
+ * Returns true if this node is currently loading
* @return {Boolean}
*/
- isExpanded : function(){
- return this.expanded;
+ isLoading : function(){
+ return this.loading;
+ },
+
+ loadComplete : function(deep, anim, callback, scope){
+ this.loading = false;
+ this.loaded = true;
+ this.ui.afterLoad(this);
+ this.fireEvent("load", this);
+ this.expand(deep, anim, callback, scope);
+ },
+
+ /**
+ * Returns true if this node has been loaded
+ * @return {Boolean}
+ */
+ isLoaded : function(){
+ return this.loaded;
+ },
+
+ hasChildNodes : function(){
+ if(!this.isLeaf() && !this.loaded){
+ return true;
+ }else{
+ return Ext.tree.AsyncTreeNode.superclass.hasChildNodes.call(this);
+ }
},
-/**
- * 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}
+ /**
+ * Trigger a reload for this node
+ * @param {Function} callback
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the callback is executed. Defaults to this Node.
+ */
+ reload : function(callback, scope){
+ this.collapse(false, false);
+ while(this.firstChild){
+ this.removeChild(this.firstChild).destroy();
+ }
+ this.childrenRendered = false;
+ this.loaded = false;
+ if(this.isHiddenRoot()){
+ this.expanded = false;
+ }
+ this.expand(false, false, callback, scope);
+ }
+});
+
+Ext.tree.TreePanel.nodeTypes.async = Ext.tree.AsyncTreeNode;/**
+ * @class Ext.tree.TreeNodeUI
+ * This class provides the default UI implementation for Ext TreeNodes.
+ * The TreeNode UI implementation is separate from the
+ * tree implementation, and allows customizing of the appearance of
+ * tree nodes.<br>
+ * <p>
+ * If you are customizing the Tree's user interface, you
+ * may need to extend this class, but you should never need to instantiate this class.<br>
+ * <p>
+ * This class provides access to the user interface components of an Ext TreeNode, through
+ * {@link Ext.tree.TreeNode#getUI}
*/
- getUI : function(){
- return this.ui;
+Ext.tree.TreeNodeUI = function(node){
+ this.node = node;
+ this.rendered = false;
+ this.animating = false;
+ this.wasLeaf = true;
+ this.ecc = 'x-tree-ec-icon x-tree-elbow';
+ this.emptyIcon = Ext.BLANK_IMAGE_URL;
+};
+
+Ext.tree.TreeNodeUI.prototype = {
+ // private
+ removeChild : function(node){
+ if(this.rendered){
+ this.ctNode.removeChild(node.ui.getEl());
+ }
},
- getLoader : function(){
- var owner;
- return this.loader || ((owner = this.getOwnerTree()) && owner.loader ? owner.loader : (this.loader = new Ext.tree.TreeLoader()));
+ // private
+ beforeLoad : function(){
+ this.addClass("x-tree-node-loading");
},
- // 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);
+ // private
+ afterLoad : function(){
+ this.removeClass("x-tree-node-loading");
+ },
+
+ // private
+ onTextChange : function(node, text, oldText){
+ if(this.rendered){
+ this.textNode.innerHTML = text;
+ }
+ },
+
+ // private
+ onDisableChange : function(node, state){
+ this.disabled = state;
+ if (this.checkbox) {
+ this.checkbox.disabled = state;
+ }
+ if(state){
+ this.addClass("x-tree-node-disabled");
+ }else{
+ this.removeClass("x-tree-node-disabled");
+ }
+ },
+
+ // private
+ onSelectedChange : function(state){
+ if(state){
+ this.focus();
+ this.addClass("x-tree-selected");
+ }else{
+ //this.blur();
+ this.removeClass("x-tree-selected");
}
+ },
+
+ // private
+ onMove : function(tree, node, oldParent, newParent, index, refNode){
+ this.childIndent = null;
if(this.rendered){
- this.renderIndent(true, true);
+ var targetNode = newParent.ui.getContainer();
+ if(!targetNode){//target not rendered
+ this.holder = document.createElement("div");
+ this.holder.appendChild(this.wrap);
+ return;
+ }
+ var insertBefore = refNode ? refNode.ui.getEl() : null;
+ if(insertBefore){
+ targetNode.insertBefore(this.wrap, insertBefore);
+ }else{
+ targetNode.appendChild(this.wrap);
+ }
+ this.node.renderIndent(true, oldParent != newParent);
}
},
- // 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);
+/**
+ * Adds one or more CSS classes to the node's UI element.
+ * Duplicate classes are automatically filtered out.
+ * @param {String/Array} className The CSS class to add, or an array of classes
+ */
+ addClass : function(cls){
+ if(this.elNode){
+ Ext.fly(this.elNode).addClass(cls);
+ }
+ },
+
+/**
+ * Removes one or more CSS classes from the node's UI element.
+ * @param {String/Array} className The CSS class to remove, or an array of classes
+ */
+ removeClass : function(cls){
+ if(this.elNode){
+ Ext.fly(this.elNode).removeClass(cls);
}
+ },
+
+ // private
+ remove : function(){
if(this.rendered){
- this.renderIndent(true, true);
+ this.holder = document.createElement("div");
+ this.holder.appendChild(this.wrap);
}
},
- // 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);
+ // private
+ fireEvent : function(){
+ return this.node.fireEvent.apply(this.node, arguments);
+ },
+
+ // private
+ initEvents : function(){
+ this.node.on("move", this.onMove, this);
+
+ if(this.node.disabled){
+ this.onDisableChange(this.node, true);
+ }
+ if(this.node.hidden){
+ this.hide();
+ }
+ var ot = this.node.getOwnerTree();
+ var dd = ot.enableDD || ot.enableDrag || ot.enableDrop;
+ if(dd && (!this.node.isRoot || ot.rootVisible)){
+ Ext.dd.Registry.register(this.elNode, {
+ node: this.node,
+ handles: this.getDDHandles(),
+ isHandle: false
+ });
+ }
+ },
+
+ // private
+ getDDHandles : function(){
+ return [this.iconNode, this.textNode, this.elNode];
+ },
+
+/**
+ * Hides this node.
+ */
+ hide : function(){
+ this.node.hidden = true;
+ if(this.wrap){
+ this.wrap.style.display = "none";
+ }
+ },
+
+/**
+ * Shows this node.
+ */
+ show : function(){
+ this.node.hidden = false;
+ if(this.wrap){
+ this.wrap.style.display = "";
+ }
+ },
+
+ // private
+ onContextMenu : function(e){
+ if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {
+ e.preventDefault();
+ this.focus();
+ this.fireEvent("contextmenu", this.node, e);
+ }
+ },
+
+ // private
+ onClick : function(e){
+ if(this.dropping){
+ e.stopEvent();
+ return;
+ }
+ if(this.fireEvent("beforeclick", this.node, e) !== false){
+ var a = e.getTarget('a');
+ if(!this.disabled && this.node.attributes.href && a){
+ this.fireEvent("click", this.node, e);
+ return;
+ }else if(a && e.ctrlKey){
+ e.stopEvent();
+ }
+ e.preventDefault();
+ if(this.disabled){
+ return;
+ }
+
+ if(this.node.attributes.singleClickExpand && !this.animating && this.node.isExpandable()){
+ this.node.toggle();
+ }
+
+ this.fireEvent("click", this.node, e);
}else{
- exists = !n.parentNode;
+ e.stopEvent();
+ }
+ },
+
+ // private
+ onDblClick : function(e){
+ e.preventDefault();
+ if(this.disabled){
+ return;
}
- node = Ext.tree.TreeNode.superclass.appendChild.call(this, n);
- if(node){
- this.afterAdd(node, exists);
+ if(this.fireEvent("beforedblclick", this.node, e) !== false){
+ if(this.checkbox){
+ this.toggleCheck();
+ }
+ if(!this.animating && this.node.isExpandable()){
+ this.node.toggle();
+ }
+ this.fireEvent("dblclick", this.node, e);
}
- 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();
+ onOver : function(e){
+ this.addClass('x-tree-node-over');
+ },
+
+ onOut : function(e){
+ this.removeClass('x-tree-node-over');
+ },
+
+ // private
+ onCheckChange : function(){
+ var checked = this.checkbox.checked;
+ // fix for IE6
+ this.checkbox.defaultChecked = checked;
+ this.node.attributes.checked = checked;
+ this.fireEvent('checkchange', this.node, checked);
+ },
+
+ // private
+ ecClick : function(e){
+ if(!this.animating && this.node.isExpandable()){
+ this.node.toggle();
}
- if(this.childNodes.length < 1){
- this.collapse(false, false);
+ },
+
+ // private
+ startDrop : function(){
+ this.dropping = true;
+ },
+
+ // delayed drop so the click event doesn't get fired on a drop
+ endDrop : function(){
+ setTimeout(function(){
+ this.dropping = false;
+ }.createDelegate(this), 50);
+ },
+
+ // private
+ expand : function(){
+ this.updateExpandIcon();
+ this.ctNode.style.display = "";
+ },
+
+ // private
+ focus : function(){
+ if(!this.node.preventHScroll){
+ try{this.anchor.focus();
+ }catch(e){}
}else{
- this.ui.updateExpandIcon();
+ try{
+ var noscroll = this.node.getOwnerTree().getTreeEl().dom;
+ var l = noscroll.scrollLeft;
+ this.anchor.focus();
+ noscroll.scrollLeft = l;
+ }catch(e){}
}
- if(!this.firstChild && !this.isHiddenRoot()) {
- this.childrenRendered = false;
+ },
+
+/**
+ * Sets the checked status of the tree node to the passed value, or, if no value was passed,
+ * toggles the checked status. If the node was rendered with no checkbox, this has no effect.
+ * @param {Boolean} value (optional) The new checked status.
+ */
+ toggleCheck : function(value){
+ var cb = this.checkbox;
+ if(cb){
+ cb.checked = (value === undefined ? !cb.checked : value);
+ this.onCheckChange();
}
- 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);
+ // private
+ blur : function(){
+ try{
+ this.anchor.blur();
+ }catch(e){}
+ },
+
+ // private
+ animExpand : function(callback){
+ var ct = Ext.get(this.ctNode);
+ ct.stopFx();
+ if(!this.node.isExpandable()){
+ this.updateExpandIcon();
+ this.ctNode.style.display = "";
+ Ext.callback(callback);
+ return;
}
- newNode = Ext.tree.TreeNode.superclass.insertBefore.call(this, node, refNode);
- if(newNode && refNode){
- this.afterAdd(newNode, exists);
+ this.animating = true;
+ this.updateExpandIcon();
+
+ ct.slideIn('t', {
+ callback : function(){
+ this.animating = false;
+ Ext.callback(callback);
+ },
+ scope: this,
+ duration: this.node.ownerTree.duration || .25
+ });
+ },
+
+ // private
+ highlight : function(){
+ var tree = this.node.getOwnerTree();
+ Ext.fly(this.wrap).highlight(
+ tree.hlColor || "C3DAF9",
+ {endColor: tree.hlBaseColor}
+ );
+ },
+
+ // private
+ collapse : function(){
+ this.updateExpandIcon();
+ this.ctNode.style.display = "none";
+ },
+
+ // private
+ animCollapse : function(callback){
+ var ct = Ext.get(this.ctNode);
+ ct.enableDisplayMode('block');
+ ct.stopFx();
+
+ this.animating = true;
+ this.updateExpandIcon();
+
+ ct.slideOut('t', {
+ callback : function(){
+ this.animating = false;
+ Ext.callback(callback);
+ },
+ scope: this,
+ duration: this.node.ownerTree.duration || .25
+ });
+ },
+
+ // private
+ getContainer : function(){
+ return this.ctNode;
+ },
+
+/**
+ * Returns the element which encapsulates this node.
+ * @return {HtmlElement} The DOM element. The default implementation uses a <code><li></code>.
+ */
+ getEl : function(){
+ return this.wrap;
+ },
+
+ // private
+ appendDDGhost : function(ghostNode){
+ ghostNode.appendChild(this.elNode.cloneNode(true));
+ },
+
+ // private
+ getDDRepairXY : function(){
+ return Ext.lib.Dom.getXY(this.iconNode);
+ },
+
+ // private
+ onRender : function(){
+ this.render();
+ },
+
+ // private
+ render : function(bulkRender){
+ var n = this.node, a = n.attributes;
+ var targetNode = n.parentNode ?
+ n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;
+
+ if(!this.rendered){
+ this.rendered = true;
+
+ this.renderElements(n, a, targetNode, bulkRender);
+
+ if(a.qtip){
+ if(this.textNode.setAttributeNS){
+ this.textNode.setAttributeNS("ext", "qtip", a.qtip);
+ if(a.qtipTitle){
+ this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);
+ }
+ }else{
+ this.textNode.setAttribute("ext:qtip", a.qtip);
+ if(a.qtipTitle){
+ this.textNode.setAttribute("ext:qtitle", a.qtipTitle);
+ }
+ }
+ }else if(a.qtipCfg){
+ a.qtipCfg.target = Ext.id(this.textNode);
+ Ext.QuickTips.register(a.qtipCfg);
+ }
+ this.initEvents();
+ if(!this.node.expanded){
+ this.updateExpandIcon(true);
+ }
+ }else{
+ if(bulkRender === true) {
+ targetNode.appendChild(this.wrap);
+ }
}
- 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);
+ renderElements : function(n, a, targetNode, bulkRender){
+ // add some indent caching, this helps performance when rendering a large tree
+ this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
+
+ var cb = Ext.isBoolean(a.checked),
+ nel,
+ href = a.href ? a.href : Ext.isGecko ? "" : "#",
+ buf = ['<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on">',
+ '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
+ '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
+ '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
+ cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
+ '<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',
+ a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',n.text,"</span></a></div>",
+ '<ul class="x-tree-node-ct" style="display:none;"></ul>',
+ "</li>"].join('');
+
+ if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){
+ this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
+ }else{
+ this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
}
- },
- /**
- * 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.elNode = this.wrap.childNodes[0];
+ this.ctNode = this.wrap.childNodes[1];
+ var cs = this.elNode.childNodes;
+ this.indentNode = cs[0];
+ this.ecNode = cs[1];
+ this.iconNode = cs[2];
+ var index = 3;
+ if(cb){
+ this.checkbox = cs[3];
+ // fix for IE6
+ this.checkbox.defaultChecked = this.checkbox.checked;
+ index++;
}
- this.fireEvent('textchange', this, text, oldText);
+ this.anchor = cs[index];
+ this.textNode = cs[index].firstChild;
},
- /**
- * Triggers selection of this node
- */
- select : function(){
- var t = this.getOwnerTree();
- if(t){
- t.getSelectionModel().select(this);
- }
+/**
+ * Returns the <a> element that provides focus for the node's UI.
+ * @return {HtmlElement} The DOM anchor element.
+ */
+ getAnchor : function(){
+ return this.anchor;
},
- /**
- * 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 the text node.
+ * @return {HtmlNode} The DOM text node.
+ */
+ getTextEl : function(){
+ return this.textNode;
},
- /**
- * Returns true if this node is selected
- * @return {Boolean}
- */
- isSelected : function(){
- var t = this.getOwnerTree();
- return t ? t.getSelectionModel().isSelected(this) : false;
+/**
+ * Returns the icon <img> element.
+ * @return {HtmlElement} The DOM image element.
+ */
+ getIconEl : function(){
+ return this.iconNode;
},
- /**
- * 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;
+/**
+ * Returns the checked status of the node. If the node was rendered with no
+ * checkbox, it returns false.
+ * @return {Boolean} The checked flag.
+ */
+ isChecked : function(){
+ return this.checkbox ? this.checkbox.checked : false;
+ },
+
+ // private
+ updateExpandIcon : function(){
+ if(this.rendered){
+ var n = this.node,
+ c1,
+ c2,
+ cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow",
+ hasChild = n.hasChildNodes();
+ if(hasChild || n.attributes.expandable){
+ if(n.expanded){
+ cls += "-minus";
+ c1 = "x-tree-node-collapsed";
+ c2 = "x-tree-node-expanded";
+ }else{
+ cls += "-plus";
+ c1 = "x-tree-node-expanded";
+ c2 = "x-tree-node-collapsed";
+ }
+ if(this.wasLeaf){
+ this.removeClass("x-tree-node-leaf");
+ this.wasLeaf = false;
+ }
+ if(this.c1 != c1 || this.c2 != c2){
+ Ext.fly(this.elNode).replaceClass(c1, c2);
+ this.c1 = c1; this.c2 = c2;
+ }
}else{
- this.ui.expand();
- this.fireEvent('expand', this);
- this.runCallback(callback, scope || this, [this]);
+ if(!this.wasLeaf){
+ Ext.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-collapsed");
+ delete this.c1;
+ delete this.c2;
+ this.wasLeaf = true;
+ }
+ }
+ var ecc = "x-tree-ec-icon "+cls;
+ if(this.ecc != ecc){
+ this.ecNode.className = ecc;
+ this.ecc = ecc;
}
- }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);
+ // private
+ onIdChange: function(id){
+ if(this.rendered){
+ this.elNode.setAttribute('ext:tree-node-id', id);
}
},
- 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);
+ // private
+ getChildIndent : function(){
+ if(!this.childIndent){
+ var buf = [],
+ p = this.node;
+ while(p){
+ if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){
+ if(!p.isLast()) {
+ buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-elbow-line" />');
+ } else {
+ buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-icon" />');
}
- }.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);
+ }
+ p = p.parentNode;
}
+ this.childIndent = buf.join("");
}
+ return this.childIndent;
},
// private
- delayedExpand : function(delay){
- if(!this.expandProcId){
- this.expandProcId = this.expand.defer(delay, this);
+ renderIndent : function(){
+ if(this.rendered){
+ var indent = "",
+ p = this.node.parentNode;
+ if(p){
+ indent = p.ui.getChildIndent();
+ }
+ if(this.indentMarkup != indent){ // don't rerender if not required
+ this.indentNode.innerHTML = indent;
+ this.indentMarkup = indent;
+ }
+ this.updateExpandIcon();
}
},
+ destroy : function(){
+ if(this.elNode){
+ Ext.dd.Registry.unregister(this.elNode.id);
+ }
+
+ Ext.each(['textnode', 'anchor', 'checkbox', 'indentNode', 'ecNode', 'iconNode', 'elNode', 'ctNode', 'wrap', 'holder'], function(el){
+ if(this[el]){
+ Ext.fly(this[el]).remove();
+ delete this[el];
+ }
+ }, this);
+ delete this.node;
+ }
+};
+
+/**
+ * @class Ext.tree.RootTreeNodeUI
+ * This class provides the default UI implementation for <b>root</b> Ext TreeNodes.
+ * The RootTreeNode UI implementation allows customizing the appearance of the root tree node.<br>
+ * <p>
+ * If you are customizing the Tree's user interface, you
+ * may need to extend this class, but you should never need to instantiate this class.<br>
+ */
+Ext.tree.RootTreeNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
// private
- cancelExpand : function(){
- if(this.expandProcId){
- clearTimeout(this.expandProcId);
+ render : function(){
+ if(!this.rendered){
+ var targetNode = this.node.ownerTree.innerCt.dom;
+ this.node.expanded = true;
+ targetNode.innerHTML = '<div class="x-tree-root-node"></div>';
+ this.wrap = this.ctNode = targetNode.firstChild;
}
- this.expandProcId = false;
},
+ collapse : Ext.emptyFn,
+ expand : Ext.emptyFn
+});/**
+ * @class Ext.tree.TreeLoader
+ * @extends Ext.util.Observable
+ * A TreeLoader provides for lazy loading of an {@link Ext.tree.TreeNode}'s child
+ * nodes from a specified URL. The response must be a JavaScript Array definition
+ * whose elements are node definition objects. e.g.:
+ * <pre><code>
+ [{
+ id: 1,
+ text: 'A leaf Node',
+ leaf: true
+ },{
+ id: 2,
+ text: 'A folder Node',
+ children: [{
+ id: 3,
+ text: 'A child Node',
+ leaf: true
+ }]
+ }]
+</code></pre>
+ * <br><br>
+ * A server request is sent, and child nodes are loaded only when a node is expanded.
+ * The loading node's id is passed to the server under the parameter name "node" to
+ * enable the server to produce the correct child nodes.
+ * <br><br>
+ * To pass extra parameters, an event handler may be attached to the "beforeload"
+ * event, and the parameters specified in the TreeLoader's baseParams property:
+ * <pre><code>
+ myTreeLoader.on("beforeload", function(treeLoader, node) {
+ this.baseParams.category = node.attributes.category;
+ }, this);
+</code></pre>
+ * This would pass an HTTP parameter called "category" to the server containing
+ * the value of the Node's "category" attribute.
+ * @constructor
+ * Creates a new Treeloader.
+ * @param {Object} config A config object containing config properties.
+ */
+Ext.tree.TreeLoader = function(config){
+ this.baseParams = {};
+ Ext.apply(this, config);
+
+ this.addEvents(
+ /**
+ * @event beforeload
+ * Fires before a network request is made to retrieve the Json text which specifies a node's children.
+ * @param {Object} This TreeLoader object.
+ * @param {Object} node The {@link Ext.tree.TreeNode} object being loaded.
+ * @param {Object} callback The callback function specified in the {@link #load} call.
+ */
+ "beforeload",
+ /**
+ * @event load
+ * Fires when the node has been successfuly loaded.
+ * @param {Object} This TreeLoader object.
+ * @param {Object} node The {@link Ext.tree.TreeNode} object being loaded.
+ * @param {Object} response The response object containing the data from the server.
+ */
+ "load",
+ /**
+ * @event loadexception
+ * Fires if the network request failed.
+ * @param {Object} This TreeLoader object.
+ * @param {Object} node The {@link Ext.tree.TreeNode} object being loaded.
+ * @param {Object} response The response object containing the data from the server.
+ */
+ "loadexception"
+ );
+ Ext.tree.TreeLoader.superclass.constructor.call(this);
+ if(Ext.isString(this.paramOrder)){
+ this.paramOrder = this.paramOrder.split(/[\s,|]/);
+ }
+};
+Ext.extend(Ext.tree.TreeLoader, Ext.util.Observable, {
/**
- * Toggles expanded/collapsed state of the node
+ * @cfg {String} dataUrl The URL from which to request a Json string which
+ * specifies an array of node definition objects representing the child nodes
+ * to be loaded.
+ */
+ /**
+ * @cfg {String} requestMethod The HTTP request method for loading data (defaults to the value of {@link Ext.Ajax#method}).
*/
- toggle : function(){
- if(this.expanded){
- this.collapse();
- }else{
- this.expand();
- }
- },
+ /**
+ * @cfg {String} url Equivalent to {@link #dataUrl}.
+ */
+ /**
+ * @cfg {Boolean} preloadChildren If set to true, the loader recursively loads "children" attributes when doing the first load on nodes.
+ */
+ /**
+ * @cfg {Object} baseParams (optional) An object containing properties which
+ * specify HTTP parameters to be passed to each request for child nodes.
+ */
+ /**
+ * @cfg {Object} baseAttrs (optional) An object containing attributes to be added to all nodes
+ * created by this loader. If the attributes sent by the server have an attribute in this object,
+ * they take priority.
+ */
+ /**
+ * @cfg {Object} uiProviders (optional) An object containing properties which
+ * specify custom {@link Ext.tree.TreeNodeUI} implementations. If the optional
+ * <i>uiProvider</i> attribute of a returned child node is a string rather
+ * than a reference to a TreeNodeUI implementation, then that string value
+ * is used as a property name in the uiProviders object.
+ */
+ uiProviders : {},
/**
- * 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.
+ * @cfg {Boolean} clearOnLoad (optional) Default to true. Remove previously existing
+ * child nodes before loading.
+ */
+ clearOnLoad : true,
+
+ /**
+ * @cfg {Array/String} paramOrder Defaults to <tt>undefined</tt>. Only used when using directFn.
+ * Specifies the params in the order in which they must be passed to the server-side Direct method
+ * as either (1) an Array of String values, or (2) a String of params delimited by either whitespace,
+ * comma, or pipe. For example,
+ * any of the following would be acceptable:<pre><code>
+nodeParameter: 'node',
+paramOrder: ['param1','param2','param3']
+paramOrder: 'node param1 param2 param3'
+paramOrder: 'param1,node,param2,param3'
+paramOrder: 'param1|param2|param|node'
+ </code></pre>
*/
- 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));
- },
+ paramOrder: undefined,
/**
- * Expand all child nodes
- * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes
+ * @cfg {Boolean} paramsAsHash Only used when using directFn.
+ * Send parameters as a collection of named arguments (defaults to <tt>false</tt>). Providing a
+ * <tt>{@link #paramOrder}</tt> nullifies this configuration.
*/
- expandChildNodes : function(deep){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++) {
- cs[i].expand(deep);
- }
- },
+ paramsAsHash: false,
/**
- * Collapse all child nodes
- * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
+ * @cfg {String} nodeParameter The name of the parameter sent to the server which contains
+ * the identifier of the node. Defaults to <tt>'node'</tt>.
*/
- collapseChildNodes : function(deep){
- var cs = this.childNodes;
- for(var i = 0, len = cs.length; i < len; i++) {
- cs[i].collapse(deep);
- }
- },
+ nodeParameter: 'node',
/**
- * Disables this node
+ * @cfg {Function} directFn
+ * Function to call when executing a request.
*/
- 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);
- },
+ directFn : undefined,
/**
- * Enables this node
+ * Load an {@link Ext.tree.TreeNode} from the URL specified in the constructor.
+ * This is called automatically when a node is expanded, but may be used to reload
+ * a node (or append new children if the {@link #clearOnLoad} option is false.)
+ * @param {Ext.tree.TreeNode} node
+ * @param {Function} callback Function to call after the node has been loaded. The
+ * function is passed the TreeNode which was requested to be loaded.
+ * @param {Object} scope The scope (<code>this</code> reference) in which the callback is executed.
+ * defaults to the loaded TreeNode.
*/
- enable : function(){
- this.disabled = false;
- if(this.rendered && this.ui.onDisableChange){ // event without subscribing
- this.ui.onDisableChange(this, false);
+ load : function(node, callback, scope){
+ if(this.clearOnLoad){
+ while(node.firstChild){
+ node.removeChild(node.firstChild);
+ }
+ }
+ if(this.doPreload(node)){ // preloaded json children
+ this.runCallback(callback, scope || node, [node]);
+ }else if(this.directFn || this.dataUrl || this.url){
+ this.requestData(node, callback, scope || node);
+ }
+ },
+
+ doPreload : function(node){
+ if(node.attributes.children){
+ if(node.childNodes.length < 1){ // preloaded?
+ var cs = node.attributes.children;
+ node.beginUpdate();
+ for(var i = 0, len = cs.length; i < len; i++){
+ var cn = node.appendChild(this.createNode(cs[i]));
+ if(this.preloadChildren){
+ this.doPreload(cn);
+ }
+ }
+ node.endUpdate();
+ }
+ return true;
+ }
+ return false;
+ },
+
+ getParams: function(node){
+ var bp = Ext.apply({}, this.baseParams),
+ np = this.nodeParameter,
+ po = this.paramOrder;
+
+ np && (bp[ np ] = node.id);
+
+ if(this.directFn){
+ var buf = [node.id];
+ if(po){
+ // reset 'buf' if the nodeParameter was included in paramOrder
+ if(np && po.indexOf(np) > -1){
+ buf = [];
+ }
+
+ for(var i = 0, len = po.length; i < len; i++){
+ buf.push(bp[ po[i] ]);
+ }
+ }else if(this.paramsAsHash){
+ buf = [bp];
+ }
+ return buf;
+ }else{
+ return bp;
+ }
+ },
+
+ requestData : function(node, callback, scope){
+ if(this.fireEvent("beforeload", this, node, callback) !== false){
+ if(this.directFn){
+ var args = this.getParams(node);
+ args.push(this.processDirectResponse.createDelegate(this, [{callback: callback, node: node, scope: scope}], true));
+ this.directFn.apply(window, args);
+ }else{
+ this.transId = Ext.Ajax.request({
+ method:this.requestMethod,
+ url: this.dataUrl||this.url,
+ success: this.handleResponse,
+ failure: this.handleFailure,
+ scope: this,
+ argument: {callback: callback, node: node, scope: scope},
+ params: this.getParams(node)
+ });
+ }
+ }else{
+ // if the load is cancelled, make sure we notify
+ // the node that we are done
+ this.runCallback(callback, scope || node, []);
}
- 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);
+ processDirectResponse: function(result, response, args){
+ if(response.status){
+ this.handleResponse({
+ responseData: Ext.isArray(result) ? result : null,
+ responseText: result,
+ argument: args
+ });
+ }else{
+ this.handleFailure({
+ argument: args
+ });
}
- 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);
- }
+ runCallback: function(cb, scope, args){
+ if(Ext.isFunction(cb)){
+ cb.apply(scope, args);
}
},
- // 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);
- }
- }
+ isLoading : function(){
+ return !!this.transId;
},
- // private
- renderIndent : function(deep, refresh){
- if(refresh){
- this.ui.childIndent = null;
+ abort : function(){
+ if(this.isLoading()){
+ Ext.Ajax.abort(this.transId);
}
- 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);
+ },
+
+ /**
+ * <p>Override this function for custom TreeNode node implementation, or to
+ * modify the attributes at creation time.</p>
+ * Example:<pre><code>
+new Ext.tree.TreePanel({
+ ...
+ loader: new Ext.tree.TreeLoader({
+ url: 'dataUrl',
+ createNode: function(attr) {
+// Allow consolidation consignments to have
+// consignments dropped into them.
+ if (attr.isConsolidation) {
+ attr.iconCls = 'x-consol',
+ attr.allowDrop = true;
}
+ return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
+ }
+ }),
+ ...
+});
+</code></pre>
+ * @param attr {Object} The attributes from which to create the new node.
+ */
+ createNode : function(attr){
+ // apply baseAttrs, nice idea Corey!
+ if(this.baseAttrs){
+ Ext.applyIf(attr, this.baseAttrs);
+ }
+ if(this.applyLoader !== false && !attr.loader){
+ attr.loader = this;
+ }
+ if(Ext.isString(attr.uiProvider)){
+ attr.uiProvider = this.uiProviders[attr.uiProvider] || eval(attr.uiProvider);
+ }
+ if(attr.nodeType){
+ return new Ext.tree.TreePanel.nodeTypes[attr.nodeType](attr);
+ }else{
+ return attr.leaf ?
+ new Ext.tree.TreeNode(attr) :
+ new Ext.tree.AsyncTreeNode(attr);
}
},
- beginUpdate : function(){
- this.childrenRendered = false;
+ processResponse : function(response, node, callback, scope){
+ var json = response.responseText;
+ try {
+ var o = response.responseData || Ext.decode(json);
+ node.beginUpdate();
+ for(var i = 0, len = o.length; i < len; i++){
+ var n = this.createNode(o[i]);
+ if(n){
+ node.appendChild(n);
+ }
+ }
+ node.endUpdate();
+ this.runCallback(callback, scope || node, [node]);
+ }catch(e){
+ this.handleFailure(response);
+ }
},
- endUpdate : function(){
- if(this.expanded && this.rendered){
- this.renderChildren();
- }
+ handleResponse : function(response){
+ this.transId = false;
+ var a = response.argument;
+ this.processResponse(response, a.node, a.callback, a.scope);
+ this.fireEvent("load", this, a.node, response);
},
- destroy : function(){
- this.unselect(true);
- Ext.tree.TreeNode.superclass.destroy.call(this);
- Ext.destroy(this.ui, this.loader);
- this.ui = this.loader = null;
+ handleFailure : function(response){
+ this.transId = false;
+ var a = response.argument;
+ this.fireEvent("loadexception", this, a.node, response);
+ this.runCallback(a.callback, a.scope || a.node, [a.node]);
},
- // private
- onIdChange : function(id){
- this.ui.onIdChange(id);
+ destroy : function(){
+ this.abort();
+ this.purgeListeners();
}
-});
-
-Ext.tree.TreePanel.nodeTypes.node = Ext.tree.TreeNode;/**\r
- * @class Ext.tree.AsyncTreeNode\r
- * @extends Ext.tree.TreeNode\r
- * @cfg {TreeLoader} loader A TreeLoader to be used by this node (defaults to the loader defined on the tree)\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.AsyncTreeNode = function(config){\r
- this.loaded = config && config.loaded === true;\r
- this.loading = false;\r
- Ext.tree.AsyncTreeNode.superclass.constructor.apply(this, arguments);\r
- /**\r
- * @event beforeload\r
- * Fires before this node is loaded, return false to cancel\r
- * @param {Node} this This node\r
- */\r
- this.addEvents('beforeload', 'load');\r
- /**\r
- * @event load\r
- * Fires when this node is loaded\r
- * @param {Node} this This node\r
- */\r
- /**\r
- * The loader used by this node (defaults to using the tree's defined loader)\r
- * @type TreeLoader\r
- * @property loader\r
- */\r
-};\r
-Ext.extend(Ext.tree.AsyncTreeNode, Ext.tree.TreeNode, {\r
- expand : function(deep, anim, callback, scope){\r
- if(this.loading){ // if an async load is already running, waiting til it's done\r
- var timer;\r
- var f = function(){\r
- if(!this.loading){ // done loading\r
- clearInterval(timer);\r
- this.expand(deep, anim, callback, scope);\r
- }\r
- }.createDelegate(this);\r
- timer = setInterval(f, 200);\r
- return;\r
- }\r
- if(!this.loaded){\r
- if(this.fireEvent("beforeload", this) === false){\r
- return;\r
- }\r
- this.loading = true;\r
- this.ui.beforeLoad(this);\r
- var loader = this.loader || this.attributes.loader || this.getOwnerTree().getLoader();\r
- if(loader){\r
- loader.load(this, this.loadComplete.createDelegate(this, [deep, anim, callback, scope]), this);\r
- return;\r
- }\r
- }\r
- Ext.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback, scope);\r
- },\r
- \r
- /**\r
- * Returns true if this node is currently loading\r
- * @return {Boolean}\r
- */\r
- isLoading : function(){\r
- return this.loading; \r
- },\r
- \r
- loadComplete : function(deep, anim, callback, scope){\r
- this.loading = false;\r
- this.loaded = true;\r
- this.ui.afterLoad(this);\r
- this.fireEvent("load", this);\r
- this.expand(deep, anim, callback, scope);\r
- },\r
- \r
- /**\r
- * Returns true if this node has been loaded\r
- * @return {Boolean}\r
- */\r
- isLoaded : function(){\r
- return this.loaded;\r
- },\r
- \r
- hasChildNodes : function(){\r
- if(!this.isLeaf() && !this.loaded){\r
- return true;\r
- }else{\r
- return Ext.tree.AsyncTreeNode.superclass.hasChildNodes.call(this);\r
- }\r
- },\r
-\r
- /**\r
- * Trigger a reload for this node\r
- * @param {Function} callback\r
- * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the callback is executed. Defaults to this Node.\r
- */\r
- reload : function(callback, scope){\r
- this.collapse(false, false);\r
- while(this.firstChild){\r
- this.removeChild(this.firstChild).destroy();\r
- }\r
- this.childrenRendered = false;\r
- this.loaded = false;\r
- if(this.isHiddenRoot()){\r
- this.expanded = false;\r
- }\r
- this.expand(false, false, callback, scope);\r
- }\r
-});\r
-\r
-Ext.tree.TreePanel.nodeTypes.async = Ext.tree.AsyncTreeNode;/**\r
- * @class Ext.tree.TreeNodeUI\r
- * This class provides the default UI implementation for Ext TreeNodes.\r
- * The TreeNode UI implementation is separate from the\r
- * tree implementation, and allows customizing of the appearance of\r
- * tree nodes.<br>\r
- * <p>\r
- * If you are customizing the Tree's user interface, you\r
- * may need to extend this class, but you should never need to instantiate this class.<br>\r
- * <p>\r
- * This class provides access to the user interface components of an Ext TreeNode, through\r
- * {@link Ext.tree.TreeNode#getUI}\r
- */\r
-Ext.tree.TreeNodeUI = function(node){\r
- this.node = node;\r
- this.rendered = false;\r
- this.animating = false;\r
- this.wasLeaf = true;\r
- this.ecc = 'x-tree-ec-icon x-tree-elbow';\r
- this.emptyIcon = Ext.BLANK_IMAGE_URL;\r
-};\r
-\r
-Ext.tree.TreeNodeUI.prototype = {\r
- // private\r
- removeChild : function(node){\r
- if(this.rendered){\r
- this.ctNode.removeChild(node.ui.getEl());\r
- }\r
- },\r
-\r
- // private\r
- beforeLoad : function(){\r
- this.addClass("x-tree-node-loading");\r
- },\r
-\r
- // private\r
- afterLoad : function(){\r
- this.removeClass("x-tree-node-loading");\r
- },\r
-\r
- // private\r
- onTextChange : function(node, text, oldText){\r
- if(this.rendered){\r
- this.textNode.innerHTML = text;\r
- }\r
- },\r
-\r
- // private\r
- onDisableChange : function(node, state){\r
- this.disabled = state;\r
- if (this.checkbox) {\r
- this.checkbox.disabled = state;\r
- }\r
- if(state){\r
- this.addClass("x-tree-node-disabled");\r
- }else{\r
- this.removeClass("x-tree-node-disabled");\r
- }\r
- },\r
-\r
- // private\r
- onSelectedChange : function(state){\r
- if(state){\r
- this.focus();\r
- this.addClass("x-tree-selected");\r
- }else{\r
- //this.blur();\r
- this.removeClass("x-tree-selected");\r
- }\r
- },\r
-\r
- // private\r
- onMove : function(tree, node, oldParent, newParent, index, refNode){\r
- this.childIndent = null;\r
- if(this.rendered){\r
- var targetNode = newParent.ui.getContainer();\r
- if(!targetNode){//target not rendered\r
- this.holder = document.createElement("div");\r
- this.holder.appendChild(this.wrap);\r
- return;\r
- }\r
- var insertBefore = refNode ? refNode.ui.getEl() : null;\r
- if(insertBefore){\r
- targetNode.insertBefore(this.wrap, insertBefore);\r
- }else{\r
- targetNode.appendChild(this.wrap);\r
- }\r
- this.node.renderIndent(true, oldParent != newParent);\r
- }\r
- },\r
-\r
-/**\r
- * Adds one or more CSS classes to the node's UI element.\r
- * Duplicate classes are automatically filtered out.\r
- * @param {String/Array} className The CSS class to add, or an array of classes\r
- */\r
- addClass : function(cls){\r
- if(this.elNode){\r
- Ext.fly(this.elNode).addClass(cls);\r
- }\r
- },\r
-\r
-/**\r
- * Removes one or more CSS classes from the node's UI element.\r
- * @param {String/Array} className The CSS class to remove, or an array of classes\r
- */\r
- removeClass : function(cls){\r
- if(this.elNode){\r
- Ext.fly(this.elNode).removeClass(cls);\r
- }\r
- },\r
-\r
- // private\r
- remove : function(){\r
- if(this.rendered){\r
- this.holder = document.createElement("div");\r
- this.holder.appendChild(this.wrap);\r
- }\r
- },\r
-\r
- // private\r
- fireEvent : function(){\r
- return this.node.fireEvent.apply(this.node, arguments);\r
- },\r
-\r
- // private\r
- initEvents : function(){\r
- this.node.on("move", this.onMove, this);\r
-\r
- if(this.node.disabled){\r
- this.onDisableChange(this.node, true);\r
- }\r
- if(this.node.hidden){\r
- this.hide();\r
- }\r
- var ot = this.node.getOwnerTree();\r
- var dd = ot.enableDD || ot.enableDrag || ot.enableDrop;\r
- if(dd && (!this.node.isRoot || ot.rootVisible)){\r
- Ext.dd.Registry.register(this.elNode, {\r
- node: this.node,\r
- handles: this.getDDHandles(),\r
- isHandle: false\r
- });\r
- }\r
- },\r
-\r
- // private\r
- getDDHandles : function(){\r
- return [this.iconNode, this.textNode, this.elNode];\r
- },\r
-\r
-/**\r
- * Hides this node.\r
- */\r
- hide : function(){\r
- this.node.hidden = true;\r
- if(this.wrap){\r
- this.wrap.style.display = "none";\r
- }\r
- },\r
-\r
-/**\r
- * Shows this node.\r
- */\r
- show : function(){\r
- this.node.hidden = false;\r
- if(this.wrap){\r
- this.wrap.style.display = "";\r
- }\r
- },\r
-\r
- // private\r
- onContextMenu : function(e){\r
- if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {\r
- e.preventDefault();\r
- this.focus();\r
- this.fireEvent("contextmenu", this.node, e);\r
- }\r
- },\r
-\r
- // private\r
- onClick : function(e){\r
- if(this.dropping){\r
- e.stopEvent();\r
- return;\r
- }\r
- if(this.fireEvent("beforeclick", this.node, e) !== false){\r
- var a = e.getTarget('a');\r
- if(!this.disabled && this.node.attributes.href && a){\r
- this.fireEvent("click", this.node, e);\r
- return;\r
- }else if(a && e.ctrlKey){\r
- e.stopEvent();\r
- }\r
- e.preventDefault();\r
- if(this.disabled){\r
- return;\r
- }\r
-\r
- if(this.node.attributes.singleClickExpand && !this.animating && this.node.isExpandable()){\r
- this.node.toggle();\r
- }\r
-\r
- this.fireEvent("click", this.node, e);\r
- }else{\r
- e.stopEvent();\r
- }\r
- },\r
-\r
- // private\r
- onDblClick : function(e){\r
- e.preventDefault();\r
- if(this.disabled){\r
- return;\r
- }\r
- if(this.fireEvent("beforedblclick", this.node, e) !== false){\r
- if(this.checkbox){\r
- this.toggleCheck();\r
- }\r
- if(!this.animating && this.node.isExpandable()){\r
- this.node.toggle();\r
- }\r
- this.fireEvent("dblclick", this.node, e);\r
- }\r
- },\r
-\r
- onOver : function(e){\r
- this.addClass('x-tree-node-over');\r
- },\r
-\r
- onOut : function(e){\r
- this.removeClass('x-tree-node-over');\r
- },\r
-\r
- // private\r
- onCheckChange : function(){\r
- var checked = this.checkbox.checked;\r
- // fix for IE6\r
- this.checkbox.defaultChecked = checked;\r
- this.node.attributes.checked = checked;\r
- this.fireEvent('checkchange', this.node, checked);\r
- },\r
-\r
- // private\r
- ecClick : function(e){\r
- if(!this.animating && this.node.isExpandable()){\r
- this.node.toggle();\r
- }\r
- },\r
-\r
- // private\r
- startDrop : function(){\r
- this.dropping = true;\r
- },\r
-\r
- // delayed drop so the click event doesn't get fired on a drop\r
- endDrop : function(){\r
- setTimeout(function(){\r
- this.dropping = false;\r
- }.createDelegate(this), 50);\r
- },\r
-\r
- // private\r
- expand : function(){\r
- this.updateExpandIcon();\r
- this.ctNode.style.display = "";\r
- },\r
-\r
- // private\r
- focus : function(){\r
- if(!this.node.preventHScroll){\r
- try{this.anchor.focus();\r
- }catch(e){}\r
- }else{\r
- try{\r
- var noscroll = this.node.getOwnerTree().getTreeEl().dom;\r
- var l = noscroll.scrollLeft;\r
- this.anchor.focus();\r
- noscroll.scrollLeft = l;\r
- }catch(e){}\r
- }\r
- },\r
-\r
-/**\r
- * Sets the checked status of the tree node to the passed value, or, if no value was passed,\r
- * toggles the checked status. If the node was rendered with no checkbox, this has no effect.\r
- * @param {Boolean} (optional) The new checked status.\r
- */\r
- toggleCheck : function(value){\r
- var cb = this.checkbox;\r
- if(cb){\r
- cb.checked = (value === undefined ? !cb.checked : value);\r
- this.onCheckChange();\r
- }\r
- },\r
-\r
- // private\r
- blur : function(){\r
- try{\r
- this.anchor.blur();\r
- }catch(e){}\r
- },\r
-\r
- // private\r
- animExpand : function(callback){\r
- var ct = Ext.get(this.ctNode);\r
- ct.stopFx();\r
- if(!this.node.isExpandable()){\r
- this.updateExpandIcon();\r
- this.ctNode.style.display = "";\r
- Ext.callback(callback);\r
- return;\r
- }\r
- this.animating = true;\r
- this.updateExpandIcon();\r
-\r
- ct.slideIn('t', {\r
- callback : function(){\r
- this.animating = false;\r
- Ext.callback(callback);\r
- },\r
- scope: this,\r
- duration: this.node.ownerTree.duration || .25\r
- });\r
- },\r
-\r
- // private\r
- highlight : function(){\r
- var tree = this.node.getOwnerTree();\r
- Ext.fly(this.wrap).highlight(\r
- tree.hlColor || "C3DAF9",\r
- {endColor: tree.hlBaseColor}\r
- );\r
- },\r
-\r
- // private\r
- collapse : function(){\r
- this.updateExpandIcon();\r
- this.ctNode.style.display = "none";\r
- },\r
-\r
- // private\r
- animCollapse : function(callback){\r
- var ct = Ext.get(this.ctNode);\r
- ct.enableDisplayMode('block');\r
- ct.stopFx();\r
-\r
- this.animating = true;\r
- this.updateExpandIcon();\r
-\r
- ct.slideOut('t', {\r
- callback : function(){\r
- this.animating = false;\r
- Ext.callback(callback);\r
- },\r
- scope: this,\r
- duration: this.node.ownerTree.duration || .25\r
- });\r
- },\r
-\r
- // private\r
- getContainer : function(){\r
- return this.ctNode;\r
- },\r
-\r
-/**\r
- * Returns the element which encapsulates this node.\r
- * @return {HtmlElement} The DOM element. The default implementation uses a <code><li></code>.\r
- */\r
- getEl : function(){\r
- return this.wrap;\r
- },\r
-\r
- // private\r
- appendDDGhost : function(ghostNode){\r
- ghostNode.appendChild(this.elNode.cloneNode(true));\r
- },\r
-\r
- // private\r
- getDDRepairXY : function(){\r
- return Ext.lib.Dom.getXY(this.iconNode);\r
- },\r
-\r
- // private\r
- onRender : function(){\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
- n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;\r
-\r
- if(!this.rendered){\r
- this.rendered = true;\r
-\r
- this.renderElements(n, a, targetNode, bulkRender);\r
-\r
- if(a.qtip){\r
- if(this.textNode.setAttributeNS){\r
- this.textNode.setAttributeNS("ext", "qtip", a.qtip);\r
- if(a.qtipTitle){\r
- this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);\r
- }\r
- }else{\r
- this.textNode.setAttribute("ext:qtip", a.qtip);\r
- if(a.qtipTitle){\r
- this.textNode.setAttribute("ext:qtitle", a.qtipTitle);\r
- }\r
- }\r
- }else if(a.qtipCfg){\r
- a.qtipCfg.target = Ext.id(this.textNode);\r
- Ext.QuickTips.register(a.qtipCfg);\r
- }\r
- this.initEvents();\r
- if(!this.node.expanded){\r
- this.updateExpandIcon(true);\r
- }\r
- }else{\r
- if(bulkRender === true) {\r
- targetNode.appendChild(this.wrap);\r
- }\r
- }\r
- },\r
-\r
- // private\r
- renderElements : function(n, a, targetNode, bulkRender){\r
- // add some indent caching, this helps performance when rendering a large tree\r
- this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';\r
-\r
- var cb = Ext.isBoolean(a.checked),\r
- nel,\r
- href = a.href ? a.href : Ext.isGecko ? "" : "#",\r
- buf = ['<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on">',\r
- '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",\r
- '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',\r
- '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',\r
- cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',\r
- '<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',\r
- a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',n.text,"</span></a></div>",\r
- '<ul class="x-tree-node-ct" style="display:none;"></ul>',\r
- "</li>"].join('');\r
-\r
- if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){\r
- this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);\r
- }else{\r
- this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);\r
- }\r
-\r
- this.elNode = this.wrap.childNodes[0];\r
- this.ctNode = this.wrap.childNodes[1];\r
- var cs = this.elNode.childNodes;\r
- this.indentNode = cs[0];\r
- this.ecNode = cs[1];\r
- this.iconNode = cs[2];\r
- var index = 3;\r
- if(cb){\r
- this.checkbox = cs[3];\r
- // fix for IE6\r
- this.checkbox.defaultChecked = this.checkbox.checked;\r
- index++;\r
- }\r
- this.anchor = cs[index];\r
- this.textNode = cs[index].firstChild;\r
- },\r
-\r
-/**\r
- * Returns the <a> element that provides focus for the node's UI.\r
- * @return {HtmlElement} The DOM anchor element.\r
- */\r
- getAnchor : function(){\r
- return this.anchor;\r
- },\r
-\r
-/**\r
- * Returns the text node.\r
- * @return {HtmlNode} The DOM text node.\r
- */\r
- getTextEl : function(){\r
- return this.textNode;\r
- },\r
-\r
-/**\r
- * Returns the icon <img> element.\r
- * @return {HtmlElement} The DOM image element.\r
- */\r
- getIconEl : function(){\r
- return this.iconNode;\r
- },\r
-\r
-/**\r
- * Returns the checked status of the node. If the node was rendered with no\r
- * checkbox, it returns false.\r
- * @return {Boolean} The checked flag.\r
- */\r
- isChecked : function(){\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
- c2,\r
- cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow",\r
- hasChild = n.hasChildNodes();\r
- if(hasChild || n.attributes.expandable){\r
- if(n.expanded){\r
- cls += "-minus";\r
- c1 = "x-tree-node-collapsed";\r
- c2 = "x-tree-node-expanded";\r
- }else{\r
- cls += "-plus";\r
- c1 = "x-tree-node-expanded";\r
- c2 = "x-tree-node-collapsed";\r
- }\r
- if(this.wasLeaf){\r
- this.removeClass("x-tree-node-leaf");\r
- this.wasLeaf = false;\r
- }\r
- if(this.c1 != c1 || this.c2 != c2){\r
- Ext.fly(this.elNode).replaceClass(c1, c2);\r
- this.c1 = c1; this.c2 = c2;\r
- }\r
- }else{\r
- if(!this.wasLeaf){\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
- }\r
- }\r
- var ecc = "x-tree-ec-icon "+cls;\r
- if(this.ecc != ecc){\r
- this.ecNode.className = ecc;\r
- this.ecc = ecc;\r
- }\r
- }\r
- },\r
-\r
- // private\r
- onIdChange: function(id){\r
- if(this.rendered){\r
- this.elNode.setAttribute('ext:tree-node-id', id);\r
- }\r
- },\r
-\r
- // private\r
- getChildIndent : function(){\r
- if(!this.childIndent){\r
- var buf = [],\r
- p = this.node;\r
- while(p){\r
- if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){\r
- if(!p.isLast()) {\r
- buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-elbow-line" />');\r
- } else {\r
- buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-icon" />');\r
- }\r
- }\r
- p = p.parentNode;\r
- }\r
- this.childIndent = buf.join("");\r
- }\r
- return this.childIndent;\r
- },\r
-\r
- // private\r
- renderIndent : function(){\r
- if(this.rendered){\r
- var indent = "",\r
- p = this.node.parentNode;\r
- if(p){\r
- indent = p.ui.getChildIndent();\r
- }\r
- if(this.indentMarkup != indent){ // don't rerender if not required\r
- this.indentNode.innerHTML = indent;\r
- this.indentMarkup = indent;\r
- }\r
- this.updateExpandIcon();\r
- }\r
- },\r
-\r
- destroy : function(){\r
- if(this.elNode){\r
- Ext.dd.Registry.unregister(this.elNode.id);\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
- delete this[el];\r
- }\r
- }, this);\r
- delete this.node;\r
- }\r
-};\r
-\r
-/**\r
- * @class Ext.tree.RootTreeNodeUI\r
- * This class provides the default UI implementation for <b>root</b> Ext TreeNodes.\r
- * The RootTreeNode UI implementation allows customizing the appearance of the root tree node.<br>\r
- * <p>\r
- * If you are customizing the Tree's user interface, you\r
- * may need to extend this class, but you should never need to instantiate this class.<br>\r
- */\r
-Ext.tree.RootTreeNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {\r
- // private\r
- render : function(){\r
- if(!this.rendered){\r
- var targetNode = this.node.ownerTree.innerCt.dom;\r
- this.node.expanded = true;\r
- targetNode.innerHTML = '<div class="x-tree-root-node"></div>';\r
- this.wrap = this.ctNode = targetNode.firstChild;\r
- }\r
- },\r
- collapse : Ext.emptyFn,\r
- expand : Ext.emptyFn\r
-});/**\r
- * @class Ext.tree.TreeLoader\r
- * @extends Ext.util.Observable\r
- * A TreeLoader provides for lazy loading of an {@link Ext.tree.TreeNode}'s child\r
- * nodes from a specified URL. The response must be a JavaScript Array definition\r
- * whose elements are node definition objects. e.g.:\r
- * <pre><code>\r
- [{\r
- id: 1,\r
- text: 'A leaf Node',\r
- leaf: true\r
- },{\r
- id: 2,\r
- text: 'A folder Node',\r
- children: [{\r
- id: 3,\r
- text: 'A child Node',\r
- leaf: true\r
- }]\r
- }]\r
-</code></pre>\r
- * <br><br>\r
- * A server request is sent, and child nodes are loaded only when a node is expanded.\r
- * The loading node's id is passed to the server under the parameter name "node" to\r
- * enable the server to produce the correct child nodes.\r
- * <br><br>\r
- * To pass extra parameters, an event handler may be attached to the "beforeload"\r
- * event, and the parameters specified in the TreeLoader's baseParams property:\r
- * <pre><code>\r
- myTreeLoader.on("beforeload", function(treeLoader, node) {\r
- this.baseParams.category = node.attributes.category;\r
- }, this);\r
-</code></pre>\r
- * This would pass an HTTP parameter called "category" to the server containing\r
- * the value of the Node's "category" attribute.\r
- * @constructor\r
- * Creates a new Treeloader.\r
- * @param {Object} config A config object containing config properties.\r
- */\r
-Ext.tree.TreeLoader = function(config){\r
- this.baseParams = {};\r
- Ext.apply(this, config);\r
-\r
- this.addEvents(\r
- /**\r
- * @event beforeload\r
- * Fires before a network request is made to retrieve the Json text which specifies a node's children.\r
- * @param {Object} This TreeLoader object.\r
- * @param {Object} node The {@link Ext.tree.TreeNode} object being loaded.\r
- * @param {Object} callback The callback function specified in the {@link #load} call.\r
- */\r
- "beforeload",\r
- /**\r
- * @event load\r
- * Fires when the node has been successfuly loaded.\r
- * @param {Object} This TreeLoader object.\r
- * @param {Object} node The {@link Ext.tree.TreeNode} object being loaded.\r
- * @param {Object} response The response object containing the data from the server.\r
- */\r
- "load",\r
- /**\r
- * @event loadexception\r
- * Fires if the network request failed.\r
- * @param {Object} This TreeLoader object.\r
- * @param {Object} node The {@link Ext.tree.TreeNode} object being loaded.\r
- * @param {Object} response The response object containing the data from the server.\r
- */\r
- "loadexception"\r
- );\r
- Ext.tree.TreeLoader.superclass.constructor.call(this);\r
- if(Ext.isString(this.paramOrder)){\r
- this.paramOrder = this.paramOrder.split(/[\s,|]/);\r
- }\r
-};\r
-\r
-Ext.extend(Ext.tree.TreeLoader, Ext.util.Observable, {\r
- /**\r
- * @cfg {String} dataUrl The URL from which to request a Json string which\r
- * specifies an array of node definition objects representing the child nodes\r
- * to be loaded.\r
- */\r
- /**\r
- * @cfg {String} requestMethod The HTTP request method for loading data (defaults to the value of {@link Ext.Ajax#method}).\r
- */\r
- /**\r
- * @cfg {String} url Equivalent to {@link #dataUrl}.\r
- */\r
- /**\r
- * @cfg {Boolean} preloadChildren If set to true, the loader recursively loads "children" attributes when doing the first load on nodes.\r
- */\r
- /**\r
- * @cfg {Object} baseParams (optional) An object containing properties which\r
- * specify HTTP parameters to be passed to each request for child nodes.\r
- */\r
- /**\r
- * @cfg {Object} baseAttrs (optional) An object containing attributes to be added to all nodes\r
- * created by this loader. If the attributes sent by the server have an attribute in this object,\r
- * they take priority.\r
- */\r
- /**\r
- * @cfg {Object} uiProviders (optional) An object containing properties which\r
- * specify custom {@link Ext.tree.TreeNodeUI} implementations. If the optional\r
- * <i>uiProvider</i> attribute of a returned child node is a string rather\r
- * than a reference to a TreeNodeUI implementation, then that string value\r
- * is used as a property name in the uiProviders object.\r
- */\r
- uiProviders : {},\r
-\r
- /**\r
- * @cfg {Boolean} clearOnLoad (optional) Default to true. Remove previously existing\r
- * child nodes before loading.\r
- */\r
- clearOnLoad : true,\r
-\r
- /**\r
- * @cfg {Array/String} paramOrder Defaults to <tt>undefined</tt>. Only used when using directFn.\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: 'node param1 param2 param3'\r
-paramOrder: 'param1,node,param2,param3'\r
-paramOrder: 'param1|param2|param|node'\r
- </code></pre>\r
- */\r
- paramOrder: undefined,\r
-\r
- /**\r
- * @cfg {Boolean} paramsAsHash Only used when using directFn.\r
- * Send parameters as a collection of named arguments (defaults to <tt>false</tt>). Providing a\r
- * <tt>{@link #paramOrder}</tt> nullifies this configuration.\r
- */\r
- paramsAsHash: false,\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
- */\r
- nodeParameter: 'node',\r
-\r
- /**\r
- * @cfg {Function} directFn\r
- * Function to call when executing a request.\r
- */\r
- directFn : undefined,\r
-\r
- /**\r
- * Load an {@link Ext.tree.TreeNode} from the URL specified in the constructor.\r
- * 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
- * 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
- */\r
- load : function(node, callback, scope){\r
- if(this.clearOnLoad){\r
- while(node.firstChild){\r
- node.removeChild(node.firstChild);\r
- }\r
- }\r
- if(this.doPreload(node)){ // preloaded json children\r
- this.runCallback(callback, scope || node, [node]);\r
- }else if(this.directFn || this.dataUrl || this.url){\r
- this.requestData(node, callback, scope || node);\r
- }\r
- },\r
-\r
- doPreload : function(node){\r
- if(node.attributes.children){\r
- if(node.childNodes.length < 1){ // preloaded?\r
- var cs = node.attributes.children;\r
- node.beginUpdate();\r
- for(var i = 0, len = cs.length; i < len; i++){\r
- var cn = node.appendChild(this.createNode(cs[i]));\r
- if(this.preloadChildren){\r
- this.doPreload(cn);\r
- }\r
- }\r
- node.endUpdate();\r
- }\r
- return true;\r
- }\r
- return false;\r
- },\r
-\r
- getParams: function(node){\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
- 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
- return bp;\r
- }\r
- },\r
-\r
- requestData : function(node, callback, scope){\r
- if(this.fireEvent("beforeload", this, node, callback) !== false){\r
- if(this.directFn){\r
- var args = this.getParams(node);\r
- args.push(this.processDirectResponse.createDelegate(this, [{callback: callback, node: node, scope: scope}], true));\r
- this.directFn.apply(window, args);\r
- }else{\r
- this.transId = Ext.Ajax.request({\r
- method:this.requestMethod,\r
- url: this.dataUrl||this.url,\r
- success: this.handleResponse,\r
- failure: this.handleFailure,\r
- scope: this,\r
- argument: {callback: callback, node: node, scope: scope},\r
- params: this.getParams(node)\r
- });\r
- }\r
- }else{\r
- // if the load is cancelled, make sure we notify\r
- // the node that we are done\r
- this.runCallback(callback, scope || node, []);\r
- }\r
- },\r
-\r
- processDirectResponse: function(result, response, args){\r
- if(response.status){\r
- this.handleResponse({\r
- responseData: Ext.isArray(result) ? result : null,\r
- responseText: result,\r
- argument: args\r
- });\r
- }else{\r
- this.handleFailure({\r
- argument: args\r
- });\r
- }\r
- },\r
-\r
- // private\r
- runCallback: function(cb, scope, args){\r
- if(Ext.isFunction(cb)){\r
- cb.apply(scope, args);\r
- }\r
- },\r
-\r
- isLoading : function(){\r
- return !!this.transId;\r
- },\r
-\r
- abort : function(){\r
- if(this.isLoading()){\r
- Ext.Ajax.abort(this.transId);\r
- }\r
- },\r
-\r
- /**\r
- * <p>Override this function for custom TreeNode node implementation, or to\r
- * modify the attributes at creation time.</p>\r
- * Example:<pre><code>\r
-new Ext.tree.TreePanel({\r
- ...\r
- loader: new Ext.tree.TreeLoader({\r
- url: 'dataUrl',\r
- createNode: function(attr) {\r
-// Allow consolidation consignments to have\r
-// consignments dropped into them.\r
- if (attr.isConsolidation) {\r
- attr.iconCls = 'x-consol',\r
- attr.allowDrop = true;\r
- }\r
- return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);\r
- }\r
- }),\r
- ...\r
-});\r
-</code></pre>\r
- * @param attr {Object} The attributes from which to create the new node.\r
- */\r
- createNode : function(attr){\r
- // apply baseAttrs, nice idea Corey!\r
- if(this.baseAttrs){\r
- Ext.applyIf(attr, this.baseAttrs);\r
- }\r
- if(this.applyLoader !== false && !attr.loader){\r
- attr.loader = this;\r
- }\r
- if(Ext.isString(attr.uiProvider)){\r
- attr.uiProvider = this.uiProviders[attr.uiProvider] || eval(attr.uiProvider);\r
- }\r
- if(attr.nodeType){\r
- return new Ext.tree.TreePanel.nodeTypes[attr.nodeType](attr);\r
- }else{\r
- return attr.leaf ?\r
- new Ext.tree.TreeNode(attr) :\r
- new Ext.tree.AsyncTreeNode(attr);\r
- }\r
- },\r
-\r
- processResponse : function(response, node, callback, scope){\r
- var json = response.responseText;\r
- try {\r
- var o = response.responseData || Ext.decode(json);\r
- node.beginUpdate();\r
- for(var i = 0, len = o.length; i < len; i++){\r
- var n = this.createNode(o[i]);\r
- if(n){\r
- node.appendChild(n);\r
- }\r
- }\r
- node.endUpdate();\r
- this.runCallback(callback, scope || node, [node]);\r
- }catch(e){\r
- this.handleFailure(response);\r
- }\r
- },\r
-\r
- handleResponse : function(response){\r
- this.transId = false;\r
- var a = response.argument;\r
- this.processResponse(response, a.node, a.callback, a.scope);\r
- this.fireEvent("load", this, a.node, response);\r
- },\r
-\r
- handleFailure : function(response){\r
- this.transId = false;\r
- var a = response.argument;\r
- this.fireEvent("loadexception", this, a.node, response);\r
- this.runCallback(a.callback, a.scope || a.node, [a.node]);\r
- },\r
-\r
- destroy : function(){\r
- this.abort();\r
- this.purgeListeners();\r
- }\r
});/**
* @class Ext.tree.TreeFilter
* Note this class is experimental and doesn't update the indent (lines) or expand collapse icons of the nodes
this.filtered = {};
}
};
-/**\r
- * @class Ext.tree.TreeSorter\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
-new Ext.tree.TreeSorter(myTree, {\r
- folderSort: true,\r
- dir: "desc",\r
- sortType: function(node) {\r
- // sort by a custom, typed attribute:\r
- return parseInt(node.id, 10);\r
- }\r
-});\r
-</code></pre>\r
- * @constructor\r
- * @param {TreePanel} tree\r
- * @param {Object} config\r
- */\r
-Ext.tree.TreeSorter = function(tree, config){\r
- /**\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
- * property is only used if no {@link #sortType} function is specified, otherwise it is ignored.\r
- */\r
- /**\r
- * @cfg {String} dir The direction to sort ("asc" or "desc," case-insensitive, defaults to "asc")\r
- */\r
- /**\r
- * @cfg {String} leafAttr The attribute used to determine leaf nodes when {@link #folderSort} = true (defaults to "leaf")\r
- */\r
- /**\r
- * @cfg {Boolean} caseSensitive true for case-sensitive sort (defaults to false)\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
- * example usage. Note that if a sortType is specified, any {@link #property} config will be ignored.\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
- var dsc = this.dir && this.dir.toLowerCase() == "desc";\r
- var p = this.property || "text";\r
- var sortType = this.sortType;\r
- var fs = this.folderSort;\r
- var cs = this.caseSensitive === true;\r
- var leafAttr = this.leafAttr || 'leaf';\r
-\r
- this.sortFn = function(n1, n2){\r
- if(fs){\r
- if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){\r
- return 1;\r
- }\r
- if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){\r
- return -1;\r
- }\r
- }\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
- }\r
- };\r
-};\r
-\r
-Ext.tree.TreeSorter.prototype = {\r
- doSort : function(node){\r
- node.sort(this.sortFn);\r
- },\r
-\r
- compareNodes : function(n1, n2){\r
- return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);\r
- },\r
-\r
- updateSort : function(tree, node){\r
- if(node.childrenRendered){\r
- this.doSort.defer(1, this, [node]);\r
- }\r
- },\r
-\r
- updateSortParent : function(node){\r
- var p = node.parentNode;\r
- if(p && p.childrenRendered){\r
- this.doSort.defer(1, this, [p]);\r
- }\r
- }\r
-};/**\r
- * @class Ext.tree.TreeDropZone\r
- * @extends Ext.dd.DropZone\r
- * @constructor\r
- * @param {String/HTMLElement/Element} tree The {@link Ext.tree.TreePanel} for which to enable dropping\r
- * @param {Object} config\r
- */\r
-if(Ext.dd.DropZone){\r
- \r
-Ext.tree.TreeDropZone = function(tree, config){\r
- /**\r
- * @cfg {Boolean} allowParentInsert\r
- * Allow inserting a dragged node between an expanded parent node and its first child that will become a\r
- * sibling of the parent when dropped (defaults to false)\r
- */\r
- this.allowParentInsert = config.allowParentInsert || false;\r
- /**\r
- * @cfg {String} allowContainerDrop\r
- * True if drops on the tree container (outside of a specific tree node) are allowed (defaults to false)\r
- */\r
- this.allowContainerDrop = config.allowContainerDrop || false;\r
- /**\r
- * @cfg {String} appendOnly\r
- * True if the tree should only allow append drops (use for trees which are sorted, defaults to false)\r
- */\r
- this.appendOnly = config.appendOnly || false;\r
-\r
- Ext.tree.TreeDropZone.superclass.constructor.call(this, tree.getTreeEl(), config);\r
- /**\r
- * The TreePanel for this drop zone\r
- * @type Ext.tree.TreePanel\r
- * @property\r
- */\r
- this.tree = tree;\r
- /**\r
- * Arbitrary data that can be associated with this tree and will be included in the event object that gets\r
- * passed to any nodedragover event handler (defaults to {})\r
- * @type Ext.tree.TreePanel\r
- * @property\r
- */\r
- this.dragOverData = {};\r
- // private\r
- this.lastInsertClass = "x-tree-no-status";\r
-};\r
-\r
-Ext.extend(Ext.tree.TreeDropZone, Ext.dd.DropZone, {\r
- /**\r
- * @cfg {String} ddGroup\r
- * A named drag drop group to which this object belongs. If a group is specified, then this object will only\r
- * interact with other drag drop objects in the same group (defaults to 'TreeDD').\r
- */\r
- ddGroup : "TreeDD",\r
-\r
- /**\r
- * @cfg {String} expandDelay\r
- * The delay in milliseconds to wait before expanding a target tree node while dragging a droppable node\r
- * over the target (defaults to 1000)\r
- */\r
- expandDelay : 1000,\r
-\r
- // private\r
- expandNode : function(node){\r
- if(node.hasChildNodes() && !node.isExpanded()){\r
- node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));\r
- }\r
- },\r
-\r
- // private\r
- queueExpand : function(node){\r
- this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);\r
- },\r
-\r
- // private\r
- cancelExpand : function(){\r
- if(this.expandProcId){\r
- clearTimeout(this.expandProcId);\r
- this.expandProcId = false;\r
- }\r
- },\r
-\r
- // private\r
- isValidDropPoint : function(n, pt, dd, e, data){\r
- if(!n || !data){ return false; }\r
- var targetNode = n.node;\r
- var dropNode = data.node;\r
- // default drop rules\r
- if(!(targetNode && targetNode.isTarget && pt)){\r
- return false;\r
- }\r
- if(pt == "append" && targetNode.allowChildren === false){\r
- return false;\r
- }\r
- if((pt == "above" || pt == "below") && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)){\r
- return false;\r
- }\r
- if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode))){\r
- return false;\r
- }\r
- // reuse the object\r
- var overEvent = this.dragOverData;\r
- overEvent.tree = this.tree;\r
- overEvent.target = targetNode;\r
- overEvent.data = data;\r
- overEvent.point = pt;\r
- overEvent.source = dd;\r
- overEvent.rawEvent = e;\r
- overEvent.dropNode = dropNode;\r
- overEvent.cancel = false; \r
- var result = this.tree.fireEvent("nodedragover", overEvent);\r
- return overEvent.cancel === false && result !== false;\r
- },\r
-\r
- // private\r
- getDropPoint : function(e, n, dd){\r
- var tn = n.node;\r
- if(tn.isRoot){\r
- return tn.allowChildren !== false ? "append" : false; // always append for root\r
- }\r
- var dragEl = n.ddel;\r
- var t = Ext.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;\r
- var y = Ext.lib.Event.getPageY(e);\r
- var noAppend = tn.allowChildren === false || tn.isLeaf();\r
- if(this.appendOnly || tn.parentNode.allowChildren === false){\r
- return noAppend ? false : "append";\r
- }\r
- var noBelow = false;\r
- if(!this.allowParentInsert){\r
- noBelow = tn.hasChildNodes() && tn.isExpanded();\r
- }\r
- var q = (b - t) / (noAppend ? 2 : 3);\r
- if(y >= t && y < (t + q)){\r
- return "above";\r
- }else if(!noBelow && (noAppend || y >= b-q && y <= b)){\r
- return "below";\r
- }else{\r
- return "append";\r
- }\r
- },\r
-\r
- // private\r
- onNodeEnter : function(n, dd, e, data){\r
- this.cancelExpand();\r
- },\r
- \r
- onContainerOver : function(dd, e, data) {\r
- if (this.allowContainerDrop && this.isValidDropPoint({ ddel: this.tree.getRootNode().ui.elNode, node: this.tree.getRootNode() }, "append", dd, e, data)) {\r
- return this.dropAllowed;\r
- }\r
- return this.dropNotAllowed;\r
- },\r
-\r
- // private\r
- onNodeOver : function(n, dd, e, data){\r
- var pt = this.getDropPoint(e, n, dd);\r
- var node = n.node;\r
- \r
- // auto node expand check\r
- if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){\r
- this.queueExpand(node);\r
- }else if(pt != "append"){\r
- this.cancelExpand();\r
- }\r
- \r
- // set the insert point style on the target node\r
- var returnCls = this.dropNotAllowed;\r
- if(this.isValidDropPoint(n, pt, dd, e, data)){\r
- if(pt){\r
- var el = n.ddel;\r
- var cls;\r
- if(pt == "above"){\r
- returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";\r
- cls = "x-tree-drag-insert-above";\r
- }else if(pt == "below"){\r
- returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";\r
- cls = "x-tree-drag-insert-below";\r
- }else{\r
- returnCls = "x-tree-drop-ok-append";\r
- cls = "x-tree-drag-append";\r
- }\r
- if(this.lastInsertClass != cls){\r
- Ext.fly(el).replaceClass(this.lastInsertClass, cls);\r
- this.lastInsertClass = cls;\r
- }\r
- }\r
- }\r
- return returnCls;\r
- },\r
-\r
- // private\r
- onNodeOut : function(n, dd, e, data){\r
- this.cancelExpand();\r
- this.removeDropIndicators(n);\r
- },\r
-\r
- // private\r
- onNodeDrop : function(n, dd, e, data){\r
- var point = this.getDropPoint(e, n, dd);\r
- var targetNode = n.node;\r
- targetNode.ui.startDrop();\r
- if(!this.isValidDropPoint(n, point, dd, e, data)){\r
- targetNode.ui.endDrop();\r
- return false;\r
- }\r
- // first try to find the drop node\r
- var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);\r
- return this.processDrop(targetNode, data, point, dd, e, dropNode);\r
- },\r
- \r
- onContainerDrop : function(dd, e, data){\r
- if (this.allowContainerDrop && this.isValidDropPoint({ ddel: this.tree.getRootNode().ui.elNode, node: this.tree.getRootNode() }, "append", dd, e, data)) {\r
- var targetNode = this.tree.getRootNode(); \r
- targetNode.ui.startDrop();\r
- var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, 'append', e) : null);\r
- return this.processDrop(targetNode, data, 'append', dd, e, dropNode);\r
- }\r
- return false;\r
- },\r
- \r
- // private\r
- processDrop: function(target, data, point, dd, e, dropNode){\r
- var dropEvent = {\r
- tree : this.tree,\r
- target: target,\r
- data: data,\r
- point: point,\r
- source: dd,\r
- rawEvent: e,\r
- dropNode: dropNode,\r
- cancel: !dropNode,\r
- dropStatus: false\r
- };\r
- var retval = this.tree.fireEvent("beforenodedrop", dropEvent);\r
- if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){\r
- target.ui.endDrop();\r
- return dropEvent.dropStatus;\r
- }\r
- \r
- target = dropEvent.target;\r
- if(point == 'append' && !target.isExpanded()){\r
- target.expand(false, null, function(){\r
- this.completeDrop(dropEvent);\r
- }.createDelegate(this));\r
- }else{\r
- this.completeDrop(dropEvent);\r
- }\r
- return true;\r
- },\r
-\r
- // private\r
- completeDrop : function(de){\r
- var ns = de.dropNode, p = de.point, t = de.target;\r
- if(!Ext.isArray(ns)){\r
- ns = [ns];\r
- }\r
- var n;\r
- for(var i = 0, len = ns.length; i < len; i++){\r
- n = ns[i];\r
- if(p == "above"){\r
- t.parentNode.insertBefore(n, t);\r
- }else if(p == "below"){\r
- t.parentNode.insertBefore(n, t.nextSibling);\r
- }else{\r
- t.appendChild(n);\r
- }\r
- }\r
- n.ui.focus();\r
- if(Ext.enableFx && this.tree.hlDrop){\r
- n.ui.highlight();\r
- }\r
- t.ui.endDrop();\r
- this.tree.fireEvent("nodedrop", de);\r
- },\r
-\r
- // private\r
- afterNodeMoved : function(dd, data, e, targetNode, dropNode){\r
- if(Ext.enableFx && this.tree.hlDrop){\r
- dropNode.ui.focus();\r
- dropNode.ui.highlight();\r
- }\r
- this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);\r
- },\r
-\r
- // private\r
- getTree : function(){\r
- return this.tree;\r
- },\r
-\r
- // private\r
- removeDropIndicators : function(n){\r
- if(n && n.ddel){\r
- var el = n.ddel;\r
- Ext.fly(el).removeClass([\r
- "x-tree-drag-insert-above",\r
- "x-tree-drag-insert-below",\r
- "x-tree-drag-append"]);\r
- this.lastInsertClass = "_noclass";\r
- }\r
- },\r
-\r
- // private\r
- beforeDragDrop : function(target, e, id){\r
- this.cancelExpand();\r
- return true;\r
- },\r
-\r
- // private\r
- afterRepair : function(data){\r
- if(data && Ext.enableFx){\r
- data.node.ui.highlight();\r
- }\r
- this.hideProxy();\r
- } \r
-});\r
-\r
-}/**\r
- * @class Ext.tree.TreeDragZone\r
- * @extends Ext.dd.DragZone\r
- * @constructor\r
- * @param {String/HTMLElement/Element} tree The {@link Ext.tree.TreePanel} for which to enable dragging\r
- * @param {Object} config\r
- */\r
-if(Ext.dd.DragZone){\r
-Ext.tree.TreeDragZone = function(tree, config){\r
- Ext.tree.TreeDragZone.superclass.constructor.call(this, tree.innerCt, config);\r
- /**\r
- * The TreePanel for this drag zone\r
- * @type Ext.tree.TreePanel\r
- * @property\r
- */\r
- this.tree = tree;\r
-};\r
-\r
-Ext.extend(Ext.tree.TreeDragZone, Ext.dd.DragZone, {\r
- /**\r
- * @cfg {String} ddGroup\r
- * A named drag drop group to which this object belongs. If a group is specified, then this object will only\r
- * interact with other drag drop objects in the same group (defaults to 'TreeDD').\r
- */\r
- ddGroup : "TreeDD",\r
-\r
- // private\r
- onBeforeDrag : function(data, e){\r
- var n = data.node;\r
- return n && n.draggable && !n.disabled;\r
- },\r
-\r
- // private\r
- onInitDrag : function(e){\r
- var data = this.dragData;\r
- this.tree.getSelectionModel().select(data.node);\r
- this.tree.eventModel.disable();\r
- this.proxy.update("");\r
- data.node.ui.appendDDGhost(this.proxy.ghost.dom);\r
- this.tree.fireEvent("startdrag", this.tree, data.node, e);\r
- },\r
-\r
- // private\r
- getRepairXY : function(e, data){\r
- return data.node.ui.getDDRepairXY();\r
- },\r
-\r
- // private\r
- onEndDrag : function(data, e){\r
- this.tree.eventModel.enable.defer(100, this.tree.eventModel);\r
- this.tree.fireEvent("enddrag", this.tree, data.node, e);\r
- },\r
-\r
- // private\r
- onValidDrop : function(dd, e, id){\r
- this.tree.fireEvent("dragdrop", this.tree, this.dragData.node, dd, e);\r
- this.hideProxy();\r
- },\r
-\r
- // private\r
- beforeInvalidDrop : function(e, id){\r
- // this scrolls the original position back into view\r
- var sm = this.tree.getSelectionModel();\r
- sm.clearSelections();\r
- sm.select(this.dragData.node);\r
- },\r
- \r
- // private\r
- afterRepair : function(){\r
- if (Ext.enableFx && this.tree.hlDrop) {\r
- Ext.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");\r
- }\r
- this.dragging = false;\r
- }\r
-});\r
+/**
+ * @class Ext.tree.TreeSorter
+ * Provides sorting of nodes in a {@link Ext.tree.TreePanel}. The TreeSorter automatically monitors events on the
+ * associated TreePanel that might affect the tree's sort order (beforechildrenrendered, append, insert and textchange).
+ * Example usage:<br />
+ * <pre><code>
+new Ext.tree.TreeSorter(myTree, {
+ folderSort: true,
+ dir: "desc",
+ sortType: function(node) {
+ // sort by a custom, typed attribute:
+ return parseInt(node.id, 10);
+ }
+});
+</code></pre>
+ * @constructor
+ * @param {TreePanel} tree
+ * @param {Object} config
+ */
+Ext.tree.TreeSorter = function(tree, config){
+ /**
+ * @cfg {Boolean} folderSort True to sort leaf nodes under non-leaf nodes (defaults to false)
+ */
+ /**
+ * @cfg {String} property The named attribute on the node to sort by (defaults to "text"). Note that this
+ * property is only used if no {@link #sortType} function is specified, otherwise it is ignored.
+ */
+ /**
+ * @cfg {String} dir The direction to sort ("asc" or "desc," case-insensitive, defaults to "asc")
+ */
+ /**
+ * @cfg {String} leafAttr The attribute used to determine leaf nodes when {@link #folderSort} = true (defaults to "leaf")
+ */
+ /**
+ * @cfg {Boolean} caseSensitive true for case-sensitive sort (defaults to false)
+ */
+ /**
+ * @cfg {Function} sortType A custom "casting" function used to convert node values before sorting. The function
+ * will be called with a single parameter (the {@link Ext.tree.TreeNode} being evaluated) and is expected to return
+ * the node's sort value cast to the specific data type required for sorting. This could be used, for example, when
+ * a node's text (or other attribute) should be sorted as a date or numeric value. See the class description for
+ * example usage. Note that if a sortType is specified, any {@link #property} config will be ignored.
+ */
+
+ Ext.apply(this, config);
+ tree.on("beforechildrenrendered", this.doSort, this);
+ tree.on("append", this.updateSort, this);
+ tree.on("insert", this.updateSort, this);
+ tree.on("textchange", this.updateSortParent, this);
+
+ var dsc = this.dir && this.dir.toLowerCase() == "desc";
+ var p = this.property || "text";
+ var sortType = this.sortType;
+ var fs = this.folderSort;
+ var cs = this.caseSensitive === true;
+ var leafAttr = this.leafAttr || 'leaf';
+
+ this.sortFn = function(n1, n2){
+ if(fs){
+ if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){
+ return 1;
+ }
+ if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){
+ return -1;
+ }
+ }
+ var v1 = sortType ? sortType(n1) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());
+ var v2 = sortType ? sortType(n2) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());
+ if(v1 < v2){
+ return dsc ? +1 : -1;
+ }else if(v1 > v2){
+ return dsc ? -1 : +1;
+ }else{
+ return 0;
+ }
+ };
+};
+
+Ext.tree.TreeSorter.prototype = {
+ doSort : function(node){
+ node.sort(this.sortFn);
+ },
+
+ compareNodes : function(n1, n2){
+ return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);
+ },
+
+ updateSort : function(tree, node){
+ if(node.childrenRendered){
+ this.doSort.defer(1, this, [node]);
+ }
+ },
+
+ updateSortParent : function(node){
+ var p = node.parentNode;
+ if(p && p.childrenRendered){
+ this.doSort.defer(1, this, [p]);
+ }
+ }
+};/**
+ * @class Ext.tree.TreeDropZone
+ * @extends Ext.dd.DropZone
+ * @constructor
+ * @param {String/HTMLElement/Element} tree The {@link Ext.tree.TreePanel} for which to enable dropping
+ * @param {Object} config
+ */
+if(Ext.dd.DropZone){
+
+Ext.tree.TreeDropZone = function(tree, config){
+ /**
+ * @cfg {Boolean} allowParentInsert
+ * Allow inserting a dragged node between an expanded parent node and its first child that will become a
+ * sibling of the parent when dropped (defaults to false)
+ */
+ this.allowParentInsert = config.allowParentInsert || false;
+ /**
+ * @cfg {String} allowContainerDrop
+ * True if drops on the tree container (outside of a specific tree node) are allowed (defaults to false)
+ */
+ this.allowContainerDrop = config.allowContainerDrop || false;
+ /**
+ * @cfg {String} appendOnly
+ * True if the tree should only allow append drops (use for trees which are sorted, defaults to false)
+ */
+ this.appendOnly = config.appendOnly || false;
+
+ Ext.tree.TreeDropZone.superclass.constructor.call(this, tree.getTreeEl(), config);
+ /**
+ * The TreePanel for this drop zone
+ * @type Ext.tree.TreePanel
+ * @property
+ */
+ this.tree = tree;
+ /**
+ * Arbitrary data that can be associated with this tree and will be included in the event object that gets
+ * passed to any nodedragover event handler (defaults to {})
+ * @type Ext.tree.TreePanel
+ * @property
+ */
+ this.dragOverData = {};
+ // private
+ this.lastInsertClass = "x-tree-no-status";
+};
+
+Ext.extend(Ext.tree.TreeDropZone, Ext.dd.DropZone, {
+ /**
+ * @cfg {String} ddGroup
+ * A named drag drop group to which this object belongs. If a group is specified, then this object will only
+ * interact with other drag drop objects in the same group (defaults to 'TreeDD').
+ */
+ ddGroup : "TreeDD",
+
+ /**
+ * @cfg {String} expandDelay
+ * The delay in milliseconds to wait before expanding a target tree node while dragging a droppable node
+ * over the target (defaults to 1000)
+ */
+ expandDelay : 1000,
+
+ // private
+ expandNode : function(node){
+ if(node.hasChildNodes() && !node.isExpanded()){
+ node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));
+ }
+ },
+
+ // private
+ queueExpand : function(node){
+ this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);
+ },
+
+ // private
+ cancelExpand : function(){
+ if(this.expandProcId){
+ clearTimeout(this.expandProcId);
+ this.expandProcId = false;
+ }
+ },
+
+ // private
+ isValidDropPoint : function(n, pt, dd, e, data){
+ if(!n || !data){ return false; }
+ var targetNode = n.node;
+ var dropNode = data.node;
+ // default drop rules
+ if(!(targetNode && targetNode.isTarget && pt)){
+ return false;
+ }
+ if(pt == "append" && targetNode.allowChildren === false){
+ return false;
+ }
+ if((pt == "above" || pt == "below") && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)){
+ return false;
+ }
+ if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode))){
+ return false;
+ }
+ // reuse the object
+ var overEvent = this.dragOverData;
+ overEvent.tree = this.tree;
+ overEvent.target = targetNode;
+ overEvent.data = data;
+ overEvent.point = pt;
+ overEvent.source = dd;
+ overEvent.rawEvent = e;
+ overEvent.dropNode = dropNode;
+ overEvent.cancel = false;
+ var result = this.tree.fireEvent("nodedragover", overEvent);
+ return overEvent.cancel === false && result !== false;
+ },
+
+ // private
+ getDropPoint : function(e, n, dd){
+ var tn = n.node;
+ if(tn.isRoot){
+ return tn.allowChildren !== false ? "append" : false; // always append for root
+ }
+ var dragEl = n.ddel;
+ var t = Ext.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
+ var y = Ext.lib.Event.getPageY(e);
+ var noAppend = tn.allowChildren === false || tn.isLeaf();
+ if(this.appendOnly || tn.parentNode.allowChildren === false){
+ return noAppend ? false : "append";
+ }
+ var noBelow = false;
+ if(!this.allowParentInsert){
+ noBelow = tn.hasChildNodes() && tn.isExpanded();
+ }
+ var q = (b - t) / (noAppend ? 2 : 3);
+ if(y >= t && y < (t + q)){
+ return "above";
+ }else if(!noBelow && (noAppend || y >= b-q && y <= b)){
+ return "below";
+ }else{
+ return "append";
+ }
+ },
+
+ // private
+ onNodeEnter : function(n, dd, e, data){
+ this.cancelExpand();
+ },
+
+ onContainerOver : function(dd, e, data) {
+ if (this.allowContainerDrop && this.isValidDropPoint({ ddel: this.tree.getRootNode().ui.elNode, node: this.tree.getRootNode() }, "append", dd, e, data)) {
+ return this.dropAllowed;
+ }
+ return this.dropNotAllowed;
+ },
+
+ // private
+ onNodeOver : function(n, dd, e, data){
+ var pt = this.getDropPoint(e, n, dd);
+ var node = n.node;
+
+ // auto node expand check
+ if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){
+ this.queueExpand(node);
+ }else if(pt != "append"){
+ this.cancelExpand();
+ }
+
+ // set the insert point style on the target node
+ var returnCls = this.dropNotAllowed;
+ if(this.isValidDropPoint(n, pt, dd, e, data)){
+ if(pt){
+ var el = n.ddel;
+ var cls;
+ if(pt == "above"){
+ returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";
+ cls = "x-tree-drag-insert-above";
+ }else if(pt == "below"){
+ returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";
+ cls = "x-tree-drag-insert-below";
+ }else{
+ returnCls = "x-tree-drop-ok-append";
+ cls = "x-tree-drag-append";
+ }
+ if(this.lastInsertClass != cls){
+ Ext.fly(el).replaceClass(this.lastInsertClass, cls);
+ this.lastInsertClass = cls;
+ }
+ }
+ }
+ return returnCls;
+ },
+
+ // private
+ onNodeOut : function(n, dd, e, data){
+ this.cancelExpand();
+ this.removeDropIndicators(n);
+ },
+
+ // private
+ onNodeDrop : function(n, dd, e, data){
+ var point = this.getDropPoint(e, n, dd);
+ var targetNode = n.node;
+ targetNode.ui.startDrop();
+ if(!this.isValidDropPoint(n, point, dd, e, data)){
+ targetNode.ui.endDrop();
+ return false;
+ }
+ // first try to find the drop node
+ var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);
+ return this.processDrop(targetNode, data, point, dd, e, dropNode);
+ },
+
+ onContainerDrop : function(dd, e, data){
+ if (this.allowContainerDrop && this.isValidDropPoint({ ddel: this.tree.getRootNode().ui.elNode, node: this.tree.getRootNode() }, "append", dd, e, data)) {
+ var targetNode = this.tree.getRootNode();
+ targetNode.ui.startDrop();
+ var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, 'append', e) : null);
+ return this.processDrop(targetNode, data, 'append', dd, e, dropNode);
+ }
+ return false;
+ },
+
+ // private
+ processDrop: function(target, data, point, dd, e, dropNode){
+ var dropEvent = {
+ tree : this.tree,
+ target: target,
+ data: data,
+ point: point,
+ source: dd,
+ rawEvent: e,
+ dropNode: dropNode,
+ cancel: !dropNode,
+ dropStatus: false
+ };
+ var retval = this.tree.fireEvent("beforenodedrop", dropEvent);
+ if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){
+ target.ui.endDrop();
+ return dropEvent.dropStatus;
+ }
+
+ target = dropEvent.target;
+ if(point == 'append' && !target.isExpanded()){
+ target.expand(false, null, function(){
+ this.completeDrop(dropEvent);
+ }.createDelegate(this));
+ }else{
+ this.completeDrop(dropEvent);
+ }
+ return true;
+ },
+
+ // private
+ completeDrop : function(de){
+ var ns = de.dropNode, p = de.point, t = de.target;
+ if(!Ext.isArray(ns)){
+ ns = [ns];
+ }
+ var n;
+ for(var i = 0, len = ns.length; i < len; i++){
+ n = ns[i];
+ if(p == "above"){
+ t.parentNode.insertBefore(n, t);
+ }else if(p == "below"){
+ t.parentNode.insertBefore(n, t.nextSibling);
+ }else{
+ t.appendChild(n);
+ }
+ }
+ n.ui.focus();
+ if(Ext.enableFx && this.tree.hlDrop){
+ n.ui.highlight();
+ }
+ t.ui.endDrop();
+ this.tree.fireEvent("nodedrop", de);
+ },
+
+ // private
+ afterNodeMoved : function(dd, data, e, targetNode, dropNode){
+ if(Ext.enableFx && this.tree.hlDrop){
+ dropNode.ui.focus();
+ dropNode.ui.highlight();
+ }
+ this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);
+ },
+
+ // private
+ getTree : function(){
+ return this.tree;
+ },
+
+ // private
+ removeDropIndicators : function(n){
+ if(n && n.ddel){
+ var el = n.ddel;
+ Ext.fly(el).removeClass([
+ "x-tree-drag-insert-above",
+ "x-tree-drag-insert-below",
+ "x-tree-drag-append"]);
+ this.lastInsertClass = "_noclass";
+ }
+ },
+
+ // private
+ beforeDragDrop : function(target, e, id){
+ this.cancelExpand();
+ return true;
+ },
+
+ // private
+ afterRepair : function(data){
+ if(data && Ext.enableFx){
+ data.node.ui.highlight();
+ }
+ this.hideProxy();
+ }
+});
+
+}/**
+ * @class Ext.tree.TreeDragZone
+ * @extends Ext.dd.DragZone
+ * @constructor
+ * @param {String/HTMLElement/Element} tree The {@link Ext.tree.TreePanel} for which to enable dragging
+ * @param {Object} config
+ */
+if(Ext.dd.DragZone){
+Ext.tree.TreeDragZone = function(tree, config){
+ Ext.tree.TreeDragZone.superclass.constructor.call(this, tree.innerCt, config);
+ /**
+ * The TreePanel for this drag zone
+ * @type Ext.tree.TreePanel
+ * @property
+ */
+ this.tree = tree;
+};
+
+Ext.extend(Ext.tree.TreeDragZone, Ext.dd.DragZone, {
+ /**
+ * @cfg {String} ddGroup
+ * A named drag drop group to which this object belongs. If a group is specified, then this object will only
+ * interact with other drag drop objects in the same group (defaults to 'TreeDD').
+ */
+ ddGroup : "TreeDD",
+
+ // private
+ onBeforeDrag : function(data, e){
+ var n = data.node;
+ return n && n.draggable && !n.disabled;
+ },
+
+ // private
+ onInitDrag : function(e){
+ var data = this.dragData;
+ this.tree.getSelectionModel().select(data.node);
+ this.tree.eventModel.disable();
+ this.proxy.update("");
+ data.node.ui.appendDDGhost(this.proxy.ghost.dom);
+ this.tree.fireEvent("startdrag", this.tree, data.node, e);
+ },
+
+ // private
+ getRepairXY : function(e, data){
+ return data.node.ui.getDDRepairXY();
+ },
+
+ // private
+ onEndDrag : function(data, e){
+ this.tree.eventModel.enable.defer(100, this.tree.eventModel);
+ this.tree.fireEvent("enddrag", this.tree, data.node, e);
+ },
+
+ // private
+ onValidDrop : function(dd, e, id){
+ this.tree.fireEvent("dragdrop", this.tree, this.dragData.node, dd, e);
+ this.hideProxy();
+ },
+
+ // private
+ beforeInvalidDrop : function(e, id){
+ // this scrolls the original position back into view
+ var sm = this.tree.getSelectionModel();
+ sm.clearSelections();
+ sm.select(this.dragData.node);
+ },
+
+ // private
+ afterRepair : function(){
+ if (Ext.enableFx && this.tree.hlDrop) {
+ Ext.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");
+ }
+ this.dragging = false;
+ }
+});
}/**
* @class Ext.tree.TreeEditor
* @extends Ext.Editor
git.ithinksw.org / extjs.git / blobdiff