PDA

View Full Version : change the style of Combobox elements



whalethewise
27 Jan 2012, 12:45 PM
Hi

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.

skirtle
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.

rioka
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).