Ext.js - Load data synchronously

Ext.js loading process is asynchronous: it will not wait for the data to be loaded.  Rather, it will continue processing immediately.  So you cannot expect the data you load to be immediately available.  The following will make the load synchronous.

Before

    launch: function()
    {
        // other stuff too...

        loadComboBoxStores();
  
        // other stuff too...
    }

After

    launch: function() 
    {
        // other stuff too...

        Ext.onReady(function()
        {
            loadComboBoxStores();
        }); 

        // other stuff too...
    }

(I post this reluctantly as I have limited understanding of this.  But my solution appears to work.)

post script:  That didn't work.  But this did...

According to the Ext.js 4 documentation, "Ajax server requests are asynchronous and this call (to get data from server) will return before the response (data) has been received.  Process any returned data in a callback function."

So use of callback is the key.  Callback is an optional parameter of the store.load().

Here is my first (and apparently successful) attempt at a callback function.  Well, actually two callback functions.  First, it dynamically loads a list of stores of combo boxes.  Then it dynamically loads the contents of each of those stores of combo boxes.

There may be better ways of doing this, but it does work...

// Build stores for combox boxes

function loadComboBoxStores()
{
    // Ajax server requests are asynchronous, meaning the call to Ajax will return immediately,
    // before the response from the server has been received.  Returned data should be processed
    // in a callback function.  (There are all sorts of references to this issue on the web.)
   
    // create Model which can be used for all combo boxes
    Ext.define('MyComboBoxModel', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'value'  , type: 'string'},
            {name: 'display', type: 'string'}
        ]
    });

    var storeOfComboBoxStoreNames = Ext.getStore('ComboBoxStoreNames');
   
    storeOfComboBoxStoreNames.load({
        callback: function()
        {
            for (var i = 0; i < storeOfComboBoxStoreNames.getCount(); i++)
            {
                var row = storeOfComboBoxStoreNames.getAt(i);
                // console.log("store: " + row.data.store);
                Ext.create('Ext.data.Store',
                {
                    storeId: row.data.store,
                    model  : 'MyComboBoxModel'
                } );
            }
           
            var storeOfComboBoxes = Ext.getStore('ComboBoxes');

            storeOfComboBoxes.load({
                callback: function()
                {
                    for (var i = 0; i < storeOfComboBoxes.getCount(); i++)
                    {
                        var row = storeOfComboBoxes.getAt(i);
                        var store = Ext.getStore(row.data.store);
                        var model = store.model;
                        var record = new model( { value: row.data.value, display: row.data.display } );
                        store.add(record);
                    }
                }  // end inner callback
            });    // end inner load
        }  // end outer callback
    });  // end outer load
}