PDA

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



elnaz
13 Aug 2011, 3:05 PM
Hi,

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


27475

skirtle
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'
},
textField
],
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.

slemmon
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.
http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.FieldContainer
(http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.FieldContainer)

mitchellsimoens
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

elnaz
14 Aug 2011, 3:03 PM
Thanks Guys

jMunny
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;

newPanel.add(newItem);

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

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

menu.setTitle('Item Additional Info');
menu.showAt(newItem.getXY());
};


The CSS:


.helpSeparator{
padding-left: 1px;
vertical-align: top;
width: 10px;
height: 9px;
}


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

Thanks!
JMunny