PDA

View Full Version : Color in my Combo box



TheBigOnion
6 Jul 2010, 7:40 AM
Hello,
how can I put colored text in my combo box? I tried putting



Ext.data.dogs = [
['1', '<font color="red">Rover</font>'],
['2', '<font color="brown">Snoopy</font>']
];


The words are colored when I do the dropdown, but once they fill in the top space, I see the whole html.

Does anyone have a solution?

tobiu
6 Jul 2010, 7:51 AM
here is my solution from the extthemes site (bottom toolbar).
it is not exactly the same, but modifying the template a bit should work out fine.



new Ext.ux.TwinTriggerCombo({
displayField : 'name'
,forceSelection : true
,id : 'colorCombo'
,minChars : 0
,mode : 'local'
,selectOnFocus : true
,trigger1Class : 'x-form-clear-trigger'
,trigger2Class : 'x-form-arrow-trigger'
,width : 120
,onTrigger1Click : function(){
this.clearValue();
multiFilter();
}
,store : new Ext.data.ArrayStore({
fields : ['color' ,'name']
,idIndex : 0
,data : [
['0000ff' ,'Blue']
,['c0c074' ,'Champagne']
,['808080' ,'Gray']
,['008000' ,'Green']
,['ffffff' ,'Mixed']
,['ffa500' ,'Orange']
,['ff0000' ,'Red']
,['ffff00' ,'Yellow']
]
})
,tpl : new Ext.XTemplate(
'<tpl for="."><div class="x-combo-list-item">',
'<div class="colorDiv" style="background-color:#{color};"></div><span style="margin-left:22px;">{name}</span>',
'</div></tpl>')
})

TheBigOnion
6 Jul 2010, 11:54 AM
Thanks. That's great, but I cannot have the color in my data. I need my value and display data to be just the word I am displaying. Is there another way? Is there a way like the way you can change the color in a grid using a function?

Animal
6 Jul 2010, 12:13 PM
Use a custom template in the combo. See the examples page and the API docs.