Architecting Your App in Ext JS 4, Part 2その１

この記事はhttp://docs.sencha.com/ext-js/4-0/#!/guide/mvc_pt2の抄訳・意訳です。


ModelやControllerをデザインする方法やコードについて見ていく。
Defining our application
Extjs4にはMVCライクなパターンが用意されている。
アプリはまずExt.applicationから始まる。
Ext.onReadyは使う必要なし。

Ext.application({
    name: 'Panda',
    autoCreateViewport: true,
    launch: function() {
        // This is fired as soon as the page is ready
    }
});

nameプロパティはトップレベルの名前空間になる。
autoCreateViewportがtrueの場合、app/view/Viewport.jsをインポートする。


The Viewport class
Viewportは個々のViewを結合する役割を果たす。
Viewportは子Componentをロードし、適切にConfigを設定する。
経験上、UIを作る上で一つずつViewを定義し、Viewportに追加していくのが最も速い。
まずは概要から決めていき、詳細に立ち入らないこと。


Creating the building blocks
Viewのコードを書いていく。
app/view/NewStation.js

Ext.define('Panda.view.NewStation', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.newstation',
    store: 'SearchResults',
    ... more configuration ...
});

app/view/SongControls.js

Ext.define('Panda.view.SongControls', {
    extend: 'Ext.Container',
    alias: 'widget.songcontrols',
    ... more configuration ...
});

app/view/StationsList

Ext.define('Panda.view.StationsList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.stationslist',
    store: 'Stations',
    ... more configuration ...
});

app/view/RecentlyPlayedScroller.js

Ext.define('Panda.view.RecentlyPlayedScroller', {
    extend: 'Ext.view.View',
    alias: 'widget.recentlyplayedscroller',
    itemTpl: '<div></div>',
    store: 'RecentSongs',
    ... more configuration ...
});

app/view/SongInfo.js

Ext.define('Panda.view.SongInfo', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.songinfo',
    tpl: '<h1>About </h1><p></p>',
    ... more configuration ...
});

Viewの中にStoreへの参照がある。


The models and stores
最初はサーバからJSONの静的ファイルを取得してテストするのがよい。
このアプリには二つのModelと三つのStoreがある。


Static data
data/songs.json

{
    'success': true,
    'results': [
        {
            'name': 'Blues At Sunrise (Live)',
            'artist': 'Stevie Ray Vaughan',
            'album': 'Blues At Sunrise',
            'description': 'Description for Stevie',
            'played_date': '1',
            'station': 1
        },
        ...
    ]
}

data/stations.json

{
    'success': true,
    'results': [
        {'id': 1, 'played_date': 4, 'name': 'Led Zeppelin'},
        {'id': 2, 'played_date': 3, 'name': 'The Rolling Stones'},
        {'id': 3, 'played_date': 2, 'name': 'Daft Punk'}
    ]
}

{
    'success': true,
    'results': [
        {'id': 1, 'name': 'Led Zeppelin'},
        {'id': 2, 'name': 'The Rolling Stones'},
        {'id': 3, 'name': 'Daft Punk'},
        {'id': 4, 'name': 'John Mayer'},
        {'id': 5, 'name': 'Pete Philly & Perquisite'},
        {'id': 6, 'name': 'Black Star'},
        {'id': 7, 'name': 'Macy Gray'}
    ]
}

Models
Extjs4のModelはExtjs3のRecordに似ているが、違う点はModelはProxy、validations、associationsを設定できるところ。
app/model/Song.js

Ext.define('Panda.model.Song', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'artist', 'album', 'played_date', 'station'],

    proxy: {
        type: 'ajax',
        url: 'data/recentsongs.json',
        reader: {
            type: 'json',
            root: 'results'
        }
    }
});

proxyは一般的にModelに設定するのがいいとされている。
理由は以下。
・Modelが複数のStoreと紐付く場合、proxyを重複して書かなくて済む
・Storeなしでサーバとのやりとりが可能
app/model/Station.js

Ext.define('Panda.model.Station', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'played_date'],

    proxy: {
        type: 'ajax',
        url: 'data/stations.json',
        reader: {
            type: 'json',
            root: 'results'
        }
    }
});