MVC Architectureその２

Defining a View
Viewを定義してみよう。

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

    title : 'All Users',

//initComponentの中で初期化する。見た目を決めるパラメータの中で動的に変わらないものはここで設定する
    initComponent: function() {
        this.store = {
            fields: ['name', 'email'],
            data  : [
                {name: 'Ed',    email: 'ed@sencha.com'},
                {name: 'Tommy', email: 'tommy@sencha.com'}
            ]
        };

        this.columns = [
            {header: 'Name',  dataIndex: 'name',  flex: 1},
            {header: 'Email', dataIndex: 'email', flex: 1}
        ];

//親クラスの同じ名前のメソッドを呼ぶ。プロトタイプチェーンの一番上までさかのぼってすべての同名メソッドを呼ぶ。
        this.callParent(arguments);
    }
});

Viewを作ったらControllerにViewへの参照を追加する。
そうするとViewをxtypeとして指定出来るようになる。

Ext.application({
    ...

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: {
                xtype: 'userlist'//自作のViewクラスのエイリアス！
            }
        });
    }
});