Using Ext.form.Basic.loadRecord to load data into Combo Box Fields with Remote Stores

Question

I have a form that has multiple Combo Box fields that are attached to remote stores:

Ext.define('app.ux.form.MyCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.mycombo',
    store: this.store,
    displayField: 'displayField',
    valueField: 'valueField',
    forceSelection: true,
    autoSelect: true,
    initComponent: function() {
        this.addEvents('selectitem');
        this.enableBubble('selectitem');
        this.callParent(arguments);
        this.listeners = {
            change: function(field, value) {
                this.fireEvent('selectitem', field, value);
            }
        }
    }
})


                fieldLabel: 'DisabilityType',
                name: 'f_disability_type',
                xtype: 'combo',
                valueField: 'valueField',
                displayField: 'displayField',
                forceSelection: true,
                autoSelect: true,
                store: 'DisabilityTypes'

DisabilityTypes is a basic Ext.data.store with autoLoad set to false and autoSync set to true. When you click on the dropdown tied to the store, the store loads and shows the list of values.

When I call loadRecord on the BasicForm Object that contains this dropdown and pass it a model, it fills in the combo boxes that use local stores, but doesn't load the combo boxes that use remote stores. This is because either the combo box store isn't loaded (autoLoad: false) or the combo box is loaded AFTER the form loads (autoLoad:true).

I am aware that this was a problem in Ext 3.3.x and that there was a plugin made to fix it:

/**
 * When combo box is used on a form with dynamic store (remote mode) 
 * then sometimes the combobox store would load after the form data. 
 * And in that case the setValue method of combobox will not  
 * set the combobox value properly. This override makes sure that the
 * combobox store is completely loaded before calling the setValue method.
 */
Ext.override(Ext.form.ComboBox, {
    setValue : function(v){
        var text = v;
        if(this.valueField){
            if(!Ext.isDefined(this.store.totalLength)){
                this.store.on('load', this.setValue.createDelegate(this, arguments), null, {single: true});
                if(this.store.lastOptions === null){
                    var params;
                    if(this.valueParam){
                        params = {};
                        params[this.valueParam] = v;
                    }else{
                        var q = this.allQuery;
                        this.lastQuery = q;
                        this.store.setBaseParam(this.queryParam, q);
                        params = this.getParams(q);
                    }
                    this.store.load({params: params});
                }
                return;
            }
            var r = this.findRecord(this.valueField, v);
            if(r){
                text = r.data[this.displayField];
            }else if(this.valueNotFoundText !== undefined){
                text = this.valueNotFoundText;
            }
        }
        this.lastSelectionText = text;
        if(this.hiddenField){
            this.hiddenField.value = v;
        }
        Ext.form.ComboBox.superclass.setValue.call(this, text);
        this.value = v;
    }
});

Has this problem been fixed in Ext 4? Or do I need to find another plugin that's Ext 4 compatible?

Answer 1

My solution:

Ext.form.field.ComboBox.override( {
    setValue: function(v) {
        v = (v && v.toString) ? v.toString() : v;
        if(!this.store.isLoaded && this.queryMode == 'remote') {
            this.store.addListener('load', function() {
                this.store.isLoaded = true;
                this.setValue(v);
            }, this);
           this.store.load();
        } else {
            this.callOverridden(arguments);
        }
    }
});