How to tackle ExtJS "Synchronously loading" warning

Joseph Victor Zammit picture Joseph Victor Zammit · Aug 13, 2012 · Viewed 9.8k times · Source

When using ExtJS 4+ with asynchronous loading one would be familiar with this sort of warning:

[Ext.Loader] Synchronously loading 'MY.particular.module';
consider adding Ext.require('MY.particular.module') above Ext.onReady

How to identify which JavaScript module (be it a controller, a component, etc) is causing this warning? I.e. the place where include module being synchronously loaded in the requires list.

What is the right way to go around correcting these warnings? Does an automated way to do this exist?

P.S. The only way to do this right now, is to set a debug point where the warning is raised, and trace back to which line in which file is leading to the warning being generated.

Answer

Alex picture Alex · Aug 13, 2012

In chrome, in your stacktrace, (I think Firefox does stacktraces as well nowadays?) the file that is calling in a module is usually (always?) the 1st file that is not ext-all.

Ext.require is something used TO automate stuff ( eg js-minification) so you can't really automate it in and of itself.

When you declare a component ( using Ext.define or Ext.create ) you should be specifying the modules the component that Ext is going to use for the component with Ext.require ( well, if you want to get rid of this warning atleast )

Every custom component that you are using should more or less follow the same idea:

Ext.define('My.app.Panel', {
    extend: 'Ext.panel.Panel', // 
    requires: [
        'My.app.PanelPart2', //Hey! warning is gone!
        'My.app.PanelPart3'
    ]

    constructor: function (config) {
        this.callParent(arguments); 
        //...
    },

    statics: {
        method: function () {
            return 'abc';
        }
    }
});

And if you don't care about performance, and only want to get rid of stray warnings ( insanity technically, you can just muck your error message, in the loader config .

Ext.loader.setConfig({
  enabled: true,
  paths: {
      'My': 'my_own_path'
  },
  onError:function(){}//or custom handler? :D

See mitchsimeons answer: http://www.sencha.com/forum/showthread.php?178888-Tons-of-Synchronously-Loading-Warning-Messages

and a blog post on why requires: http://www.sencha.com/blog/using-ext-loader-for-your-application