Extjs4在组合框中添加一个空选项

Question

我在ExtJS4中有一个带有这个初始配置的组合框

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

我不知道是否有一种简单的方法告诉组合添加一个选项,以便用户可以取消选择组合(首先他选择一个选项然后他不想选择任何东西......所以他想要返回到"选择一个选项")

之前我通过为获取的数据添加一个额外选项来解决这个问题,因此我可以模拟将"选择一个选项"作为组合中的有效选项,但我认为应该有更好的方法.

Answer 1

您不需要任何新的设计或图形或任何复杂的扩展.ExtJS已全部开箱即用.

你应该可以使用这个:

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);
    }
});

这是一个JSFiddle

还有一个没有默认组合的JSFiddle.

请注意,这两个示例都不需要任何新的图形或样式