If you have noticed, we did not include any JS files (other than app.js) in the index.html folder and the rest of the files were automatically loaded for us. Well, it is not really automatic. We did indicate the dependencies which the class loader used to load the classes before they are used. We used the requires, controller, views, models, and stores properties to list out the dependencies. Also, we specified the name for the application which acts as the namespace and tells the loader to load all the classes, with that namespace, from the app folder. For example, AM.view.user.List will be loaded from the app/view/user folder.

In the next chapter, we will look at how the class loader works. However, one thing that we need to understand here is how we load the classes of a different namespace from a different folder. In an enterprise application, this may be a common requirement. For example, let us say there is a Converter utility class which is developed and maintained by the middleware team and they use the MW namespace for all their classes. The following is the code inside the Converter.js file:

Ext.define('MW.utils.Converter', {
  
  convertDeptCodeToName: function(deptCode) {
    if (deptCode === 'FIN')
      return 'Finance';
    if (deptCode === 'DEV')
      return 'Development';
    if (deptCode === 'SAL')
      return 'Sales';
  }
  
});

The Ext.define class contains a single method—convertDeptCodeToName —which returns the name of the department for the specified department code.

Now, say, the middleware code is kept in the mw folder, as shown in the following screenshot:

To make sure that the middleware classes will be loaded, add the following lines of code to app.js before the Ext.application call:

Ext.Loader.setPath({
    
    'MW': 'mw'
});

In the previous code, we have specified the namespace and its folder. Loader uses this path information to load the class with the listed namespace from the configured folder. So, for classes starting with MW, the loader will look for them inside the mw folder.

Now, if any part of the application wants to make use of the converter class, then the following lines of code demonstrate how to do that:

var mwUtils = Ext.create('MW.utils.Converter', {});
alert(mwUtils.convertDeptCodeToName('FIN'));