Sencha Touch - Cannot find global variable in testing and production builds

Question

I cannot seem to access a global variable in Ext.application after I do a production or test build with Cmd 4. This happens during the first application launch. I have read other similar threads but there is nothing new in there that can solve my problem for whatever reason.

Before I started using Cmd, I would run my application from a server against the application directory, and things ran just fine. I had no problems with my other files picking up the global variables.

Now that I have moved to Cmd 4 / ST2.3.1, the test and production builds get built into one big app.js file. So it seems that when code that is earlier in the js file calls a global variable, it cannot find it, with the console exception:

Uncaught TypeError: Cannot read property 'targetServer' of undefined

This happens during the first application launch, and the app just hangs. The loading indicators are not even removed. I noticed that the Ext.application code is at the end of the app.js. Could it be some code is launching before the application is fully loaded?

In my app.js, I have the following. This is last in my app.js at line 76623. The global variable not being read is "targetServer":

Ext.application({
    name: 'qxtapp',
    targetServer: 'http://192.168.1.70:8080'
    ...
});

One of my stores looks like this. This is where I get the exception. The below code is earlier in my app.js, at line 70742:

Ext.define('qxtapp.store.AccountsListStore', {
    extend  :  Ext.data.Store ,
    xtype   : 'accountsListStore',
    config: {
        model: 'qxtapp.model.AccountsList',
        data: [
            { accountName: qxtapp.app.targetServer+'/account_one' },
        //                 ^ Causes exception- cannot read property "targetServer" 
        //                   of undefined
            { accountName: qxtapp.app.targetServer+'/account_two' },
            ...
        ]
    }
})

Any idea what I'm missing here? Any help is greatly appreciated.

Thanks!

Answer 1

This is an order-of-operations error.

In development, your Ext.application() code (in app.js) is run first because any other classes (e.g. qxtapp.store.AccountsListStore) are loaded dynamically after the browser physically reads app.js.

But when you use Cmd to bundle your classes together, the resulting single JS file is read entirely at once by the browser. What happens is that the Ext.define() methods all run BEFORE Ext.application()... so qxtapp.app isn't yet assigned.

The easiest way to circumvent this problem is to use a true global variable, not just a property assigned to the global "app" object (in app.js):

var TARGET_SERVER = 'http://192.168.1.70:8080';

Ext.application({
    //...
})

And in your other classes...

Ext.define('qxtapp.store.AccountsListStore', {
    extend  :  Ext.data.Store ,
    xtype   : 'accountsListStore',
    config: {
        model: 'qxtapp.model.AccountsList',
        data: [
            { accountName: TARGET_SERVER + '/account_one' }
            //...
        ]
    }
});