我一直在试图弄清楚 Ext JS 4 中需要做什么，但我似乎无法给出一个合理的答案。假设我有以下代码：
应用程序.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 函数。FirebugTest.Utils is undefined在 TheStore.js 的第 6 行抛出了一个错误，此时 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 和/或 TheGrid 中的 TheStore 的要求？看起来 TheController 正在处理所有这些需求，因为我可以在 TheGrid 中使用 Test.Utils，但 TheGrid 并没有明确说明它需要 Test.Utils。
此外， Sencha 文档中的这个示例让我更加困惑，因为在创建 TheStore 之前我显然没有使用 Test.Utils，但是这个示例似乎可以使用 Child 类而无需等待它初始化（使用 initComponent） .