View Full Version : how can i put picture for information between text and textfield

13 Aug 2011, 3:05 PM

Is any one knows ,How can I put any picture between text and textfiled.

like this question mark picture icon ,for getting information about text field


13 Aug 2011, 3:44 PM
Here are a couple of ways to do it, I'm sure there are more.

new Ext.form.field.Text({
fieldLabel: 'Hello<img src="pic.png" />',
labelSeparator: ''

var textField = new Ext.form.field.Text();

new Ext.container.Container({
items: [
forId: textField.getInputId(),
text: 'Hello',
xtype: 'label'
}, {
src: 'pic.png',
xtype: 'image'
layout: {
align: 'middle',
type: 'hbox'

It's then just a case of tidying up the widths, paddings, margins, etc. to get it all looking the way you want.

The first option may appear simpler but personally I think I prefer the second option.

13 Aug 2011, 4:22 PM
I like that second option, too. The image component lets you easily set event handlers, set the src, etc. You might wrap them in a fieldcontainer instead of just a container since fieldcontainer is labelable.

13 Aug 2011, 6:19 PM
That's just overnesting...

Just need to insert the image tag into the label. You may want to check out Ext.form.Labelable and the labelableRenderTpl property

14 Aug 2011, 3:03 PM
Thanks Guys

5 Dec 2014, 11:55 AM
Hey there!

I was facing the same problem, trying to manipulate the location of my help image that I needed directly to the right of my image, then while going through the renderLabelAbleTpl I realized that I could just add the image source directly to the label separator, then add a click event on the label. I am not totally sure if this is the best approach, but it seemed to work for me:

var helpImageString = "<img src='resources/images/help.png' class='helpSeparator' id='"+newItem.itemId+"_help_image'></img>";

newItem.labelSeparator = helpImageString;


var helpImage = document.getElementById(newItem.itemId+"_help_image");

helpImage.onclick = function(){
var menu = Ext.create('View.view.HelpWindow',{
xtype: 'displayfield',
value: item.helpText

menu.setTitle('Item Additional Info');

The CSS:

padding-left: 1px;
vertical-align: top;
width: 10px;
height: 9px;

If someone foresees a problem with this, please let me know.