App is undefined in Chrome version 28

[halcwb]

REQUIRED INFORMATION

Ext version tested:

• Ext 4.2 rev 663

Browser versions tested against:

• Chrome version 28
• Windows 7

DOCTYPE tested against:

• ____

Description:

• Specifically in the latest Chrome version there is a timing problem, quite regularly the app crashes with a undefinied is not a function error relating to Ext.app.Application.instance = new App(), in which App is undefined.
• All the required files are loaded, everything 200 OK
• In the console, the namespace, Ext.direct Api, static functions, everything seems to have loaded and is OK. Only App is undefined.
• The problem is mitigated using an url which redirects to the app.html. So, it seems a timing problem of Ext.onReady. Repeatedly trying to reload results in a normal startup.

Steps to reproduce the problem:

• Clear the browser history and cache of Chrome 28
• Start up the application

The result that was expected:

• Normal start up

The result that occurs instead:

• See above

Test Case:

  difficult, I can demonstrate it with my own code using teamviewer?

UPDATE: Some more info, the createdFn of Ext.define never gets called so "App" is never set to "this".

[Gary Schlosberg]

Does this happen with the latest release? What OS are you using?

[halcwb]

Does this happen with the latest release? What OS are you using?

What do you mean with latest release? I have supplied both the Ext release and the Chrome release.

I have pinpointed the problem to between:

        create: function(className, data, createdFn) {            var ctor = makeCtor();            if (typeof data == 'function') {                data = data(ctor);            }// Breakpoint className == myappname
            data.$className = className;


            return new Class(ctor, data, function() {
                var postprocessorStack = data.postprocessors || Manager.defaultPostprocessors,
                    registeredPostprocessors = Manager.postprocessors,
                    postprocessors = [],
                    postprocessor, i, ln, j, subLn, postprocessorProperties, postprocessorProperty;


                delete data.postprocessors;


                for (i = 0,ln = postprocessorStack.length; i < ln; i++) {
                    postprocessor = postprocessorStack[i];


                    if (typeof postprocessor == 'string') {
                        postprocessor = registeredPostprocessors[postprocessor];
                        postprocessorProperties = postprocessor.properties;


                        if (postprocessorProperties === true) {
                            postprocessors.push(postprocessor.fn);
                        }
                        else if (postprocessorProperties) {
                            for (j = 0,subLn = postprocessorProperties.length; j < subLn; j++) {
                                postprocessorProperty = postprocessorProperties[j];


                                if (data.hasOwnProperty(postprocessorProperty)) {
                                    postprocessors.push(postprocessor.fn);
                                    break;
                                }
                            }
                        }
                    }
                    else {
                        postprocessors.push(postprocessor);
                    }
                }


                data.postprocessors = postprocessors;
                data.createdFn = createdFn;
// Breakpoint = className == myappname is never reached
                Manager.processCreate(className, this, data);
            });
        },

So, there is a problem with the processing of one of my classes. But the strange thing is that this doesn't always happen. It never happens with FF and with older versions of Chrome I have never had this as well.

So, there is no error thrown, but as the main application class never gets generated, the callback function (createFn) is never called etc.. Nasty problem...

[Gary Schlosberg]

Oh, by latest release, I meant ExtJS 4.2.1, since you indicated that you had tested against 4.2.0.663.

[halcwb]

Oh, by latest release, I meant ExtJS 4.2.1, since you indicated that you had tested against 4.2.0.663.

Ok, no I am still at 4.2.0. But I am also quite curious what can be the cause. So, to be clear, in the code above, if I hit the last breakpoint (indicated by the comment), then that means everything is fine, but otherwise, I'll run into the App undefined error.

[halcwb]

To give you a further update and some more info:

This is my app.html (Architect generated):

<!DOCTYPE html>


<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>GenPresWebView</title>
    <script src="./lib/ext-4.2.0-gpl/ext-4.2.0.663/ext-all-debug.js"></script>
    <script src="./lib/ext-4.2.0-gpl/ext-4.2.0.663/ext-theme-neptune.js"></script>
    <link rel="stylesheet" href="./lib/ext-4.2.0-gpl/ext-4.2.0.663/resources/ext-theme-neptune/ext-theme-neptune-all.css">
    <script src="./app/ux/grid/FiltersFeature.js"></script>
    <script src="./app/ux/grid/menu/ListMenu.js"></script>
    <script src="./app/ux/grid/menu/RangeMenu.js"></script>
    <script src="./app/ux/grid/filter/BooleanFilter.js"></script>
    <script src="./app/ux/grid/filter/Filter.js"></script>
    <script>
        Ext.ns("Ext.app.REMOTING_API");
        Ext.app.REMOTING_API = {"type":"remoting","url":"/GenPres/DirectRouter/Index","descriptor":"Ext.app.REMOTING_API","namespace":"GenPres","actions":{"Session":[{"name":"InitSession","len":0},{"name":"Login","len":2}],"Test":[{"name":"DirectTest","len":0},{"name":"RaiseError","len":0}],"Model":[{"name":"GetModel","len":1}],"Import":[{"name":"GStandard","len":1}],"Database":[{"name":"ListPDMSDatabases","len":0},{"name":"GetPDMSDatabases","len":4},{"name":"SetPDMSDatabase","len":4},{"name":"GetPDMSDatabase","len":0}],"Observations":[{"name":"GetAll","len":0}],"Users":[{"name":"GetAll","len":0},{"name":"Count","len":0},{"name":"GetAllSorted","len":0},{"name":"TakeTop","len":1},{"name":"TakeTopSorted","len":1},{"name":"FilterByName","len":1},{"name":"FromDepartment","len":1},{"name":"FromDepartmentCount","len":1},{"name":"FromDepartmentSorted","len":1},{"name":"CurrentUser","len":0}],"Departments":[{"name":"GetAll","len":0}],"Patients":[{"name":"FromDepartment","len":2},{"name":"GetPatientDetails","len":1},{"name":"GetDepartmentTree","len":1},{"name":"GetPatientDetailsFromDepartment","len":1}],"Orders":[{"name":"GetPatientOrders","len":1},{"name":"GetCurrentTreatment","len":1}],"Formularium":[{"name":"GetAtcItems","len":1},{"name":"GetShapesForAtc","len":1},{"name":"GetRoutesForAtc","len":1},{"name":"GetSubstanceUnitsForAtc","len":1},{"name":"GetShapeUnitsForAtc","len":1},{"name":"GetShapesForRoute","len":1},{"name":"GetRoutesForShape","len":1}],"DoseRule":[{"name":"GetStandardSolutionsForWeight","len":1}]}};
        Ext.Direct.addProvider(Ext.app.REMOTING_API);
    </script>
    <script src="./app/ux/statusbar/StatusBar.js"></script>
    <script src="./lib/underscore/Underscore.js"></script>
    <script src="./app/EventDeclaration.js"></script>
    <script src="./app/ux/ajax/SimManager.js"></script>
    <script src="./app/util/Validator.js"></script>
    <script src="./app/util/EventDeclarationProcessor.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

The last class EventDeclarationProcessor, is a class with static methods that is used in the controller init to wire up events with controller methods. It processes a declarative JSON and then generates the object for the listen call in the controller.

However, I think this happens well after the App creation and class instantiation process.

[Gary Schlosberg]

Do your Ext.application instances have names declared?
http://www.sencha.com/forum/showthread.php?262630

[halcwb]

Do your Ext.application instances have names declared?
http://www.sencha.com/forum/showthread.php?262630

Yes:

Ext.application({
    models: [

     ...
    ],
    stores: [
    ....
    ],
    views: [
    ....
    ],
    controllers: [
    ....
    ],
    name: 'GenPresWebView',


    launch: function() {
       // Static class to do the app initiation
        return Ext.create('GenPresWebView.controller.application.Init').initApplication();
    }


});

P.s. Sometimes the app runs in Chrome 28, but most of the times not. It rarely (but can), happens in FF or older versions of Chrome.

[Gary Schlosberg]

This is a strange one. The intermittent nature has me thinking loading issue, but you are using ext-all.js. As a test, does it change anything to put all of your code in Ext.application's launch() method?

[halcwb]

This is a strange one. The intermittent nature has me thinking loading issue, but you are using ext-all.js. As a test, does it change anything to put all of your code in Ext.application's launch() method?

Do you mean the code run by the static initApplication? Or all code?