Not Using requires in extjs has no loading effect

Question

I am using CMD and extjs. In my Main.js i have something like

Ext.define('Abc.view.main.Main', {
    extend: 'Ext.panel.Panel',
    xtype: 'app-main',
    header:{
        height: 25,
        titleAlign: 'center',
        title: 'new tile,
        padding: '0 0 0 10'
    },
    requires: [
        'Abc.view.main.MainController',
        'Abc.view.main.Component'
    ],

If you see requires, i am requiring some classes. If i remove all the classes in requires and leave it like

 requires: []

all the pages are loaded properly only. So whats the benefit i am getting by adding files in requires.

Answer 1

First, your application (Application.js) has a list of required views and stores and controllers. If your controller and component are in these "global" lists, they are already loaded when your requires list is evaluated, so you don't see a difference at all. If you reuse the component in other projects, and you forget to add it to the Application.js, you may see a difference.

If they are not already loaded when they are needed, three things can happen:

1. The xtype is not yet registered with ComponentManager, so if you instantiate by xtype, this will fail ("could not resolve dependency").
2. If you instantiate by full name, you may get the warning that the components are loaded synchronously, which is slower than the asynchronous loading of the whole requires list at once.

3. If you instantiate using variables, Sencha Cmd is completely unable to add the required files to the dependency tree, and they may be missing in the built file. Example:

   var doWindow = true;
   var component = doWindow?'Ext.Window':'Ext.panel.Panel';
   Ext.create(component,{
       ...
   });
   

Because the requires list is also used by Sencha Cmd to resolve the dependency tree and make a correct partial order of the component definitions in the built js file.