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

【问题标题】：Unable to select from combobox after adding empty item/row添加空项目/行后无法从组合框中选择
【发布时间】：2013-02-21 10:37:18
【问题描述】：

我按照How to add an empty item to ExtJS combobox? 的说明实现了我可以根据需要看到一个空白行/项目，但我无法从组合框中选择任何项目！

有什么猜测吗？

我的代码如下

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

    }

【问题讨论】：

标签： extjs combobox extjs4

【解决方案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 可能会给您带来一些麻烦。

【讨论】：