I encountered a problem the other day where my AJAX loaded store kept failing to load when calling the native Ext.getStore() function. Chrome’s handy Developer Tools indicated that the request to the store URL was being cancelled, indicating that the AJAX request was in fact timing out.

However, Sencha’s documentation didn’t make it very apparent as to how to change the Ext.getStore() timeout behaviour, which is why I’m noting it down here in this post.

As it turns out, you can in fact set the timeout value when you define your store, by adding a ‘timeout’ value to the proxy params in your store definition.

As is the norm, the timeout is in milliseconds, meaning that if you want to set a timeout value of 60 seconds, you need to set “timeout: 60000”.

Here is an example store with the extended timeout config value added (hint: it is just after proxy->type:’ajax’):

Ext.define('KineticaDistell.store.survey.SurveyComplete', {
    extend: 'Ext.data.Store',
    alias: 'store.surveyComplete',
    requires: [
        'KineticaDistell.model.survey.Survey'
    ],
    config: {
        autoLoad: false,
        model: 'KineticaDistell.model.survey.Survey',
        storeId: 'SurveyComplete',
        proxy: {
            type: 'ajax',
            timeout: 60000,
            url: touchwork.SERVICE_URL +  '/survey/survey.php',
            reader: {
                type: 'json',
                rootProperty: 'data'
            }, 
            extraParams: {
                'type':'previous'
            }
        }
    }
});

Worked a charm for me.

sencha touch logo