ExtJs app without sencha-cmd: ExtJs Loader trying to load files already loaded

Question

I am trying to run an ExtJs application without using SenchaCmd. These are the scripts I load in the index HTML file:

<script type="text/javascript" language="javascript" src="dev/ext-all-debug.js"></script>
<script type="text/javascript" language="javascript" src="dev/all.js"></script>

The all.js file contains all the views, controllers, stores and models concatenated into one file using a gulp task (including app.js and Application.js files). The problem is that after these 2 files are loaded, The Ext Loader is still trying to load the required Controllers/Views one by one.

I tried adding the following code into the Application.js file but nothing changed:

constructor: function() {
    this.callParent(arguments);
    Ext.Loader.setConfig({enabled:false});
},

Any ideas? Why is the Ext.loader trying to load all the requires if they are included in the all.js file? Thanks.

Answer 1

What version of Ext JS? If you're using 5.0.1 the "ext-all-debug.js" file in the root of the ext directory will not work - you want the one in the "build" directory...

Answer 2

I think I know why the Ext.Loader didn't work as expected... The concatenated files need to be in the right order because on each Ext.define the loader is searching for the dependencies specified in the requires section and if the dependencies are not loaded it will try to load them.

It works recursively until the dependency tree is loaded.

There is a Grunt plugin doing this: https://www.npmjs.com/package/grunt-sencha-dependencies

However I am still not satisfied of the development workflow with ExtJs because when using "app watch", in dev mode, you could be loading hundreds of JS files on a page refresh if your app is big enough and this impacts the performance quite a bit.