3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
8 * @class Ext.tree.TreeNodeUI
\r
9 * This class provides the default UI implementation for Ext TreeNodes.
\r
10 * The TreeNode UI implementation is separate from the
\r
11 * tree implementation, and allows customizing of the appearance of
\r
14 * If you are customizing the Tree's user interface, you
\r
15 * may need to extend this class, but you should never need to instantiate this class.<br>
\r
17 * This class provides access to the user interface components of an Ext TreeNode, through
\r
18 * {@link Ext.tree.TreeNode#getUI}
\r
20 Ext.tree.TreeNodeUI = function(node){
\r
22 this.rendered = false;
\r
23 this.animating = false;
\r
24 this.wasLeaf = true;
\r
25 this.ecc = 'x-tree-ec-icon x-tree-elbow';
\r
26 this.emptyIcon = Ext.BLANK_IMAGE_URL;
\r
29 Ext.tree.TreeNodeUI.prototype = {
\r
31 removeChild : function(node){
\r
33 this.ctNode.removeChild(node.ui.getEl());
\r
38 beforeLoad : function(){
\r
39 this.addClass("x-tree-node-loading");
\r
43 afterLoad : function(){
\r
44 this.removeClass("x-tree-node-loading");
\r
48 onTextChange : function(node, text, oldText){
\r
50 this.textNode.innerHTML = text;
\r
55 onDisableChange : function(node, state){
\r
56 this.disabled = state;
\r
57 if (this.checkbox) {
\r
58 this.checkbox.disabled = state;
\r
61 this.addClass("x-tree-node-disabled");
\r
63 this.removeClass("x-tree-node-disabled");
\r
68 onSelectedChange : function(state){
\r
71 this.addClass("x-tree-selected");
\r
74 this.removeClass("x-tree-selected");
\r
79 onMove : function(tree, node, oldParent, newParent, index, refNode){
\r
80 this.childIndent = null;
\r
82 var targetNode = newParent.ui.getContainer();
\r
83 if(!targetNode){//target not rendered
\r
84 this.holder = document.createElement("div");
\r
85 this.holder.appendChild(this.wrap);
\r
88 var insertBefore = refNode ? refNode.ui.getEl() : null;
\r
90 targetNode.insertBefore(this.wrap, insertBefore);
\r
92 targetNode.appendChild(this.wrap);
\r
94 this.node.renderIndent(true, oldParent != newParent);
\r
99 * Adds one or more CSS classes to the node's UI element.
\r
100 * Duplicate classes are automatically filtered out.
\r
101 * @param {String/Array} className The CSS class to add, or an array of classes
\r
103 addClass : function(cls){
\r
105 Ext.fly(this.elNode).addClass(cls);
\r
110 * Removes one or more CSS classes from the node's UI element.
\r
111 * @param {String/Array} className The CSS class to remove, or an array of classes
\r
113 removeClass : function(cls){
\r
115 Ext.fly(this.elNode).removeClass(cls);
\r
120 remove : function(){
\r
122 this.holder = document.createElement("div");
\r
123 this.holder.appendChild(this.wrap);
\r
128 fireEvent : function(){
\r
129 return this.node.fireEvent.apply(this.node, arguments);
\r
133 initEvents : function(){
\r
134 this.node.on("move", this.onMove, this);
\r
136 if(this.node.disabled){
\r
137 this.addClass("x-tree-node-disabled");
\r
138 if (this.checkbox) {
\r
139 this.checkbox.disabled = true;
\r
142 if(this.node.hidden){
\r
145 var ot = this.node.getOwnerTree();
\r
146 var dd = ot.enableDD || ot.enableDrag || ot.enableDrop;
\r
147 if(dd && (!this.node.isRoot || ot.rootVisible)){
\r
148 Ext.dd.Registry.register(this.elNode, {
\r
150 handles: this.getDDHandles(),
\r
157 getDDHandles : function(){
\r
158 return [this.iconNode, this.textNode, this.elNode];
\r
165 this.node.hidden = true;
\r
167 this.wrap.style.display = "none";
\r
175 this.node.hidden = false;
\r
177 this.wrap.style.display = "";
\r
182 onContextMenu : function(e){
\r
183 if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {
\r
184 e.preventDefault();
\r
186 this.fireEvent("contextmenu", this.node, e);
\r
191 onClick : function(e){
\r
196 if(this.fireEvent("beforeclick", this.node, e) !== false){
\r
197 var a = e.getTarget('a');
\r
198 if(!this.disabled && this.node.attributes.href && a){
\r
199 this.fireEvent("click", this.node, e);
\r
201 }else if(a && e.ctrlKey){
\r
204 e.preventDefault();
\r
209 if(this.node.attributes.singleClickExpand && !this.animating && this.node.isExpandable()){
\r
210 this.node.toggle();
\r
213 this.fireEvent("click", this.node, e);
\r
220 onDblClick : function(e){
\r
221 e.preventDefault();
\r
226 this.toggleCheck();
\r
228 if(!this.animating && this.node.isExpandable()){
\r
229 this.node.toggle();
\r
231 this.fireEvent("dblclick", this.node, e);
\r
234 onOver : function(e){
\r
235 this.addClass('x-tree-node-over');
\r
238 onOut : function(e){
\r
239 this.removeClass('x-tree-node-over');
\r
243 onCheckChange : function(){
\r
244 var checked = this.checkbox.checked;
\r
246 this.checkbox.defaultChecked = checked;
\r
247 this.node.attributes.checked = checked;
\r
248 this.fireEvent('checkchange', this.node, checked);
\r
252 ecClick : function(e){
\r
253 if(!this.animating && this.node.isExpandable()){
\r
254 this.node.toggle();
\r
259 startDrop : function(){
\r
260 this.dropping = true;
\r
263 // delayed drop so the click event doesn't get fired on a drop
\r
264 endDrop : function(){
\r
265 setTimeout(function(){
\r
266 this.dropping = false;
\r
267 }.createDelegate(this), 50);
\r
271 expand : function(){
\r
272 this.updateExpandIcon();
\r
273 this.ctNode.style.display = "";
\r
277 focus : function(){
\r
278 if(!this.node.preventHScroll){
\r
279 try{this.anchor.focus();
\r
283 var noscroll = this.node.getOwnerTree().getTreeEl().dom;
\r
284 var l = noscroll.scrollLeft;
\r
285 this.anchor.focus();
\r
286 noscroll.scrollLeft = l;
\r
292 * Sets the checked status of the tree node to the passed value, or, if no value was passed,
\r
293 * toggles the checked status. If the node was rendered with no checkbox, this has no effect.
\r
294 * @param {Boolean} (optional) The new checked status.
\r
296 toggleCheck : function(value){
\r
297 var cb = this.checkbox;
\r
299 cb.checked = (value === undefined ? !cb.checked : value);
\r
300 this.onCheckChange();
\r
307 this.anchor.blur();
\r
312 animExpand : function(callback){
\r
313 var ct = Ext.get(this.ctNode);
\r
315 if(!this.node.isExpandable()){
\r
316 this.updateExpandIcon();
\r
317 this.ctNode.style.display = "";
\r
318 Ext.callback(callback);
\r
321 this.animating = true;
\r
322 this.updateExpandIcon();
\r
325 callback : function(){
\r
326 this.animating = false;
\r
327 Ext.callback(callback);
\r
330 duration: this.node.ownerTree.duration || .25
\r
335 highlight : function(){
\r
336 var tree = this.node.getOwnerTree();
\r
337 Ext.fly(this.wrap).highlight(
\r
338 tree.hlColor || "C3DAF9",
\r
339 {endColor: tree.hlBaseColor}
\r
344 collapse : function(){
\r
345 this.updateExpandIcon();
\r
346 this.ctNode.style.display = "none";
\r
350 animCollapse : function(callback){
\r
351 var ct = Ext.get(this.ctNode);
\r
352 ct.enableDisplayMode('block');
\r
355 this.animating = true;
\r
356 this.updateExpandIcon();
\r
359 callback : function(){
\r
360 this.animating = false;
\r
361 Ext.callback(callback);
\r
364 duration: this.node.ownerTree.duration || .25
\r
369 getContainer : function(){
\r
370 return this.ctNode;
\r
374 getEl : function(){
\r
379 appendDDGhost : function(ghostNode){
\r
380 ghostNode.appendChild(this.elNode.cloneNode(true));
\r
384 getDDRepairXY : function(){
\r
385 return Ext.lib.Dom.getXY(this.iconNode);
\r
389 onRender : function(){
\r
394 render : function(bulkRender){
\r
395 var n = this.node, a = n.attributes;
\r
396 var targetNode = n.parentNode ?
\r
397 n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;
\r
399 if(!this.rendered){
\r
400 this.rendered = true;
\r
402 this.renderElements(n, a, targetNode, bulkRender);
\r
405 if(this.textNode.setAttributeNS){
\r
406 this.textNode.setAttributeNS("ext", "qtip", a.qtip);
\r
408 this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);
\r
411 this.textNode.setAttribute("ext:qtip", a.qtip);
\r
413 this.textNode.setAttribute("ext:qtitle", a.qtipTitle);
\r
416 }else if(a.qtipCfg){
\r
417 a.qtipCfg.target = Ext.id(this.textNode);
\r
418 Ext.QuickTips.register(a.qtipCfg);
\r
421 if(!this.node.expanded){
\r
422 this.updateExpandIcon(true);
\r
425 if(bulkRender === true) {
\r
426 targetNode.appendChild(this.wrap);
\r
432 renderElements : function(n, a, targetNode, bulkRender){
\r
433 // add some indent caching, this helps performance when rendering a large tree
\r
434 this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
\r
436 var cb = typeof a.checked == 'boolean';
\r
438 var href = a.href ? a.href : Ext.isGecko ? "" : "#";
\r
439 var 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">',
\r
440 '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
\r
441 '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
\r
442 '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
\r
443 cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
\r
444 '<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',
\r
445 a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',n.text,"</span></a></div>",
\r
446 '<ul class="x-tree-node-ct" style="display:none;"></ul>',
\r
450 if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){
\r
451 this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
\r
453 this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
\r
456 this.elNode = this.wrap.childNodes[0];
\r
457 this.ctNode = this.wrap.childNodes[1];
\r
458 var cs = this.elNode.childNodes;
\r
459 this.indentNode = cs[0];
\r
460 this.ecNode = cs[1];
\r
461 this.iconNode = cs[2];
\r
464 this.checkbox = cs[3];
\r
466 this.checkbox.defaultChecked = this.checkbox.checked;
\r
469 this.anchor = cs[index];
\r
470 this.textNode = cs[index].firstChild;
\r
474 * Returns the <a> element that provides focus for the node's UI.
\r
475 * @return {HtmlElement} The DOM anchor element.
\r
477 getAnchor : function(){
\r
478 return this.anchor;
\r
482 * Returns the text node.
\r
483 * @return {HtmlNode} The DOM text node.
\r
485 getTextEl : function(){
\r
486 return this.textNode;
\r
490 * Returns the icon <img> element.
\r
491 * @return {HtmlElement} The DOM image element.
\r
493 getIconEl : function(){
\r
494 return this.iconNode;
\r
498 * Returns the checked status of the node. If the node was rendered with no
\r
499 * checkbox, it returns false.
\r
500 * @return {Boolean} The checked flag.
\r
502 isChecked : function(){
\r
503 return this.checkbox ? this.checkbox.checked : false;
\r
507 updateExpandIcon : function(){
\r
509 var n = this.node, c1, c2;
\r
510 var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
\r
511 var hasChild = n.hasChildNodes();
\r
512 if(hasChild || n.attributes.expandable){
\r
515 c1 = "x-tree-node-collapsed";
\r
516 c2 = "x-tree-node-expanded";
\r
519 c1 = "x-tree-node-expanded";
\r
520 c2 = "x-tree-node-collapsed";
\r
523 this.removeClass("x-tree-node-leaf");
\r
524 this.wasLeaf = false;
\r
526 if(this.c1 != c1 || this.c2 != c2){
\r
527 Ext.fly(this.elNode).replaceClass(c1, c2);
\r
528 this.c1 = c1; this.c2 = c2;
\r
532 Ext.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");
\r
535 this.wasLeaf = true;
\r
538 var ecc = "x-tree-ec-icon "+cls;
\r
539 if(this.ecc != ecc){
\r
540 this.ecNode.className = ecc;
\r
547 onIdChange: function(id){
\r
549 this.elNode.setAttribute('ext:tree-node-id', id);
\r
554 getChildIndent : function(){
\r
555 if(!this.childIndent){
\r
559 if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){
\r
561 buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-elbow-line" />');
\r
563 buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-icon" />');
\r
568 this.childIndent = buf.join("");
\r
570 return this.childIndent;
\r
574 renderIndent : function(){
\r
577 var p = this.node.parentNode;
\r
579 indent = p.ui.getChildIndent();
\r
581 if(this.indentMarkup != indent){ // don't rerender if not required
\r
582 this.indentNode.innerHTML = indent;
\r
583 this.indentMarkup = indent;
\r
585 this.updateExpandIcon();
\r
589 destroy : function(){
\r
591 Ext.dd.Registry.unregister(this.elNode.id);
\r
593 delete this.elNode;
\r
594 delete this.ctNode;
\r
595 delete this.indentNode;
\r
596 delete this.ecNode;
\r
597 delete this.iconNode;
\r
598 delete this.checkbox;
\r
599 delete this.anchor;
\r
600 delete this.textNode;
\r
604 Ext.removeNode(this.holder);
\r
605 delete this.holder;
\r
607 Ext.removeNode(this.wrap);
\r
614 * @class Ext.tree.RootTreeNodeUI
\r
615 * This class provides the default UI implementation for <b>root</b> Ext TreeNodes.
\r
616 * The RootTreeNode UI implementation allows customizing the appearance of the root tree node.<br>
\r
618 * If you are customizing the Tree's user interface, you
\r
619 * may need to extend this class, but you should never need to instantiate this class.<br>
\r
621 Ext.tree.RootTreeNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
\r
623 render : function(){
\r
624 if(!this.rendered){
\r
625 var targetNode = this.node.ownerTree.innerCt.dom;
\r
626 this.node.expanded = true;
\r
627 targetNode.innerHTML = '<div class="x-tree-root-node"></div>';
\r
628 this.wrap = this.ctNode = targetNode.firstChild;
\r
631 collapse : Ext.emptyFn,
\r
632 expand : Ext.emptyFn
\r