ExtJS ComboBox：允许用户选择无值（null）

Question

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

我尝试了什么：

使用第二个清除值

的触发器

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

将“假”空项添加到商店：

虽然这样做有点工作，但我必须修改模型以允许id为null值。这看起来更像是黑客。

设置自定义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();
                }
            }
        }
    }
});

Answer 2

您可以使用＆＃34;更改＆＃34; combo配置中的监听器并检查空值：

change: function() {
  if (this.getValue() === null) {
    // Set default Value here
  }
};