Renderer having image and hyperlink together in extjs - extjs

Question

I have a form which has a displayfield.The value of the form is set as a hyperlink.Now I also need an image to appear along with the hyperlink.How can this be done?Below is my code to add hyperlink:
xtype:'displayField',
fieldLabel: 'Name',
value: 'abc',
renderer:function(value){
return ''+value+'' //need to add an image with this
}

Answer 1

I usually go for one of these approaches, mostly equivalent:
Add a css class to my a element, with background-image and some padding-left.
Enclose the anchor element in a div with a similar css class.
Add a span before the anchor. Additionally use display: inline-block and give it a width and a height since it has no text content.
You could just precede it with an img, but for some reason I never do that. It's ugly if the image doesn't get loaded.
Examples:
CSS
.myimgclass: {
background-image: url(...);
background-position: 0;
background-repeat: no-repeat;
}
span.myimgclass {
width: 16px;
height: 16px;
display: inline-block;
}
So in your renderer you can the following:
Inline the anchor:
renderer:function(value){
return '<a class="myimgclass" href="#">'+value+'</a>';
}
Enclosed in a div
renderer:function(value){
return '<div class="myimgclass">'+value+'</div>';
}
Prepended as a span:
renderer:function(value){
return '<span class="myimgclass"></span>'+value+'';
}
Prepended as an img:
renderer:function(value){
return '<img src="../your/img/path/here.png." />'+value+'';
}
I would also like to add that all these approaches are based on you wanting to add the image as html, through your renderer. Another approach is to set your component's html: configuration. Then use ctrl.update('...'); if you ever want to update it. The html content should be identical to the examples above, but value won't be available. So renderer is more for dynamic content or generic during initialization, while html is controlled mostly from code (e.g. events).