表单内容非常丰富，包含多种控件，如textfield、combobox、datefield、textarea等。现新建一个SimpleForm.html网页，其内容如下：
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8; user-scalable=no">
<title>Form表单</title>
<link rel="stylesheet" type="text/css"href="resources/css/ext-all.css"/>
<scripttype="text/javascript"src="bootstrap.js"></script>
<script type="text/javascript"src="SimpleForm.js"></script>
</head>
<body>
</body>
</html>
然后新建一个SimpleForm.js文件，在JS文件中添加如下代码：
Ext.onReady(function(){
var form;
var myViewport =
Ext.create('Ext.Viewport',{
layout:'border',
items:[ form =
Ext.create('Ext.form.FormPanel', {
title:'用户基本信息',
layout:
'absolute',
defaultType:
'textfield',//默认类型为文本框
autoScroll :true,
width:400,
items: [{
name:'name', //定义变量名称
xtype:
'textfield', //控件类型，此处为文本输入框
fieldLabel:
'姓名',
//显示Label
labelWidth: 55,
//Label的宽度
fieldWidth: 50,
//输入框宽度
allowBlank: false,
//不允许为空
emptyText:'请输入姓名',
//空的时候显示文字
x: 5,
y: 5,
anchor:
'-5' //
锚宽
}, {
name:'pwd',
//定义变量名称
xtype:
'textfield', //控件类型，此处为文本输入框
fieldLabel:
'密码',
//显示Label
labelWidth: 55,
//Label的宽度
fieldWidth: 50,
//输入框宽度
allowBlank: false,
//不允许为空
emptyText:'请输入密码',
//空的时候显示文字
x: 5,
y: 35,
anchor:
'-5', //
锚宽
inputType:'password'
//输入类型为密码
}, {
name:'emailAdd',
//定义变量名称
xtype:
'textfield', //控件类型，此处为文本输入框
fieldLabel:
'Email', //显示Label
labelWidth: 55,
//Label的宽度
fieldWidth: 50,
//输入框宽度
allowBlank: false,
//不允许为空
emptyText:'请输入邮箱',
//空的时候显示文字
x: 5,
y: 65,
anchor:
'-5', //
锚宽
vtype:'email'
//值类型为email
}, {
name:'birthday',
//定义变量名称
xtype:
'datefield', //控件类型，此处为文本输入框
fieldLabel:
'出生时间',
//显示Label
labelWidth: 55,
//Label的宽度
fieldWidth: 50,
//输入框宽度
emptyText:'请输入出生时间',
//空的时候显示文字
x: 5,
y: 95,
anchor:
'-5' //
锚宽
}, {
name:'filePath',
//定义变量名称
xtype:
'filefield', //控件类型，此处为文本输入框
fieldLabel:
'照片',
//显示Label
labelWidth: 55,
//Label的宽度
fieldWidth: 50,
//输入框宽度
emptyText:'请选择照片文件',
//空的时候显示文字
buttonText:'浏览...',
//浏览按钮显示的文字内容
x: 5,
y: 125,
anchor:
'-5' //
锚宽
}, {
x:5,
y: 155,
xtype:
'textarea',
style:
'margin:0',
name:
'msg',
anchor:
'-5-5' // anchor width and height
}
],
buttons: [{
text:
'确定',
listeners:{
"click":function(){
//提交表单，此处省略
Ext.Msg.alert('提交表单','提交表单成功');
this.up('form').getForm().reset();//表单重置
}
}
},{
text:
'取消',
listeners:{
"click":function(){
this.up('form').getForm().reset();//表单重置
}
}
}]
})]
});
});
创建的这个表单中包括textfield、datefield、filefield和textarea，用于一般的文本输入、密码输入、邮箱验证、日期输入、文件上传输入等。各控件对应的一些常用属性在以上代码的注释中都已经说明。保存后浏览该网页，其结果如下图所示：
