Extjs4在组合框中添加一个空选项 [英] Extjs4 add an empty option in a combobox

问题描述

我有一个组合框在ExtJS4与这个初始配置

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.

推荐答案

您不需要任何新的设计或图形或任何复杂的扩展。

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

您应该能够使用：

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

Here's a JSFiddle

和 。没有默认组合。

And a JSFiddle without a default combo.

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

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

这篇关于Extjs4在组合框中添加一个空选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！