6

カスタム フィルタリング ロジックとさまざまな読み込みモードを持つ複雑なアプリケーションを考えてみましょう。非表示の場合はロードが遅延し、非表示の場合はロードされませんが、表示されている場合はロードされ、カスタムフィルターが変更された場合はリロードされます.

mvc アプリのどの部分が読み込みを担当する必要があり、すべてを接続する方法は?

4

2 に答える 2

15

私が MVC を使い始めたとき、Sencha からこれに関する決定的な答えを見つけることはできませんでしたが、いくつかのアプリで成功を収めてきたことをお伝えできます。

ストアの使用方法に応じて、ストアを作成してロードします。それは私にとって3つの異なるカテゴリーに分かれているようです：

  1. アプリ全体に適用されるストア

  2. ビューのすべてのインスタンスに適用されるストア

  3. 単一のビューインスタンスに関連付けられているストア

1.アプリ全体に当てはまる店舗

通常、アプリのフレームワーク、キーボード ナビゲーション、メイン メニューなどを処理する「メイン」コントローラーがあります。

上記の最初のカテゴリに分類されるストアは、この「メイン」コントローラのstores配列に入ります。これらのストアが別のストアに依存していない場合は、単純に作成してautoLoad: true完了です。onLoadしかし、それらが別のストア データに依存している場合は、親ストアにリスナーを追加して、親のイベント内に依存ストアをロードします。

この最初のカテゴリに分類されるストアの例として、アプリ全体のコンボボックスで使用する参照ストアが挙げられます。通常は、さまざまな種類のビューで使用されます。これらは通常で構成されてautoLoad: trueおり、そのユーザーのセッションで再度ロードすることはありません。参照ストアを使用するコンボボックスが必要な場合はいつでも、次のように設定できます。

{
    xtype: 'combobox',
    allowBlank: false,
    forceSelection: true,
    store: Ext.getStore('SomeReferenceStore'),
    queryMode: 'local', // this makes sure the store doesn't reload
    valueField: 'id',
    displayField: 'name'
}

どちらも最初のカテゴリに分類され、一方が他方に依存している 2 つのストアの例を示すには、次のようにします。

私のアプリの 1 つで、動的な数のユーザー権限を持っています。ユーザーがアプリにログインすると、さまざまな権限を取得し、Userモデルを変更して、これらの異なる権限ごとにブール値フィールドを含める必要がありました。

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',

    models: [
        'User', 
        'Reference',
        // etc...
    ],

    stores: [
        'CurrentUser', 
        'PermissionRef', // this is "autoLoad: true"
        // etc...
    ],

    init: function() {
        var me = this;       

        // update the user model and load the user
        me.getPermissionRefStore().on('load', function(store, records) {
            var model = me.getUserModel(),
                fields = model.prototype.fields.getRange();

            // append the permissions onto the User model fields
            Ext.each(records, function(permission) {
                fields.push({
                    name: permission.get('name'), 
                    type: 'bool',
                });
            });

            // update the user model with the permission fields
            model.setFields(fields);

            // load the current user
            me.getCurrentUserStore().load();

            // other stuff...

        });

        // other stuff...

    }

});

これにより、ユーザーへの参照と、ユーザーが使用できるアクセス許可が必要なときはいつでも、次のように呼び出すだけです。

var user = Ext.getStore('CurrentUser').first();

ビューは、読み込まれているストアに依存する場合もあります。たとえば、私のメイン メニュー項目はデータベース テーブルによって決定されます。その場合onLoad、同じように (コントローラーのinit関数内に)リスナーを含めます。

// create the menu once we know what menu items are available
me.getMenuStore().on('load', function(store) {
    me.getViewport().add(Ext.widget('mainpanel'));            
});

MyApp.store.Menu自体は で構成されますautoLoad: true。

2. ビューのすべてのインスタンスに適用されるストア

これらを最初のカテゴリと同じように作成してロードしますが、「メイン」コントローラー配列ではなく、特定のビューコントローラーの配列に配置するだけです。storesstores

それから、基本的なコンセプトは同じautoLoad: trueです。別のストアのデータに依存する場合、そうでないものもあります。

そうでないものについてはautoLoad: true、コントローラーの関数内のどこかにロードされるかinit、何らかのイベントが発生した結果としてロードされます。

3. 単一のビューインスタンスに関連付けられているストア

ここでは MVC の粒度に逆らうかもしれませんが、ビューの単一のインスタンスに適用されるストアをビュー自体の内部に適用するのに適した場所は実際にはありません。

storesほとんどの場合、これらのストアをビュー コントローラーの配列に入れることさえしません。initComponentビューの関数内でそれらを作成してロードするだけです。この結果、ビューが破棄されるとストアへの参照がなくなるため、ストアも破棄されます。これは、何度も作成される可能性のあるストアのリソースを削減するのに役立ちます。

たとえば、 aMyApp.view.UnicornWeightGridを拡張し、gridpanel時間の経過に伴うユニコーンの漸進的な重みを示す があるとします。ユーザーはUnicornWeightGrid、比較および相互参照の目的で、レルム内のすべてのユニコーンの を開くことができます。のインスタンスと同じ数の の異なるインスタンスがUnicornWeightStoreありますUnicornWeightGrid。

ビューは次のように定義できます。

Ext.define('MyApp.view.UnicornWeightGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.unicornweight',
    requires: [
        'MyApp.model.UnicornWeight'
    ],
    closable: true,    
    initComponent: function() {
        var me = this;

        me.store = Ext.create('Ext.data.Store', {
            model: 'MyApp.model.UnicornWeight',
            proxy: {
                type: 'ajax',
                url: 'unicorns/weight',
                extraParams: {
                    name: me.unicornName
                }
            }
        });

        me.store.load();
    });
});

次に、別のものを取得したいときはいつでも、次のUnicornWeightGridように呼び出すことができます。

var grid = Ext.widget('unicornweight', {
    unicornName: someUnicornNameVariable
});

myTabPanel.add(grid);

ビューonLoadで定義されたストアで必要なリスナーも、ビュー内にアタッチします。だから私は本当にどこにも参照を必要としません。

とはいえ、これがストアをセットアップする唯一の方法ではありません。

いくつかの異なる ExtJS "MVC" アプリを作成する際に一貫してストアを処理するには、これが最も実行可能な方法であることがわかりましたが、「特別な」ケースでは別の方法で行うこともあります。

「MVC」はかなりルーズなデザイン パターンであり、私が使用したほぼすべてのフレームワークで異なる方法で定義および実装されていることに注意してください。そのため、自分に最適な方法をほとんど実行できます。

于 2012-08-24T16:50:42.067 に答える
0

このストアを表示するグリッドのコントローラー内にストアをロードするロジックを配置する必要があります。afterrenderそれらをイベントのハンドラーに入れました。

于 2012-08-24T16:18:23.737 に答える