/** * @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); // 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(); } }, destroy : function(){ this.unselect(true); Ext.tree.TreeNode.superclass.destroy.call(this); Ext.destroy(this.ui, this.loader); this.ui = this.loader = null; }, // private onIdChange : function(id){ this.ui.onIdChange(id); } }); Ext.tree.TreePanel.nodeTypes.node = Ext.tree.TreeNode;