request.xhr undefined in Ext JS

Question

my web site is made using Ext JS 4.1 framework and ASP .Net MVC v3. When new frame is rendered there are 19 separate AJAX requests for retrieving data in JSON-format. All requests are familiar and made by Ext.Ajax.request(). Example:

Ext.Ajax.request({
    url: getOrderLink,
    method: "GET",
    params: { recId: orderRecId },
    headers: {
        'Accept': 'application/json'
    },
    success: function (response) {
        var order = Ext.decode(response.responseText);
        ...
    }
});

In some cases there are errors in ext-all.js in

onStateChange : function(request) {
    if (request.xhr.readyState == 4) {
        this.clearTimeout(request);
        this.onComplete(request);
        this.cleanup(request);
    }
},

where request has no property xhr so that request.xhr.readyState throws exception "Cannot read property 'readState' of undefined". This errors appear not for all requests and don't effect site work(responses are retrieved successfully). Some times this errors don't appear at all. Timeout for all requests is set to 30s by default and they take about 1.5-2 seconds each. I am using Google Chrome 21. Could you please give me some idea why it's happening.

Answer 1

The problem seems to occur if and only if you have a breakpoint or a "debugger;" line in anything related to AJAX. For me it happened in Chrome, haven't tried other browsers yet.

In my case it happened when I had set a breakpoint in a load event handler for a store like code example below.

But the error occurrs if you set a breakpoint inside the Ext onStateChange function in the framework itself as well.

If disabling your breakpoints and debugger; calls removes the error you can safely ignore it!

There is a similar thread on ExtJS forums. Sencha might add a fix.

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',

    stores: ['Projects'],

    init: function () {
        this.getProjectsStore().addListener(
            "load",
            this.onProjectsStoreLoaded,
            this
        );
    },

    onProjectsStoreLoaded: function () {
        console.log('MyController: onProjectsStoreLoaded');

        debugger; // <- this causes the errors to appear in the console

        SomeOtherThingsIWantedToDebug();
    }
}