Unable to select from combobox after adding empty item/row

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}&nbsp;<\/div><\/tpl>'

    }

score 2 · Accepted Answer · answered Feb 21 '13 at 02:37

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}&nbsp;</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}&nbsp;<\/div>';
            }
        }

http://jsfiddle.net/alexrom7/6Jt5T/

Working directly with the tpl could give you some trouble.

Unable to select from combobox after adding empty item/row

1 Answers1