组合框ExtJs的有害行为

Question

There combo box and the associated Store, if there is no entry in the Store of the value entered by the user resets everything is correct but there is one unpleasant feature if the user enters a value that is at Store but he will do it quickly while storage has not had time to load the input value will be reset.

How not reset the value entered by the user when he moves to another form field if the user did not wait until the Store load (if the entered value is in Store)

var bik = new Ext.form.ComboBox({
        store: storeBik,
        displayField: 'BANK_NAME',
        fieldLabel: 'БИК',
        name: 'BIK',
        hiddenName: 'BIK',
        valueField:'BIK',
        typeAhead: true,
        forceSelection:true,
        selectOnFocus:true,
        triggerAction: 'all',
        minChars : 1,
        mode: 'remote'
        resizable : true,
        validator : validBik,
        tpl: new Ext.XTemplate('<tpl for="."><div class="x-combo-list-item"><b>{BIK} </b> {BANK}</div></tpl>')

    });

Answer 1

The reason why this is happening is because you have turned on forceSelection . After blur ComboBox is trying to find suitable record in store for typed value. If such record doesn't exist it resets value.

I can think off 2 solutions:

• turn off forceSelection
• extend ComboBox

I see that you have validBik validator attached. If you can validate value on client side, then turn off forceSelection and you have all you need. If on the other hand you really need to have data in store to choose value from, then you should extend ComboBox .

Below is ComboBox modification which holds value until request ends. It is not perfect, but maybe it will help you:

var bik = new Ext.form.ComboBox({
    [...],

    // Check if query is queued or in progress
    isLoading: function() {
        return this.isStoreLoading || // check if store is making ajax request
            this.isQueryPending; // check if there is any query pending
    },

    // This is responsible for finding matching record in store
    assertValue: function() {
        if (this.isLoading()) {
            this.assertionRequired = true;
            return;
        }

        Ext.form.ComboBox.prototype.assertValue.apply(this, arguments);
    },

    // this is private method; you can equally write 'beforeload' event handler for store
    onBeforeLoad: function(){
        this.isQueryPending = false;
        this.isStoreLoading = true;

        Ext.form.ComboBox.prototype.onBeforeLoad.apply(this, arguments);
    },

    // catch moment when query is added to queue
    onKeyUp: function(e){
        var k = e.getKey();
        if(this.editable !== false && this.readOnly !== true && (k == e.BACKSPACE || !e.isSpecialKey())){
            this.isQueryPending = true;
        }

        Ext.form.ComboBox.prototype.onKeyUp.apply(this, arguments);
    },

    // this is private method; you can equally write 'load' event handler for store
    onLoad: function() {
        Ext.form.ComboBox.prototype.onLoad.apply(this, arguments);

        this.isQueryPending = false;
        this.isStoreLoading = false;
        if (this.assertionRequired === true) {
            delete this.assertionRequired;
            this.assertValue();
        }
    }
});