Question

我一直想弄清楚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';
  }
});

应用/ Utils2.js

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

我意识到这是一个很长的例子，但我需要确保我完全描绘了我在做什么。 Utils依赖于Utils2，因为它需要调用Utils2的hello变量。其余的代码是设置一个网格并调用TheStore中的Utils.getText函数。 Firebug在TheStore.js的第6行抛出Test.Utils is undefined，在那个时间点，Test.Utils显然不存在，但Test.Utils2确实存在。

我的问题是......为什么Utils2存在，但Utils不存在？我认为需要带入我需要的课程，因此允许我使用它们，但我想我错了。我已经阅读了Sencha文档和众多主题，但没有什么真正有意义的，并没有真正解释这个例子。有人能在这里找到一些见解吗？我很感激。

**此外，我意识到我在这里做了一些愚蠢的事情，但这仅仅是一个例子，所以我不打算将全局的Utils结合起来或者根本不使用全局变量......我只是在尝试找出要求选项。

更新

感谢Izhaki在下面的回答，我想出了什么。如果我想在我定义的类中使用必需的类，我将不得不等待创建对象（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'}
    ]);
  }
});

这样可行，但我的最后一个问题是......我是否必须在TheStore中对TheModel和/或TheGore中的TheStore有所需要？看起来TheController正在处理所有这些需求，因为我可以在TheGrid中使用Test.Utils，但是TheGrid并没有特别声明它需要Test.Utils。

此外，来自Sencha文档的this example让我更加困惑，因为在创建TheStore之前我显然没有使用Test.Utils，但是这个例子似乎可以使用Child类而不必等待它初始化（使用initComponent）。

Answer 1

这实际上并不是一个愚蠢的问题。

您可以将需求视为告诉ExtJS的一种方式：

“构建此类的对象时，请确保首先动态加载所需的脚本”。

你说这句话是正确的：

requires: ['Test.Utils', 'Test.Utils2'],

app.js中不需要

，原因是应用程序已经具有：

controllers: ['TheController'],

与您要求TheController所在的js脚本相同（任何模型/视图/控制器/存储定义也意味着需要相关脚本，即将动态加载）。

TheController有：

requires: ['Test.model.TheModel', 'Test.Utils'],

将动态加载这些内容 - 这就是为什么requires不需要相同的app.js;

你得到Firebug抛出Test.Utils未定义的原因是你给一个配置（hello）带有一个尚未动态加载的对象的引用 - 没有Test.Utils in构造TheStore之前的范围。

Answer 2

如果没有它，HasMany关系就无法运作
它有助于JSBuilder知道要包含哪些文件。例如，如果您的视口使用边框布局，则会错误地不包含它，并且您必须使用用途或要求包含它。

ExtJS：需要什么？

2 个答案: