PDA

View Full Version : How to display "*" next to field in extjs 4.1



extjs.mscit
25 Jul 2013, 3:46 AM
I want to show *, next to my combobox, with tooltip on *. I can also use image as TPL. But * appears below textbox. How to display it on side?


var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});

Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
valueField: 'abbr',
renderTo: Ext.getBody(),
// Template for the dropdown menu.
// Note the use of "x-boundlist-item" class,
// this is required to make the items selectable.
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item">{abbr} - {name}</div>',
'</tpl>'
),
// template for the content inside text field
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'{abbr} - {name}',
'</tpl>'
),
afterBodyEl : '*',
msgTarget : 'side'
});

I also want to display toolTip on star/ image.

slemmon
25 Jul 2013, 10:59 PM
Your best bet may be to use a fieldContainer and use an image component as an item in the container.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.FieldContainer

Though, if you decide that having the * next to the label works as well you might make use of afterLabelTextTpl or beforeLabelTextTpl
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.Text-cfg-afterLabelTextTpl
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.Text-cfg-beforeLabelTextTpl