MVC Architectureその３

Controlling the grid

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    views: [
        'user.List'
    ],

    init: function() {
        this.control({
//自分で作ったViewをクラスとして指定できるよ！
            'userlist': {
                itemdblclick: this.editUser
            }
        });
    },

    editUser: function(grid, record) {
        console.log('Double clicked on ' + record.get('name'));
    }
});

Creating a Model and a Store
モデルは↓のように定義するよ。

Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',
    fields: ['name', 'email']
});

モデルには1対1で対応するStoreを定義するよ。

Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    model: 'AM.model.User',
//テストデータ。本番用コードではAjaxとかで読み込むはず
    data: [
        {name: 'Ed',    email: 'ed@sencha.com'},
        {name: 'Tommy', email: 'tommy@sencha.com'}
    ]
});

コントローラとViewでStoreへの参照を定義するよ。
ViewにStoreクラスへの参照を定義しておくとViewの初期化時に
自動的にStoreがデータを読み込んで対応するModelオブジェクトのコレクションを作り、
Viewのプロパティに代入してくれるっぽい。

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    stores: ['Users'],
    models: ['User'],
    ...
});

Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.userlist',

    //we no longer define the Users store in the `initComponent` method
    store: 'Users',

    ...
});