ExtJS入門33 Columnレイアウトのフォーム
フォームのレイアウトについてフォームパネルのではデフォルトで’form’レイアウトが設定されています。’form’レイアウトでは、fieldLabelを表示するなどフォームフィールドを設置に最適なレイアウトを提供してくれます。しかし複雑なフォームの配置ができません。フォームパネルのレイアウトコンフィグを変更することでより自由なレイアウトでフィールドを配置する方法を紹介します。
今回はcolumnレイアウトの紹介です。
Columnレイアウトのフォーム
フォーム関連の過去の記事はこちらからです。
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.form.FormPanelクラス
http://extdocs.xenophy.com/?class=Ext.form.FormPanel
ExtJS -3.0 日本語APIドキュメント – Ext.form.FieldSetクラス
http://extdocs.xenophy.com/?class=Ext.form.FieldSet
ExtJS -3.0 日本語APIドキュメント – Ext.layout.ColumnLayoutクラス
http://extdocs.xenophy.com/?class=Ext.layout.ColumnLayout
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名古屋勉強会 フォーム Columnレイアウト</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-layout.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/>
<br/>
Java Script：<a href="form-layout.js">form-layout.js</a><br/>
</div>
</body>
</html>
Java Script:
Ext.onReady(function()
{
var form = new Ext.form.FormPanel({
renderTo:'form',
autoScroll:true,
title:'Columnレイアウトのフォーム',
height:380,
width:500,
bodyStyle:{
padding:'8px'
},
footerStyle:{ //ボタン周りの表示の調整用スタイル
border:'solid 1px #99BBE8',
'border-top':'none'
},
labelWidth:180,
monitorValid:true, //定期的に妥当性のチェックを行いボタンを連動させます。ボタン側でformBindを設定する
layout:'column',
defaults:{
columnWidth:.5,
border:false,
xtype:'fieldset',
labelAlign:'top',
defaults:{
xtype:'textfield',
emptyText:'入力してください', //空のときのテキスト
anchor:'90%',
msgTarget:'under', //入力に誤りがある場合はフィールドの下に表示
allowBlank:false
}
},
items:[
{
xtype:'displayfield',
value:'fieldLabelはformレイアウトの場合しか表示されないので、さらにフィールドセットでラップしてformレイアウトの中にフィールド入れています。<br/>&nbsp;',
hideLabel:true,
columnWidth:.9
},
{
items:{
name:'samplefield1',
fieldLabel:'テキストフィールド1'
}
},
{
items:{
name:'samplefield2',
fieldLabel:'テキストフィールド2'
}
},
{
columnWidth:.2,
items:{
name:'samplefield3',
fieldLabel:'テキストフィールド3',
}
},
{
columnWidth:.2,
items:{
name:'samplefield4',
fieldLabel:'テキストフィールド4',
}
},
{
columnWidth:.2,
items:{
name:'samplefield5',
fieldLabel:'テキストフィールド5',
}
},
{
columnWidth:.2,
items:{
name:'samplefield6',
fieldLabel:'テキストフィールド6',
}
},
{
columnWidth:.2,
items:{
name:'samplefield7',
fieldLabel:'テキストフィールド7',
}
},
{
title:'左のセット',
border:true,
bodyStyle:'padding:3px',
items:[
{
name:'samplefield8',
fieldLabel:'テキストフィールド8',
},
{
name:'samplefield9',
fieldLabel:'テキストフィールド9',
}
]
},
{
title:'右のセット',
border:true,
bodyStyle:'padding:3px',
collapsible:true,
items:[
{
name:'samplefield10',
fieldLabel:'テキストフィールド10',
},
{
name:'samplefield11',
fieldLabel:'テキストフィールド11',
}
]
}
],
buttonAlign:'center',
buttons:[
{
text:'セット',
iconCls:'add',
handler:function(){
//初期値もセットできる
var formFields = form.getForm();
formFields.setValues({
samplefield7:'test',
samplefield8:'test'
});
}
},
{
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
});
}
}
]
});
});
実行結果:
Columnレイアウトのフォーム
まずcolumnレイアウトの紹介です。カラムレイアウトでは列表示を指定できます。itemsに配置するコンポーネントにcolumnWidthで幅の占有率を指定します。（0～1.0）。
これでフィールドをカラムの表示にできます。しかしカラムレイアウトの直下のitemsにフィールドを置いた場合、fieldLabel等が生成されません。fieldLabelを表示するためにはformレイアウトの中にフィールドを設置する必要があります。
そこで、columnレイアウトの直下のコンポーネントはfieldsetに設定してfieldsetのレイアウトをformにすることで,formレイアウト内にフィールドを配置することで解消できます。サンプルコードではフォームパネルの直下にfieldsetを9個設置してそれぞれ1～2個のフィールドを置いています。
構造だけを抜き出すとこんな感じになります。
new Ext.form.FormPanel({
・・・
layout:'column',
defaults:{
columnWidth:.5,
xtype:'fieldset',
defaults:{
・・・
}
},
items:[
{
xtype:'displayfield',
columnWidth:.9
},
{
//filedset1
},
{
//filedset2
},
{
//filedset3
},
{
//filedset4
},
{
//filedset5
},
{
//filedset6
},
{
//filedset7
{
title:'左のセット',
//filedset8
},
{
title:'右のセット',
//filedset9
]
・・・
});
それぞれのfieldset内に実際の入力フィールドがあります。そしてcolumnWidthもフィールドではなくfieldsetに記述している点に注意してください。
fieldsetのオプションはほとんど同じなので,defaultsで設定を記述しています。defaultsの中のdefaultsはfieldset内のフィールドの初期値の設定です。
defaultsとdefaultsの中のdefaultsでフォーム内大まかなコンフィグを決めておくとコードが見やすくなります。
defaults:{
columnWidth:.5,
border:false,
xtype:'fieldset',
labelAlign:'top',
defaults:{
xtype:'textfield',
emptyText:'入力してください', //空のときのテキスト
anchor:'90%',
msgTarget:'under', //入力に誤りがある場合はフィールドの下に表示
allowBlank:false,
columnWidth:.3
}
},
フィールドセットはフィールドをまとめるコンテナで、パネルのように動作してくれます。Ext.form.FieldSetクラスは
Observable > Component > BoxComponent > Container > Panel > FieldSet
というようにパネルを継承しています。そのためExt.Panelで使えるレイアウト関連のオプションが使えるわけです(collapsibleなど)。
フィールドセットのデフォルトのlayoutはformに設定されています。そのためフィールドに配置したフィールドはformレイアウトで表示されます。そのためlayoutを指定しない場合は縦に並べて表示されます。(テキストフィールド8、9、10、11の部分)
サンプルコードは少し複雑ですがフィールドセットのベーシックな使い方をしているのがテキストフィールド8、9、10、11の部分になります。
//defaultsで大まかなオプションは決めてある
{
title:'左のセット',
border:true,
bodyStyle:'padding:3px',
items:[
{
name:'samplefield8',
fieldLabel:'テキストフィールド8'
},
{
name:'samplefield9',
fieldLabel:'テキストフィールド9'
}
]
},
{
title:'右のセット',
border:true,
bodyStyle:'padding:3px',
collapsible:true,
items:[
{
name:'samplefield10',
fieldLabel:'テキストフィールド10'
},
{
name:'samplefield11',
fieldLabel:'テキストフィールド11'
}
]
}
今回の場合は
FormPanel
→fieldset
→→field
→fieldset
→→field
・・・
という構造になっています。このフォームの場合、値の取得や初期値のセットを再帰的に行わないといけない感じがしますが、フィールドセットにラップされているフィールドはFormPanelのgetFrom()メソッドできちんと取得されます。フォームの値の取得やセットのときはラップされていることを特に意識することなく実行できます。すごく便利ですね。
今回はカラムレイアウトの紹介でした。次回は別のレイアウトを紹介しようと思います。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
[...] ExtJS入門35 Tableレイアウトのフォーム 5 月 18th, 2010 @ 01:18 pm › 佐竹 裕行 ↓ Leave a comment 今回はtableレイアウトのフォームの簡単な紹介です。基本的な部分はcolumnレイアウトのときと同じです。tableレイアウトではcolspan,rowspanを使ってレイアウトを設定します。ExtJS入門33 Columnレイアウトのフォーム Tableレイアウトのフォーム [...]
ExtJS入門35 Tableレイアウトのフォーム | ExtJSで楽しくRIA業務アプリ開発
18 5 月 10 at 1:18 PM