初心者のためのExtJS入門

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

チュートリアル:登録画面の作成(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に記載されています。自分で追加することも可能です(そのうち載せる予定)。

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

これで画面作成は完了です。

次回はルーティングを定義し、SPAに対応します。