[JavaScript][Ext]Ext.jsのフォームコンポーネントと入力チェック

既存のhtmlを元にJavaScriptでリッチコントロール機能の追加や入力チェックを行う方法を紹介します。Ext1.1 beta1を元にしています。

基本構文

// フォームオブジェクト生成
var comp = new Ext.form.TextField();
// HTMLElementへフォームオブジェクトを適用
comp.applyTo('elem-id');

入力エラー時のツールチップを有効にするには以下のコードを入れておく必要があります。

Ext.QuickTips.init();

DateField
まずは何かと使い道の多そうなDateField。年/月/日形式にするためにはformatを指定する必要があります。

var date = new Ext.form.DateField({
    allowBlank:false,
    format: 'Y/m/d'
});
date.applyTo('birth-input');

これだけで通常のテキストフィールドにカレンダー入力コントロールと日付チェックを追加できます。


入力エラー時はツールチップでエラーメッセージが表示されます。デフォルトでは英語ですが、日本語リソースを読み込むとメッセージも日本語になります。

<script src="ext-1.1-beta1/source/locale/ext-lang-ja.js" type="text/javascript" charset="utf-8"></script>

Validation
通常のテキストフィールド。フォーマットチェックを行いたい場合はvtypeでvalidation typeを指定します。例えばurlなら以下のような感じ。

var url = new Ext.form.TextField({
  allowBlank: false,
  vtype: 'url' // SEE ALSO Ext.form.VTypes
});
url.applyTo('url-input');

Custom Validation
続いてemail。vtype: 'email'もできますがDoCoMo式のアットマークの前にピリオドがあるアドレスは通らないのでカスタムバリデーションでやってみます。validationに値一つを受け取るfunctionオブジェクトを設定します。チェックＯＫの場合はtrueを、エラーの場合はエラー文字列を返すという仕様です。

var mail = new Ext.form.TextField({
  allowBlank: false,
  // Custom validation
  validator: function(fvalue) {
   // Ext.form.VTypesより。@の前の.も許可
   var email = /^([\w]+)(.[.\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/;
   if (email.test(fvalue)) {
    return true;
   }
   return String.format('{0}はメールアドレスとして正しくありません。', fvalue)
      + Ext.form.VTypes.emailText;
  }
});
mail.applyTo('mail-input');

Number Field
数値のみ許可する入力フィールド。アルファベットが入力できなくなります(日本語は残念ながらOK)

var income = new Ext.form.NumberField({
 allowBlank: false
});
income.applyTo('income-input');

Combo Box
select要素からExt.form.Comboboxオブジェクトにするのは少し違う手順。applyToするのではなくtransformで元になるselect要素を指定します。

var combo = new Ext.form.ComboBox({
    typeAhead: true,
    triggerAction: 'all',
    width:135,
    forceSelection:true,
    transform: 'blood-select'
});

Textarea

テキストエリアも同様です。growを設定しておくと入力量に応じてエリアが自動的に拡張されます。
var carrier = new Ext.form.TextArea({
    grow: true, // 入力量に応じてテキストエリアが拡張される
    growMax: 200
});
carrier.applyTo('carrier-area')

Html Editor
Ext1.1からWYSIWYGなhtmlエディターコンポーネントが追加になっています。これも使い方は同様。

var promo = new Ext.form.HtmlEditor({
    width: 600,
    height: 300
});
promo.applyTo('promotion-area');

JavaScriptでフォームをデザインするサンプルは以下にあります。個人的にはデザインとロジックの分離ができる後からコントロールを追加するパターンの方が好みです。(サンプルでform.htmlが有りますがまだ作りかけなようです）

参考

• Dynamic Forms built with JavaScript


• [JavaScript][Ext]フォームコントロールと入力チェック・・・全ソースはこちら


• [JavaScript][Ext]ソート可能なテーブルを実装する


• [JavaScript][Ext]Ext.jsの使い方メモ(Core機能)


• Ext JSメモ


• 【ハウツー】Apolloのサンプルで使われた、美しきJavaScriptフレームワーク「Ext 1.0」 | エンタープライズ | マイコミジャーナル