View Full Version : Combobox change color of selected item

13 Aug 2012, 5:05 AM
The code below changes the color in the selection dropdown list. I want to change the color that is displayed inside the combobox. The desired result is shown in the image below. Thanks for help on this.


var running = Ext.create('Ext.data.Store', {
fields: ['code', 'display','color'],
data : [
{'code':'Yes', 'display':'Running','color':'green'},
{'code':'No', 'display':'Not Running','color':'orange'},
{'code':'Disc', 'display':'Discontinued','color':'red'}

xtype : 'combo',
name : 'runLine',
store: running,
labelAlign: 'left',
fieldLabel: 'Running Line',
displayField: 'display',
valueField: 'code',
forceSelection: true,
tpl: '<tpl for="."><div style="color:{color};">{display}</div></tpl>'

13 Aug 2012, 5:16 AM
There're several different ways to do this. The probably simplest way is to add a change event listener on the combo and use inputEl.addCls() as below.

First, let's assume we have the cls info from the combo data store.

fields: ['code', 'display', 'cls'],

Then -

combo.on('change', changeHandler, scope);

Then -

changeHandler: function(combo, nVal, oVal) {
var oRec = combo.findRecordByValue(oVal), nRec = combo.findRecordByValue(nVal);
oRec && combo.inputEl.removeCls(oRec.get('cls'));
nRec && combo.inputEl.addCls(nRec.get('cls'));

And finally - in your css, add appropriate styles for such cls.