ExtJS入門35 Tableレイアウトのフォーム
今回はtableレイアウトのフォームの簡単な紹介です。基本的な部分はcolumnレイアウトのときと同じです。tableレイアウトではcolspan,rowspanを使ってレイアウトを設定します。ExtJS入門33 Columnレイアウトのフォーム
Tableレイアウトのフォーム
フォーム関連の過去の記事はこちらからです。
- ExtJS入門 ExtJSのフォームについて（基本編）
- ExtJS入門32 フォームパネルとフィールド(基本編)
- ExtJS入門33 Columnレイアウトのフォー
- ExtJS入門34 ComboBoxの基本
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.layout.TableLayoutクラス
http://extdocs.xenophy.com/?class=Ext.layout.TableLayout
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-layout2.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-layout2.js">form-layout2.js</a><br/>
</div>
</body>
</html>
Java Script:
Ext.onReady(function()
{
var form = new Ext.form.FormPanel({
autoScroll:true,
renderTo:'form',
title:'tableレイアウトのフォーム',
height:600,
width:500,
bodyStyle:{
padding:'8px'
},
footerStyle:{ //ボタン周りの表示の調整用スタイル
border:'solid 1px #99BBE8',
'border-top':'none'
},
labelWidth:180,
monitorValid:true, //定期的に妥当性のチェックを行いボタンを連動させます。ボタン側でformBindを設定する
layout:'table',
layoutConfig:{
columns:3
},
defaults:{
border:false,
xtype:'fieldset',
labelAlign:'top',
anchor:'90%',
defaults:{
xtype:'textfield',
emptyText:'入力してください', //空のときのテキスト
msgTarget:'under', //入力に誤りがある場合はフィールドの下に表示
allowBlank:false,
anchor:'90%'
}
},
items:[
{
xtype:'displayfield',
value:'fieldLabelはformレイアウトの場合しか表示されないので、さらにフィールドセットでラップしてformレイアウトの中にフィールド入れています。<br/> ',
hideLabel:true
},
{
items:{
name:'samplefield1',
fieldLabel:'テキストフィールド1'
}
},
{
items:{
name:'samplefield2',
fieldLabel:'テキストフィールド2'
}
},
{
rowspan:2,
items:[
{
name:'samplefield3-1',
fieldLabel:'テキストフィールド3-1'
},
{
name:'samplefield3-2',
fieldLabel:'テキストフィールド3-2'
},
{
name:'samplefield3-3',
fieldLabel:'テキストフィールド3-3'
}
]
},
{
colspan:2,
items:{
name:'samplefieldr4',
fieldLabel:'テキストフィールド4'
}
},
{
colspan:2,
items:{
name:'samplefield5',
fieldLabel:'テキストフィールド5'
}
},
{
colspan:2,
items:{
name:'samplefield6',
fieldLabel:'テキストフィールド6'
}
},
{
items:{
name:'samplefield7',
fieldLabel:'テキストフィールド7'
}
},
{
title:'左のセット',
colspan:2,
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
});
}
}
]
});
});
実行結果:
Tableレイアウトのフォーム
テーブルレイアウトは、表のようにパネルを配置します。これをフォームに適応するには前回同様fieldsetでラップしてfieldset内はformレイアウトを使いラベルを表示させます。
tableレイアウトは列の数を予め設定しておく必要があります。レイアウトのコンフィグの設定はlayoutConfigで行います。
layout:'table',
layoutConfig:{
columns:3
}
layoutConfigにはオブジェクトで設定情報を渡します。columnsで列数を指定します。ここでは3列にしました。
これでtableレイアウトはitemsに設定されているコンポーネントを横に3つずつならべて表示してくれます。
さらにtableレイアウトではcolspan,rowspanが設定できます。columnレイアウトと同じように、itemsのそれぞれのコンポーネントに個別で指定します。
サンプルコードではフィールド３，４が以下のようになっています。。
{
rowspan:2,
items:[
{
name:'samplefield3-1',
fieldLabel:'テキストフィールド3-1'
},
・・・
},
{
colspan:2,
items:{
name:'samplefieldr4',
fieldLabel:'テキストフィールド4'
}
},
rowspanを設定するとその数だけ行を縦に連結します。対してcolspanは列を横に連結します。
注意点としては、rowspanを設定した場合vertical-alignがmiddleになり真ん中に寄せられる点です。右のセットのように折りたためるfieldsetの場合は折りたたんだ状態で真ん中によってしまうので少し不恰好です。フォーラムを見るとtableレイアウトクラスを拡張すればvalignをtopにできるようです。
columnと違ってrowspanが設定できるのがtableレイアウトの良いところなのですが、ちょっと残念です。
しかしtableレイアウトも上手く使うことで複雑なフォームのレイアウトが可能です。色々なフィールドで試してみると良いかも知れません。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
