No.3 コンポーネントの利用 – (1)データビュー

ビューのコンフィグレーション

前回は、ビューについて解説しました。今回は Ext JS で実際にビューを作っていきましょう。ちょっとハンズオンぽい感じで進めます。

量が多くなったので、このセクションは3つのサブセクションに分けて掲載します。

では、Sencha Cmd でアプリケーションを生成します。もう覚えていただけたと思います。

    cd /path/to/extjs/sdk
    sencha generate app SlView /path/to/app

/path/to/extjs/sdk とか /path/to/app いうところは、ご自分の環境に置き換えてくださいね。ここでは、SlView という名前のアプリケーションを作りました。

このアプリでは、Main ビューを分割して3つのパネルが表示されるようにします。

メインビューの仕様

画面をボーダーレイアウトを使って、center, west, south の3つのリージョンに分けます。
それぞれの領域には Panel を配置します。
west リージョン
- タイトルは「部署」
- 幅は200ピクセルにします。
- 境界線をドラッグしてユーザーが幅を変更できるようにします。
- 上下の高さ一杯まで広がるようにします。
south リージョン
- タイトルは「詳細」
- 高さは200ピクセルにします
- パネルを折りたためるようにします。
- 初期状態を折りたたんだ状態にします。
center リージョン
- タイトルは「社員」

この仕様の通りに、Main.js を書き換えてみましょう。

Ext.define('SlView.view.Main', {
 
    extend: 'Ext.container.Container',
 
    xtype: 'app-main',
 
    // ボーダーレイアウトクラスをrequireする
    requires: [
        'Ext.layout.container.Border'
    ],
 
    layout: {
        type: 'border'  // レイアウトの指定
    },
 
    items: [{
        // west リージョン
        region: 'west',
        xtype: 'panel',
        title: '部署',
        split: true,    // 境界線をドラッグしてユーザーが幅を変更できる
        width: 200,
        weight: 20      // 上下一杯使うようにweightを調整
    },{
        // south リージョン
        region: 'south',
        xtype: 'panel',
        title: '詳細',
        height: 200,
        collapsible: true,  // 折りたためるようにする
        collapsed: true,    // 初期状態を折りたたんだ状態にする
        weight: 10          // west が上下一杯使うようにweightを調整
    },{
        // center リージョン
        region: 'center',
        xtype: 'panel',
        title: '社員'
    }]
});
});

このような画面になりましたか？では、ここのそれぞれのパネルをビューに変更していきます。

DataView

最初に west リージョンを、部署の一覧を表示する DataView に変更します。

DataView (Ext.view.View) は、テンプレートを使って、ストアのデータを表示するためのメカニズムを持ったコンポーネントです。基礎編の No.11 で、一度解説をしているので覚えている方もおられると思います。 DataView 次の様な特徴を持っています。

DataView では、その内部のテンプレートメカニズムとして Ext.XTemplate を使用します。
各レコードの表示テンプレートは itemTpl コンフィグに設定します。
どのレコードを選択したかを判定するのに itemSelector コンフィグが使われます。
itemSelector コンフィグには itemTplに定義したタグを選択するDOMクエリー式を指定します。
store コンフィグで、Ext.data.Store とバインドさせると、ストアのデータに変更があった場合に、ビューに対して変更が自動的に反映されます。
click、doubleclick、mouseover、mouseout等だけでなく、itemclickなどのアイテムで発生するイベントも定義されています。

では、画面の左側(westリージョン)にDataViewを使ったリスト(List.js) を表示します。

データビューの仕様

部署を一覧で表示します。
部署は id と name というフィールドを持ちます。
選択されたレコードの背景色を変更します。

最初に表示するためのデータ部分を作成し、その後にそれを表示するビューを作成します。

部署データのモデルとストアを準備

データ部分のモデルとストアを準備します。ここでは実際にサーバーからデータを取得するようなことなせずに、スタティックなデータを定義しています。

app/model/Department.js

Ext.define('SlView.model.Department', {
 
    extend: 'Ext.data.Model',
 
    fields: [
        'id',
        'name'
    ]
 
});

モデルでは、単純にフィールドの定義をしています。

app/store/Departments.js

Ext.define('SlView.store.Departments', {
 
    extend: 'Ext.data.Store',
    model: 'SlView.model.Department',
    data: [
        {id: 1, name: '本社'},
        {id: 2, name: '支社'}
    ]
});

ストアでは、data コンフィグで静的にデータを作っています。

部署を表示するデータビューを作成

それでは、そのデータを表示するビューを定義します。

app/view/List.js

Ext.define('SlView.view.List', {
    extend: 'Ext.panel.Panel',  // *1
    requires: [
        'Ext.view.View'         // *3
    ],
    alias: 'widget.mylist',
    title: '部署',
    items: [{
        xtype: 'dataview',      // *2
        store: 'Departments',
        itemTpl: '<div class="department-wrap">{name}</div>',  // *4
        itemSelector: 'div.department-wrap'
    }]
});

List コンポーネントは、Panel を継承しています。
その内部に、xtype: 'dataview' のコンポーネント (つまりデータビュー) を配置しています。
データビューを使う為に requires 配列の中で Ext.view.View を指定するのも忘れないようにしましょう。
itemTpl コンフィグに各レコードを表示するためのテンプレートを設定しています。div タグの中に部署の名前を表示させています。
itemSelector には、4 のテンプレートで div タグに設定してあるクラス名を指定しています。
データビューでは、要素がクリックされたときに、その要素が選択されたことを示す、x-item-selected クラスがが要素のクラスに追加されます。このクラスを追加する要素はどれなのかを示すのが、itemSelector コンフィグです。

コントローラーでモデルとストアを読み込む

では、今作ったコンポーネントをアプリケーションに読み込ませましょう。 Main コントローラーを編集します。

app/controller/Main.js

Ext.define('SlView.controller.Main', {
    extend: 'Ext.app.Controller',
 
    models: [
        'Department'    // *1
    ],
 
    stores: [
        'Departments'   // *2
    ]
 
});

モデルを追加しています
ストアを追加しています

アプリケーションにコントローラーを追加

app/Application.js

Ext.define('SlView.Application', {
    name: 'SlView',
 
    extend: 'Ext.app.Application',
 
    views: [
        // TODO: add views here
    ],
 
    controllers: [
        'Main'      // 書き換える
    ],
 
    stores: [
        // TODO: add stores here
    ]
});

コントローラーを読み込ませるには、Application.js ファイルの controllers 配列にコントローラー名をセットします。

Main ビューに追加する

作成したデータビューをメインビューに追加します。

app/view/Main.js

    Ext.define('SlView.view.Main', {
 
        extend: 'Ext.container.Container',
 
        xtype: 'app-main',
 
        requires: [
            'Ext.layout.container.Border',
            'SlView.view.List'      // *1
        ],
 
        layout: {
            type: 'border'
        },
 
        items: [{
            // west リージョン
            region: 'west',
            xtype: 'mylist',        // *2
            title: '部署',
 
        (以下略)

requires 配列に 'SlView.view.List' を追加します。
xtypeをmylistに変えます。

ここまでやってみたら、一度実行してみてください。不格好ですがリストが表示されます。ただ、リストをクリックしても何も変化は起きません。そこで、Chrome デベロッパーツールなどで「要素の検証」をして見てください。

このように選択した要素に、x-item-selected クラスが設定されているのが分かります。

DataViewのスタイルを設定

それでは、DataView の見栄えを調整するためにスタイルを定義しましょう。プロジェクトの直下に sass というディレクトリがあります。その下の src ディレクトリの下に view というディレクトリを作り、その中に List.scss というファイルを作ります。

その中に次の様に記述しましょう。

sass/src/view/List.scss

div.department-wrap {
    padding: 4px;
    &.x-item-selected {
        background-color: #99caff;
    }
}

これは、SASS ファイルです。お気づきかも知れませんが、sass 以下のディレクトリ構造は、app 以下のディレクトリ構造と対応しています。　 SlView.view.List.js が読み込まれる時には、scss/src/view/List.scss が読み込まれると言うことです。

ついでに、テーマも Neptune に変更しましょう。

.sencha/app/sencha.cfg

31
32

    # The name of the package containing the theme scss for the app
    app.theme=ext-theme-neptune

SASS やテーマを変更したのでビルドします。ビルドしたらブラウザで表示させてみてください。

    cd /path/to/application
    sencha app build

このようにテーマが Neptune になり、選択された要素の背景に色がつくようになりました。

これで画面全体のレイアウトと、左ペイン (west リージョン) が完成しました。次回は、中央ペイン (center リージョン) にグリッドを表示させてみましょう。お楽しみに。