View Full Version : How to set getInnerTpl on combobox to display checkboxes in list?

26 Apr 2012, 2:33 PM
How can I define whats in the getInnerTpl so that a checkbox is shown checked if the items in the droplist are selected, and unchecked if the items in the list are not selected?

// Define the model for a State
Ext.regModel('State', {
fields: [
{type: 'string', name: 'abbr'},
{type: 'string', name: 'name'},
{type: 'string', name: 'slogan'}

// The data store holding the states
var store = Ext.create('Ext.data.Store', {
model: 'State',
data: states

// ComboBox with a custom item template
var customTplCombo = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Select a single state',
renderTo: 'customTplCombo',
displayField: 'name',
width: 500,
labelWidth: 130,
multiSelect: true,
store: store,
queryMode: 'local',
listConfig: {
getInnerTpl: function() {
return '<div data-qtip="{name}. {slogan}">{name} ({abbr})</div>';

26 Apr 2012, 3:40 PM
Is there a way to detect if the item is selected?

getInnerTpl: function() {
return '<div data-qtip="{SELECTED}. {slogan}">{name} ({abbr})</div>';

26 Apr 2012, 8:01 PM
Not in the template but you can achieve the desired checkbox effect. Selection adds a CSS class to the outer element for that row, so you can craft CSS rules that show a checked/unchecked checkbox image using that class in the relevant selectors.

That wouldn't help for quicktips example you gave though. For that you'd need a beforeshow listener on the tip to check whether the element corresponds to a selected item.