Sencha Touch: How to Integrate BaseUrl for the Ajax request in the Store Proxy URL

I have seen lot of developers hard code the full API URL in their store proxy URL configuration. If they need to change the URL in the future, they need to update in all their stores.  There may be a chance they may leave some store unmodified this will lead to bugs.

We can maintain the baseUrl configuration in a single place, and if they need to change in future, they can change it in once place, instead of modifying in all stores. Let's see the BaseUrl Singleton class which will define the baseUrl of our App which will be used for all the stores ajax request.

Ext.define('myapp.util.AppBaseUrl',{
    singleton : true,
    alternateClassName : 'AppBaseUrl',
    requires:['Ext.Ajax'],

    config: {
        baseUrl:'http://sureshdotariya.blogspot.com/'
    },

    constructor : function(config) {
            this.initConfig(config);
            Ext.Ajax.on('beforerequest', this.onBeforeAjaxRequest, this);
    },

    onBeforeAjaxRequest : function(connection, options) {
              options.url = this.getBaseUrl() + options.url;
    }
});

Now, each store can define the ajax proxy URL with only the URL end point (without BaseUrl). During the ajax request invocation, the baseUrl will be appended to all the Stores proxy URL at run  time.

var myStore = Ext.create("Ext.data.Store", {
    model: "User",
    proxy: {
        type: "ajax",
        url : "user/users.json",
        reader: {
            type: "json",
            rootProperty: "users"
        }
    },
    autoLoad: true

});

At run time, the Ajax request URL for the Store will be http://sureshdotariya.blogspot.com/user/users.json.

Please make sure, you have included the BaseURL singleton class as the requires in the Ext.Application class (i.e app.js file).

Ext.application({
    name: 'sureshblogapp',
    requires: ['myapp.util.AppBaseUrl']
    });

Hope, you enjoyed this Post.