4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
13 * @class Roo.tree.TreeNode
14 * @extends Roo.data.Node
15 * @cfg {String} text The text for this node
16 * @cfg {Boolean} expanded true to start the node expanded
17 * @cfg {Boolean} allowDrag false to make this node undraggable if DD is on (defaults to true)
18 * @cfg {Boolean} allowDrop false if this node cannot be drop on
19 * @cfg {Boolean} disabled true to start the node disabled
20 * @cfg {String} icon The path to an icon for the node. The preferred way to do this
21 * is to use the cls or iconCls attributes and add the icon via a CSS background image.
22 * @cfg {String} cls A css class to be added to the node
23 * @cfg {String} iconCls A css class to be added to the nodes icon element for applying css background images
24 * @cfg {String} href URL of the link used for the node (defaults to #)
25 * @cfg {String} hrefTarget target frame for the link
26 * @cfg {String} qtip An Ext QuickTip for the node
27 * @cfg {String} qtipCfg An Ext QuickTip config for the node (used instead of qtip)
28 * @cfg {Boolean} singleClickExpand True for single click expand on this node
29 * @cfg {Function} uiProvider A UI <b>class</b> to use for this node (defaults to Roo.tree.TreeNodeUI)
30 * @cfg {Boolean} checked True to render a checked checkbox for this node, false to render an unchecked checkbox
31 * (defaults to undefined with no checkbox rendered)
33 * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
35 Roo.tree.TreeNode = function(attributes){
36 attributes = attributes || {};
37 if(typeof attributes == "string"){
38 attributes = {text: attributes};
40 this.childrenRendered = false;
41 this.rendered = false;
42 Roo.tree.TreeNode.superclass.constructor.call(this, attributes);
43 this.expanded = attributes.expanded === true;
44 this.isTarget = attributes.isTarget !== false;
45 this.draggable = attributes.draggable !== false && attributes.allowDrag !== false;
46 this.allowChildren = attributes.allowChildren !== false && attributes.allowDrop !== false;
49 * Read-only. The text for this node. To change it use setText().
52 this.text = attributes.text;
54 * True if this node is disabled.
57 this.disabled = attributes.disabled === true;
62 * Fires when the text for this node is changed
63 * @param {Node} this This node
64 * @param {String} text The new text
65 * @param {String} oldText The old text
70 * Fires before this node is expanded, return false to cancel.
71 * @param {Node} this This node
72 * @param {Boolean} deep
73 * @param {Boolean} anim
75 "beforeexpand" : true,
77 * @event beforecollapse
78 * Fires before this node is collapsed, return false to cancel.
79 * @param {Node} this This node
80 * @param {Boolean} deep
81 * @param {Boolean} anim
83 "beforecollapse" : true,
86 * Fires when this node is expanded
87 * @param {Node} this This node
91 * @event disabledchange
92 * Fires when the disabled status of this node changes
93 * @param {Node} this This node
94 * @param {Boolean} disabled
96 "disabledchange" : true,
99 * Fires when this node is collapsed
100 * @param {Node} this This node
105 * Fires before click processing. Return false to cancel the default action.
106 * @param {Node} this This node
107 * @param {Roo.EventObject} e The event object
112 * Fires when a node with a checkbox's checked property changes
113 * @param {Node} this This node
114 * @param {Boolean} checked
119 * Fires when this node is clicked
120 * @param {Node} this This node
121 * @param {Roo.EventObject} e The event object
126 * Fires when this node is double clicked
127 * @param {Node} this This node
128 * @param {Roo.EventObject} e The event object
133 * Fires when this node is right clicked
134 * @param {Node} this This node
135 * @param {Roo.EventObject} e The event object
139 * @event beforechildrenrendered
140 * Fires right before the child nodes for this node are rendered
141 * @param {Node} this This node
143 "beforechildrenrendered":true
146 var uiClass = this.attributes.uiProvider || Roo.tree.TreeNodeUI;
149 * Read-only. The UI for this node
152 this.ui = new uiClass(this);
154 // finally support items[]
155 if (typeof(this.attributes.items) == 'undefined' || !this.attributes.items) {
160 Roo.each(this.attributes.items, function(c) {
161 this.appendChild(Roo.factory(c,Roo.Tree));
163 delete this.attributes.items;
168 Roo.extend(Roo.tree.TreeNode, Roo.data.Node, {
169 preventHScroll: true,
171 * Returns true if this node is expanded
174 isExpanded : function(){
175 return this.expanded;
179 * Returns the UI object for this node
180 * @return {TreeNodeUI}
187 setFirstChild : function(node){
188 var of = this.firstChild;
189 Roo.tree.TreeNode.superclass.setFirstChild.call(this, node);
190 if(this.childrenRendered && of && node != of){
191 of.renderIndent(true, true);
194 this.renderIndent(true, true);
199 setLastChild : function(node){
200 var ol = this.lastChild;
201 Roo.tree.TreeNode.superclass.setLastChild.call(this, node);
202 if(this.childrenRendered && ol && node != ol){
203 ol.renderIndent(true, true);
206 this.renderIndent(true, true);
210 // these methods are overridden to provide lazy rendering support
212 appendChild : function()
214 var node = Roo.tree.TreeNode.superclass.appendChild.apply(this, arguments);
215 if(node && this.childrenRendered){
218 this.ui.updateExpandIcon();
223 removeChild : function(node){
224 this.ownerTree.getSelectionModel().unselect(node);
225 Roo.tree.TreeNode.superclass.removeChild.apply(this, arguments);
226 // if it's been rendered remove dom node
227 if(this.childrenRendered){
230 if(this.childNodes.length < 1){
231 this.collapse(false, false);
233 this.ui.updateExpandIcon();
235 if(!this.firstChild) {
236 this.childrenRendered = false;
242 insertBefore : function(node, refNode){
243 var newNode = Roo.tree.TreeNode.superclass.insertBefore.apply(this, arguments);
244 if(newNode && refNode && this.childrenRendered){
247 this.ui.updateExpandIcon();
252 * Sets the text for this node
253 * @param {String} text
255 setText : function(text){
256 var oldText = this.text;
258 this.attributes.text = text;
259 if(this.rendered){ // event without subscribing
260 this.ui.onTextChange(this, text, oldText);
262 this.fireEvent("textchange", this, text, oldText);
266 * Triggers selection of this node
269 this.getOwnerTree().getSelectionModel().select(this);
273 * Triggers deselection of this node
275 unselect : function(){
276 this.getOwnerTree().getSelectionModel().unselect(this);
280 * Returns true if this node is selected
283 isSelected : function(){
284 return this.getOwnerTree().getSelectionModel().isSelected(this);
289 * @param {Boolean} deep (optional) True to expand all children as well
290 * @param {Boolean} anim (optional) false to cancel the default animation
291 * @param {Function} callback (optional) A callback to be called when
292 * expanding this node completes (does not wait for deep expand to complete).
293 * Called with 1 parameter, this node.
295 expand : function(deep, anim, callback){
297 if(this.fireEvent("beforeexpand", this, deep, anim) === false){
300 if(!this.childrenRendered){
301 this.renderChildren();
303 this.expanded = true;
305 if(!this.isHiddenRoot() && (this.getOwnerTree() && this.getOwnerTree().animate && anim !== false) || anim){
306 this.ui.animExpand(function(){
307 this.fireEvent("expand", this);
308 if(typeof callback == "function"){
312 this.expandChildNodes(true);
314 }.createDelegate(this));
318 this.fireEvent("expand", this);
319 if(typeof callback == "function"){
324 if(typeof callback == "function"){
329 this.expandChildNodes(true);
333 isHiddenRoot : function(){
334 return this.isRoot && !this.getOwnerTree().rootVisible;
338 * Collapse this node.
339 * @param {Boolean} deep (optional) True to collapse all children as well
340 * @param {Boolean} anim (optional) false to cancel the default animation
342 collapse : function(deep, anim){
343 if(this.expanded && !this.isHiddenRoot()){
344 if(this.fireEvent("beforecollapse", this, deep, anim) === false){
347 this.expanded = false;
348 if((this.getOwnerTree().animate && anim !== false) || anim){
349 this.ui.animCollapse(function(){
350 this.fireEvent("collapse", this);
352 this.collapseChildNodes(true);
354 }.createDelegate(this));
358 this.fireEvent("collapse", this);
362 var cs = this.childNodes;
363 for(var i = 0, len = cs.length; i < len; i++) {
364 cs[i].collapse(true, false);
370 delayedExpand : function(delay){
371 if(!this.expandProcId){
372 this.expandProcId = this.expand.defer(delay, this);
377 cancelExpand : function(){
378 if(this.expandProcId){
379 clearTimeout(this.expandProcId);
381 this.expandProcId = false;
385 * Toggles expanded/collapsed state of the node
396 * Ensures all parent nodes are expanded
398 ensureVisible : function(callback){
399 var tree = this.getOwnerTree();
400 tree.expandPath(this.parentNode.getPath(), false, function(){
401 tree.getTreeEl().scrollChildIntoView(this.ui.anchor);
402 Roo.callback(callback);
403 }.createDelegate(this));
407 * Expand all child nodes
408 * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes
410 expandChildNodes : function(deep){
411 var cs = this.childNodes;
412 for(var i = 0, len = cs.length; i < len; i++) {
418 * Collapse all child nodes
419 * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
421 collapseChildNodes : function(deep){
422 var cs = this.childNodes;
423 for(var i = 0, len = cs.length; i < len; i++) {
424 cs[i].collapse(deep);
431 disable : function(){
432 this.disabled = true;
434 if(this.rendered && this.ui.onDisableChange){ // event without subscribing
435 this.ui.onDisableChange(this, true);
437 this.fireEvent("disabledchange", this, true);
444 this.disabled = false;
445 if(this.rendered && this.ui.onDisableChange){ // event without subscribing
446 this.ui.onDisableChange(this, false);
448 this.fireEvent("disabledchange", this, false);
452 renderChildren : function(suppressEvent){
453 if(suppressEvent !== false){
454 this.fireEvent("beforechildrenrendered", this);
456 var cs = this.childNodes;
457 for(var i = 0, len = cs.length; i < len; i++){
460 this.childrenRendered = true;
464 sort : function(fn, scope){
465 Roo.tree.TreeNode.superclass.sort.apply(this, arguments);
466 if(this.childrenRendered){
467 var cs = this.childNodes;
468 for(var i = 0, len = cs.length; i < len; i++){
475 render : function(bulkRender){
476 this.ui.render(bulkRender);
478 this.rendered = true;
480 this.expanded = false;
481 this.expand(false, false);
487 renderIndent : function(deep, refresh){
489 this.ui.childIndent = null;
491 this.ui.renderIndent();
492 if(deep === true && this.childrenRendered){
493 var cs = this.childNodes;
494 for(var i = 0, len = cs.length; i < len; i++){
495 cs[i].renderIndent(true, refresh);