ExtJs combo loses selected value on store page load

Question

I have an ExtJS 4.1 combo box with a JsonStore and queryMode: 'remote', with paging and filtering, as such:

...
queryMode:      'remote',
allowBlank:     true,
forceSelection: true,
autoSelect:     false,
pageSize:       25,
typeAhead:      true,
minChars:       2,
...

When I load my form with a saved value in this combo box, I load the store passing the saved value as a query (filtering) parameter, to make sure that the selected value is definitely within the returned records, and then I set that value as the combo selected value as such:

    mycombo.getStore().load({
        params: {
            query: displayField
        },
        scope: {
            field: combo,
            valueField: valueField,
            displayField: displayField
        },
        callback: function(records, operation, success) {
            this.field.setValue(this.valueField);
        }
    });

So far, so good, the above works fine. The problem is, that if the user then clicks on the dropdown arrow to select another value for the combo, the 1st page of the store is loaded, erasing all previously selected values, and even if nothing is selected, the previously selected value is lost.

This problem is generic, and is quite similar to this question: ExtJS paged combo with remote JSON store. Display selected value with paging and can be summarized as such:

In an ExtJS combo box with a remote store and paging, selected values are lost when the loaded page changes.

I tried setting clearOnPageLoad: false for the store, but then each time a new page is loaded, the records are appended to the end of the list. I would have expected this parameter to cache the loaded pages and still show me the correct page while moving back and forth.

So, any ideas on how to keep the selected value while moving between pages? I suppose I could create a record with the selected value manually and append it to the store on each page load until a new value is selected, but this sounds like too much effort for something so basic.

Answer 1

We ended up contacting Sencha support since we have a paid license. This is the answer we got back:

Ext.override(Ext.form.field.ComboBox, {
    onLoad: function() {
        var me = this,
            value = me.value;

        if (me.ignoreSelection > 0) {
            --me.ignoreSelection;
        }

        if (me.rawQuery) {
            me.rawQuery = false;
            me.syncSelection();
            if (me.picker && !me.picker.getSelectionModel().hasSelection()) {
                me.doAutoSelect();
            }
        }

        else {

            if (me.value || me.value === 0) {
                if (me.pageSize === 0) { // added for paging; do not execute on page change
                    me.setValue(me.value);
                }
            } else {


                if (me.store.getCount()) {
                    me.doAutoSelect();
                } else {

                    me.setValue(me.value);
                }
            }
        }
    }
});

Answer 2

Had the same problem, and 'pruneRemoved: false' didn't work (it seems to be used only in grids). This is the solution:

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

    // lastSelection is searched for records
    // (together with store's records which are searched in the parent call)

    findRecord: function(field, value) {
        var foundRec = null;
        Ext.each(this.lastSelection, function(rec) {
            if (rec.get(field) === value) {
                foundRec = rec;
                return false; // stop 'each' loop
            }
        });
        if (foundRec) {
            return foundRec;
        } else {
            return this.callParent(arguments);
        }
    }
});

Hope it doesn't have negative side effects. I've tested it a bit and it seems OK.