extjs - 如何向 ExtJS 组合框添加一个空项目？

Question

我想向 Ext.form.ComboBox 添加和清空项目(显示值为空白，项目高度保持正常)。我引用了下面的 2 个链接来配置我的组合框，但它仍然不显示空项目:

http://www.ashlux.com/wordpress/2009/09/04/handling-empty-options-with-ext-js-combo-box/

http://www.sencha.com/forum/showthread.php?52340-How-to-add-a-quot-blank-quot-entry-to-a-ComboBox

这是我的代码:

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>'
});

组合框存储的数据将在 Ajax 请求后加载(即数据项中的 3 个项)。组合框只有 3 个项目(不是我预期的 4 个)。
你对我的问题有任何想法吗？!
非常感谢!

Answer 1

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

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

稍后当你做 store.add(theRestOfThem) ，那个空白的仍然存在。

今天(2017 年 4 月 15 日)必须重新访问 ExtJS 4.2:

最简单的方法是在上面的 store 中包含一个空字符串，也可以使用 store 上的负载监听器来完成:

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

然后添加 tpl使用   配置到组合框显示字段后:

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

(在 OPs 情况下，显示字段为 fullName)