Skip to main content

Environment dependent configuration in Sencha ExtJS

This blog post might be outdated!
This blog post was published more than one year ago and might be outdated!
· 3 min read
Stephan Hochdörfer
Head of IT Business Operations

As it seems there is no out-of-the-box way in Sencha ExtJS to provide a configuration based on the build environment (development, testing or production) to your application. Since you need at least different urls for your proxys, it makes sense to have a mechanism in place that would generate the respective configuration for you. This is our solution for the problem.

We usually add a configuration class like this to our Sencha ExtJS applications:

Ext.define('MyProject.config.Config', {
singleton: true,
envConfigs: {
development: {
baseUrl: 'https://api.loc'
testing: {
baseUrl: 'https://api.testing.loc'
production: {
baseUrl: 'https://api.production.loc'
active: {},
constructor: function () {
var me = this,
env = Ext.manifest['env'],

if (!env) {
throw new Error('No env set in manifest');

envConfig = me.envConfigs[env];
if (!envConfig) {
throw new Error('No configuration found for environment '
+ env);
} = envConfig;
* Returns a value of the currently active config.
* You may use dotted identifier to access any nested values
* such as "notification.uri"
* @param identifier
* @param defaultValue
* @returns {*}
get: function (identifier, defaultValue) {
var me = this,
value =,
currPath = [],

if (!identifier) {
return value;

chain = identifier.split('.');

for (var index in chain) {
var path;
if (!chain.hasOwnProperty(index)) {

path = chain[index];

if (typeof value[path] === 'undefined') {
if (typeof defaultValue === 'undefined') {
throw new Error(
'Path ' + identifier + ' could not be' +
' resolved from payload. Failed at "' +
currPath.join('.') + '"'

return defaultValue;
} else {
value = value[path];

return value;

Within the envConfigs object we define the configurations for the three different environments Sencha ExtJS knows about: development, testing and production. When creating an instance of the class we simply copy the current configuration based on the setting of Ext.manifest['env'] into a sperate object which is later used as a datasource for the queries.

To populate Ext.manifest['env'] with the current build enviroment add the following lines to your app.json file:

* Build enviroment
"env": "${build.environment}",

Now in the code you can query config elements by calling:


Or if you want to return a default value in case the configuration setting is not found, simply pass it as a second paramater to the method:

MyProject.config.Config.get('duration', 3600);