九、表单Form

来源：互联网发布：资料员实战网络班班编辑：程序博客网时间：2024/06/05 03:45

表单内容非常丰富，包含多种控件，如textfield、combobox、datefield、textarea等。现新建一个SimpleForm.html网页，其内容如下：

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01//EN">

<html>

<head>

<title>Form表单</title>

<scripttype="text/javascript"src="bootstrap.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，用于一般的文本输入、密码输入、邮箱验证、日期输入、文件上传输入等。各控件对应的一些常用属性在以上代码的注释中都已经说明。保存后浏览该网页，其结果如下图所示：