8

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.

4

2 回答 2

10

您不需要任何新的设计或图形或任何复杂的扩展。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 。

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

于 2012-12-12T07:54:35.277 回答
1

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

老实说，组合框中没有选择选项有点像用户界面悖论——用户必须选择“无选择”。空白选项不是很清楚 - 看起来有点像一个错误。

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

于 2012-12-12T00:16:40.470 回答