it's not possible using CSS alone but you can use XTemplates to do something similar.
I've done it like this:
Ext.onReady(function(){
var states = Ext.create('Ext.data.Store', {
fields: ['class', 'desc', 'policy', 'ac'],
data : [
{"class":"1", "desc":"Medical Bills", "policy":"41000", "ac":"1"},
{"class":"12", "desc":"One Time Payments", "policy":"41000", "ac":"1"},
{"class":"3", "desc":"Treatment", "policy":"41000", "ac":"1"}
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Class Description',
width: 400,
store: states,
queryMode: 'local',
valueField: 'class',
displayField: 'desc',
renderTo: Ext.getBody(),
listConfig: {
minWidth: 500,
tpl: new Ext.XTemplate(
'
'
'
'
'
- ' +
'
' +'
'
'
'
'
')
}
});
});
Really, it should be done using an actual table but it seems (From what I've tried anyway) that the ComboBox needs the ul/li tags in order to work correctly.
If you want to see it in action, here's a JS Fiddle: http://jsfiddle.net/MzdqJ/3/
It doesn't look to great but that should just be a case of playing around with the CSS styles. The logic should work at least.