ExtJS 组合框 : allow user to select no value (null)

Question

我有一个 Ext ComboBox，用户应该可以在其中选择无值。 ExtJS 不支持开箱即用。

我试过的:

使用第二个触发器清除值

有效，但不是很实用。我想要一个更好的解决方案。

添加“假”空项目来存储:

虽然这确实有些工作，但我必须为此修改模型以允许 id 为空值。这看起来更像是一个黑客。

设置自定义 tpl 喜欢

'<ul class="x-list-plain">',
  '<li role="option" unselectable="on" class="x-boundlist">(no selection)</li>',
  '<tpl for=".">',
    '<li role="option" unselectable="on" class="x-boundlist-item">{name}</li>',
  '</tpl>',
'</ul>'

但现在它变得非常困难，现在想知道如何让它正常工作。

jsfiddle:

http://jsfiddle.net/q5e3J/1/

使用自定义 tpl: http://jsfiddle.net/q5e3J/2/

Answer 1

请引用此链接 How to add an empty item to ExtJS combobox?

更新:jsfiddle 实现了该解决方案:http://jsfiddle.net/q5e3J/3/

var combo = Ext.create('Ext.form.field.ComboBox', {
    renderTo: Ext.getBody(),
    displayField: 'name',
    valueField: 'abbr',
    value: 'AL',
    store: Ext.create('Ext.data.Store', {
        model: 'State',
        data: states
    }),
    queryMode: 'local',
    editable: false,
    emptyText: 'No Selection',
    listConfig: {
        tpl: '<div class="my-boundlist-item-menu">No Selection</div>'
            + '<tpl for=".">'
            + '<div class="x-boundlist-item">{name}</div></tpl>',
        listeners: {
            el: {
                delegate: '.my-boundlist-item-menu',
                click: function() {
                    combo.clearValue();
                }
            }
        }
    }
});