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 。

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

Answer 2

据我所知，没有更好的方法可以做到这一点。虽然其他人可能会通过插件来做你所做的事情。

如果我完全诚实，组合框中的选择选项在某种程度上不是用户界面悖论 - 用户需要选择“无选择”。一个空白选项不是很清楚 - 看起来有点像一个bug。

从用户界面的角度来看，我认为这种情况的首选解决方案是在组合框旁边有一个按钮，说“清除选择”（或者只有一个带有X图标的按钮）。一旦您设置了按钮，就可以拨打clearValue()。

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

2 个答案: