Results 1 to 10 of 10

Thread: App wide configuration settings: best practice?

  1. #1
    Sencha Premium Member
    Join Date
    Jan 2012
    Location
    London, UK
    Posts
    586
    Answers
    25

    Default Answered: App wide configuration settings: best practice?

    Hey guys,

    Say I have some configuration settings that are different in my test and deployment builds. For example, I might want all my forms to have a URL that points to a test server in testing, but live server on deployment.

    Obviously it would be ugly to do a find and replace prior to the deployment build.

    So what I did instead was put the option files as parameters to my Ext.application call, like so:

    Code:
    Ext.application({
      name: 'IWD',
        
      ajax_url: '../app_json.php',
      version: '1.0',
    .....
    I then, during testing, could within the config options on extending Ext.form.FormPanel, set the url to be IWD.app.ajax_url + '?method=parse_the_form'.

    However, on building a testing or production version of the app, this doesn't work, as IWD.app.ajax_url does not seem to be defined in time. My guess here is that this is because sencha command puts the Ext.application call at the bottom of the single javascript app.js file.

    So what is the best practice for setting configurations like this, so I don't have to go through the tedium of find and replace?

    Many thanks

  2. I personally use a utility class:

    Code:
    Ext.define('MyApp.util.Config', {
        singleton : true,
    
        config : {
            baseUrl : 'something.com/foo.php'
        }
    });
    Put that in the app/util/Config.js file and Ext.require it before your Ext.application call and add a path for your MyApp app name (whatever it may be).

    Then in your code you can refer to the baseUrl config like so:

    Code:
    MyApp.util.Config.getBaseUrl()

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    I personally use a utility class:

    Code:
    Ext.define('MyApp.util.Config', {
        singleton : true,
    
        config : {
            baseUrl : 'something.com/foo.php'
        }
    });
    Put that in the app/util/Config.js file and Ext.require it before your Ext.application call and add a path for your MyApp app name (whatever it may be).

    Then in your code you can refer to the baseUrl config like so:

    Code:
    MyApp.util.Config.getBaseUrl()
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  4. #3
    Sencha Premium Member
    Join Date
    Jan 2012
    Location
    London, UK
    Posts
    586
    Answers
    25

    Default

    Fantastic, thanks Mitchell, and that will I guess include the util file before the other code as well.

  5. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    Correct. I use it in a medium sized app and it works perfectly!
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  6. #5
    Sencha User
    Join Date
    Mar 2012
    Location
    Leeuwarden, Netherlands
    Posts
    20

    Default Even better solution when using a personal shared library

    If you use a personal library of classes that you use and extend in various apps, you want the app wide configuration settings to be available under shared namespace, instead of the specific app namespace.

    For example, I have a shared class that fetches a specific page from our CMS and shows the content as a panel. This class is extended by my apps and the only thing they need to pass is the relative path to the requested page. The shared class picks all other configuration, like the server address and app version (to send along) from the app wide configuration settings.

    You can achieve this by instructing Ext.Loader to link a sub-namespace of your shared library's namespace to the app-specific library.

    In your app.js

    Code:
    Ext.Loader.setPath({
        'Ext': 'sdk/src',
        'Shared': './../shared/src',
        'Shared.app': 'app'
    });
    
    Ext.require('Shared.app.Config');
    In app/Config.js

    Code:
    Ext.define('Shared.app.Config', {
        singleton: true,
    
        version: '1.1',
        server: 'http://www.mywebsite.com'
    });
    Anywhere in your app's or shared classes you can now access the config

    Code:
    var server = Shared.app.Config.server;

  7. #6
    Sencha User
    Join Date
    Mar 2012
    Location
    Leeuwarden, Netherlands
    Posts
    20

    Default

    In Sencha Touch 2.0.1 the singleton seems to requires the following constructor:

    Code:
    constructor: function(config) {
      this.initConfig(config);
      return this;
    }
    Otherwise, the getBaseUrl example will return undefined.

  8. #7
    Sencha User
    Join Date
    Nov 2013
    Posts
    60
    Answers
    2

    Default

    Hmm... using this method works fine, but after building a production build with Sencha CMD 5 the config files doesn't seem to be included anymore. With the production build I get errors when trying to use stored variables, they seem to be undefined:Error evaluating http://localhost:8000/build/production/BeatFirst/app.js with message: TypeError: Cannot read property 'getWebPath' of undefined Have there been changes in Sencha CMD?

  9. #8
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    599
    Answers
    35

    Default

    I am doing almost the same as Mitchel, but I am not using a singleton here, because the values are usually statics:

    Code:

    Code:
    Ext.define('MyApp.util.Config', {
        alternativeClassName: 'MyApp.Config',
    
        statics : {
            URL: {
                SERVER_BASE: 'something.com/',
                FOO: 'foo.php'
            }
        }
    });
    then call upon it:

    Code:
    MyApp.Config.URL.SERVER_BASE + MyApp.Config.URL.FOO

  10. #9
    Sencha User
    Join Date
    Nov 2013
    Posts
    60
    Answers
    2

    Default

    Never mind, got it working with builds other that "production".

  11. #10
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    599
    Answers
    35

    Default

    Quote Originally Posted by mitchellsimoens View Post
    I personally use a utility class:
    ...
    Then in your code you can refer to the baseUrl config like so:

    Code:
    MyApp.util.Config.getBaseUrl()
    Are you sure this is save without
    Code:
    constructor: function (config) {
        this.initConfig(config);
    },

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •