Extjs4 add an empty option in a combobox

Question

I have a combobox in ExtJS4 with this initial config

        xtype: 'combobox',
        name: 'myCombo',
        store: 'MyStore',
        editable: false,
        displayField: 'name',
        valueField: 'id',
        emptyText: 'Select an Option'

I don't know if there is an easy way to tell the combo to add an option so the user can deselect the combo (first he select an option and then he want to not select anything... so he wants to return to "Select an Option")

I solved this before by adding an extra option to the fetched data so I can simulate to have the "Select an Option" as a valid option in the combo but I think there should be a better way.

Answer 1

You do not need any new design or graphics or any complex extensions. ExtJS has is all out of the box.

You should be able to use this:

Ext.define('Ext.ux.form.field.ClearCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.clearcombo',

    trigger2Cls: 'x-form-clear-trigger',

    initComponent: function () {
        var me = this;


        me.addEvents(
            /**
            * @event beforeclear
            *
            * @param {FilterCombo} FilterCombo The filtercombo that triggered the event
            */
            'beforeclear',
            /**
            * @event beforeclear
            *
            * @param {FilterCombo} FilterCombo The filtercombo that triggered the event
            */
            'clear'
        );

        me.callParent(arguments);

        me.on('specialkey', this.onSpecialKeyDown, me);
        me.on('select', function (me, rec) {
            me.onShowClearTrigger(true); 
        }, me);
        me.on('afterrender', function () { me.onShowClearTrigger(false); }, me);
    },

    /**
    * @private onSpecialKeyDown
    * eventhandler for special keys
    */
    onSpecialKeyDown: function (obj, e, opt) {
        if ( e.getKey() == e.ESC )
        {
            this.clear();
        }
    },

    onShowClearTrigger: function (show) {
        var me = this;

        if (show) {
            me.triggerEl.each(function (el, c, i) {
                if (i === 1) {
                    el.setWidth(el.originWidth, false);
                    el.setVisible(true);
                    me.active = true;
                }
            });
        } else {
            me.triggerEl.each(function (el, c, i) {
                if (i === 1) {
                    el.originWidth = el.getWidth();
                    el.setWidth(0, false);
                    el.setVisible(false);
                    me.active = false;
                }
            });
        }
        // ToDo -> Version specific methods
        if (Ext.lastRegisteredVersion.shortVersion > 407) {
            me.updateLayout();
        } else {
            me.updateEditState();
        }
    },

    /**
    * @override onTrigger2Click
    * eventhandler
    */
    onTrigger2Click: function (args) {
        this.clear();
    },

    /**
    * @private clear
    * clears the current search
    */
    clear: function () {
        var me = this;
        me.fireEvent('beforeclear', me);
        me.clearValue();
        me.onShowClearTrigger(false);
        me.fireEvent('clear', me);
    }
});

Here's a JSFiddle

And a JSFiddle without a default combo.

Note that both examples don't require any new graphic or style

Answer 2

To the best of my knowledge there is no better way of doing this. Although others may have a hack to do what you do by means of a plugin.

If I'm perfectly honest, no selection option in comboboxes is somewhat of a user interface paradox - users are required to select 'no selection'. A blank option is not very clear - looks a bit like a bug.

From a user interface perspective I think the preferred solution to this scenario is to have a button next to the combobox saying 'clear selection' (or just one with an X icon). Once you manage to put a button there, you can just call clearValue().