ExtJS: inline style with XTemplate - extjs

Question

{
xtype: 'combobox',
itemId: 'categoryselect',
queryMode: 'local',
store: {
type: 'array',
fields: ['prod_cat']
},
displayField: 'prod_cat',
multiSelect: true,
displayTpl: new Ext.XTemplate(
'<p style="color:red;">Categories</p>'
)
}
This is (part) of the config for a combobox I'm using in a toolbar. I'm trying to have the combobox display some static text ('Categories') regardless of what records are selected. Works perfectly, except I'd like to add some styling (font coloring) to the displayed text. Right now, the text
<p style="color:red;">Categories</p>
is displaying in the combobox, and not Categories in red.
What have I overlooked? Thanks

Answer 1

displayTpl is for the value that will actually be rendered to the underlying field...so it's rendering what you're telling it to render :)
To accomplish what you're trying to do, I'd add a cls config to the combobox, and then style the text color via CSS, like so:
{
xtype: 'combobox',
itemId: 'categoryselect2',
queryMode: 'local',
fieldLabel: 'Correct',
store: {
type: 'array',
fields: ['prod_cat'],
data: [
['Cat1'],
['Cat2'],
['Cat3']
]
},
displayField: 'prod_cat',
multiSelect: true,
displayTpl: new Ext.XTemplate('Categories'),
cls: 'special'
}
.special input {color:red;} // css
Here's an example: https://fiddle.sencha.com/#fiddle/m0