How to create static parameters for use in data stores with rest proxy

Question

I have an ExtJS 5.1.2 app that utilizes throughout the app a global config set of parameters defined in app_dir/app/Application.js, that looks like:

launch: function () {
    Ext.Loader.setConfig({enabled: true});

    // Static parameters
    cardioCatalogQT.config = {

        mode: 'test', // switch to control use of staging or production server
        //protocol: 'https://',
        protocol: 'http://',
        //host: 'production_server',
        //host: 'test_server,
        host: '127.0.0.1:5000',
        apiGetQ: '/get_query/',
        //apiGetQ: '/api/get_query/',
        apiWriteQ: '/remote_query_put',
        apiReadQ: '/remote_query_get',
        //apiMedsMenu: '/api/meds',
        //apiMedsMenu: '/meds',
        remove: 'none'
    };

    // TODO - Launch the application

    Ext.onReady(function () {


    });        
} 

This way, I only have one place to change the parameters that make up the url in Ajax calls, (in this case protocol, host and apiGetQ, for example give mr the ability to set url = cardioCatalogQT.config.protocol + cardioCatalogQT.config.host + cardioCatalogQT.config.apiGetQ), in one place to change the server address from development -> testing -> production, instead of having to find all references throughout the app.

However, due to the way that the ExtJs loads, I cannot use these config parameters in data stores that use rest proxies, since these stores seem to load before items in the Ext.Loader.

For example, I have the following store:

Ext.define('cardioCatalogQT.store.Diagnoses', {
    extend: 'Ext.data.Store',
    alias: 'store.Diagnoses',
    config:{
        model: 'cardioCatalogQT.model.Diagnosis',
        storeId: 'Diagnoses',
        autoLoad: true,

        proxy: {
            type: 'rest',
            url: 'http://127.0.0.1:5000/menu/diagnoses',
            //url: 'http://test_server/menu/diagnoses',
            //url: 'https://prod_server/api/menu/diagnoses',
            reader: {
                type: 'json',
                rootProperty: 'menu_test'
            }
        }
    }
});

So, when I change from testing to development environments, for example, I have to explicitly change the n different references for url in my n stores that have rest proxies.

Is there a way to define a config object so that I can use it for these stores? I looked at some examples of a preloader, but this did not seem to have any use cases documented for a global config object, also I had tried implementing a loadmask in a preloader, but it really screwed with the behavior of my app.

Answer 1

I use to do like @Alexander propose, however I'll prefer the singleton way. More ExtJs/MVC like. So just to complete, I share my version:

/**
 * @class
 */
Ext.define("MyApp.config.Config", {
    alternateClassName: [
        'MyApp.config'
    ],
    singleton: true,

    constant: {

        // ... whatever constant you need to put here

    },

    constructor: function() {
        var constant = this.constant;

        //
        // here, if you need to process some stuff
        // for example calculate some constant
        // which depend of other constant
        //


        return constant;
    }
});

Require in your app

// Be sure to require your class prior
// to your app classes
Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application',

    requires: [
            'Ext.app.*',
            // ext stuff ...
            'MyApp.config.Config',
            // myApp stuff ...
    ]

    // ...

});

Example usage:

Ext.define('MyApp.store.MyStore', {
    // ...

    proxy: {
        type: 'rest',
        url: MyApp.config.remoteUrl
    }
})