ExtJS入門32 フォームパネルとフィールド(基本編)
今回からExtJSのフォームに関するサンプルコードを紹介していきます。フォームに関しては以前簡単なサンプルを紹介しているので、まずは以前紹介した基本的なフォームの修正版からはじめてみたいと思います。
フォームパネルと基本的なフィールド
フォーム関連の過去の記事はこちらからです。
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.form.FormPanelクラス
http://extdocs.xenophy.com/?class=Ext.form.FormPanel
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名古屋勉強会 フォーム その1</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/>
<div id="form2"></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'
},
footerStyle:{ //ボタン周りの表示の調整用スタイル
border:'solid 1px #99BBE8',
'border-top':'none'
},
labelWidth:180,
monitorValid:true, //定期的に妥当性のチェックを行いボタンを連動させます。ボタン側でformBindを設定する
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:'決定',
formBind:true,
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
});
}
}
]
});
//msgTargetにqtipを設定した場合はクイックティップスを起動しないといけない
Ext.QuickTips.init();
var form2 = new Ext.form.FormPanel({
renderTo:'form2',
title:'フォーム その２',
height:280,
width:500,
bodyStyle:{
padding:'8px'
},
footerStyle:{
border:'solid 1px #99BBE8',
'border-top':'none'
},
labelWidth:180,
monitorValid:true, //定期的に妥当性のチェックを行いボタンを連動させます。ボタン側でformBindを設定する
defaults:{
xtype:'textfield', //デフォルトを設定する
//msgTarget:'qtip', //フィールドのmsgTargtの初期値はqtipです。
allowBlank:false, //このフィールドを必須項目にします
anchor:'90%',
emptyText:'入力してください' //空のときのテキスト
},
items:[
{
name:'form2-field1',
fieldLabel:'テキストフィールド1',
value:'初期のテキスト'
},
{
name:'form2-field2',
fieldLabel:'テキストフィールド2(必須項目)'
}
],
buttonAlign:'center',
buttons:[
{
text:'リセット',
iconCls:'reset',
handler:function(){
var formFields = form2.getForm();
formFields.reset();
}
},
{
text:'決定',
formBind:true,
iconCls:'tick',
handler:function(){
//値の取り出し
//フォームパネルからフィールドを取得
var formFields = form2.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
});
}
}
]
});
});
実行結果:
フォームパネルと基本的なフィールド
以前紹介した基本的なフォームに少し修正を加えたサンプルコードになります。
上のフォームは前回とほとんど同じです。変更点はフォームの妥当性チェックと送信ボタンを連動させています。
フォームパネルでmonitorValidをtrueに設定し、buttonsの中で連動させたいものにformBinde:trueを設定します。
var form = new Ext.form.FormPanel({
・・・
monitorValid:true, //定期的に妥当性のチェックを行いボタンを連動させます。ボタン側でformBindを設定する
items:[],
・・・
buttons[
{
・・・
formBine:true,
・・・
}
]
});
monitorValidを有効にすると、定期的に現在の妥当性の状況を確認してボタンを有効/無効に切り替えます。(monitorValidが有効なときフォームパネルは定期的にcllientValidationイベント実行します。)
monitorValid + formBindを設定すると、フォームパネル中に含まれる全てのフォームの妥当性チェックを正しく通過しない限り、ボタンを無効にできるので非常に便利です。
上側のフォームの以前のサンプルコードからの変更以上です。
次に下側のフォームです。こちらのフォームでは2つのテキストフィールドをフォームパネルに設置しています。
フォームパネルでは、普通は複数のフォームを設定します。defaultsコンフィグにフィールドの共通設定を記述しておくと毎回繰り返す必要がなくなります。
defaults:{
xtype:'textfield', //デフォルトを設定する
//msgTarget:'qtip', //フィールドのmsgTargtの初期値はqtipです。
allowBlank:false, //このフィールドを必須項目にします
anchor:'90%',
emptyText:'入力してください' //空のときのテキスト
},
msgTargetをデフォルトの”qtip”のままにして、エラーメッセージをクイックティップスで表示します。クイックティップスで表示する場合はExt.QuickTip.init()を実行して、アプリ全体のクイックティップスを初期化しておく必要があります。
//msgTargetにqtipを設定した場合はクイックティップスを起動しないといけない
Ext.QuickTips.init();
下側のフォームでもmonitorValid + formBindを有効にしています。さらにもう一つボタンを設置してフォームの入力内容をリセットしています。リセットボタンのハンドラでBasicForm のreset()メソッドでフィールドをリセットしています
items:[
{
name:'form2-field1',
fieldLabel:'テキストフィールド1',
value:'初期テキスト'
},
{
name:'form2-field2',
fieldLabel:'テキストフィールド2(必須項目)'
}
],
buttons[
{
text:'リセット',
iconCls:'reset',
handler:function(){
var formFields = form2.getForm();
formFields.reset();
}
},
・・・
]
ここでは注意が必要で、2つのテキストフィールドのうち上側には初期値を設定しています。reset()メソッドでは、フォームを空にするのではなく、フォームの初期の状態に戻すという点です。そのため初期値が設定されている、上のフィールドではフィールドが空になるのではなくvalueに設定されている初期値に戻ります。
以上の2つのフォームの基本形です。複雑なフォームも今回のサンプルの発展形です。次回からはもう少し複雑なフォームを紹介します。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
[...] ExtJS入門32 フォームパネルとフィールド(基本編) [...]
ExtJS入門33 Columnレイアウトのフォーム | ExtJSで楽しくRIA業務アプリ開発
17 5 月 10 at 1:13 PM