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));
162 delete this.attribute.items;
167 Roo.extend(Roo.tree.TreeNode, Roo.data.Node, {
168 preventHScroll: true,
170 * Returns true if this node is expanded
173 isExpanded : function(){
174 return this.expanded;
178 * Returns the UI object for this node
179 * @return {TreeNodeUI}
186 setFirstChild : function(node){
187 var of = this.firstChild;
188 Roo.tree.TreeNode.superclass.setFirstChild.call(this, node);
189 if(this.childrenRendered && of && node != of){
190 of.renderIndent(true, true);
193 this.renderIndent(true, true);
198 setLastChild : function(node){
199 var ol = this.lastChild;
200 Roo.tree.TreeNode.superclass.setLastChild.call(this, node);
201 if(this.childrenRendered && ol && node != ol){
202 ol.renderIndent(true, true);
205 this.renderIndent(true, true);
209 // these methods are overridden to provide lazy rendering support
211 appendChild : function()
213 var node = Roo.tree.TreeNode.superclass.appendChild.apply(this, arguments);
214 if(node && this.childrenRendered){
217 this.ui.updateExpandIcon();
222 removeChild : function(node){
223 this.ownerTree.getSelectionModel().unselect(node);
224 Roo.tree.TreeNode.superclass.removeChild.apply(this, arguments);
225 // if it's been rendered remove dom node
226 if(this.childrenRendered){
229 if(this.childNodes.length < 1){
230 this.collapse(false, false);
232 this.ui.updateExpandIcon();
234 if(!this.firstChild) {
235 this.childrenRendered = false;
241 insertBefore : function(node, refNode){
242 var newNode = Roo.tree.TreeNode.superclass.insertBefore.apply(this, arguments);
243 if(newNode && refNode && this.childrenRendered){
246 this.ui.updateExpandIcon();
251 * Sets the text for this node
252 * @param {String} text
254 setText : function(text){
255 var oldText = this.text;
257 this.attributes.text = text;
258 if(this.rendered){ // event without subscribing
259 this.ui.onTextChange(this, text, oldText);
261 this.fireEvent("textchange", this, text, oldText);
265 * Triggers selection of this node
268 this.getOwnerTree().getSelectionModel().select(this);
272 * Triggers deselection of this node
274 unselect : function(){
275 this.getOwnerTree().getSelectionModel().unselect(this);
279 * Returns true if this node is selected
282 isSelected : function(){
283 return this.getOwnerTree().getSelectionModel().isSelected(this);
288 * @param {Boolean} deep (optional) True to expand all children as well
289 * @param {Boolean} anim (optional) false to cancel the default animation
290 * @param {Function} callback (optional) A callback to be called when
291 * expanding this node completes (does not wait for deep expand to complete).
292 * Called with 1 parameter, this node.
294 expand : function(deep, anim, callback){
296 if(this.fireEvent("beforeexpand", this, deep, anim) === false){
299 if(!this.childrenRendered){
300 this.renderChildren();
302 this.expanded = true;
303 if(!this.isHiddenRoot() && (this.getOwnerTree().animate && anim !== false) || anim){
304 this.ui.animExpand(function(){
305 this.fireEvent("expand", this);
306 if(typeof callback == "function"){
310 this.expandChildNodes(true);
312 }.createDelegate(this));
316 this.fireEvent("expand", this);
317 if(typeof callback == "function"){
322 if(typeof callback == "function"){
327 this.expandChildNodes(true);
331 isHiddenRoot : function(){
332 return this.isRoot && !this.getOwnerTree().rootVisible;
336 * Collapse this node.
337 * @param {Boolean} deep (optional) True to collapse all children as well
338 * @param {Boolean} anim (optional) false to cancel the default animation
340 collapse : function(deep, anim){
341 if(this.expanded && !this.isHiddenRoot()){
342 if(this.fireEvent("beforecollapse", this, deep, anim) === false){
345 this.expanded = false;
346 if((this.getOwnerTree().animate && anim !== false) || anim){
347 this.ui.animCollapse(function(){
348 this.fireEvent("collapse", this);
350 this.collapseChildNodes(true);
352 }.createDelegate(this));
356 this.fireEvent("collapse", this);
360 var cs = this.childNodes;
361 for(var i = 0, len = cs.length; i < len; i++) {
362 cs[i].collapse(true, false);
368 delayedExpand : function(delay){
369 if(!this.expandProcId){
370 this.expandProcId = this.expand.defer(delay, this);
375 cancelExpand : function(){
376 if(this.expandProcId){
377 clearTimeout(this.expandProcId);
379 this.expandProcId = false;
383 * Toggles expanded/collapsed state of the node
394 * Ensures all parent nodes are expanded
396 ensureVisible : function(callback){
397 var tree = this.getOwnerTree();
398 tree.expandPath(this.parentNode.getPath(), false, function(){
399 tree.getTreeEl().scrollChildIntoView(this.ui.anchor);
400 Roo.callback(callback);
401 }.createDelegate(this));
405 * Expand all child nodes
406 * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes
408 expandChildNodes : function(deep){
409 var cs = this.childNodes;
410 for(var i = 0, len = cs.length; i < len; i++) {
416 * Collapse all child nodes
417 * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
419 collapseChildNodes : function(deep){
420 var cs = this.childNodes;
421 for(var i = 0, len = cs.length; i < len; i++) {
422 cs[i].collapse(deep);
429 disable : function(){
430 this.disabled = true;
432 if(this.rendered && this.ui.onDisableChange){ // event without subscribing
433 this.ui.onDisableChange(this, true);
435 this.fireEvent("disabledchange", this, true);
442 this.disabled = false;
443 if(this.rendered && this.ui.onDisableChange){ // event without subscribing
444 this.ui.onDisableChange(this, false);
446 this.fireEvent("disabledchange", this, false);
450 renderChildren : function(suppressEvent){
451 if(suppressEvent !== false){
452 this.fireEvent("beforechildrenrendered", this);
454 var cs = this.childNodes;
455 for(var i = 0, len = cs.length; i < len; i++){
458 this.childrenRendered = true;
462 sort : function(fn, scope){
463 Roo.tree.TreeNode.superclass.sort.apply(this, arguments);
464 if(this.childrenRendered){
465 var cs = this.childNodes;
466 for(var i = 0, len = cs.length; i < len; i++){
473 render : function(bulkRender){
474 this.ui.render(bulkRender);
476 this.rendered = true;
478 this.expanded = false;
479 this.expand(false, false);
485 renderIndent : function(deep, refresh){
487 this.ui.childIndent = null;
489 this.ui.renderIndent();
490 if(deep === true && this.childrenRendered){
491 var cs = this.childNodes;
492 for(var i = 0, len = cs.length; i < len; i++){
493 cs[i].renderIndent(true, refresh);