如何向 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

您可以在开头添加一条“空”记录：

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

Answer 2

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

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

稍后当您执行

store.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>',

（OPs情况下显示字段为

fullName

）

Answer 3

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

    //make sure to add this
    //if not added, empty item height is very small
    listConfig : {
        getInnerTpl: function () {
            return '<table><tr><td height="12">{fullName}</td></tr></table>';
        }
    }

});

在初始化组件时，您可以执行以下操作（在控制器上）：

populateMyComboBox([yourComboBoxComponent], true);

关于填充功能：

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

Answer 4

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

在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: {
    select: function (comp, record, index) {
        if (comp.getValue() === "" || comp.getValue() === " ") {
            comp.setValue(null);
        }
    }
}

Answer 5

在 Ext 4.2.1（可能是其他版本）中，只需添加到组合框配置：

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

Answer 6

如果商店使用内联数据，那么

store.load

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

combobox.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
        }
    },
}

Answer 7

这对我有用，我尝试将

' '

放入我设置为模型上组合框的显示字段的字段中，我想在组合框的下拉列表中显示空白，但不是在选择后的文本框中，它会显示我不想要的

' '

。因此，我在组合框中使用了 displayTpl 配置，它会影响在组合中选择某些内容后显示的文本框。

displayTpl: Ext.create('Ext.XTemplate',
   '<tpl for=".">',
      '<tpl switch="contactName">',
         '<tpl case="&nbsp;">',
         '<tpl default>{contactName}',
      '</tpl>',
   '</tpl>'
)

这可能可以用 if 语句而不是我所做的 switch 来完成，但说实话，我从未使用过 XTemplates，而且我不知道我在做什么，我还有一个 switch 语句的示例，让它发挥作用。我基本上只是说，如果 contactName =

' '

，则不要放置任何内容，如果有其他内容，则显示 contactName。