/** - * @class Ext.tree.TreePanel - * @extends Ext.Panel - *The TreePanel provides tree-structured UI representation of tree-structured data.
- *{@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.
- *A TreePanel must have a {@link #root} node before it is rendered. This may either be - * specified using the {@link #root} config option, or using the {@link #setRootNode} method. - *
An example of tree rendered to an existing div:
- *-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(); - *The example above would work with a data packet similar to this:
- *-[{ - "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" -}] - *An example of tree within a Viewport:
- * - * @cfg {Ext.tree.TreeNode} root The root node for the tree. - * @cfg {Boolean} rootVisible false to hide the root node (defaults to true) - * @cfg {Boolean} lines false to disable tree lines (defaults to true) - * @cfg {Boolean} enableDD true to enable drag and drop - * @cfg {Boolean} enableDrag true to enable just drag - * @cfg {Boolean} enableDrop true 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 true if the tree should only allow append drops (use for trees which are sorted) - * @cfg {Boolean} ddScroll true to enable body scrolling - * @cfg {Boolean} containerScroll true to register this container with ScrollManager - * @cfg {Boolean} hlDrop false 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 'C3DAF9') - * @cfg {Boolean} animate true to enable animated expand/collapse (defaults to the value of {@link Ext#enableFx}) - * @cfg {Boolean} singleExpand true 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 false 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 '/') - * @cfg {Boolean} useArrows true to use Vista-style arrows in the tree (defaults to false) - * @cfg {String} requestMethod The HTTP request method for loading data (defaults to the value of {@link Ext.Ajax#method}). - * - * @constructor - * @param {Object} config - * @xtype treepanel - */ -Ext.tree.TreePanel = Ext.extend(Ext.Panel, { - rootVisible : true, - animate : Ext.enableFx, - lines : true, - enableDD : false, - hlDrop : Ext.enableFx, - pathSeparator : '/', - - /** - * @cfg {Array} bubbleEvents - *-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 ... - }] -}); -An array of events that, when fired, should be bubbled to any parent container. - * See {@link Ext.util.Observable#enableBubble}. - * Defaults to []. - */ - 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:
- * @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:-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()); - } - } -}); -
- *
/*! + * Ext JS Library 3.2.1 + * Copyright(c) 2006-2010 Ext JS, Inc. + * licensing@extjs.com + * http://www.extjs.com/license + */ +/** + * @class Ext.tree.TreePanel + * @extends Ext.Panel + *The TreePanel provides tree-structured UI representation of tree-structured data.
+ *{@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.
+ *A TreePanel must have a {@link #root} node before it is rendered. This may either be + * specified using the {@link #root} config option, or using the {@link #setRootNode} method. + *
An example of tree rendered to an existing div:
+ *+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(); + *The example above would work with a data packet similar to this:
+ *+[{ + "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" +}] + *An example of tree within a Viewport:
+ * + * @cfg {Ext.tree.TreeNode} root The root node for the tree. + * @cfg {Boolean} rootVisible false to hide the root node (defaults to true) + * @cfg {Boolean} lines false to disable tree lines (defaults to true) + * @cfg {Boolean} enableDD true to enable drag and drop + * @cfg {Boolean} enableDrag true to enable just drag + * @cfg {Boolean} enableDrop true 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 true if the tree should only allow append drops (use for trees which are sorted) + * @cfg {Boolean} ddScroll true to enable body scrolling + * @cfg {Boolean} containerScroll true to register this container with ScrollManager + * @cfg {Boolean} hlDrop false 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 'C3DAF9') + * @cfg {Boolean} animate true to enable animated expand/collapse (defaults to the value of {@link Ext#enableFx}) + * @cfg {Boolean} singleExpand true 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 false 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 '/') + * @cfg {Boolean} useArrows true to use Vista-style arrows in the tree (defaults to false) + * @cfg {String} requestMethod The HTTP request method for loading data (defaults to the value of {@link Ext.Ajax#method}). + * + * @constructor + * @param {Object} config + * @xtype treepanel + */ +Ext.tree.TreePanel = Ext.extend(Ext.Panel, { + rootVisible : true, + animate : Ext.enableFx, + lines : true, + enableDD : false, + hlDrop : Ext.enableFx, + pathSeparator : '/', + + /** + * @cfg {Array} bubbleEvents + *+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 ... + }] +}); +An array of events that, when fired, should be bubbled to any parent container. + * See {@link Ext.util.Observable#enableBubble}. + * Defaults to []. + */ + 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:
+ * @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:+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()); + } + } +}); +
+ *