ExtJS入門 ExtJSのフォームについて（基本編）
前回までグリッドについてのサンプルを紹介してきましたが、今回はグリッドを少しはなれてExtJSのフォームについて簡単に紹介をします。
フォームの値を取得
前回のサンプルでグリッドに項目を追加する際に、おまけで紹介した、任意の値を追加する処理にExtJSのフォームがでてきました。ユーザーに何かしらの入力を促す際、フォームは重要になってきます。グリッドに入力を追加するだけでなく、既存の値を変更する場合もフォームで入力させるのが一般的です。今回はExtJSのフォームのなかでも基本中の基本の部分を簡単に紹介します。
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.form.FormPanelクラス
http://extdocs.xenophy.com/?class=Ext.form.FormPanel
ExtJS -3.0 日本語APIドキュメント – Ext.form.Fieldクラス
http://extdocs.xenophy.com/?class=Ext.form.Field
ExtJS -3.0 日本語APIドキュメント – Ext.form.TextFieldクラス
http://extdocs.xenophy.com/?class=Ext.form.TextField
ExtJS -3.0 日本語APIドキュメント – Ext.form.NumberFieldクラス
http://extdocs.xenophy.com/?class=Ext.form.NumberField
ExtJS -3.0 日本語APIドキュメント – Ext.form.DateFieldクラス
http://extdocs.xenophy.com/?class=Ext.form.DateField
ExtJS -3.0 日本語APIドキュメント – Ext.form.VTypesクラス
http://extdocs.xenophy.com/?class=Ext.form.VTypes
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS名古屋勉強会 Fieldについて</title>
<!--Ext JS CSS-->
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
<!--Ext JS-->
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<script type="text/javascript" src="../js/ext/src/locale/ext-lang-ja.js"></script>
<script type="text/javascript" src="form-exsample.js"></script>
<style TYPE="text/css">
<!--
.tick {background-image: url(../img/icon/tick.png) !important;}
-->
</style>
</head>
<body>
<div style="width:500px;margin:0 auto;padding:15px;background-color:#D3E1F1;font-size:small;">
<p style="font-weight:bold;padding:3px;margin-bottom:10px;">
Extのフォームフィールドについて
</p>
<div id="form"></div>
<br/>
Java Script：<a href="form-exsample.js">form-exsample.js</a><br/>
</div>
</body>
</html>
Java Script:
//フォームの簡単な紹介
Ext.onReady(function()
{
//グリッドパネルの作成 主要な設定は直接コンフィグオプションに入れています。
var form = new Ext.form.FormPanel({
renderTo:'form',
title:'フォームの簡単な紹介',
height:280,
width:500,
bodyStyle:{
padding:'8px'
},
labelWidth:180,
items:[
{
xtype:'textfield',
name:'samplefield1',
fieldLabel:'テキストフィールド1',
emptyText:'入力してください', //空のときのテキスト
anchor:'90%'
},
{
xtype:'textfield',
name:'samplefield2',
fieldLabel:'テキストフィールド2(必須項目)',
emptyText:'入力してください',
allowBlank:false, //このフィールドを必須項目にします
anchor:'90%',
msgTarget:'under' //入力に誤りがある場合はフィールドの下に表示
},
{
xtype:'displayfield',
name:'samplefield3',
fieldLabel:'ディスプレイフィールド',
value:'表示だけのフィールドです。',
anchor:'90%'
},
new Ext.form.NumberField({
name:'samplefield4',
fieldLabel:'ナンバーフィールド',
allowDecimals:false, //小数点を入力できないようにします
anchor:'90%'
}),
{
xtype:'textfield',
name:'samplefield5',
fieldLabel:'Emailフィールド',
emptyText:'入力してください',
anchor:'90%',
vtype:'email', //vtypeコンフィグでバリデーションが設定
msgTarget:'under'
},
{
xtype:'datefield',
name:'samplefield6',
fieldLabel:'日付フィールド',
emptyText:'入力してください',
width:100,
msgTarget:'side'
}
],
buttonAlign:'center',
buttons:[
{
text:'決定',
iconCls:'tick',
handler:function(){
//値の取り出し
//フォームパネルからフィールドを取得
var formFields = form.getForm();
//フィールドから値を取得
var formValues = formFields.getValues();
//入力項目を表示する処理(普通は値をポストしますが、今回はフィールド名と値を表示する)
var data = [];
Ext.iterate(formValues,function(key,val,arr){
data.push({
fieldname:key,
formvalue:val
});
})
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<p>{fieldname}:{formvalue}</p>',
'</tpl>'
);
//表示処理
Ext.Msg.show({
title:'フォームの値を取得',
msg:tpl.apply(data),
width:300,
buttons:Ext.Msg.OK
});
}
}
]
});
});
実行結果:
基本のフォーム
フォームの値を取得
ExtJSのフォームはExt.form.Fieldクラスで定義されています。このサブクラスに Checkbox, CheckboxGroup, DisplayField, Hidden, HtmlEditor, TextFieldなどが定義されており、実際にはこれらのサブクラスを使ってフォームを生成します。
今回はTextField,DisplayFieldに加えて,DateFieldとNumberフィールドを使ってみます。
ExtJSのフィールドはフォームパネル（Ext.form.FormPanel）に配置されることが一般的です。フォームパネルでは、ラベルの表示やボタンの連携を行ってくれます。そのため基本的なフォームを作る場合はフォームパネルの中にフィールドをレイアウトするのが一般的です。またフィールドは単体でツールバーや、エディタブルグリッド内に配置することもできます。
ではそれぞれのフィールドを見ていきます。今回は基本的なコンフィグオプションにしか触れません。詳しくはAPIリファレンスで確認してください。
TextField：
テキストフィールドを生成します。もっとも基本的なフィールドです。いくつかのコンフィグオプションが用意されています。またvtypeでバリデーションを設定することで、Emailやurlなどの妥当性のチェックを自動的に実行できます。
name:フィールドのname属性
fieldLabel:フィールドの見出しを設定します。
emptyText:入力が空の場合に表示されるテキスト。空のときもgetValue()したときにこの値が返る
anchor:フィールドの幅の設定パーセントで指定。自動的にリサイズされる。
allowBlank:Boolean,falseでフィールドを必須項目にできる
msgTarget:バリデーションを通過できなかった場合にエラーを表示する位置を設定します
vtype:バリデーションの種類を設定します。予め用意されたvtype以外にも独自のvtypeを作って設定することもできます。ExtJSのフォーラムで検索すると色々なvtypeが見つかります。
DisplayField:
表示のみのフィールドです、ディスプレイを表示するだけで入力はできません。ただしgetValuesしたとき、表示されている値が取得されます。
value:表示する値を設定
NumberField:
ナンバーフィールドはxtypeが設定されていません。このフィールドは数字のみの入力を受け付けます。コンフィグの設定で受け付ける数値の設定が可能です（負の数、小数点、最大値、最小値など）。今回は小数点のみ無効に設定しています。
allowDecimals:Boolean 小数点の入力許可設定
DateField:
デートフィールドは日付を入力するフィールドです。デートフィールドを生成すると自動的にデートピッカーがフィールドの右端に設定されて、ピッカーからの日付の入力も可能になります。
フィールドについてはこのような感じです。基本的にコンフィグオプションを設定することで、フィールドの機能を設定してきます。次にフィールドの値を取得する方法の紹介です。
フィールドの値はフォームパネルから直接取得できません。フォームパネルからフィールドを取得しそこから値を取得します。最初は戸惑うかもしれませんが、特に難しいことをやっているわけではありません。
フォームの値を取得しているのは以下の部分です。
//フォームパネルからフィールドを取得
var formFields = form.getForm();
//フィールドから値を取得
var formValues = formFields.getValues();
まずフォームパネルのgetForm()メソッドでフォーム自体へのアクセスを取得します。
次に各フィールドからの値をgetValues()メソッドで一括で取得します。
取得した値はオブジェクトで取得されます（プロパティ名にフィールのname属性）。
以下のように連結して一気に取得するほうが一般的かもしれません。
var formValues = form.getForm().getValues();
今回はフォームの基本を簡単に紹介しました、次回はフォームを使ってグリッドの値の変更するサンプルを紹介します。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
[...] ExtJS入門 ExtJSのフォームについて（基本編） [...]
ExtJS入門24 エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更) | ExtJSで楽しくRIA業務アプリ開発
23 4 月 10 at 11:39 AM
[...] ExtJS入門 ExtJSのフォームについて（基本編） [...]
ExtJS入門32 フォームパネルとフィールド(基本編) | ExtJSで楽しくRIA業務アプリ開発
13 5 月 10 at 1:27 PM
[...] ExtJS入門 ExtJSのフォームについて（基本編） [...]
| ExtJSで楽しくRIA業務アプリ開発
14 5 月 10 at 12:51 PM
[...] ExtJS入門 ExtJSのフォームについて（基本編） [...]
ExtJS入門36 HTMLの標準フォームにExtJSのフィールドを設置する | ExtJSで楽しくRIA業務アプリ開発
19 5 月 10 at 1:03 PM
[...] ExtJS入門 ExtJSのフォームについて（基本編） [...]
ExtJS入門37 サーバーサイドで処理したフォームのエラーメッセージを表示する | ExtJSで楽しくRIA業務アプリ開発
20 5 月 10 at 3:22 PM