私はExtJS4で何が必要かを理解しようとしてきましたが、合理的な答えを思い付くことができないようです。次のコードがあるとしましょう。
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のhello変数を呼び出す必要があるため、Utils2に依存しています。残りのコードは、グリッドを設定し、TheStoreでUtils.getText関数を呼び出しています。FirebugはTest.Utils is undefinedTheStore.jsの6行目をスローします。その時点で、Test.Utilsは明らかに存在しませんが、Test.Utils2は存在します。
私の質問は...なぜUtils2は存在するのに、Utilsは存在しないのですか？必要なクラスを持ち込んで使えるようにする必要があると思ったのですが、間違っていると思います。私はSenchaのドキュメントと多数のスレッドを読みましたが、実際には何も意味がなく、この例を実際に説明していません。誰かがここでいくつかの洞察を流すことができますか？私はそれを感謝します。
**また、私はここでいくつかの馬鹿げたことをしていることに気づきましたが、それは単なる例であり、グローバルUtilsを組み合わせたり、グローバルをまったく使用したりするつもりはありません...私はただ理解しようとしています必要なオプション。
アップデート
以下のイザキの答えのおかげで、私は何かを理解しました。定義しているクラスで必要なクラスを使用する場合は、オブジェクトが作成されるのを待つ必要があるため（つまり、initComponentを使用）、ストアとグリッドコードは次のように変更されます。
app / store / TheStore.js
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を使用できるため、TheControllerがこれらすべての要件を処理しているようですが、TheGridはTest.Utilsが必要であると具体的に述べていません。
また、 Senchaドキュメントのこの例では、TheStoreが作成されるまでTest.Utilsを使用していないため、混乱が生じますが、この例では、初期化を待たずにChildクラスを使用できるようです（initComponentを使用）。 。