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

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>',
// template for the content inside text field
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'{abbr} - {name}',
afterBodyEl : '*',
msgTarget : 'side'

I also want to display toolTip on star/ image.

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.

Though, if you decide that having the * next to the label works as well you might make use of afterLabelTextTpl or beforeLabelTextTpl