View Full Version : how to put text on both side of a textfield ?

29 Mar 2013, 10:20 AM

i need to know how to put text on both side of a textfield.
in an ordinary situation you can put a text as fieldLabel on left or right side of
the a textfield , but i want to have text on both side.
i already made it using two label components on both side of the textfield (textfield fieldLabel is set to be hidden) but im sure it's wrong , and it can and should be more straight and simple.

here is what i've done :

xtype : 'fieldset',
border : false,
items : [
xtype : 'label',
text : 'LeftSide Text...',
style : 'float:left;'
xtype : 'textfield',
hideLabel : true,
style : 'float:left;'
xtype: 'label',
text : 'RighSide Text...'

any idea can be helpful ...


29 Mar 2013, 11:47 AM
Instead of using 2 labels, You can have either one of the label as a boxLabel for textField and another one as label. If you want to use first label as boxLabel for textField have a config labelAlign: 'left' and vice versa.

29 Mar 2013, 2:59 PM
thanks for your reply .

the point is , i cant use fieldLabel , because when you put an string as fieldLabel ,extjs adds a colon(:) after it which i don't want it , so i cant use it .

even if your way was right , its not what i expected, i need something simpler . i want to know if, instead of two label component , there is a cofig or something similar to solve the problem .

30 Mar 2013, 12:12 AM
What you can do is to simply use this one component to add text before and after the input field. In my test, the text showed up above and below the input field, but it's probably just a styling problem at that point, because the actual HTML looks proper.

Here's the config you might want to try:

xtype: 'textfield',
beforeSubTpl: 'this is before',
afterSubTpl: 'this is after'