14

ExtJS 4 の MVC パターンで問題が発生しました。少なくとも、問題は発生したと思います。この質問で複数の人にアプローチし、Sencha フォーラムに何度も投稿してきた私は、電球または確認を得ることを期待して、より多くの聴衆に目を向けています.

問題

アプリケーションには、さまざまなビューを開く機能があり、その一部はミニ アプリケーションです。さらに、ユーザーはビューの複数の同時コピーを開きたい場合があります。

このアプリケーションは、単一ページのクライアント側 Javascript アプリケーションです。

ExtJS 4 MVC モデルでは、すべてのコントローラーを Application クラスで定義する必要があります。これらのコントローラーは、アプリケーションが読み込まれるときに初期化されます。コントローラーは、ビュー、モデル、およびストアを追跡します。

コントローラー A を複数回初期化すると (ビューの複数のコピーを作成するなど)、同じデータ ストアを参照する 2 つのビューが作成され、アプリケーション イベント バスに重複したイベントが機能的に送信されます。

Component と Controller に新しいプロトタイプ メソッドを追加して、アプリケーションをリファクタリングし、a) サブ コントローラー (一部のコントローラーはかなり巨大になりました) と b) 動作するビュー専用のストアを定義します。サーバーからレコードを取得するなどの操作が必要な場合に、ハンドラーが簡単に使用できるように、モデルは引き続きコントローラーで定義できます。

質問

MVC についての私の理解は、モデルが Controller よりも View に直接関係していると信じるようになります。ExtJS 4 は、ロードされたデータの再利用を促進し、インスタンス化された同じクラスの多くのコピーを持たないように最適化する目的で、ストア (より古典的なモデルへのラッパーと見なすことができると思います) をコントローラーにアタッチすることを決定したと思います. ただし、ユーザーがビューの多くのインスタンスを使用できるようにする場合は、これを行うことはできないようです。私の考えでは、オブジェクト指向フレームワークでは多くのインスタンスを持つことが重要なオプションです。そのため、この傾向に逆らい、一部の Ext 基底クラスにプロトタイプを実装したのはそのためです。(ありがとうExt.implement!)。

すぐに使用できる MVC クラスを使用し、提供されたセッター、ゲッターなどを使用して、異なるデータがロードされたビューの複数の同時インスタンスを作成する方法はありますか?

4

7 に答える 7

8

同様の問題に直面しました：

クライアントごとにビューの新しいインスタンスを開く CRM タイプのアプリケーションのタブパネルを考えてみましょう。また、タブ ビューには、そのクライアントに関連するさまざまなデータ コレクションと対話するための 3 つまたは 4 つの行編集グリッドパネルが含まれているとします。

私が思いついた解決策は、Sencha フォーラムのthisに基づいていました。簡単に言えば、ビューからディスパッチされるほとんどすべてのイベントには、ビュー自体への参照が含まれています。コントローラーの制御関数のハンドラーはすべて、これらを使用して正しいビュー インスタンスへの参照を取得します。

これに必要な同じストアの複数のインスタンスを処理するために、私はその投稿からこれを心に留めました。

ビューまたはグローバルの Store インスタンスの場合は、必要に応じて異なります。グローバルに使用する場合は、グローバルにします。ビューでのみ必要な場合は、ビューに配置します。MVC は法律ではありません。必要に応じて変更できます。技術的には、MVC の Controller 部分は View 部分と Model 部分の間の仲介者であると想定されていますが、必要ない場合もあります。私は 95% の確率でビューでストアを作成します。例を挙げます...

製品の Store がある場合は、おそらくグリッドでその Store を参照するだけで済みます。これは通常、アプリケーションの他の部分では必要ありません。ただし、国をロードするための Store がある場合、グローバルに必要になることが多いため、一度ロードするだけで、その Store を複数のビューで設定/使用できます。

したがって、ビューの initComponent メソッド内で、特にビュー インスタンスに関連する必要なストアを作成しました。アプリケーションには、MVC の推奨事項に従ってストア クラスとして作成したグローバル ストアがいくつかありました。ビュー内にビュー インスタンス ストアをカプセル化することはうまくいきました。次に、必要なコントローラーのインスタンスは 1 つだけでした。

具体的にあなたの質問に答えるために、現在、同じストア コンストラクターを使用する同じビューの複数のインスタンスを処理するための ExtJS 公式の推奨事項または構成はありません。私はそのようなものを探すのに時間を費やしましたが、私が見つけた最高のものは、フォーラムモデレーターの1人からのこの推奨事項でした.

于 2012-05-02T15:36:13.273 に答える
2

ビュー/モデルの数に関係なく、コントローラーのインスタンスが1つ以上必要になることはないと思います。ここで機能例を参照してください：

http://whatisextjs.com/extjs-4-extension/fieldset-w-dynamic-controls-7

于 2011-12-05T15:32:22.860 に答える
2

これはかなり簡単に実行できます。いくつかのルールに従う必要があります。

  1. アプリの起動時にコントローラーをロードします。それらをアンロードしないでください。メモリや時間について心配する必要はありません。js を最小化して連結する限り、数百のコントローラーでもかなり小さいです。

  2. コントローラーの refs または views プロパティを使用しないでください。コントローラーの 1 つのインスタンスを使用しますが、ビューの複数のインスタンスを使用するため、ビューへの参照は必要ありません。

  3. コントローラーではイベントリスナーのみを使用してください。ビューのイベントのみをリッスンします。ハンドラーの「cmp」パラメーターを介して、イベントハンドラーのビューへの (一時的な) 参照をいつでも取得できます。

  4. ビューを「起動」するには、ビューを作成して別のビューに追加します。それを破壊するには、それを破壊します。ビューを起動するためにコントローラーを使用しません。コントローラーで afterrender および beforedestroy イベントを使用して、ロジックを追加できます。

于 2012-11-04T22:07:18.037 に答える
1

ExtJS の MVC では、コントローラーはシングルトンです。DeftJSの MVC に対する考え方が気に入っています。ビューの各インスタンスには、コントローラーの独自のインスタンスがあります。このようにして、ビューの特定の部分のコントローラーにすべての「制御ルール」を配置できます。これは、ビューが開いたときにのみインスタンス化されます。

同じプロジェクトで複数の Defts JS アプリを使用する方法を経験したことがありません。

于 2012-11-14T10:48:25.713 に答える
0

どのようにビューを作成しますか？すべてのオブジェクトに異なるストアまたは構成データを渡すことができない理由はわかりません。いくつかのコードサンプルは、まさにあなたがしていることに役立ちます。たとえば、同様のサウンドのアプリケーションがあり、すべてが拡張機能で実行されます。したがって、グリッドが必要な場合は、

Ext.define('MyApp.grids.something',{
extends:'Ext.grid.panel' 
//...

これらのクラスは事前定義されています。次に、コントローラーまたはビューがこのグリッドをロードしているとき、それらは使用しています

var grid=Ext.create('MyApp.grids.something',{id:'unique',store:mystore});

ご覧のとおり、グリッドが作成されるたびに、同じグリッドに異なる構成オプションを渡すことができます。私たちはあなたが扱うのとまったく同じようにこれを扱うことができます

Ext.create('Ext.grid.Panel');

もちろん、いくつかのオプションを事前定義し、いくつかのオーバーライド不可などを作成することを除いて。

これがお役に立てば幸いです。

于 2011-12-06T20:01:26.487 に答える
0

もちろん。それ以外のことを信じたきっかけは何ですか？これは、ウィンドウコンポーネントから拡張するカスタムビューを作成する例です。このメソッドは同じコントローラーから何度も実行でき、そのたびにビューの新しいインスタンスを取得します。

「これ」は、コードが実行されるコントローラーを指します。

       this.getRequestModel().load(requestID,{       //load from server (async)
                 success: function(record, operation) {
                        var view = Ext.widget('requestEdit',{
                            title: 'MyRequest '+requestID
                        });
                        var form = view.down('form');
                        form.loadRecord(record);
                 }
         });
于 2011-12-01T08:08:03.790 に答える
0

この投稿をチェックしてください。ビュー構成からいくつかの構成 (storeや などitemId) を取得し、それをビューポート構成に入れるという考え方があります。

// .../app/view/Viewport.js
Ext.define('MyApp.view.Viewport', {
    // ...
    items: [
        // ...
        { xtype: 'testview', store: 'Store1', itemId: 'instance1' },
        { xtype: 'testview', store: 'Store2', itemId: 'instance2' }
    ]
});

明らかに、ストアの問題は解決されます。が異なるitemIdと、イベントを適切に処理できます。

于 2013-03-20T20:26:31.947 に答える