What to include in app.js (Ext JS 4.x)

The following should be specified above the Ext.application declaration in app.js:

Ext.Loader.setConfig({enabled:true});
Ext.require([
             'Ext.data.Store',
             'Ext.data.StoreManager',
             'Ext.data.HasManyAssociation',
             'Ext.data.BelongsToAssociation',
             'Ext.container.Viewport',
             'Ext.grid.*',
             'Ext.util.*',
             'Ext.state.*',
             'Ext.form.*'
         ]);  

Ext.application({
    name: 'Scoring',
    appFolder: 'app',
    autoCreateViewport: false,
    requires : [ 'Ext.container.Viewport'],
    ...

Why?

At some point our application stopped working in Firefox, though it continued to work in chrome. Using the ext.js library the message in Firefox was c is not a constructor and the site would fail to load.

Using the ext-debug.js library the message became the following:

Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required classes: …

After a good deal of time spent researching the internet and all related documentation, I found the following post in the Sencha forums: http://www.sencha.com/forum/showthread.php?138536-c-is-not-a-constructor-message-at-the-very-first-example/page2

To summarize the issue has something to do with resources either not be loaded or not being loaded in the correct order. Adding these requirements before the application declaration forces the various required classes to load on startup. If every JS file in your application has all the needed “Requires” statements you wouldn’t get this error, but that is rather difficult to do and in the event one of your many JS files is missing something because the error doesn’t tell you which one or in which file.