Environment Dependent Sencha Touch Config

Recently we developed a mobile application based on Sencha Touch and Cordova. The application was communicating with a REST backend. Since I did not want to change the URL to the REST backend manually when deploying the app in the testing or production environment, I was looking for a way to use multiple configuration files based on the active environment.

I was not able to find a decent solution in the Sencha documentation so I tried and contacted the Sencha Support. Kevin from the Sencha Support Team quickly responded with a pretty decent solution: As it turns out there exists an undocumented feature for Sencha Touch allowing you to define Javascript files which will get included on a per-environment basis during the build. Simply add the following lines to your app.json:

development: {
    js: [{
        path: "/app/conf/development.js"
    }]
},
testing: {
    js: [{
        path: "/app/conf/testing.js"
    }]
},
production: {
    js: [{
        path: "/app/conf/production.js"
    }]
}

Each file listed in the development, testing and production declaration will get included during the build. This also works for the "sencha watch" command which will include the files listed in the "development" section.

My configuration object loooks like this (the class is named "MyApp.config.Config" in all the config files!):

Ext.define('MyApp.config.Config', {
    statics: {
        env: function () {
            return 'dev';
        }
    }
});

Now I am able to add the MyApp.config.Config class to the requires section of each class in need of the configuration:

requires: [
    'MyApp.config.Config'
]

To access the config values I simply call "MyApp.config.Config.env()" where ever needed.