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 Roo.extend(Roo.tree.TreeNode, Roo.data.Node, {
155 preventHScroll: true,
157 * Returns true if this node is expanded
160 isExpanded : function(){
161 return this.expanded;
165 * Returns the UI object for this node
166 * @return {TreeNodeUI}
173 setFirstChild : function(node){
174 var of = this.firstChild;
175 Roo.tree.TreeNode.superclass.setFirstChild.call(this, node);
176 if(this.childrenRendered && of && node != of){
177 of.renderIndent(true, true);
180 this.renderIndent(true, true);
185 setLastChild : function(node){
186 var ol = this.lastChild;
187 Roo.tree.TreeNode.superclass.setLastChild.call(this, node);
188 if(this.childrenRendered && ol && node != ol){
189 ol.renderIndent(true, true);
192 this.renderIndent(true, true);
196 // these methods are overridden to provide lazy rendering support
198 appendChild : function(){
199 var node = Roo.tree.TreeNode.superclass.appendChild.apply(this, arguments);
200 if(node && this.childrenRendered){
203 this.ui.updateExpandIcon();
208 removeChild : function(node){
209 this.ownerTree.getSelectionModel().unselect(node);
210 Roo.tree.TreeNode.superclass.removeChild.apply(this, arguments);
211 // if it's been rendered remove dom node
212 if(this.childrenRendered){
215 if(this.childNodes.length < 1){
216 this.collapse(false, false);
218 this.ui.updateExpandIcon();
220 if(!this.firstChild) {
221 this.childrenRendered = false;
227 insertBefore : function(node, refNode){
228 var newNode = Roo.tree.TreeNode.superclass.insertBefore.apply(this, arguments);
229 if(newNode && refNode && this.childrenRendered){
232 this.ui.updateExpandIcon();
237 * Sets the text for this node
238 * @param {String} text
240 setText : function(text){
241 var oldText = this.text;
243 this.attributes.text = text;
244 if(this.rendered){ // event without subscribing
245 this.ui.onTextChange(this, text, oldText);
247 this.fireEvent("textchange", this, text, oldText);
251 * Triggers selection of this node
254 this.getOwnerTree().getSelectionModel().select(this);
258 * Triggers deselection of this node
260 unselect : function(){
261 this.getOwnerTree().getSelectionModel().unselect(this);
265 * Returns true if this node is selected
268 isSelected : function(){
269 return this.getOwnerTree().getSelectionModel().isSelected(this);
274 * @param {Boolean} deep (optional) True to expand all children as well
275 * @param {Boolean} anim (optional) false to cancel the default animation
276 * @param {Function} callback (optional) A callback to be called when
277 * expanding this node completes (does not wait for deep expand to complete).
278 * Called with 1 parameter, this node.
280 expand : function(deep, anim, callback){
282 if(this.fireEvent("beforeexpand", this, deep, anim) === false){
285 if(!this.childrenRendered){
286 this.renderChildren();
288 this.expanded = true;
289 if(!this.isHiddenRoot() && (this.getOwnerTree().animate && anim !== false) || anim){
290 this.ui.animExpand(function(){
291 this.fireEvent("expand", this);
292 if(typeof callback == "function"){
296 this.expandChildNodes(true);
298 }.createDelegate(this));
302 this.fireEvent("expand", this);
303 if(typeof callback == "function"){
308 if(typeof callback == "function"){
313 this.expandChildNodes(true);
317 isHiddenRoot : function(){
318 return this.isRoot && !this.getOwnerTree().rootVisible;
322 * Collapse this node.
323 * @param {Boolean} deep (optional) True to collapse all children as well
324 * @param {Boolean} anim (optional) false to cancel the default animation
326 collapse : function(deep, anim){
327 if(this.expanded && !this.isHiddenRoot()){
328 if(this.fireEvent("beforecollapse", this, deep, anim) === false){
331 this.expanded = false;
332 if((this.getOwnerTree().animate && anim !== false) || anim){
333 this.ui.animCollapse(function(){
334 this.fireEvent("collapse", this);
336 this.collapseChildNodes(true);
338 }.createDelegate(this));
342 this.fireEvent("collapse", this);
346 var cs = this.childNodes;
347 for(var i = 0, len = cs.length; i < len; i++) {
348 cs[i].collapse(true, false);
354 delayedExpand : function(delay){
355 if(!this.expandProcId){
356 this.expandProcId = this.expand.defer(delay, this);
361 cancelExpand : function(){
362 if(this.expandProcId){
363 clearTimeout(this.expandProcId);
365 this.expandProcId = false;
369 * Toggles expanded/collapsed state of the node
380 * Ensures all parent nodes are expanded
382 ensureVisible : function(callback){
383 var tree = this.getOwnerTree();
384 tree.expandPath(this.parentNode.getPath(), false, function(){
385 tree.getTreeEl().scrollChildIntoView(this.ui.anchor);
386 Roo.callback(callback);
387 }.createDelegate(this));
391 * Expand all child nodes
392 * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes
394 expandChildNodes : function(deep){
395 var cs = this.childNodes;
396 for(var i = 0, len = cs.length; i < len; i++) {
402 * Collapse all child nodes
403 * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
405 collapseChildNodes : function(deep){
406 var cs = this.childNodes;
407 for(var i = 0, len = cs.length; i < len; i++) {
408 cs[i].collapse(deep);
415 disable : function(){
416 this.disabled = true;
418 if(this.rendered && this.ui.onDisableChange){ // event without subscribing
419 this.ui.onDisableChange(this, true);
421 this.fireEvent("disabledchange", this, true);
428 this.disabled = false;
429 if(this.rendered && this.ui.onDisableChange){ // event without subscribing
430 this.ui.onDisableChange(this, false);
432 this.fireEvent("disabledchange", this, false);
436 renderChildren : function(suppressEvent){
437 if(suppressEvent !== false){
438 this.fireEvent("beforechildrenrendered", this);
440 var cs = this.childNodes;
441 for(var i = 0, len = cs.length; i < len; i++){
444 this.childrenRendered = true;
448 sort : function(fn, scope){
449 Roo.tree.TreeNode.superclass.sort.apply(this, arguments);
450 if(this.childrenRendered){
451 var cs = this.childNodes;
452 for(var i = 0, len = cs.length; i < len; i++){
459 render : function(bulkRender){
460 this.ui.render(bulkRender);
462 this.rendered = true;
464 this.expanded = false;
465 this.expand(false, false);
471 renderIndent : function(deep, refresh){
473 this.ui.childIndent = null;
475 this.ui.renderIndent();
476 if(deep === true && this.childrenRendered){
477 var cs = this.childNodes;
478 for(var i = 0, len = cs.length; i < len; i++){
479 cs[i].renderIndent(true, refresh);