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:
-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:
-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 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 (this 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 (this 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 true.
- * @param {Function} fn A function which must return true if the passed Node is the required Node.
- * @param {Object} scope (optional) The scope (this 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 (this 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 class 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 {@link #setText}.
- * @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 (this 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 (this 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 (this 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();
- }
- },
-
- //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);
- /**
- * @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
- */
-};
-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 currently loading
- * @return {Boolean}
- */
- 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);
- }
- },
-
- /**
- * Trigger a reload for this node
- * @param {Function} callback
- * @param {Object} scope (optional) The scope (this 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.
- * 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.
- *
- * This class provides access to the user interface components of an Ext TreeNode, through
- * {@link Ext.tree.TreeNode#getUI}
- */
-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());
- }
- },
-
- // private
- beforeLoad : function(){
- this.addClass("x-tree-node-loading");
- },
-
- // 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){
- 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);
- }
- },
-
-/**
- * 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.holder = document.createElement("div");
- this.holder.appendChild(this.wrap);
- }
- },
-
- // 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{
- e.stopEvent();
- }
- },
-
- // private
- onDblClick : function(e){
- e.preventDefault();
- if(this.disabled){
- return;
- }
- 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);
- }
- },
-
- 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();
- }
- },
-
- // 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{
- try{
- var noscroll = this.node.getOwnerTree().getTreeEl().dom;
- var l = noscroll.scrollLeft;
- this.anchor.focus();
- noscroll.scrollLeft = l;
- }catch(e){}
- }
- },
-
-/**
- * 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();
- }
- },
-
- // 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;
- }
- 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 <li>.
- */
- 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);
- }
- }
- },
-
- // private
- 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 = ['
- * 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.
- */
-Ext.tree.RootTreeNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
- // private
- render : function(){
- if(!this.rendered){
- var targetNode = this.node.ownerTree.innerCt.dom;
- this.node.expanded = true;
- targetNode.innerHTML = '
- [{
- id: 1,
- text: 'A leaf Node',
- leaf: true
- },{
- id: 2,
- text: 'A folder Node',
- children: [{
- id: 3,
- text: 'A child Node',
- leaf: true
- }]
- }]
-
- myTreeLoader.on("beforeload", function(treeLoader, node) {
- this.baseParams.category = node.attributes.category;
- }, this);
-
-nodeParameter: 'node',
-paramOrder: ['param1','param2','param3']
-paramOrder: 'node param1 param2 param3'
-paramOrder: 'param1,node,param2,param3'
-paramOrder: 'param1|param2|param|node'
- this reference) in which the callback is executed.
- * defaults to the loaded TreeNode.
- */
- 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, []);
- }
- },
-
- 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
- });
- }
- },
-
- // private
- runCallback: function(cb, scope, args){
- if(Ext.isFunction(cb)){
- cb.apply(scope, args);
- }
- },
-
- isLoading : function(){
- return !!this.transId;
- },
-
- abort : function(){
- if(this.isLoading()){
- Ext.Ajax.abort(this.transId);
- }
- },
-
- /**
- * Override this function for custom TreeNode node implementation, or to - * modify the attributes at creation time.
- * Example:
-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);
- }
- }),
- ...
-});
-this reference) in which the function is executed. Defaults to the current Node.
- */
- filterBy : function(fn, scope, startNode){
- startNode = startNode || this.tree.root;
- if(this.autoClear){
- this.clear();
- }
- var af = this.filtered, rv = this.reverse;
- var f = function(n){
- if(n == startNode){
- return true;
- }
- if(af[n.id]){
- return false;
- }
- var m = fn.call(scope || n, n);
- if(!m || rv){
- af[n.id] = n;
- n.ui.hide();
- return false;
- }
- return true;
- };
- startNode.cascade(f);
- if(this.remove){
- for(var id in af){
- if(typeof id != "function"){
- var n = af[id];
- if(n && n.parentNode){
- n.parentNode.removeChild(n);
- }
- }
- }
- }
- },
-
- /**
- * Clears the current filter. Note: with the "remove" option
- * set a filter cannot be cleared.
- */
- clear : function(){
- var t = this.tree;
- var af = this.filtered;
- for(var id in af){
- if(typeof id != "function"){
- var n = af[id];
- if(n){
- n.ui.show();
- }
- }
- }
- this.filtered = {};
- }
-};
-/**
- * @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:
-new Ext.tree.TreeSorter(myTree, {
- folderSort: true,
- dir: "desc",
- sortType: function(node) {
- // sort by a custom, typed attribute:
- return parseInt(node.id, 10);
- }
-});
-