PDA

View Full Version : Trenode Customization



a10m84
24 May 2011, 4:13 AM
Hello I'm trying to customize a treenode. I have extended class TreeNodeUI to append to the tree node label a panel with dynamic content. The code of the extended class is:



Ext.extend(Ext.tree.CustomNodeUI,Ext.tree.TreeNodeUI, {
// private
renderElements : function(n, a, targetNode, bulkRender){
// add some indent caching, this helps performance when rendering a large tree
this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';

var cb = Ext.isBoolean(a.checked),
nel,
href = this.getHref(a.href),
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">',
'<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
'<img alt="" src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
'<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" />',
cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
'<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',
a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',n.text,'</span>',
'<ul id="statusPanel"/></ul></a>',
"</div>",
'<ul class="x-tree-node-ct" style="display:none;"></ul>',
"</li>"].join('');


if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){
this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
}else{
this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
}

this.elNode = this.wrap.childNodes[0];
this.ctNode = this.wrap.childNodes[1];
var cs = this.elNode.childNodes;
this.indentNode = cs[0];
this.ecNode = cs[1];
this.iconNode = cs[2];
var index = 3;
if(cb){
this.checkbox = cs[3];
// fix for IE6
this.checkbox.defaultChecked = this.checkbox.checked;
index++;
}
this.anchor = cs[index];
this.textNode = cs[index].firstChild;
this.statusPanel=cs[index+1];
}
});


The code of the panel is:


var ExtraOp= new Ext.Panel(
{
xtype:'panel',
renderTo:'statusPanel',
title:'',
width: 80,
height: 10,
// height: 22,
// xtype: 'panel',
// title: '',
// hideBorders: true,
// width: 83,
// height: 22,
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'F',
width: 20
},
{
xtype: 'button',
text: 'H',
width: 20
},
{
xtype: 'button',
text: 'I',
flex: 1,
width: 20
}
]
});


The panel shows up correctly but I want it to render next to the node's label and not in the next line.
Here is a screenshot of the tree:

26228

I haven't succeed to position the panel next to the label, is there any way to achieve this?

Thank you.