Sencha Touch loading from store after login - race issue?

Question

I intend to load data from server only after the user is Authenticated. For simplicity, let us assume that the user is already authenticated.

I put the load data function call (that loads data from a store) in the Main.js initialize function as you can see below.

However, the getStore('storeId').load() function is async, which makes me worried in case the data store finished loading only after the Main view finished loading which might make the view load without the data (fix me if I am wrong, maybe sencha can deal with this, the view has reference to the storeId).

What is the best practice to target such issues?

Trivial solution: calling the store load synchronously, but does it make any difference? and just in case, how to do it? I tried to add synchronous variable set to true but doesn't work.

app.js

launch: function() {

    // Destroy the #appLoadingIndicator element
    Ext.fly('appLoadingIndicator').destroy();

    Ext.Ajax.request({
        url: MyApp.app.baseUrl + 'session/mobileCheckAuth',
        method: "POST",
        useDefaultXhrHeader: false,
        withCredentials: true,
        success: function(response, opts) {
            if (response && response.status === 200) {
                Ext.Viewport.add(Ext.create('MyApp.view.Main'));
            } else {
                Ext.Viewport.add(Ext.create('MyApp.view.LoginPanel'));
            }
        },
        failure: function(response, opts) {
            alert('Unexpected failure detected');
            Ext.Viewport.add(Ext.create('MyApp.view.LoginPanel'));
        }
    });

},

Main.js

Ext.define('MyApp.view.Main', {
...
initialize: function() {
    console.log('main.initialize');

    this.callParent(arguments);

    // Load app data
    MyApp.utils.Functions.loadData();
}

Answer 1

There are two ways to solve this :

1. If your view consists of a grid, there will not be a race condition. If the grid renders before the store has finished loading, the grid will update itself with the new data that is added. For this to work, you have to declare the store as 'store: "mystore";' .

2. If you have a complex view that is not directly bound to the store, you have to load the store first, and in the on 'load' event of the store you initialize the rendering of the view.

   store.load({callback: function(){
       Ext.Viewport.add(Ext.create('MyApp.view.Main'}
   });