Ext JS 4：要点は何ですか？

Question

私は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'} 
    ] 
}); 

APP /ストア/ 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 /モデル/ 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'; 
    } 
}); 

アプリ/Utils2.js

Ext.define('Test.Utils2', { 
    singleton: true, 
    hello: 'hello' 
}); 

私は、これは本当に長い一例で実現するが、私は完全に私が何をやっていた描写を確認する必要がありました。 Utils2は、Utils2のhello変数を呼び出す必要があるため、Utils2に依存しています。残りのコードはグリッドを設定し、TheStoreのUtils.getText関数を呼び出しています。 FirebugはTheStore.jsの行6にTest.Utils is undefinedを投げ込み、その時点でTest.Utilsは明らかに存在しませんが、Test.Utils2は実行します。

私の質問は...なぜUtils2は存在しますが、Utilsは存在しません。私は必要なクラスを持ってきて、それを使って使うことができると思ったが、間違っていると思う。私はSenchaの文書とスレッドの多数を読んだことがありますが、実際には何の意味もなく、この例を実際に説明するものではありません。誰かここにいくつかの洞察力を発することはできますか？私はそれを感謝します。

**また、私はここでいくつかばかなことをしていることを理解していますが、それは単なる例であり、グローバルなUtilsを組み合わせたり、グローバルを使用したりするつもりはありません。必要なオプションを見つけようとしています。以下Izhakiの答えに

UPDATE

おかげで、私は何かを考え出しました。私が定義しているクラスで必要なクラスを使用したい場合は、オブジェクトが作成されるのを待たなければなりません（IE、initComponentを使用します）。

app /店舗/ 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を使用することができるので、TheControllerが必要とするすべてを処理しているようですが、TheGridはTest.Utilsが必要であると具体的に述べていません。

また、Sencha docsのthis exampleは、TheStoreが作成されるまではっきりとTest.Utilsを使用していないので、もっと混乱させてしまいますが、この例では初期化を待たずにChildクラスを使用できるようですinitComponentを使用して）。

Answer 1

これは実際には全く問題ではありません。あなたが見ることができ

はExtJSのを伝えるための手段として必要とします。

「あなたは、このクラスのオブジェクトを作成するときに、動的に最初に必要なスクリプトをロードすることを確認してください」。

あなたはこのラインについて正しいです：app.jsに必要とされていない

requires: ['Test.Utils', 'Test.Utils2'], 

、ビーイングは、アプリケーションがすでに持っているということです理由：

controllers: ['TheController'], 

あなたはJSを必要と言うと同じですTheControllerが存在するスクリプト（すべてのモデル/ビュー/コントローラ/ストア定義は、関連スクリプトが必要である、つまり動的にロードされることを意味します）。

TheControllerがあります。これらの動的にロードされます

requires: ['Test.model.TheModel', 'Test.Utils'], 

は - 同じ requiresがそれ app.jsを必要とされていない理由です。構築され TheStoreまでの範囲には Test.Utilsはありません -

あなたはFirebugのが定義されていないTest.Utilsを投げてもらう理由は、あなたがまだ動的にロードされていないオブジェクトを参照して、設定（hello）を与えることです。それは

それはJSBuilderに含めるファイルを知ることができますせずに

Answer 2

1. hasManyの関係は、単純に動作しません。たとえば、あなたのビューポートが境界線レイアウトを使用する場合、間違って含まれないので、それを使用するために使用する必要があります。