ExtJS: Quel est le point de besoin?

J'ai été à essayer de comprendre ce qu'implique le fait dans Ext JS 4, et je n'arrive pas à trouver une réponse raisonnable. Disons que j'ai le code suivant:

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

app/controller/TheController.js

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

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

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

app/model/TheModel.js

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

app/Utils.js

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

app/Utils2.js

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

Je réalise que c'est un bon exemple, mais j'avais besoin de m'assurer pleinement dépeint ce que je faisais. Utils s'appuie sur Utils2 parce qu'il a besoin de faire appel Utils2 hello variable. Le reste du code est mise en place d'une grille et de l'appel de la Utils.getText fonction dans TheStore. Firebug jette un Test.Utils is undefined sur la ligne 6 en TheStore.js et, à ce point dans le temps, de Test.Utils, évidemment, n'existe pas, mais de Test.Utils2 n'.

Ma question est... pourquoi ne Utils2 existent, mais Utils ne l'est pas? Je pensais que nécessite introduit dans les classes que j'avais besoin, me permettant ainsi de les utiliser, mais je suppose que je me trompe. J'ai lu le Sencha docs et une multitude de fils, mais rien n'a vraiment de sens, et il n'a pas vraiment expliquer cet exemple. Quelqu'un peut-il apporter un aperçu ici? Je l'apprécierais.

**Aussi, je me rends compte que je suis en train de faire certaines choses stupides ici, mais c'est simplement pour un exemple, donc je ne suis pas à la recherche d'associer le global Utils ou de ne pas utiliser des variables globales à tous... je suis juste essayer de comprendre la nécessite de l'option.

Mise à JOUR

Grâce à Izhaki la réponse ci-dessous, j'ai pensé à quelque chose. Si je veux utiliser une classe dans une classe, je suis la définition, j'aurais à attendre pour que l'objet créé (c'est à dire, utiliser initComponent), donc mon magasin et de la grille des modifications au code:

app/store/TheStore.js

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

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

Cela fonctionne, mais ma dernière question est... dois-je avoir l'exige pour TheModel dans TheStore, et/ou TheStore dans TheGrid? Il semble que TheController est de prendre soin de tous ceux requiert parce que je peux utiliser de Test.Utils dans TheGrid, mais TheGrid n'est pas spécifiquement qu'il exige de Test.Utils.

Aussi, cet exemple de la Sencha docs me rend encore plus perplexe, parce que je suis clairement pas à l'aide de Test.Utils jusqu'à TheStore est créé, mais cet exemple me semble qu'il peut utiliser la classe Enfant sans avoir à attendre pour initialiser (à l'aide de initComponent).