首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >ExtJS: requires的意义是什么?

ExtJS: requires的意义是什么?
EN

Stack Overflow用户
提问于 2012-06-12 09:40:39
回答 2查看 16.3K关注 0票数 20

我一直在尝试弄清楚ExtJS4中的requires是做什么的,但我似乎想不出一个合理的答案。假设我有以下代码:

app.js

代码语言:javascript
复制
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

代码语言:javascript
复制
Ext.define('Test.controller.TheController', {
  extend: 'Ext.app.Controller',
  models: ['TheModel'],
  stores: ['TheStore'],
  views: ['TheGrid'],
  init: function() {
  }
});

app/view/TheGrid.js

代码语言:javascript
复制
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

代码语言:javascript
复制
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

代码语言:javascript
复制
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

代码语言:javascript
复制
Ext.define('Test.Utils', {
  singleton: true,
  requires: ['Test.Utils2'],
  getText: function() {
    return Test.Utils2.hello + 'world';
  }
});

app/Utils2.js

代码语言:javascript
复制
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不存在?我认为requires引入了我需要的类,因此允许我使用它们,但我想我错了。我已经阅读了Sencha文档和大量的帖子,但没有真正有意义的东西,它也没有真正解释这个例子。有人能在这里说出一些见解吗?我会很感激的。

**此外,我意识到我在这里做了一些愚蠢的事情,但这只是一个例子,所以我并不打算组合全局Util或根本不使用全局变量……我只是想弄清楚requires选项。

更新

感谢Izhaki下面的回答,我想通了。如果我想要在我定义的类中使用一个必需的类,我将不得不等待对象被创建(IE,使用initComponent),所以我的存储和网格代码更改为:

app/store/TheStore.js

代码语言:javascript
复制
Ext.define('Test.store.TheStore', {
  extend: 'Ext.data.Store',
  requires: ['Test.model.TheModel'],
  model: 'Test.model.TheModel'
});

app/view/TheGrid.js

代码语言:javascript
复制
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和/或TheGrid中的TheStore的要求?看起来TheController已经满足了所有这些需求,因为我可以在TheGrid中使用Test.Utils,但是TheGrid并没有明确声明它需要Test.Utils。

此外,Sencha文档中的this example让我更加困惑,因为在创建TheStore之前,我显然不会使用Test.Utils,但这个示例似乎可以使用TheStore类,而不必等待它初始化(使用initComponent)。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-06-12 10:27:48

这其实不是一个愚蠢的问题。

你可以把requires看作是告诉ExtJS的一种方式:

“当你构造这个类的对象时,请确保首先动态加载所需的脚本”。

你对这一行的看法是对的:

代码语言:javascript
复制
requires: ['Test.Utils', 'Test.Utils2'],

app.js中不需要,原因是应用程序已经有了:

代码语言:javascript
复制
controllers: ['TheController'],

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

TheController具有:

代码语言:javascript
复制
requires: ['Test.model.TheModel', 'Test.Utils'],

这就是为什么app.js不需要相同的requires

你得到Firebug抛出Test.Utils的原因是未定义的,因为你给了一个配置(hello),引用了一个还没有动态加载的对象--在构造Test.Utils之前,作用域中没有TheStore

票数 14
EN

Stack Overflow用户

发布于 2012-06-12 15:15:15

  1. HasMany关系离不开它
  2. 它可以帮助JSBuilder知道要包含哪些文件。例如,如果您的视口使用边框布局,则不会正确地将其包括在内,而您必须使用use或requires才能将其包括在内。
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10989587

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档