3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.com/license
8 * @class Ext.tree.TreeNodeUI
9 * This class provides the default UI implementation for Ext TreeNodes.
10 * The TreeNode UI implementation is separate from the
11 * tree implementation, and allows customizing of the appearance of
14 * If you are customizing the Tree's user interface, you
15 * may need to extend this class, but you should never need to instantiate this class.<br>
17 * This class provides access to the user interface components of an Ext TreeNode, through
18 * {@link Ext.tree.TreeNode#getUI}
20 Ext.tree.TreeNodeUI = Ext.extend(Object, {
22 constructor : function(node){
28 ecc: 'x-tree-ec-icon x-tree-elbow',
29 emptyIcon: Ext.BLANK_IMAGE_URL
34 removeChild : function(node){
36 this.ctNode.removeChild(node.ui.getEl());
41 beforeLoad : function(){
42 this.addClass("x-tree-node-loading");
46 afterLoad : function(){
47 this.removeClass("x-tree-node-loading");
51 onTextChange : function(node, text, oldText){
53 this.textNode.innerHTML = text;
58 onIconClsChange : function(node, cls, oldCls){
60 Ext.fly(this.iconNode).replaceClass(oldCls, cls);
65 onIconChange : function(node, icon){
67 //'<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
68 var empty = Ext.isEmpty(icon);
69 this.iconNode.src = empty ? this.emptyIcon : icon;
70 Ext.fly(this.iconNode)[empty ? 'removeClass' : 'addClass']('x-tree-node-inline-icon');
75 onTipChange : function(node, tip, title){
77 var hasTitle = Ext.isDefined(title);
78 if(this.textNode.setAttributeNS){
79 this.textNode.setAttributeNS("ext", "qtip", tip);
81 this.textNode.setAttributeNS("ext", "qtitle", title);
84 this.textNode.setAttribute("ext:qtip", tip);
86 this.textNode.setAttribute("ext:qtitle", title);
93 onHrefChange : function(node, href, target){
95 this.anchor.href = this.getHref(href);
96 if(Ext.isDefined(target)){
97 this.anchor.target = target;
103 onClsChange : function(node, cls, oldCls){
105 Ext.fly(this.elNode).replaceClass(oldCls, cls);
110 onDisableChange : function(node, state){
111 this.disabled = state;
113 this.checkbox.disabled = state;
115 this[state ? 'addClass' : 'removeClass']('x-tree-node-disabled');
119 onSelectedChange : function(state){
122 this.addClass("x-tree-selected");
125 this.removeClass("x-tree-selected");
130 onMove : function(tree, node, oldParent, newParent, index, refNode){
131 this.childIndent = null;
133 var targetNode = newParent.ui.getContainer();
134 if(!targetNode){//target not rendered
135 this.holder = document.createElement("div");
136 this.holder.appendChild(this.wrap);
139 var insertBefore = refNode ? refNode.ui.getEl() : null;
141 targetNode.insertBefore(this.wrap, insertBefore);
143 targetNode.appendChild(this.wrap);
145 this.node.renderIndent(true, oldParent != newParent);
150 * Adds one or more CSS classes to the node's UI element.
151 * Duplicate classes are automatically filtered out.
152 * @param {String/Array} className The CSS class to add, or an array of classes
154 addClass : function(cls){
156 Ext.fly(this.elNode).addClass(cls);
161 * Removes one or more CSS classes from the node's UI element.
162 * @param {String/Array} className The CSS class to remove, or an array of classes
164 removeClass : function(cls){
166 Ext.fly(this.elNode).removeClass(cls);
173 this.holder = document.createElement("div");
174 this.holder.appendChild(this.wrap);
179 fireEvent : function(){
180 return this.node.fireEvent.apply(this.node, arguments);
184 initEvents : function(){
185 this.node.on("move", this.onMove, this);
187 if(this.node.disabled){
188 this.onDisableChange(this.node, true);
190 if(this.node.hidden){
193 var ot = this.node.getOwnerTree();
194 var dd = ot.enableDD || ot.enableDrag || ot.enableDrop;
195 if(dd && (!this.node.isRoot || ot.rootVisible)){
196 Ext.dd.Registry.register(this.elNode, {
198 handles: this.getDDHandles(),
205 getDDHandles : function(){
206 return [this.iconNode, this.textNode, this.elNode];
213 this.node.hidden = true;
215 this.wrap.style.display = "none";
223 this.node.hidden = false;
225 this.wrap.style.display = "";
230 onContextMenu : function(e){
231 if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {
234 this.fireEvent("contextmenu", this.node, e);
239 onClick : function(e){
244 if(this.fireEvent("beforeclick", this.node, e) !== false){
245 var a = e.getTarget('a');
246 if(!this.disabled && this.node.attributes.href && a){
247 this.fireEvent("click", this.node, e);
249 }else if(a && e.ctrlKey){
257 if(this.node.attributes.singleClickExpand && !this.animating && this.node.isExpandable()){
261 this.fireEvent("click", this.node, e);
268 onDblClick : function(e){
273 if(this.fireEvent("beforedblclick", this.node, e) !== false){
277 if(!this.animating && this.node.isExpandable()){
280 this.fireEvent("dblclick", this.node, e);
284 onOver : function(e){
285 this.addClass('x-tree-node-over');
289 this.removeClass('x-tree-node-over');
293 onCheckChange : function(){
294 var checked = this.checkbox.checked;
296 this.checkbox.defaultChecked = checked;
297 this.node.attributes.checked = checked;
298 this.fireEvent('checkchange', this.node, checked);
302 ecClick : function(e){
303 if(!this.animating && this.node.isExpandable()){
309 startDrop : function(){
310 this.dropping = true;
313 // delayed drop so the click event doesn't get fired on a drop
314 endDrop : function(){
315 setTimeout(function(){
316 this.dropping = false;
317 }.createDelegate(this), 50);
322 this.updateExpandIcon();
323 this.ctNode.style.display = "";
328 if(!this.node.preventHScroll){
329 try{this.anchor.focus();
333 var noscroll = this.node.getOwnerTree().getTreeEl().dom;
334 var l = noscroll.scrollLeft;
336 noscroll.scrollLeft = l;
342 * Sets the checked status of the tree node to the passed value, or, if no value was passed,
343 * toggles the checked status. If the node was rendered with no checkbox, this has no effect.
344 * @param {Boolean} value (optional) The new checked status.
346 toggleCheck : function(value){
347 var cb = this.checkbox;
349 cb.checked = (value === undefined ? !cb.checked : value);
350 this.onCheckChange();
362 animExpand : function(callback){
363 var ct = Ext.get(this.ctNode);
365 if(!this.node.isExpandable()){
366 this.updateExpandIcon();
367 this.ctNode.style.display = "";
368 Ext.callback(callback);
371 this.animating = true;
372 this.updateExpandIcon();
375 callback : function(){
376 this.animating = false;
377 Ext.callback(callback);
380 duration: this.node.ownerTree.duration || .25
385 highlight : function(){
386 var tree = this.node.getOwnerTree();
387 Ext.fly(this.wrap).highlight(
388 tree.hlColor || "C3DAF9",
389 {endColor: tree.hlBaseColor}
394 collapse : function(){
395 this.updateExpandIcon();
396 this.ctNode.style.display = "none";
400 animCollapse : function(callback){
401 var ct = Ext.get(this.ctNode);
402 ct.enableDisplayMode('block');
405 this.animating = true;
406 this.updateExpandIcon();
409 callback : function(){
410 this.animating = false;
411 Ext.callback(callback);
414 duration: this.node.ownerTree.duration || .25
419 getContainer : function(){
424 * Returns the element which encapsulates this node.
425 * @return {HtmlElement} The DOM element. The default implementation uses a <code><li></code>.
432 appendDDGhost : function(ghostNode){
433 ghostNode.appendChild(this.elNode.cloneNode(true));
437 getDDRepairXY : function(){
438 return Ext.lib.Dom.getXY(this.iconNode);
442 onRender : function(){
447 render : function(bulkRender){
448 var n = this.node, a = n.attributes;
449 var targetNode = n.parentNode ?
450 n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;
453 this.rendered = true;
455 this.renderElements(n, a, targetNode, bulkRender);
458 this.onTipChange(n, a.qtip, a.qtipTitle);
460 a.qtipCfg.target = Ext.id(this.textNode);
461 Ext.QuickTips.register(a.qtipCfg);
464 if(!this.node.expanded){
465 this.updateExpandIcon(true);
468 if(bulkRender === true) {
469 targetNode.appendChild(this.wrap);
475 renderElements : function(n, a, targetNode, bulkRender){
476 // add some indent caching, this helps performance when rendering a large tree
477 this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
479 var cb = Ext.isBoolean(a.checked),
481 href = this.getHref(a.href),
482 buf = ['<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on">',
483 '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
484 '<img alt="" src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
485 '<img alt="" src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
486 cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
487 '<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',
488 a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',n.text,"</span></a></div>",
489 '<ul class="x-tree-node-ct" style="display:none;"></ul>',
492 if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){
493 this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
495 this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
498 this.elNode = this.wrap.childNodes[0];
499 this.ctNode = this.wrap.childNodes[1];
500 var cs = this.elNode.childNodes;
501 this.indentNode = cs[0];
503 this.iconNode = cs[2];
506 this.checkbox = cs[3];
508 this.checkbox.defaultChecked = this.checkbox.checked;
511 this.anchor = cs[index];
512 this.textNode = cs[index].firstChild;
516 * @private Gets a normalized href for the node.
517 * @param {String} href
519 getHref : function(href){
520 return Ext.isEmpty(href) ? (Ext.isGecko ? '' : '#') : href;
524 * Returns the <a> element that provides focus for the node's UI.
525 * @return {HtmlElement} The DOM anchor element.
527 getAnchor : function(){
532 * Returns the text node.
533 * @return {HtmlNode} The DOM text node.
535 getTextEl : function(){
536 return this.textNode;
540 * Returns the icon <img> element.
541 * @return {HtmlElement} The DOM image element.
543 getIconEl : function(){
544 return this.iconNode;
548 * Returns the checked status of the node. If the node was rendered with no
549 * checkbox, it returns false.
550 * @return {Boolean} The checked flag.
552 isChecked : function(){
553 return this.checkbox ? this.checkbox.checked : false;
557 updateExpandIcon : function(){
562 cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow",
563 hasChild = n.hasChildNodes();
564 if(hasChild || n.attributes.expandable){
567 c1 = "x-tree-node-collapsed";
568 c2 = "x-tree-node-expanded";
571 c1 = "x-tree-node-expanded";
572 c2 = "x-tree-node-collapsed";
575 this.removeClass("x-tree-node-leaf");
576 this.wasLeaf = false;
578 if(this.c1 != c1 || this.c2 != c2){
579 Ext.fly(this.elNode).replaceClass(c1, c2);
580 this.c1 = c1; this.c2 = c2;
584 Ext.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-collapsed");
590 var ecc = "x-tree-ec-icon "+cls;
592 this.ecNode.className = ecc;
599 onIdChange: function(id){
601 this.elNode.setAttribute('ext:tree-node-id', id);
606 getChildIndent : function(){
607 if(!this.childIndent){
611 if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){
613 buf.unshift('<img alt="" src="'+this.emptyIcon+'" class="x-tree-elbow-line" />');
615 buf.unshift('<img alt="" src="'+this.emptyIcon+'" class="x-tree-icon" />');
620 this.childIndent = buf.join("");
622 return this.childIndent;
626 renderIndent : function(){
629 p = this.node.parentNode;
631 indent = p.ui.getChildIndent();
633 if(this.indentMarkup != indent){ // don't rerender if not required
634 this.indentNode.innerHTML = indent;
635 this.indentMarkup = indent;
637 this.updateExpandIcon();
641 destroy : function(){
643 Ext.dd.Registry.unregister(this.elNode.id);
646 Ext.each(['textnode', 'anchor', 'checkbox', 'indentNode', 'ecNode', 'iconNode', 'elNode', 'ctNode', 'wrap', 'holder'], function(el){
648 Ext.fly(this[el]).remove();
657 * @class Ext.tree.RootTreeNodeUI
658 * This class provides the default UI implementation for <b>root</b> Ext TreeNodes.
659 * The RootTreeNode UI implementation allows customizing the appearance of the root tree node.<br>
661 * If you are customizing the Tree's user interface, you
662 * may need to extend this class, but you should never need to instantiate this class.<br>
664 Ext.tree.RootTreeNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
668 var targetNode = this.node.ownerTree.innerCt.dom;
669 this.node.expanded = true;
670 targetNode.innerHTML = '<div class="x-tree-root-node"></div>';
671 this.wrap = this.ctNode = targetNode.firstChild;
674 collapse : Ext.emptyFn,