これからclassicで作った画面の、modern版を作成していきます。

まずはメモ一覧画面です。

モデル、ストアを作成する

ここはclassicのときと同じです。ただし、プロキシを一旦memoryに戻します。

ビューコントローラを作る頃に、またlocalstorageにします。

作成するのはmodern/src/model/Memo.jsとmodern/src/store/Memo.jsになります。

/**
 * メモモデルクラス。
 *
 * @class Memo.model.Memo
 * @extend Ext.data.Model
 */
Ext.define(Memo.model.Memo, {
    extend: Ext.data.Model,

    fields: [
        {
            name: id,
            type: int
        },
        {
            name: title,
            type: string
        },
        {
            name: body,
            type: string
        }
    ]
});

/**
 * メモストアクラス。
 *
 * @class Memo.store.Memo
 * @extend Ext.data.Store
 */
Ext.define(Memo.store.Memo, {
    extend: Ext.data.Store,

    requires: [
        Memo.model.Memo
    ],

    model: Memo.model.Memo,

    proxy: memory,

    data: [
        { id: 1, title: タイトル1, body: 本文1 },
        { id: 2, title: タイトル2, body: 本文2 },
        { id: 3, title: タイトル3, body: 本文3 }
    ]
});

一覧画面を作成する

一覧部分のビューとしては、Ext.Listクラスを使えます。

Ext.ListはExt.dataview.Listの別名です。

classicのExt.view.Viewと同じように使えます。

/**
 * メモ一覧リストクラス。
 *
 * @class Memo.view.list.List
 * @extend Ext.List
 */
Ext.define(Memo.view.list.List, {
    extend: Ext.List,
    xtype: list_list,
    
    cls: list-list,

    itemTpl: [
        <h2 class="title">{title}</h2>,
        <p class="body">{body}</p>
    ],

    store: Memo
});

/**
 * メモ一覧パネルクラス。
 *
 * @class Memo.view.list.Panel
 * @extend Ext.Panel
 */
Ext.define(Memo.view.list.Panel, {
    extend: Ext.Panel,
    xtype: list_panel,

    requires: [
        Memo.view.list.List
    ],

    title: メモ一覧,

    items: {
        xtype: list_list
    }
});

/**
 * メインパネルクラス。
 *
 * @class Memo.view.main.Main
 * @extend Ext.Panel
 */
Ext.define(Memo.view.main.Main, {
    extend: Ext.Panel,
    xtype: app_main,

    requires: [
        Memo.view.list.Panel
    ],

    items: [
        {
            xtype: list_panel
        }
    ]
});

itemTplで、ストアの1件分のモデルのデータを表示するHTMLのテンプレート部分を定義します。

ストアには、先に作成したものを指定しています。なので、アプリケーションクラスにストアの定義を追加する必要があります。

/**
 * アプリケーションクラス。
 *
 * @class Memo.Application
 * @extend Ext.app.Application
 */
Ext.define(Memo.Application, {
    extend: Ext.app.Application,
    
    name: Memo,

    stores: [
        Memo
    ]
});

これでhttp://localhost:1841にアクセスすると、↓のようになりました。

f:id:sham-memo:20170121233202p:plain

今回はここまで。次回は登録画面を作成してみます。