チュートリアル:スタイルを整える
現在の画面は↓なかんじになっているわけですが。。。
これを見て気付くことがあります。。。そうダサいですね。こんなものを使うわけありません。
ということで、今回はスタイルを整えてみます。
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%'を設定)。
スタイルシートを適用する
データビューにはスタイルシートを適用させます。
ディレクトリ構成のルールとしては、classic/sassディレクトリにsrc以下のディレクトリ構成と同じにする必要があります。
例えば、Memo.view.main.Mainのスタイルシートを作成するのであれば、classic/sass/src/view/main/Main.scssをいうファイルにスタイルを定義することになります。
このようにルール通りにsassファイルを配置しておくと、sencha app watchでsassコンパイルが実行されます。
※ExtJS6.5からはビューのjsファイルと同じディレクトリにscssファイルを配置しても良くなりました。(上記の方法も使えます)
まずは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にしてみます。
ちゃんと適用されているのがわかります。
もう少しスタイルを変更してみましょう。
@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%); } } } } }
x-item-selectedセレクタなどはdeveloper toolsで確認しながら設定しました。
まだまだダサさは残ってますが、ある程度スタイルを調整できましたね。