title: ExtJS: What's the point of requires?
body: <p>I've been trying to figure out what requires does in Ext JS 4, and I can't seem to come up with a reasonable answer.  Let's say I have the following code:</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>Ext.Loader.setConfig({
    enabled: true
  });
  
  Ext.Loader.setPath('Ext.ux', 'examples/ux');
  
  Ext.application({
    name: 'Test',
    appFolder: 'app',
    controllers: ['TheController'],
    requires: ['Test.Utils', 'Test.Utils2'],  // I don't think this does anything... couldn't find this option for Ext.application
    launch: function() {
      Ext.create('Ext.Viewport', {
        layout: 'border',
        items: [{
          xtype: 'thegrid',
          region: 'center',
          title: 'blah!'
        }]
      });
    }
  });
  </code></pre>
  
  <p><strong>app/controller/TheController.js</strong></p>
  
  <pre><code>Ext.define('Test.controller.TheController', {
    extend: 'Ext.app.Controller',
    models: ['TheModel'],
    stores: ['TheStore'],
    views: ['TheGrid'],
    init: function() {
    }
  });
  </code></pre>
  
  <p><strong>app/view/TheGrid.js</strong></p>
  
  <pre><code>Ext.define('Test.view.TheGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.thegrid',
    requires: ['Test.store.TheStore'],
    store: 'TheStore',
    columns: [
      {header: 'Name', dataIndex: 'name'},
      {header: 'Phone', dataIndex: 'phone'},
      {header: 'Hello', dataIndex: 'hello'}
    ]
  });
  </code></pre>
  
  <p><strong>app/store/TheStore.js</strong></p>
  
  <pre><code>Ext.define('Test.store.TheStore', {
    extend: 'Ext.data.Store',
    requires: ['Test.model.TheModel', 'Test.Utils'],
    model: 'Test.model.TheModel',
    data: [
      {name: 'keanu reeves', phone: '1800matrices', hello: Test.Utils.getText()},
      {name: 'james earl jones', phone: '1800starwar', hello: 'nothing here'},
      {name: 'barack obama', phone: '1800prsidnt', hello: 'hello world'}
    ]
  });
  </code></pre>
  
  <p><strong>app/model/TheModel.js</strong></p>
  
  <pre><code>Ext.define('Test.model.TheModel', {
    extend: 'Ext.data.Model',
    fields: [
      {name: 'name', type: 'string'},
      {name: 'phone', type: 'string'},
      {name: 'hello', type: 'string'}
    ]
  });
  </code></pre>
  
  <p><strong>app/Utils.js</strong></p>
  
  <pre><code>Ext.define('Test.Utils', {
    singleton: true,
    requires: ['Test.Utils2'],
    getText: function() {
      return Test.Utils2.hello + 'world';
    }
  });
  </code></pre>
  
  <p><strong>app/Utils2.js</strong></p>
  
  <pre><code>Ext.define('Test.Utils2', {
    singleton: true,
    hello: 'hello'
  });
  </code></pre>
  
  <p>I realize this is a really long example, but I needed to make sure I fully portrayed what I was doing.  Utils relies on Utils2 because it needs to call Utils2's hello variable.  The rest of the code is setting up a grid and calling the Utils.getText function in TheStore.  Firebug throws a <code>Test.Utils is undefined</code> on line 6 in TheStore.js, and at that point in time, Test.Utils obviously doesn't exist, but Test.Utils2 does.</p>
  
  <p>My question is... why does Utils2 exist, but Utils doesn't?  I thought requires brought in the classes that I needed, thus allowing me to use them, but I guess I'm wrong.  I've read the Sencha docs and a multitude of threads, but nothing really made sense, and it doesn't really explain this example.  Can anyone shed some insight here?  I'd appreciate it.</p>
  
  <p>**Also, I realize I'm doing some dumb things here, but it's merely for an example, so I'm not looking to combine the global Utils or not use globals at all... I'm just trying to figure out the requires option.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Thanks to Izhaki's answer below, I figured something out.  If I want to use a required class in a class I'm defining, I would have to wait for the object to get created (IE, use initComponent), so my store and grid code changes to:</p>
  
  <p><strong>app/store/TheStore.js</strong></p>
  
  <pre><code>Ext.define('Test.store.TheStore', {
    extend: 'Ext.data.Store',
    requires: ['Test.model.TheModel'],
    model: 'Test.model.TheModel'
  });
  </code></pre>
  
  <p><strong>app/view/TheGrid.js</strong></p>
  
  <pre><code>Ext.define('Test.view.TheGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.thegrid',
    requires: ['Test.store.TheStore'],
    store: 'TheStore',
    columns: [
      {header: 'Name', dataIndex: 'name'},
      {header: 'Phone', dataIndex: 'phone'},
      {header: 'Hello', dataIndex: 'hello'}
    ],
    // This is the change that works
    initComponent: function() {
      this.callParent();
      this.store.loadData([
        {name: 'keanu reeves', phone: '1800matrices', hello: Test.Utils.getText()},
        {name: 'james earl jones', phone: '1800starwar', hello: 'nothing here'},
        {name: 'barack obama', phone: '1800prsidnt', hello: 'hello world'}
      ]);
    }
  });
  </code></pre>
  
  <p>This works, but my last question is... do I have to have the requires for TheModel in TheStore, and/or TheStore in TheGrid?  It seems like TheController is taking care of all of those requires because I can use Test.Utils in TheGrid, but TheGrid doesn't specifically state that it requires Test.Utils.</p>
  
  <p>Also, <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Class-cfg-requires#cfg-requires" rel="noreferrer">this example</a> from the Sencha docs makes me more confused because I'm clearly not using Test.Utils until TheStore is created, but this example seems like it can use the Child class without having to wait for it to initialize (using initComponent).</p>