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.
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