View Full Version : change the style of Combobox elements

27 Jan 2012, 12:45 PM

Is it possible to change the style (like background) on combobox elements when list is shown based on some values from store record?

For example, I have a store for combobox tha has a model where field {name: 'recommended', type: 'boolean} exists. I would like to highlight those records in the dropdown list where recommended = true.

28 Jan 2012, 11:34 AM
Sure. You can do something like this:

Ext.create('Ext.form.field.ComboBox', {
listConfig: {
getInnerTpl: function(displayField) {
return '<div class="{recommended}">{' + displayField + '}</div>';

It's a snippet of XTemplate, so you can build in whatever conditional logic you need.

13 Apr 2012, 1:13 AM
getInnerTpl is not present in the documentation; you can find it only in the examples (and the source code, of course), and seems much more like an internal feature.

Is there a documented way to get the same result?
That is, if I set

listConfig: {
getInnerTpl: function() {
return '<div>{columnA} ({columnB})</div>';
it works; I've tried to set tpl config option to something like

tpl: '<tpl for="."><div>{colunmA} ({columnB})<div></tpl>',
but in this case I cannot select items any longer (ie cannot click on list items).