Hatena::ブログ(Diary)

sub usuilog;

2007-06-25

[JavaScript][Ext]フォームコントロールと入力チェック 16:07

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">URL</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">自己PR</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();
});
トラックバック - http://d.hatena.ne.jp/usuihiro1978/20070625