ExtJS ComboBox: allow user to select no value (null)

Question

I have an Ext ComboBox where the user should be able to choose no value. ExtJS doen't support that out of the box.

What I've tried:

use a second trigger that clears the value

Works but is not very usable. I want a better solution.

add "fake" null item to store:

While this does kind of work I would have to modify the model for that to allow null value for id. And this looks more like a hack.

set custom tpl like

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

But now it's getting really difficult, now idea how to get that working properly.

jsfiddle:

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

with custom tpl: http://jsfiddle.net/q5e3J/2/

Answer 1

Please refer this link How to add an empty item to ExtJS combobox?

Update: jsfiddle with that solution implemented: 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

You could use the "change" listener on the combo config and check for null values:

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