Unable to select from combobox after adding empty item/row - extjs

Question

I implemented as said at How to add an empty item to ExtJS combobox? I can see a blank row/item as desired but I am unable to select any of the item from combobox !
Any guess ?
My code is as follow
var rModel = Ext.regModel('State', {
fields: [
{type: 'string', name: 'fips_state_code'},
{type: 'string', name: 'state_name'}
]
});
// The data store holding the states
var store = Ext.create('Ext.data.Store', {
model: 'State',
data: [{fips_state_code: '0', state_name: ' '}]
});
store.add(obj.results);
{
xtype:'combo',
id:'filterstate',
width: 250,
fieldLabel: 'Filter By State',
store: store,
queryMode: 'local',
displayField: 'state_name',
valueField: 'fips_state_code',
editable: false,
forceSelection : true,
triggerAction : 'all',
typeAhead: true,
selectOnFocus:true,
allowBlank:true,
tpl : '<tpl for=\".\"><div class=\"x-combo-list-item\">{state_name} <\/div><\/tpl>'
}

Answer 1

The problem is the tpl attribute, in order to select an attribute you need to add the x-boundlist-item class to your tpl. Just like this
tpl : '<tpl for=".">'+
'<div class="x-boundlist-item">'+
'<div class="list-item">{state_name} </div>'+
'</div>'+
'</tpl>'
http://jsfiddle.net/alexrom7/CnwpD/
But if you only want to apply a custom css class to every item in the combobox list. I would recommend you to do it this way
listConfig: {
// Custom rendering template for each item
getInnerTpl: function() {
return '<div class="list-item">{state_name} <\/div>';
}
}
http://jsfiddle.net/alexrom7/6Jt5T/
Working directly with the tpl could give you some trouble.