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.attribute.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;
304 if(!this.isHiddenRoot() && (this.getOwnerTree().animate && anim !== false) || anim){
305 this.ui.animExpand(function(){
306 this.fireEvent("expand", this);
307 if(typeof callback == "function"){
311 this.expandChildNodes(true);
313 }.createDelegate(this));
317 this.fireEvent("expand", this);
318 if(typeof callback == "function"){
323 if(typeof callback == "function"){
328 this.expandChildNodes(true);
332 isHiddenRoot : function(){
333 return this.isRoot && !this.getOwnerTree().rootVisible;
337 * Collapse this node.
338 * @param {Boolean} deep (optional) True to collapse all children as well
339 * @param {Boolean} anim (optional) false to cancel the default animation
341 collapse : function(deep, anim){
342 if(this.expanded && !this.isHiddenRoot()){
343 if(this.fireEvent("beforecollapse", this, deep, anim) === false){
346 this.expanded = false;
347 if((this.getOwnerTree().animate && anim !== false) || anim){
348 this.ui.animCollapse(function(){
349 this.fireEvent("collapse", this);
351 this.collapseChildNodes(true);
353 }.createDelegate(this));
357 this.fireEvent("collapse", this);
361 var cs = this.childNodes;
362 for(var i = 0, len = cs.length; i < len; i++) {
363 cs[i].collapse(true, false);
369 delayedExpand : function(delay){
370 if(!this.expandProcId){
371 this.expandProcId = this.expand.defer(delay, this);
376 cancelExpand : function(){
377 if(this.expandProcId){
378 clearTimeout(this.expandProcId);
380 this.expandProcId = false;
384 * Toggles expanded/collapsed state of the node
395 * Ensures all parent nodes are expanded
397 ensureVisible : function(callback){
398 var tree = this.getOwnerTree();
399 tree.expandPath(this.parentNode.getPath(), false, function(){
400 tree.getTreeEl().scrollChildIntoView(this.ui.anchor);
401 Roo.callback(callback);
402 }.createDelegate(this));
406 * Expand all child nodes
407 * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes
409 expandChildNodes : function(deep){
410 var cs = this.childNodes;
411 for(var i = 0, len = cs.length; i < len; i++) {
417 * Collapse all child nodes
418 * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
420 collapseChildNodes : function(deep){
421 var cs = this.childNodes;
422 for(var i = 0, len = cs.length; i < len; i++) {
423 cs[i].collapse(deep);
430 disable : function(){
431 this.disabled = true;
433 if(this.rendered && this.ui.onDisableChange){ // event without subscribing
434 this.ui.onDisableChange(this, true);
436 this.fireEvent("disabledchange", this, true);
443 this.disabled = false;
444 if(this.rendered && this.ui.onDisableChange){ // event without subscribing
445 this.ui.onDisableChange(this, false);
447 this.fireEvent("disabledchange", this, false);
451 renderChildren : function(suppressEvent){
452 if(suppressEvent !== false){
453 this.fireEvent("beforechildrenrendered", this);
455 var cs = this.childNodes;
456 for(var i = 0, len = cs.length; i < len; i++){
459 this.childrenRendered = true;
463 sort : function(fn, scope){
464 Roo.tree.TreeNode.superclass.sort.apply(this, arguments);
465 if(this.childrenRendered){
466 var cs = this.childNodes;
467 for(var i = 0, len = cs.length; i < len; i++){
474 render : function(bulkRender){
475 this.ui.render(bulkRender);
477 this.rendered = true;
479 this.expanded = false;
480 this.expand(false, false);
486 renderIndent : function(deep, refresh){
488 this.ui.childIndent = null;
490 this.ui.renderIndent();
491 if(deep === true && this.childrenRendered){
492 var cs = this.childNodes;
493 for(var i = 0, len = cs.length; i < len; i++){
494 cs[i].renderIndent(true, refresh);