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) {
159 Roo.each(this.attributes.items, function(c) {
160 this.appendChild(Roo.factory(c,Roo.Tree));
166 Roo.extend(Roo.tree.TreeNode, Roo.data.Node, {
167 preventHScroll: true,
169 * Returns true if this node is expanded
172 isExpanded : function(){
173 return this.expanded;
177 * Returns the UI object for this node
178 * @return {TreeNodeUI}
185 setFirstChild : function(node){
186 var of = this.firstChild;
187 Roo.tree.TreeNode.superclass.setFirstChild.call(this, node);
188 if(this.childrenRendered && of && node != of){
189 of.renderIndent(true, true);
192 this.renderIndent(true, true);
197 setLastChild : function(node){
198 var ol = this.lastChild;
199 Roo.tree.TreeNode.superclass.setLastChild.call(this, node);
200 if(this.childrenRendered && ol && node != ol){
201 ol.renderIndent(true, true);
204 this.renderIndent(true, true);
208 // these methods are overridden to provide lazy rendering support
210 appendChild : function()
212 var node = Roo.tree.TreeNode.superclass.appendChild.apply(this, arguments);
213 if(node && this.childrenRendered){
216 this.ui.updateExpandIcon();
221 removeChild : function(node){
222 this.ownerTree.getSelectionModel().unselect(node);
223 Roo.tree.TreeNode.superclass.removeChild.apply(this, arguments);
224 // if it's been rendered remove dom node
225 if(this.childrenRendered){
228 if(this.childNodes.length < 1){
229 this.collapse(false, false);
231 this.ui.updateExpandIcon();
233 if(!this.firstChild) {
234 this.childrenRendered = false;
240 insertBefore : function(node, refNode){
241 var newNode = Roo.tree.TreeNode.superclass.insertBefore.apply(this, arguments);
242 if(newNode && refNode && this.childrenRendered){
245 this.ui.updateExpandIcon();
250 * Sets the text for this node
251 * @param {String} text
253 setText : function(text){
254 var oldText = this.text;
256 this.attributes.text = text;
257 if(this.rendered){ // event without subscribing
258 this.ui.onTextChange(this, text, oldText);
260 this.fireEvent("textchange", this, text, oldText);
264 * Triggers selection of this node
267 this.getOwnerTree().getSelectionModel().select(this);
271 * Triggers deselection of this node
273 unselect : function(){
274 this.getOwnerTree().getSelectionModel().unselect(this);
278 * Returns true if this node is selected
281 isSelected : function(){
282 return this.getOwnerTree().getSelectionModel().isSelected(this);
287 * @param {Boolean} deep (optional) True to expand all children as well
288 * @param {Boolean} anim (optional) false to cancel the default animation
289 * @param {Function} callback (optional) A callback to be called when
290 * expanding this node completes (does not wait for deep expand to complete).
291 * Called with 1 parameter, this node.
293 expand : function(deep, anim, callback){
295 if(this.fireEvent("beforeexpand", this, deep, anim) === false){
298 if(!this.childrenRendered){
299 this.renderChildren();
301 this.expanded = true;
302 if(!this.isHiddenRoot() && (this.getOwnerTree().animate && anim !== false) || anim){
303 this.ui.animExpand(function(){
304 this.fireEvent("expand", this);
305 if(typeof callback == "function"){
309 this.expandChildNodes(true);
311 }.createDelegate(this));
315 this.fireEvent("expand", this);
316 if(typeof callback == "function"){
321 if(typeof callback == "function"){
326 this.expandChildNodes(true);
330 isHiddenRoot : function(){
331 return this.isRoot && !this.getOwnerTree().rootVisible;
335 * Collapse this node.
336 * @param {Boolean} deep (optional) True to collapse all children as well
337 * @param {Boolean} anim (optional) false to cancel the default animation
339 collapse : function(deep, anim){
340 if(this.expanded && !this.isHiddenRoot()){
341 if(this.fireEvent("beforecollapse", this, deep, anim) === false){
344 this.expanded = false;
345 if((this.getOwnerTree().animate && anim !== false) || anim){
346 this.ui.animCollapse(function(){
347 this.fireEvent("collapse", this);
349 this.collapseChildNodes(true);
351 }.createDelegate(this));
355 this.fireEvent("collapse", this);
359 var cs = this.childNodes;
360 for(var i = 0, len = cs.length; i < len; i++) {
361 cs[i].collapse(true, false);
367 delayedExpand : function(delay){
368 if(!this.expandProcId){
369 this.expandProcId = this.expand.defer(delay, this);
374 cancelExpand : function(){
375 if(this.expandProcId){
376 clearTimeout(this.expandProcId);
378 this.expandProcId = false;
382 * Toggles expanded/collapsed state of the node
393 * Ensures all parent nodes are expanded
395 ensureVisible : function(callback){
396 var tree = this.getOwnerTree();
397 tree.expandPath(this.parentNode.getPath(), false, function(){
398 tree.getTreeEl().scrollChildIntoView(this.ui.anchor);
399 Roo.callback(callback);
400 }.createDelegate(this));
404 * Expand all child nodes
405 * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes
407 expandChildNodes : function(deep){
408 var cs = this.childNodes;
409 for(var i = 0, len = cs.length; i < len; i++) {
415 * Collapse all child nodes
416 * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
418 collapseChildNodes : function(deep){
419 var cs = this.childNodes;
420 for(var i = 0, len = cs.length; i < len; i++) {
421 cs[i].collapse(deep);
428 disable : function(){
429 this.disabled = true;
431 if(this.rendered && this.ui.onDisableChange){ // event without subscribing
432 this.ui.onDisableChange(this, true);
434 this.fireEvent("disabledchange", this, true);
441 this.disabled = false;
442 if(this.rendered && this.ui.onDisableChange){ // event without subscribing
443 this.ui.onDisableChange(this, false);
445 this.fireEvent("disabledchange", this, false);
449 renderChildren : function(suppressEvent){
450 if(suppressEvent !== false){
451 this.fireEvent("beforechildrenrendered", this);
453 var cs = this.childNodes;
454 for(var i = 0, len = cs.length; i < len; i++){
457 this.childrenRendered = true;
461 sort : function(fn, scope){
462 Roo.tree.TreeNode.superclass.sort.apply(this, arguments);
463 if(this.childrenRendered){
464 var cs = this.childNodes;
465 for(var i = 0, len = cs.length; i < len; i++){
472 render : function(bulkRender){
473 this.ui.render(bulkRender);
475 this.rendered = true;
477 this.expanded = false;
478 this.expand(false, false);
484 renderIndent : function(deep, refresh){
486 this.ui.childIndent = null;
488 this.ui.renderIndent();
489 if(deep === true && this.childrenRendered){
490 var cs = this.childNodes;
491 for(var i = 0, len = cs.length; i < len; i++){
492 cs[i].renderIndent(true, refresh);