九、表单Form
表单内容非常丰富，包含多种控件，如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，用于一般的文本输入、密码输入、邮箱验证、日期输入、文件上传输入等。各控件对应的一些常用属性在以上代码的注释中都已经说明。保存后浏览该网页，其结果如下图所示：