我一直在尝试弄清楚Ext JS 4中的requires是做什么用的，但似乎找不到一个合理的答案。假设我有以下代码:
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'
});
我知道这是一个非常长的例子，但我需要确保我完全描绘出我的做法。Utils依赖于Utils2，因为它需要调用Utils2的hello变量。其余的代码是在设置网格和调用TheStore中的Utils.getText函数。Firebug在TheStore.js的第6行抛出一个“Test.Utils未定义”的错误，此时，Test.Utils显然不存在，但Test.Utils2存在。
我的问题是...为什么Utils2存在而Utils不存在？我认为requires会引入我所需的类，从而使我能够使用它们，但我想我错了。我已经阅读了Sencha文档和大量线程，但没有什么真正有意义的东西，并且它并没有真正解释这个例子。有人能在这里提供一些见解吗？我会感激不尽。
另外，我知道我在这里做了一些愚蠢的事情，但这只是一个例子，所以我不想合并全局Utils或根本不使用全局...我只是想弄清楚要求选项。
更新
由于Izhaki下面的答案，我想到了一些东西。如果我想在我正在定义的类中使用所需的类，我必须等待对象被创建（即使用initComponent），所以我的存储和网格代码改为：
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'}
]);
}
});
这个方法可行，但我的最后一个问题是...我是否必须在TheStore中拥有TheModel的要求，并且在TheGrid中拥有TheStore的要求？因为我可以在TheGrid中使用Test.Utils，但TheGrid并没有明确说明它需要Test.Utils。
此外，这个来自Sencha文档的例子让我更加困惑，因为在创建TheStore之前，我显然没有使用Test.Utils，但是这个例子似乎可以在不等待初始化（使用initComponent）的情况下使用Child类。