如何添加一个空项目到ExtJS组合框？ [英] How to add an empty item to ExtJS combobox?

问题描述

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

I want to add and empty item (display value is blank, item height is kept as normal) to an Ext.form.ComboBox. I refered 2 links below to configure my combobox, but it still not display the empty item:

• 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----blank-quot-entry-to-a-ComboBox

• 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个）。
你有什么想法我的问题吗？
非常感谢！

The combobox store's data will be loaded after an Ajax request (i.e 3 items in data items). And the combobox has only 3 item (not 4 as I expected). Do you have any idea about my problem?! Thank you so much!

推荐答案

由于您稍后添加组合框值，为什么不用一个初始化商店空值：

Since your adding the combobox values later, why not just initialize the store with one blank value:

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

稍后，当您执行 store.add（theRestOfThem）时，空白的仍然会存在。

Later when you do store.add(theRestOfThem), that blank one will still be there.

今天（2017年4月15日）为ExtJS 4.2重新访问：

最简单的方法是将一个空字符串如上所述，也可以在商店中使用负载监听器：

The easiest way is to include an empty string in the store as above, it can also be done with a load listener on the store:

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

然后添加一个 tpl 配置到具有& nbsp; 的组合框显示字段后：

Then add a tpl config to the combobox with   after the display field:

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

（显示字段为 fullName 在OPs案例中）

(the display field is fullName in the OPs case)

这篇关于如何添加一个空项目到ExtJS组合框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！