我一直在試圖找出什麼需要做的的Ext JS 4，我似乎無法拿出一個合理的答案。比方說，我有以下代碼：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函數。螢火蟲投在TheStore.js線6 Test.Utils is undefined，並且在那個時間點，Test.Utils顯然不存在，但Test.Utils2一樣。
我的問題是...爲什麼Utils2存在，但utils的不？我認爲需求引入了我需要的類，因此允許我使用它們，但我想我錯了。我已經閱讀了Sencha文檔和衆多的主題，但沒有任何意義，並沒有真正解釋這個例子。任何人都可以在這裏發現一些見解我會很感激。
**另外，我知道我在這裏做了一些愚蠢的事情，但它僅僅是一個例子，所以我不希望全球utils的結合，或根本不使用全局......我只是試圖找出需求選項。
UPDATE
得益於以下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 docs的this example讓我更加困惑，因爲在創建TheStore之前我顯然沒有使用Test.Utils，但是這個例子似乎可以使用Child類而無需等待它初始化（使用initComponent）。
我喜歡這個答案，但有一些東西沒有得到解釋（請參閱我的更新的問題部分）。 – incutonez
至於你的第一個新問題：你並不需要TheStore中的TheModel（具體來說就像你在你的模型配置中一樣，這與你需要的一樣，但是你沒有得到setter和getters的require ）。你也不需要在TheGrid中要求 - 正如你所說，控制器正在照顧所有這些。 – Izhaki
基本上，當應用程序啓動時，它會動態加載並創建所有控制器的實例，並在相應的配置對象中引用所有模型/視圖/存儲。一旦完成，所有這些都進入了範圍（包括視圖xtypes）。 – Izhaki