如何将空项添加到ExtJS组合框？

我想向Ext.form.ComboBox添加并清空项目（显示值为空，项目高度保持正常）。我参考了下面的2个链接来配置我的组合框，但它仍然没有显示空项：

这是我的密码：

this.abcCombo = new Ext.form.ComboBox({
    name : 'abcCombo',
    hiddenName : 'abcCombo-id',
    fieldLabel : "My Combobox",
    width : 250,
    editable : false,
    forceSelection : true,
    mode : 'local',
    triggerAction : 'all',
    valueField : 'id',
    displayField : 'fullName',
    store : new Ext.data.JsonStore({
        fields : ['id', 'fullName']
    }),
    tpl : '<tpl for="."><div class="x-combo-list-item">{fullName}&nbsp;</div></tpl>'
});

this.abcCombo=new Ext.form.ComboBox({
名称：“abcCombo”，
hiddenName:“abcCombo id”，
fieldLabel：“我的组合框”，
宽度：250，
可编辑：false，
选择：对，
模式：“本地”，
触发动作：“全部”，
valueField:'id'，
displayField:'全名'，
存储：新Ext.data.JsonStore({
字段：['id'，'fullName']
}),
tpl:“{fullName}”
});

combobox存储区的数据将在Ajax请求后加载（即数据项中的3项）。组合框只有3个项目（不是我预期的4个）。 你知道我的问题吗？！

---

非常感谢你

既然以后添加了组合框值，为什么不使用一个空值初始化存储：

store : new Ext.data.JsonStore({
    fields : ['id', 'fullName'],
    data : [{id: 0, fullName: ''}]
}),

稍后，当您执行

存储.add（theRestOfThem）

时，该空白项仍将存在

今天（2017年4月15日）不得不为ExtJS 4.2重新审视这一点：

最简单的方法是如上所述在存储中包含一个空字符串，也可以使用存储上的加载侦听器来完成：

listeners: 
{
    load: function(store, records) 
    {
        store.insert(0, [{
            fullName: '',
            id: null
        }]);
    }
}

然后将

tpl

配置添加到显示字段后带有

的组合框中：

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

tpl:“{fullName}”，

---

（OPs案例中的显示字段为

fullName

）

这就是我们如何在组合框中添加空白字段的方法

在java Map或任何其他集合中，像这样放置键值

fuelMap.put(""," "); // we need to add " " not ""," " or null 
                          // because these will add a fine blank line in Combobox 
                          // which will be hardly noticeable.

在js文件中，应该是这样的：

组合框的侦听器

您可以在开始处添加“空”记录：

 listeners: {
     load: function(store, records) {
          store.insert(0, [{
              fullName: ' ',
              id: null
          }]);
     }
  }

在“填充”函数上：

populateMyComboBox : function(comboBox, insertEmpty) {
    var list;
    if (insertEmpty) {
        list.push({id : 0, fullName : ''});
    }

    var mStore = Ext.create('Ext.data.Store', {
        fields: ['data', 'label'],
        data : list.concat([real_data])
    }),

    comboBox.bindStore(mStore);
}

在Ext4.2.1（可能是其他版本）中，只需添加到combobox配置：

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

tpl:'{fullName}'

如果存储使用内联数据，则

store.load

甚至不会触发。也许有更好的解决方案，但我最终在

组合框中插入了存储记录。render

：

{
    xtype: 'combo',
    displayField: 'name',
    valueField: 'value',
    store: {
        type: 'MyInlineStore',
    },
    listeners: {
        render: function(el){
            el.getStore().insert(0, [{name: '[Any]', value: ''}]);
            el.setValue(''); //select [Any] by default
        }
    },
}

---

谢谢你的回复。但是，当我们在初始化步骤中添加此空项时，组合框将显示它，并且项高度最小化，而不是其他项的正常高度。@很抱歉，请使用空格而不是“”，请参见编辑。我一开始也有同样的问题，现在我记得了。如果你在商店里放了一个空的东西，你就必须执行其他的东西来进行验证。通常，默认验证器只会检查所选值是否在存储中。我不认为这是一个可行的选择；给我造成了太多问题，所以我找到了另一个使用style的解决方案。x-boundlist li:empty{height:20px；}我将此侦听器与@Mr_Green的注释中的侦听器一起使用。对于extjs 4，此解决方案打破了组合框，我发现的最简单的解决方案是删除整个模板内容并简单地放入

tpl:new Ext.XTemplate（'+'
'+'{name}“+”
”），

进入ComboBox的Ext.create/config这是一个很好的技巧，绝对解决了我目前的头痛问题，非常感谢！

populateMyComboBox : function(comboBox, insertEmpty) {
    var list;
    if (insertEmpty) {
        list.push({id : 0, fullName : ''});
    }

    var mStore = Ext.create('Ext.data.Store', {
        fields: ['data', 'label'],
        data : list.concat([real_data])
    }),

    comboBox.bindStore(mStore);
}

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

{
    xtype: 'combo',
    displayField: 'name',
    valueField: 'value',
    store: {
        type: 'MyInlineStore',
    },
    listeners: {
        render: function(el){
            el.getStore().insert(0, [{name: '[Any]', value: ''}]);
            el.setValue(''); //select [Any] by default
        }
    },
}