(ExtJS6.5)フォームの新機能[modern] (1)
今回からExtJS6.5のフォームの変更点を挙げていきます。
バリデーション
バリデーションは大きく変わり、classicに寄せられました。
以前のバリデーション機能はモデル側で実装されており、フォームの各フィールドで設定できるのはごくわずかでした。
しかし、今回の変更でフィールドに直接バリデーションの内容を指定できるようになり、また、エラーメッセージも表示されるようになっています(ようやく)。
/** * ユーザ登録フォームクラス。 * * @class Sample.view.user.regist.Form * @extend Ext.form.Panel */ Ext.define('Sample.view.user.regist.Form', { extend: 'Ext.form.Panel', xtype: 'user_regist_form', requires: [ 'Ext.field.Text', 'Ext.field.Date', 'Ext.field.Radio', 'Ext.field.Container', 'Ext.data.validator.Email', 'Sample.view.user.regist.FormViewController' ], controller: 'user_regist_form', cls: 'user-regist-form', title: 'ユーザ登録', items: [ { xtype: 'emailfield', label: 'メールアドレス', name: 'mailAddress', required: true, maxLength: 255, validators: 'email' }, { xtype: 'textfield', label: '氏名', name: 'name', required: true }, { xtype: 'textfield', label: 'フリガナ', name: 'kana', required: true }, { xtype: 'datefield', label: '生年月日', name: 'birthday' }, { xtype: 'containerfield', layout: 'vbox', label: '性別', margin: '20 0 0', items: [ { xtype: 'radiofield', name: 'gender', label: '男性', value: 1 }, { xtype: 'radiofield', name: 'gender', label: '女性', value: 2 } ] } ], buttons: { save: { text: '登録', ui: 'action', handler: 'onClickSaveButton' } } }); /** * ユーザ登録フォームのビューコントローラクラス。 * * @class Sample.view.user.regist.FormViewController * @extend Ext.app.ViewController */ Ext.define('Sample.view.user.regist.FormViewController', { extend: 'Ext.app.ViewController', alias: 'controller.user_regist_form', /** * 保存ボタンクリック時の処理。 */ onClickSaveButton: function () { var me = this, view = me.getView(); if (view.validate()) { // TODO: エラーが無い場合の処理をここに記述 } } });
複数のチェックがある場合はvalidatorsに配列を指定できます。
validators: [ 'url', { type: 'length', max: 140 } ]
モデルで定義していたバリデーション定義を、そのままフィールドに移した感じです。
バリデーション用のクラスは、Ext.data.validatorパッケージに存在します。
また、エラーメッセージの表示はフィールドのerrorTargetコンフィグで変更できます。
たとえば、errorTarget: 'under'とすれば↓のように表示されます。
いやー、ようやくclassicに追いつきましたね!
Ext.field.InputMask
入力形式のアシスト機能として、Ext.field.InputMaskが実装されました。
どういうことができるかというと、↓のカード番号入力のようなことです。(こういう入力って一般的な名称があるんでしょうか・・)
時々、サポートしているサイトがありますが、入力しやすくて便利ですよね。これがサポートされたのはうれしい限りです。
もう少しUIとかスタイルをキレイにできるのかな?