extjs - 添加空项目/行后无法从组合框中选择

Question

我按照 如何将空项目添加到 ExtJS 组合框？我可以根据需要看到一个空白行/项目，但我无法从组合框中选择任何项目！

有什么猜测吗？

我的代码如下

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>'

    }

Answer 1

问题是 tpl 属性，为了选择一个属性，您需要将x-boundlist-item类添加到您的 tpl。像这样

tpl : '<tpl for=".">'+
          '<div class="x-boundlist-item">'+
              '<div class="list-item">{state_name}&nbsp;</div>'+
          '</div>'+
      '</tpl>'

http://jsfiddle.net/alexrom7/CnwpD/

但是，如果您只想将自定义 css 类应用于组合框列表中的每个项目。我会建议你这样做

listConfig: {
// Custom rendering template for each item
            getInnerTpl: function() {
                return '<div class="list-item">{state_name}&nbsp;<\/div>';
            }
        }

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

直接使用tpl可能会给您带来一些麻烦。