JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" type="text/css" href="//cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all-debug.css"
/>
CSS
.list-item{
background: yellow;
}
JavaScript
Ext.define("State", {
extend: 'Ext.data.Model',
fields: [
{type: 'string', name: 'fips_state_code'},
{type: 'string', name: 'state_name'}
]
});
Ext.create('Ext.data.Store', {
storeId:'States',
model: 'State',
data: [{'fips_state_code': '0', 'state_name': ' Alabama '}]
});
Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Choose State',
store: Ext.getStore('States'),
queryMode: 'local',
valueField: 'fips_state_code',
displayField: 'state_name',
listConfig: {
// Custom rendering template for each item
getInnerTpl: function() {
return '<div class="list-item">{state_name} ({state_name}) <\/div>';
}
},
renderTo: Ext.getBody()
});