ExtJS入門36 HTMLの標準フォームにExtJSのフィールドを設置する
今回はExtJSのフォーム（フィールド）をHTMLのノーマルなインプットのようにform要素に仕込むサンプルを紹介します。
HTMLの標準フォームにExt.form.Textfieldをレンダリング
フォーム関連の過去の記事はこちらからです。
- ExtJS入門 ExtJSのフォームについて（基本編）
- ExtJS入門32 フォームパネルとフィールド(基本編)
- ExtJS入門33 Columnレイアウトのフォー
- ExtJS入門34 ComboBoxの基本
- ExtJS入門35 Tableレイアウトのフォーム
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.form.TextFieldクラス
http://extdocs.xenophy.com/?class=Ext.form.TextField
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名古屋勉強 htmlにフィールドをレンダリング</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-layout3.js"></script>
<style TYPE="text/css">
<!--
.submit {background-image: url(../img/icon/tick.png) !important;}
.message {
background-color:#FFF;
padding:10px;
color:red;
}
form p
{
margin:5px;
}
-->
</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のフォームのレイアウト HTMLにExtのフィールドを仕込む
</p>
<div id="msg"></div>
<form method="post" action="post.php" name="extform">
<p>インプット1:<span id="input1"></span></p>
<p>インプット2:<span id="input2"></span></p>
<p>インプット3:<span id="input3"></span></p>
<p>インプット4:<span id="input4"></span></p>
<p>普通のイプット:<input name="input5" type="text"/></p>
<br/>
</form>
<div id="submit"></div>
<br/>
Java Script：<a href="form-layout3.js">form-layout3.js</a><br/>
</div>
</body>
</html>
Java Script:
Ext.onReady(function()
{
//エイリアスを作っておく
var dh = Ext.DomHelper;
for (var i=1;i < 5; i++)
new Ext.form.TextField({
renderTo:'input' + i,
allowBlank:false,
name:'input' + i,
listeners:{
blur:function(field){
var value = field.getValue();
console.debug(value);
console.debug(value.length);
if (value.length < 5) {
msg = '短すぎます';
field.markInvalid(msg);
}
},
invalid:function(field,msg){
var msgdiv = Ext.get('msg-' + field.name);
if (msgdiv) {
msgdiv.remove();
}
dh.append('msg',
{
tag: 'div',
cls:'message',
id: 'msg-' + field.name,
html:field.name + ':' + msg
}
);
},
valid:function(field){
var msg = Ext.get('msg-' + field.name);
if (msg) {
msg.remove();
}
}
}
});
new Ext.Button({
renderTo:'submit',
text:'送信',
iconCls:'submit',
handler:function(){
document.extform.submit();
}
});
});
実行結果:
HTMLの標準フォームにExt.form.Textfieldをレンダリング
テーブルレイアウトは、表のようにパネルを配置します。これをフォームに適応するには前回同様fieldsetでラップしてfieldset内はformレイアウトを使いラベルを表示させます。
tableレイアウトは列の数を予め設定しておく必要があります。レイアウトのコンフィグの設定はlayoutConfigで行います。
layout:'table',
layoutConfig:{
columns:3
}
ExtJSのフィールドをHTMLで記述したフォームの中に設置しています。フィールドのrenderToコンフィグでレンダリング先を指定しいます。
例えばinput1のフィールドはspan#input1に下のように描画されます。
<span id="input1"> <input type="text" name="input1" id="ext-comp-1001" autocomplete="off" size="20" class=" x-form-text x-form-field x-form-invalid"> </span>
このようにテキストフィールドはinput type=”text”…という要素が生成されるためHTMLのフォームの中にExtJSのフィールドを仕込むことができます。
ただしfieldLabelなどの機能は利用できません。fieldLabelなどは親となるコンポーネントに依存しているためです。
ExtJSのフィールドにすることで、イベントリスナを設定することができるようになります。サンプルコードではblurイベントが発火されると、長さをチェックするような処理を記述しています。もちろんAjaxリクエストなども可能です。
invalid時のエラーメッセージも表示されなくなるので、サンプルコードではDomHelperを使ってエラーメッセージを表示するようにしています。
一見普通のフォームに見せておいて裏側でバリバリExtを使うといったことが可能になります。
サンプルコードではサブミットボタンもExtJSのボタンにしてしています。フィールドと同じようにrenderToで指定した要素にレンダリングしています。
formBindは使えませんが、妥当性のチェックとボタンを手動でしていして、disabledに設定することもできると思います。
datefield等を使うこともできるので、単発で使うこともできますが、ExtJSのライブラリのサイズが大きいのが少しマイナス要素です。ExtJS2.3ではextjs.comで必要なライブラリだけを選べるサービスがあったのですが、3.ｘではなくなっています。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
