読者です 読者をやめる 読者になる 読者になる

初心者のためのExtJS入門

ExtJSを使うので、ついでにまとめていきます

チュートリアル:スタイルを整える

ExtJS

現在の画面は↓なかんじになっているわけですが。。。

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

これを見て気付くことがあります。。。そうダサいですね。こんなものを使うわけありません。

ということで、今回はスタイルを整えてみます。

layoutを指定する

まずはlayoutコンフィグを指定して、画面の左側に入力フォーム、右側に一覧を配置します。

/**
 * ビューポートクラス。
 *
 * @class Memo.view.main.Main
 * @extend Ext.Panel
 */
Ext.define('Memo.view.main.Main', {
    extend: 'Ext.Panel',
    xtype: 'app_main',

    requires: [
        'Memo.view.main.ViewController'
    ],

    controller: 'app_main',

    bodyPadding: 20,

    layout: 'border',

    items: [
        {
            region: 'west',
            reference: 'form',
            xtype: 'form',
            title: 'メモ入力フォーム',
            bodyPadding: 15,
            width: 300,
            defaults: {
                anchor: '100%'
            },
            items: [
                {
                    name: 'title',
                    xtype: 'textfield',
                    emptyText: 'タイトルを入力してください',
                    allowBlank: false
                },
                {
                    name: 'body',
                    xtype: 'textarea',
                    emptyText: '本文を入力してください'
                },
                {
                    xtype: 'button',
                    text: '保存',
                    handler: 'onClickSaveButton'
                }
            ]
        },
        {
            region: 'center',
            reference: 'list',
            xtype: 'dataview',
            tpl: [
                '<tpl for=".">',
                '<div class="item">{title}</div>',
                '</tpl>'
            ],
            itemSelector: 'div.item',
            store: {
                proxy: 'memory',
                data: [
                    { title: 'タイトル1', body: '本文1' },
                    { title: 'タイトル2', body: '本文2' },
                    { title: 'タイトル3', body: '本文3' }
                ]
            }
        }
    ]
});

まずはビューポートにlayout: 'border'を追記しました。

これはレイアウトをボーダーレイアウト(Ext.layout.container.Border)にする、ということを意味します。

ボーダーレイアウトは、アイテムコンポーネントにregionを指定することで、東・西・南・北・中央の5カ所にコンポーネントを配置することができます。

大きな制約はなく、「西に2つ、中央は何も無し」のような指定もできたりします。

今回はフォームパネルにregion: 'west'、データビューにregion: 'center'を指定しました。

あとは、フォームパネルにタイトルを付けたり(titleコンフィグ追加)、入力フィールドを目一杯横に伸ばしたりしてます(anchor: '100%'を設定)。

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

スタイルシートを適用する

データビューにはスタイルシートを適用させます。

ExtJSではsassを使ってスタイルシートを作成します。

ディレクトリ構成のルールとしては、classic/sassディレクトリにsrc以下のディレクトリ構成と同じにする必要があります。

例えば、Memo.view.main.Mainのスタイルシートを作成するのであれば、classic/sass/src/view/main/Main.scssをいうファイルにスタイルを定義することになります。

このようにルール通りにsassファイルを配置しておくと、sencha app watchでsassコンパイルが実行されます。

まずはclsコンフィグでコンポーネントセレクタ名を指定します。

/**
 * ビューポートクラス。
 *
 * @class Memo.view.main.Main
 * @extend Ext.Panel
 */
Ext.define('Memo.view.main.Main', {
    extend: 'Ext.Panel',
    xtype: 'app_main',

    requires: [
        'Memo.view.main.ViewController'
    ],

    cls: 'app-main',

    controller: 'app_main',

    bodyPadding: 20,

    layout: 'border',

    items: [
        {
            region: 'west',
            reference: 'form',
            xtype: 'form',
            title: 'メモ入力フォーム',
            bodyPadding: 15,
            width: 300,
            defaults: {
                anchor: '100%'
            },
            items: [
                {
                    name: 'title',
                    xtype: 'textfield',
                    emptyText: 'タイトルを入力してください',
                    allowBlank: false
                },
                {
                    name: 'body',
                    xtype: 'textarea',
                    emptyText: '本文を入力してください'
                },
                {
                    xtype: 'button',
                    text: '保存',
                    handler: 'onClickSaveButton'
                }
            ]
        },
        {
            region: 'center',
            reference: 'list',
            xtype: 'dataview',
            cls: 'memo-list-dataview',
            tpl: [
                '<tpl for=".">',
                '<div class="item">{title}</div>',
                '</tpl>'
            ],
            itemSelector: 'div.item',
            store: {
                proxy: 'memory',
                data: [
                    { title: 'タイトル1', body: '本文1' },
                    { title: 'タイトル2', body: '本文2' },
                    { title: 'タイトル3', body: '本文3' }
                ]
            }
        }
    ]
});

次にMain.scssを用意します。アプリケーションを作成した時点で、自動的にMain.scssファイルも作成されていたので、内容を変更してみます。

@charset "UTF-8";

.app-main {

    .memo-list-dataview {
        background-color: #fff;
    }

}

とりあえず背景色を#fffにしてみます。

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

ちゃんと適用されているのがわかります。

もう少しスタイルを変更してみましょう。

@charset "UTF-8";

.app-main {
    .memo-list-dataview {
        background-color: #fff;
        margin-left: 5px;

        .item {
            cursor: pointer;
            outline: none !important;

            .title {
                background-color: #5fa2dd;
                color: #fff;
                padding: 5px;
                margin: 0;
            }

            .body {
                padding: 5px;
                margin: 0;
            }

            &.x-item-selected {
                .title {
                    background-color: darken(#5fa2dd, 10%);
                }
            }
        }
    }
}

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

x-item-selectedセレクタなどはdeveloper toolsで確認しながら設定しました。