チュートリアル:登録画面の作成(modern)
次に登録画面を作成します。
まだビューコントローラとビューモデルは作成せず、ビュー部分だけ作ってみます。
/** * メモ登録フォームパネルクラス。 * * @class Memo.view.regist.Panel * @extend Ext.form.Panel */ Ext.define('Memo.view.regist.Panel', { extend: 'Ext.form.Panel', xtype: 'regist_panel', title: 'メモ登録', tools: [ { xtype: 'button', ui: 'action', iconCls: 'x-fa fa-check' } ], bodyPadding: 10, items: [ { xtype: 'textfield', name: 'title', placeHolder: 'タイトルを入力してください' }, { xtype: 'textareafield', name: 'body', placeHolder: '本文を入力してください' } ] });
同じようなUIで作成してみました。↑のように、プロパティ名が異なったり、テキストエリアのxtype名がtextareaでなくtextareafieldだったりと、若干の違いがあります。
また、modernだとExt.form.Panelにはrecordコンフィグがはじめから存在し、データバインディングできるようになっています。
保存ボタンはチェックマークのアイコンにしてみました。
ドキュメントに記載されていますが、iconClsにはFontAwesomeのアイコンを使えます。x-faを付けて、あとはhttp://fontawesome.io/icons/にあるアイコンを指定すればOKです。ただし、ExtJSで自動生成されるFontAwesomeパッケージのバージョンは最新ではないため、使えない(存在しない)アイコンがあることに注意してください。
また、uiというプロパティを指定しています。これでボタンのデザインを指定できます。
指定可能な種類は、http://docs.sencha.com/extjs/6.2.1/modern/Ext.Button.htmlに記載されています。自分で追加することも可能です(そのうち載せる予定)。
これで画面作成は完了です。
次回はルーティングを定義し、SPAに対応します。