FormPanel示范 _Web前端

FormPanel示例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./../ext-3.3.1/resources/css/ext-all.css" />
<script type="text/javascript" src="./../ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./../ext-3.3.1/ext-all-debug.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
	Ext.onReady(function(){
		Ext.QuickTips.init();
		Ext.form.Field.prototype.msgTarget = "side";  //统一错误提示方式
		 var simple = new Ext.FormPanel({
			 	labelWidth: 75,
				frame: true,
				title: 'Simple Form',
				width: 350,
				defaults: {width: 230},
				defaultType: 'textfield',
				items:[{
					fieldLabel: 'FirstName',
					name: 'first',
					allowBlank: false,
					blankText: 'FirstName isn\'t null'
				},{
					fieldLabel: 'Last Name',
					name: 'last',
					allowBlank: false,
					blankText: 'LastName isn\'t null'
				},{
					fieldLabel: 'Email',
					name: 'email',
					allowBlank: false,
					blankText: 'Email isn\'t null',
					vtype: 'email'
				},new Ext.form.TimeField({
					fieldLabel: 'Time',
					name: 'time',
					allowBlank: false,
					blankText: 'Time isn\'t null',
					minValue: '8:00AM',
					maxValue: '6:00PM',
					increment: 30
				})],
				buttons: [{
					text: 'Save'
				},{
					text: 'Canel'
				}]
		});
		simple.render("form");	
	});
</script>
</head>
<body>
	<div id="form"></div>
</body>
</html>