PDA

View Full Version : How to render the Icons to the TreeNodes using TreeNodeUI at creation of TreePanel



Srinivas B
31 May 2007, 2:57 AM
Hi All,
How can we render the custom icons to Ext.tree.TreeNode using Ext.tree.TreeNodeUI when creating the TreePanel.I tried using TreeNodeUI as below,



createTreePanel:function(){
var tree = new Ext.tree.TreePanel('tree-div', {
animate:true,
enableDD:true,
containerScroll: true,
rootVisible:false
});
var root = new Ext.tree.TreeNode({
text: 'Visuality',
allowDrag:false,
allowDrop:false
});
tree.setRootNode(root);

root.appendChild(
new Ext.tree.TreeNode({text:'Inbox', allowDrag:false,leaf:false,uiProvider:this.getTreeNodeUI(this)}),
new Ext.tree.TreeNode({text:'Sent Items',allowDrag:false,leaf:false,uiProvider:this.getTreeNodeUI(this)}),
new Ext.tree.TreeNode({text:'Deleted Items',allowDrag:false,leaf:false,uiProvider:this.getTreeNodeUI(this)})
);
alert('going to render....');
tree.render();
root.expand();
this.attachConextMenu( tree );

},
getTreeNodeUI:function( node ){
TestTreeNodeUI = function(node){
TestTreeNodeUI.superclass.constructor.call(this, node);
}

Ext.extend(TestTreeNodeUI, Ext.tree.TreeNodeUI, {
initEvents : function(){
TestTreeNodeUI.superclass.initEvents.call(this);
//alert('node text : ' + this.node.text );
if( this.node.text == 'Inbox'){
alert('inbox:'+ this.node.attributes.cls );
this.node.attributes.iconCls = "inbox-node";
}else if( this.node.text == 'Sent Items'){
alert('sentitems:'+ this.node.attributes.cls );
this.node.attributes.cls = 'sentitems-node';
}else if( this.node.text == 'Deleted Items'){
alert('delItems:'+ this.node.attributes.cls );
this.node.attributes.cls = 'deleted-node';
alert('delItems:'+ this.node.attributes.cls );
}else{
//alert('normal items');
this.node.attributes.cls = 'normal-node';
}
this.render();
}
});
return TestTreeNodeUI;
}



The css code is as below,


.inbox-node .x-tree-node-icon{
background-image:url(../images/webpro-images/tree/Inbox.gif);
}
.deleted-node .x-tree-node-icon{
background-image:url(../images/tree/Deleted_Items.gif);
}
.sentitems-node .x-tree-node-icon{
background-image:url(../images/tree/Sent_Items.gif);
}
.normal-node .x-tree-node-icon{
background-image:url(../images/tree/New_Folder.gif);
}
.x-tree-ec-icon .x-tree-elbow{
background-image:url(../s.gif);
}
#tree-div{
position:relative;
}


When rendering the TreePanel what i found was after calling tree.render() only the initEvents function of TreeNodeUI is calling .Is this a problem not rendering the Icons to the TreeNodes?

Thanks in Advance,
Srinvias

jack.slocum
31 May 2007, 3:34 AM
initEvents is called after the render takes place. Try overriding render instead and make the superclass call after setting the iconCls/cls.

FYI, with iconCls, you only need that class and the background image. e.g. above, you should have:


// using iconCls
.inbox-node{
background-image:url(../images/webpro-images/tree/Inbox.gif);
}

// using cls
.deleted-node .x-tree-node-icon{
background-image:url(../images/tree/Deleted_Items.gif);
}

Srinivas B
31 May 2007, 5:29 AM
Thank U very much Jack .... It works Great.