1

MVVM Extjs 6アプリケーションを開発しています。私は店を持っており、この店を複数のパネルで使用したいと考えています。すべてのパネルのデータのstoreは同じです。ストアをリロードして、いくつかのパネルのviewControllerでいくつかの関数を呼び出したいと思います。

何も思いつきません。この機能を実装するにはどうすればよいですか?

4

1 に答える 1

1

ストアをパネルに接続する方法を知る必要があるのか​​ 、それともストアが更新されたときに何かを明示的に呼び出す必要があるのか​​ は明確ではありません.両方の懸念に対処しようとします.

どうやって動くか：

ストアは、サーバーに接続し、そのデータをロード/更新するオブジェクトです。ストアには、モデル (ビュー モデルではなくデータ モデル) とプロキシ (サーバーへの接続方法を指示するオブジェクト) が必要です。このようなもの：

Ext.define('MyApp.store.Users', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.User',
    proxy: {
        type: 'rest',
        url: 'url_to_some_rest_api_function/',
        reader: {
            type: 'json',
            rootProperty: 'rows'
        },
        writer: {
            writeAllFields: true
        }
    }
});

モデルは次のようになります。

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',

    /*Use mapping here if backend name is different*/
    fields: [
        {
            name: 'Name',
            mapping: 'FirstName'
        },
        {
            name: 'Email',
            type: 'string'
        }
    ]

});

これで、データをこのストアにバインドするパネルを構築できます。ここでは、次のようなグリッド パネルを想定します。

Ext.define('MyApp.view.UsersGrid', {
    extend: 'Ext.grid.Panel',

    alias: 'widget.users-grid', 

    store: 'Users',
    autoLoad: true,

    selType: 'rowmodel',
    columns: [
        {
            dataIndex: 'Name',
            flex: 1,
            text: 'Name of the user'
        },
        {
            dataIndex: 'Email',
            flex: 1,
            text: 'Email'
        }
    ]
});

部分に注意してくださいautoLoad: true。これにより、ビューのロード時にグリッドがデータを自動的にロードします。たとえば、ボタンを使用して、任意のView Controllerでこのストアを手動でリロードするには、次を使用できます。

Ext.ComponentQuery.query('users-grid')[0].getStore().reload();

これにより、グリッドもすぐに更新されます。

ストアが変更されたときに関数を呼び出す方法

ストアが変更されたときにいくつかの関数を呼び出す場合は、ハンドラーをその datachanged イベントに追加します。

var myStore = Ext.getStore("Users");
myStore.on("datachanged", onDataChanged, this);

function onDataChanged(store){
    // code here
}
于 2015-08-05T13:44:52.713 に答える