Proxy url suffix and extra parameter for all proxies/request

[marceloverdijk]

The Geocongress app contains a proxy like:

Ext.define('GeoCon.store.Bills', {
    extend  : 'Ext.data.Store',

    config: {
        model: 'GeoCon.model.Bill',
        groupField: 'state',

        proxy: {
            type: 'jsonp',
            url: 'http://api.realtimecongress.org/api/v1/bills.json',

            // The following must be set to disable extra parameters being sent to the API, which breaks it
            noCache: false,
            startParam: '',
            pageParam: '',
            limitParam: '',

            extraParams: {
                apikey: '8a341f85c657435989e75c9a83294762'
            },

            reader: {
                type: 'json',
                rootProperty: 'bills'
            }
        }
    }
});

I have a similar use case where my proxies will fetch data from a specific url and I also need to send an API key.

Instead of hardcoding the API key and server address for each proxy i want to store this information somewhere and automatically use it for all proxies.

I wonder what the best practices are for this, and maybe somebody knows an example.


After that I want to extend this and retrieve the server hostname and API key from the local storage.
This makes it possible to connect to e.g. a preprod server and use different API key per customer.

[mitchellsimoens]

For the different URLs I use a config class and you can do this for the api key. For example:

Ext.define('MyApp.util.Config', {
    singleton : true,

    config : {
        api : '....',
        someUrl : 'path/to/service'
    }
});

In your app.js you need to setup a path and require the file:

Ext.Loader.setPath({
    MyApp : 'app'
});

Ext.require([
    'MyApp.util.Config'
]);

Now in your stores you can do this:

Ext.define('MyApp.store.Something', {
    extend : 'Ext.data.Store',

    config : {
        type : 'ajax',
        url : MyApp.util.Config.getSomeUrl(),
        extraParams : {
            api : MyApp.util.Config.getApi()
        },
        reader : {
            type : 'json'
        }
    }
});

Now you have one place for your api key and urls.

[marceloverdijk]

Thanks for the reply! I will look into this.

[marceloverdijk]

PS:

I had to call it like

MyApp.util.Config.config.someUrl

Your example

MyApp.util.Config.getSomeUrl()

did not work for me. However this would look nicer.
Do you think it should work as you suggested?

[mitchellsimoens]

Yeah, forgot to mention the initConfig call:

Ext.define('MyApp.util.Config', {
    singleton : true,

    config : {
        api : '....',
        someUrl : 'path/to/service'
    },

    constructor : function(config) {
        this.initConfig(config);

        this.callParent([config]);
    }
});

[marceloverdijk]

Thanks for quick reply.
But unfortunately it's not working for me; see my code below

Ext.define('App.proxy.AppEngine', {
	extend: 'Ext.data.proxy.JsonP',
	alias: 'proxy.appengine',
	config: {
		extraParams: {
			secretKey: App.util.Config.getSecretKey() // DOES NOT WORK
			// secretKey: App.util.Config.config.secretKey WORKS
		}
	},
	constructor: function(config) {
		this.initConfig(config);
		this.callParent([config]);
	},
	getUrl: function(request) {
		return App.util.Config.config.serverUrl + this.superclass.getUrl.call(this, request);
	}
});

Ext.define('App.util.Config', {
	singleton: true,
	config: {
		secretKey: 'thekey',
		// serverUrl: 'https://theapp.appspot.com'
		serverUrl: 'http://localhost:8888'
	}
});

Any idea?

[marceloverdijk]

Actually this is working. I accidently added the constructor to the proxy

Thanks again for your help.