フォームを作ってみる

Ext.JS 
<html>
<head>
<title>BI</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="ext/resources/css/ext-all.css" type="text/css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script>
Ext.onReady(function () {
	var form01 = new Ext.FormPanel (
		{
			url: 'form.php',
			renderTo: document.body,
			frame: true,
			title: 'My Form',
			width: 250,
			items: [
				{
					xtype: 'textfield',
					fieldLabel: 'Name',
					name: 'name'
				}, {
					xtype: 'textfield',
					fieldLabel: 'Email',
					name: 'email'
				}, {
					xtype: 'datefield',
					fieldLabel: 'Date',
					name: 'date'
				}
			]
		}
	);
});
</script>
</head>
<body>
</body>

Validationを入れてみる。

				{
					xtype: 'textfield',
					fieldLabel: 'Name',
					name: 'name',
					allowBlank: false
				}, {
					xtype: 'textfield',
					fieldLabel: 'Email',
					name: 'email',
					vtype: 'alpha'
				}, {
					xtype: 'datefield',
					fieldLabel: 'Date',
					name: 'date',
					disabledDays: [1, 2, 3, 4, 5]
				}

onReadyの下にExt.QuickTips.init();をいれるとエラー時のヒントが出る。

Ext.onReady(function () {
	Ext.QuickTips.init();
}

vtypeを指定すると独自のValidationを設定できる。意外と下記の書き方は知られていないかも。

<html>
<head>
<title>BI</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="ext/resources/css/ext-all.css" type="text/css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script>
Ext.onReady(function () {
	Ext.QuickTips.init();
	var form01 = new Ext.FormPanel (
		{
			url: 'form.php',
			renderTo: document.body,
			frame: true,
			title: 'My Form',
			width: 250,
			items: [
				{
					xtype: 'textfield',
					fieldLabel: 'Name',
					name: 'name',
					allowBlank: false,
					vtype: 'name'
				}, {
					xtype: 'textfield',
					fieldLabel: 'Email',
					name: 'email',
					vtype: 'alpha'
				}, {
					xtype: 'datefield',
					fieldLabel: 'Date',
					name: 'date',
					disabledDays: [1, 2, 3, 4, 5]
				}
			]
		}
	);
	Ext.form.VTypes['nameVal'] = /[A-Z]/;
	Ext.form.VTypes['nameMask'] = /[A-Za-z]\- ]/;
	Ext.form.VTypes['nameText'] = 'Validation エラー';
	Ext.form.VTypes['name'] = function(v) {
		return Ext.form.VTypes['nameVal'].test(v);
	}
});
</script>
</head>
<body>
</body>