Question

I’m building a RESTful API for a personal project and the administrative area uses Ext. Since the API requires a token to be passed back and forth via the custom header ‘X-API-Auth’, I need to be able to add that to every Ajax request made by Ext.

For instance, in the user management area, I have a GridPanel, using a JsonStore, display a list of registered users. The ‘autoLoad’ property is set to TRUE. This way, when you first visit the screen, the GridPanel is automatically populated.

Before anything is rendered, I include the following headers:

Ext.Ajax.defaultHeaders = {
    'X-API-Auth' : __API_KEY,
    'Accept' : 'application/json'
};

Where ‘__API_KEY’ is the token.

Now, my understanding is that these custom headers should now be sent with every Ajax call. When I first visit the member list page, I get a 403 Forbidden response thrown from the API. This is because the initial Ajax call the GridPanel makes is not sending the required headers. The API is functioning properly since, without the headers, it cannot authenticate the request.

Now, if I click the ‘reload’ button within the included PagingToolbar component associated with the GridPanel’s JsonStore, it DOES send the headers. All Ajax calls to the member listing endpoint invoked manually yield the desired result.

Is there a reason why ‘autoLoad’ on a Store does not respect the ‘defaultHeaders’ property? If anyone can shed some light on this it would be greatly appreciated. I also asked this on the Sencha forums and noone seems to have an answer.

Thanks!

Answer 1

Alright, all that writing was for not. I messed up the order of operation. All these JavaScript files were being created by Ext Designer. I thought I was placing the ‘defaultHeaders’ property at the top of the path of execution, but it turns out I was wrong.

All fixed.

I’m going to go cut myself now.

/forever alone