[JavaScript][Ext]フォームコントロールと入力チェック
htmlでデザインしたページにExtのリッチコントロール機能を付加するサンプル。簡単な解説はこちらでしています・・・usuilog-プログラミングメモ: [JavaScript][Ext]Ext.jsのフォームコンポーネントと入力チェック
htmlソース
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Form Control Example</title> <script src="ext-1.1-beta1/adapter/yui/yui-utilities.js" type="text/javascript" charset="utf-8"></script> <script src="ext-1.1-beta1/adapter/yui/ext-yui-adapter.js" type="text/javascript" charset="utf-8"></script> <script src="ext-1.1-beta1/ext-all-debug.js" type="text/javascript" charset="utf-8"></script> <script src="ext-1.1-beta1/source/locale/ext-lang-ja.js" type="text/javascript" charset="utf-8"></script> <script src="formsample.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="ext-1.1-beta1/resources/css/ext-all.css" type="text/css" media="screen" charset="utf-8" /> <link rel="stylesheet" href="ext-1.1-beta1/resources/css/ytheme-aero.css" type="text/css" media="screen" charset="utf-8" /> </head> <body> <form id="form1" name="form1"> <fieldset id="fxtest"> <legend>Ext form control example</legend> <dt><label for="name-input">お名前</label></dt> <dd> <input type="text" id="name-input" name="name" /> </dd> <dt><label for="url-input">ＵＲＬ</label></dt> <dd> <input type="text" id="url-input" name="url" /> </dd> <dt><label for="mail-input">メールアドレス</label></dt> <dd> <input type="text" id="mail-input" name="mail" /> </dd> <dt><label for"blood-select">血液型</label></dt> <dd> <select name="blood" id="blood-select"> <option value="">選択してください</option> <option value="A">A</option> <option value="B">B</option> <option value="O">O</option> <option value="AB">AB</option> </select> </dd> <dt><label for"birth-input">生年月日</label></dt> <dd> <input type="text" id="birth-input" name="birth" /> </dd> <dt><label for"income-input">希望年収</label></dt> <dd> <input type="text" id="income-input" name="income" />万円 </dd> <dt><label for"carrier-area">経歴</label></dt> <dd> <textarea id="carrier-area" cols="50" rows="10" name="carrier"></textarea> </dd> <dt><label for"promotion-area">自己ＰＲ</label></dt> <dd> <textarea id="promotion-area" cols="50" rows="10" name="promotion"></textarea> </dd> <div id="submit-button"></div> </fieldset> </form> </body> </html>
JavaScriptソース
Ext.onReady(function(){ // 入力エラー時のツールチップを有効にする Ext.QuickTips.init(); var name = new Ext.form.TextField({ allowBlank: false }); name.applyTo('name-input'); var url = new Ext.form.TextField({ allowBlank: false, vtype: 'url' // SEE ALSO Ext.form.VTypes }); url.applyTo('url-input'); var mail = new Ext.form.TextField({ allowBlank: false, // Custom validation validator: function(fvalue) { // Ext.form.VTypesより。@の前の.も許可 var email = /^([\w]+)(.[.\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/; if (email.test(fvalue)) { return true; } return String.format('{0}はメールアドレスとして正しくありません。', fvalue) + Ext.form.VTypes.emailText; } }); mail.applyTo('mail-input'); // 数字だけしか入力できない（automatic keystroke filtering // 日本語は防げないみたい var income = new Ext.form.NumberField({ allowBlank: false }); income.applyTo('income-input'); var date = new Ext.form.DateField({ allowBlank:false, format: 'Y/m/d' }); date.applyTo('birth-input'); var combo = new Ext.form.ComboBox({ typeAhead: true, triggerAction: 'all', width:135, forceSelection:true, transform: 'blood-select' }); var carrier = new Ext.form.TextArea({ grow: true, // 入力量に応じてテキストエリアが拡張される growMax: 200 }); carrier.applyTo('carrier-area') var promo = new Ext.form.HtmlEditor({ width: 600, height: 300 }); promo.applyTo('promotion-area'); var submit = new Ext.Button('submit-button', { text: '送信' }); submit.on('click', function(e,t) { var str = Ext.Ajax.serializeForm('form1'); alert(str); } ); submit.show(); });
