Question

我按照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>'

    }

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

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

1 个答案: