ExtJS ComboBox:允许用户选择无值(null)

Question

我有一个Ext ComboBox,用户应该可以选择没有值.ExtJS不支持开箱即用.

我尝试过的:

使用第二个清除值的触发器

有效,但不是很有用.我想要一个更好的解决方案

将"fake"null项添加到商店:

虽然这样做有点工作,但我必须修改模型以允许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

请参考此链接 如何向ExtJS组合框添加空项目？

更新:实现该解决方案的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();
                }
            }
        }
    }
});