web-dev-qa-db-ja.com

forceSelectionがTRUEに設定されているときにComboBoxを再度空にする方法（ExtJS 4）

forceSelectionconfigがtrueに設定されているコンボボックスがあります。

コンボボックスはオプションです。空にすることができます。

ユーザーがオプションの1つを選択してからコンボボックスを空にした場合、それは空になりたくありません。

コンボボックスは常に以前に選択された値を復元します。

バカバカしい。ユーザーが値を削除するときは空にする必要があります。

この問題を解決するには？見逃した設定はありますか？

comboboxextjs4
20
Fitrah M

'change'リスナーでこの問題を解決しました。コードスニペットの例

addListener('change', function() {
  if (this.getValue() === null) {
    this.reset();
  }
});

選択した値を削除すると、ComboBoxの値はnullに設定されます。したがって、その値を確認して、ComboBoxの値をデフォルトの値に戻すことができます。

28
Aurimas

以下を基本コンボボックスとして使用します。

Ext.define("Ext.ux.CleanableComboBox", {
    extend: "Ext.form.ComboBox",
    xtype: 'c-combobox',
    initComponent: function () {
        this.callParent(arguments);
        if (this.allowBlank) {
            this.addListener('change', function () {
                if (!this.getValue() || this.getValue().length === 0) {
                    this.reset();
                }
            });
        }
    }
})
1
Reza Salarmehr

私はコンボでも同じ問題に遭遇しましたが、残念ながら私が思いついた最良の解決策は、選択された値をクリアするためのimg/buttonで、jQueryを使用して次のものを接続しました。

        $('#imgId').click(function () { 
            var combo = Ext.getCmp('cmpId');
            combo.setValue(null);
            combo.setRawValue(null);
        });

理想的ではありませんが、かなりクリーンで使いやすいと思います。それが役に立てば幸い。

1
Amalea

forceSelectionをallowEmpty：falseに置き換えることができますか？私の見解では、forceSelectionは実行すべきことを完全に実行しています。ユーザーがリストから何かを選択するように強制します。もう1つのオプションは、リストに1つの項目を追加することです（たとえば、Noneなど）。したがって、ユーザーはそれを選択できます。

1
Andrey Selitsky

私もこの問題に遭遇しました。

コンボボックスは常に以前に選択された値を復元します。

それほど多くはありません復元ユーザーが削除した値再選択それ後値。つまり、forceSelection: trueを使用すると、コンボボックスはメニューのドロップダウンを要求します。これは、ユーザーがコンボボックスに戻ってアイテムを削除すると、コンボボックスメニューがドロップダウンし、最初に選択されていたアイテムが強調表示された後、ユーザーがコンボボックスの値を削除し、次のタブに移動します。コンボボックスは、ドロップダウンリストでハイライト表示されているアイテムを確認し、再選択されたフィールドに表示されます。

代わりに、ユーザーが値を削除した場合、ESCキーを押してコンボドロップダウンメニューを閉じ、次にタブで次のタブに移動します。自分自身を記入してください。

これは、キーボードのみの制御を有効にして、メニューをクリックしてドロップダウンする必要がないようにする機能だと思います。

幸い、ユーザーがこれを理解してESCキーを利用するのにそれほど時間はかかりませんでした。また、これが発生したときのエラーメッセージを処理するためにpreventMark: true構成を追加しました。

これが本当にできない場合は、changeイベントにリスナーを追加したり、validitychangeイベントにリスナーを追加して、フィールドが空かどうかを確認し、空の場合はメニューを折りたたむことができると思います。 。これにより、Escキーでフィールドを閉じるのと同じ方法で、別のフィールドに移動するときに再選択できなくなります。

1
Geronimo

はい、同じタイプのコンボボックスを使用していますが、Editable = "false"とForceSelection = "true"を使用しています。キーボードで値を選択してEnterキーを押すと、最後の値が選択されます。

0
user2110717

これを試して

listeners:{change:{fn:function(combo, value){combo.clearValue();}}}
0
Ahmed MEZRI

これを使ってみてください。 lastSelection = []の値を空の値に入力します

     Ext.override(Ext.form.field.ComboBox, {
        onChange : function(newVal, oldVal) {
            var me = this;
             me.lastSelection=[];

            me.callParent(arguments);
        },
    });
0
Hendri Soni

allowBlankとforceSelectionの両方をtrueに設定している場合は、本当に何も選択できないはずです（またはallowBlankをtrueに設定しないと思います） ）。

これは、すべてのコンボボックスがそのように動作するためのグローバルMODです。

Ext.onReady(function(){   

    // Allows no selection on comboboxes that has both allowBlank and
    // forceSelection set to true    
    Ext.override( Ext.form.field.ComboBox, {

        onChange: function(newVal, oldVal)
        {
            var me = this;

            if ( me.allowBlank && me.forceSelection && newVal === null )
                me.reset();

            me.callParent( arguments );
        },        

    });
});

または、このMODはピッカーを閉じ、ユーザーがフィールドを空にすると、nullでselectイベントを発生させます。

Ext.override( Ext.form.field.ComboBox, {

    onKeyUp: function( aEvent ) {
        var me            = this,
            iKey          = aEvent.getKey();
            isValidKey    = !aEvent.isSpecialKey() || iKey == aEvent.BACKSPACE || iKey == aEvent.DELETE,
            iValueChanged = me.previousValue != this.getRawValue();

        me.previousValue = this.getRawValue();

        // Prevents the picker showing up when there's no selection
        if ( iValueChanged &&
             isValidKey &&
             me.allowBlank &&
             me.forceSelection &&
             me.getRawValue() === '' )
        {
            // Resets the field
            me.reset();

            // Set the value to null and fire select
            me.setValue( null );
            me.fireEvent('select', me, null );

            // Collapse the picker
            me.collapse();
            return;
        }                
        me.callParent( arguments );        
    },

});
0
Izhaki

コンボの構成に追加

listeners: {
    'change': function (combo, newValue) {
        if (newValue === null)
            combo.reset();
        }
    }

PS：@ aur1masからのアイデア

0
Haddad

4.2では、コンボボックスのassertValueメソッドをオーバーライドする必要があります。

の代わりに：

if (me.forceSelection) {

あなたは置くべきです：

if (me.forceSelection && (!Ext.isEmpty(value) || !me.allowBlank)) {
0
jacob