How to add an image next to the tree node

[Kranthi1981]

Hello All,

My actual requirement is to add an image next to the tree node text which will be hidden by default. And when the user keeps the mouse over the node this image has to be shown.
On mouse over of the image a context menu has to appear. Please see the attachment for more clarity

Currently, I am able to display a context menu on mouse over of the tree node (Of course, by using the plugins available in the ExtJS forum :-). Code is here:

Ext.namespace('Ext.ux.plugins');

Ext.ux.plugins.NodeMouseOverAndOutPlugin = Ext.extend(Object, {
init: function(tree) {
if (!tree.rendered) {
tree.on('render', function() {this.init(tree)}, this);
return;
}
this.tree = tree;

this.ctxMenu = new Ext.menu.Menu({
id:'ctxMenu',
items: [
{ id:'goTo', text:'Go to' },
'-',
{ id:'CAWOT', text:'Column along with other text' },
{ id:'AST', text:'As seperate table' }
]
});

tree.body.on('mouseover', this.onTreeMouseover, this, {delegate: 'a.x-tree-node-anchor'});

tree.body.on('mouseout', this.onTreeMouseout, this, {delegate: 'a.x-tree-node-anchor'});
},

onTreeMouseover: function(e, t) {
var nodeEl = Ext.fly(t).up('div.x-tree-node-el');
if (nodeEl) {
var nodeId = nodeEl.getAttributeNS('ext', 'tree-node-id');
if (nodeId) {
this.tree.fireEvent('mouseover', this.tree.getNodeById(nodeId), e);
}
}
// Write code here
this.ctxMenu.show(this.tree.getNodeById(nodeId).ui.getAnchor());
},

onTreeMouseout: function(e, t) {
var nodeEl = Ext.get(t);
if (nodeEl) {
var nodeId = nodeEl.getAttributeNS('ext', 'tree-node-id');
if (nodeId) {
this.tree.fireEvent('mouseout', this.tree.getNodeById(nodeId), e);
}
}
// Write code here
}
});



Could any one please help me... Thanks in advance..