web-dev-qa-db-ja.com

ExtJS：必要なのは何ですか？

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

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はTheStore.jsの6行目にTest.Utils is undefinedをスローします。その時点では、Test.Utilsは明らかに存在しませんが、Test.Utils2は存在します。

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

**また、私はここでいくつかの馬鹿げたことをしていることに気づきましたが、それは単なる例であり、グローバルUtilsを組み合わせたり、グローバルをまったく使用したりするつもりはありません...私はただ理解しようとしていますrequireオプション。

[〜＃〜]更新[〜＃〜]

以下のIzhakiの答えのおかげで、私は何かを理解しました。定義しているクラスで必要なクラスを使用する場合は、オブジェクトが作成されるのを待つ必要があるため（つまり、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を使用）。

javascriptextjsextjs4extjs4.1extjs-mvc
20
incutonez

これは実際にはまったく馬鹿げた質問ではありません。

ExtJSに伝える方法としてrequiresを見ることができます：

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

あなたはこの行について正しいです：

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

app.jsでは必要ありません。理由は、アプリケーションにすでに次のものがあるためです。

controllers: ['TheController'],

これは、TheControllerが存在するjsスクリプトが必要であると言っているのと同じです（モデル/ビュー/コントローラー/ストアの定義は、関連するスクリプトが必要であること、つまり動的に読み込まれることも意味します）。

TheControllerには：

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

これらを動的にロードします-これが同じrequiresが必要ない理由ですapp.js;

FirebugがTest.Utilsをスローする理由は未定義です。これは、まだ動的にロードされていないオブジェクトへの参照を含む構成（hello）を指定するためです。スコープにはTest.Utilsがありません。 TheStoreが構築されるまで。

14
Izhaki

  1. HasManyの関係は、それなしでは機能しません。

  2. これは、JSBuilderがどのファイルを含めるかを知るのに役立ちます。たとえば、ビューポートが境界線レイアウトを使用している場合、それは誤って含まれず、usesを使用するか、含める必要があります。

0
Neil McGuigan