PDA

View Full Version : Combobox option style



shlomio
7 Jul 2009, 3:21 AM
hi there !

been looking in the forum and couldn't find a way to color Combo box's options background color or option's text color dynamically.

10x !

Shlomi.

Condor
7 Jul 2009, 3:49 AM
You'll need to modify the tpl, e.g.

tpl: [
'<tpl for=".">',
'<div class="x-combo-list-item"',
'<tpl if="myDisplayField &lt; 0"> style="color: red;"</tpl>>',
'{myDisplayField}',
'</div>',
'</tpl>'
].join('')

shlomio
7 Jul 2009, 4:09 AM
10x that works great for 1 option, but how do i apply it for many options ?
i tried the following unsuccessfully:

'<tpl for=".">',
'<div class="x-combo-list-item"',
'<tpl if="myDisplayField == \'xxx\'"> style="color: yello;"</tpl>>',
'<tpl if="myDisplayField == \'yyy\'"> style="color: red;"</tpl>>',
'{myDisplayField}',
'</div>',
'</tpl>',

Condor
7 Jul 2009, 4:13 AM
Let's say your store contains 2 fields, one containing the text and one containing the color, e.g.

'<tpl for=".">',
'<div class="x-combo-list-item" style="color: {colorField};">',
'{textField}',
'</div>',
'</tpl>',

ps. If your record doesn't contain an extra field, but the color is based on some kind of logic then you can put the code for this in the prepareData method.

shlomio
7 Jul 2009, 4:35 AM
that works fine !
extra 10x for the quick replay...

shlomio
7 Jul 2009, 4:41 AM
btw - after the user selects one of the options, the selected option looses its color...

Condor
7 Jul 2009, 4:45 AM
The previous code was only list styling.

The input itself is much more restricted in how it can be styled.

Condor
7 Jul 2009, 4:49 AM
Very long ago there was an Ext tutorial that showed how to build a custom component.

The example used was a combobox for language selection, including flags. Maybe you can use that code to do what you want.