ExtJS: Какой смысл?

Я пытался выяснить, что требуется в Ext JS 4, и я не могу придумать разумный ответ. Скажем, у меня есть следующий код:

app.js

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!'
      }]
    });
  }
});

приложение/контроллер/TheController.js

Ext.define('Test.controller.TheController', {
  extend: 'Ext.app.Controller',
  models: ['TheModel'],
  stores: ['TheStore'],
  views: ['TheGrid'],
  init: function() {
  }
});

приложение/просмотр/TheGrid.js

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'}
  ]
});

приложение/магазин/TheStore.js

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'}
  ]
});

приложение/модель/TheModel.js

Ext.define('Test.model.TheModel', {
  extend: 'Ext.data.Model',
  fields: [
    {name: 'name', type: 'string'},
    {name: 'phone', type: 'string'},
    {name: 'hello', type: 'string'}
  ]
});

приложение /Utils.js

Ext.define('Test.Utils', {
  singleton: true,
  requires: ['Test.Utils2'],
  getText: function() {
    return Test.Utils2.hello + 'world';
  }
});

приложение /Utils 2.js

Ext.define('Test.Utils2', {
  singleton: true,
  hello: 'hello'
});

Я понимаю, что это очень длинный пример, но мне нужно было убедиться, что я полностью изобразил то, что делаю. Utils полагается на Utils2, потому что ему нужно вызвать hello-переменную Utils2. Остальная часть кода настраивает сетку и вызывает функцию Utils.getText в TheStore. Firebug выбрасывает Test.Utils is undefined в строке 6 в TheStore.js, и в этот момент Test.Utils явно не существует, но Test.Utils2 делает.

Мой вопрос: почему существует Utils2, а Utils - нет? Я думал, что мне нужны были классы, которые мне нужны, что позволило мне использовать их, но я думаю, что я ошибаюсь. Я читал документы Sencha и множество потоков, но ничего не имело смысла, и на самом деле это не объясняет этот пример. Может ли кто-нибудь пролить прозрение? Я был бы признателен.

** Кроме того, я понимаю, что я делаю некоторые немые вещи здесь, но это просто для примера, поэтому я не собираюсь комбинировать глобальные Utils или вообще не использовать глобальные... Я просто пытаюсь для определения требуемого варианта.

UPDATE

Благодаря ответу Ижаки ниже, я понял что-то. Если я хочу использовать требуемый класс в классе, который я определяю, мне придется подождать, пока объект будет создан (IE, используйте initComponent), поэтому мой код хранилища и сетки изменится на:

приложение/магазин/TheStore.js

Ext.define('Test.store.TheStore', {
  extend: 'Ext.data.Store',
  requires: ['Test.model.TheModel'],
  model: 'Test.model.TheModel'
});

приложение/просмотр/TheGrid.js

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'}
    ]);
  }
});

Это работает, но мой последний вопрос... у меня есть необходимость для TheModel в TheStore и/или TheStore в TheGrid? Кажется, что TheController заботится обо всех этих требованиях, потому что я могу использовать Test.Utils в TheGrid, но TheGrid не указывает конкретно, что для этого требуется Test.Utils.

Кроме того, этот пример из документов Sencha меня смущает, потому что я явно не использую Test.Utils до создания TheStore, но этот пример кажется, что он может использовать класс Child, не дожидаясь его инициализации (используя initComponent).