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