8

ExtJS4にこの初期構成のコンボボックスがあります

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

ユーザーがコンボの選択を解除できるように、コンボにオプションを追加するように指示する簡単な方法があるかどうかはわかりません（最初にオプションを選択し、次に何も選択しないようにしたいので、「選択肢一つを選択してください"）

以前、フェッチしたデータにオプションを追加して、コンボの有効なオプションとして「オプションの選択」をシミュレートできるようにすることでこれを解決しましたが、もっと良い方法があるはずです。

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 に答える