<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录界面</title>
<script typt="text/javascript" src="../ext/ext-all.js"></script>
<link rel="stylesheet" href="../ext/resources/css/ext-all.css"/>
</head>
<body>
<div id="register"></div>
<script typt="text/jjavascript">
Ext.onReady(function(){
var login=new Ext.form.FormPanel({
title:'用户注册',
id :'userLogin',
renderTo:'register',
width:500,
height:370,
items:[{
xtype:'textfield',
fieldLabel:'用户名',
allowBlank:false,/*设置不能为空*/
blankText:'用户名不能为空',
emptyText:'请输入用户名',
name:'userName',
msgTarget:'side',/*错误提示,下方提示under*/
regex:/^\d{3,10}$/ ,/*正则表达式,固定的数字,必须3到10位*/
regexText:'用户名长度必须是3-10位的数字',/*正则表达式之后提示*/
id:'userName'
},{
xtype:'textfield',
fieldLabel:'密码',
inputType:'password',/*密码黑色显示*/
name:'userPass',
id:'userPass'
},new Ext.form.field.Number({
fieldLabel:'年龄',
step:3,/*步长*/
hideTrigger:true,/*将后面的上下键隐藏*/
allowDecimals:false, /*不用许出现小数点*/
maxValue:120,
maxText:'年龄不能超过120',
minValue:0,
minText:'年龄不能小于0'
}),{
xtype:'numberfield',/*类型*/
fieldLabel:'折扣'/*小数点后保留两位小数*/
},{
xtype:'radio',
boxLabel:'男',
name:'sex',
inputValue:'man'
},{
xtype:'radio',
boxLabel:'女',
name:'sex',
inputValue:'woman',
handler:function(obj){/*选择事件*/
/* alert(obj.inputValue);*/
}
},{
xtype:'checkboxfield',
boxLabel:'足球'
},{
xtype:'checkboxfield',
boxLabel:'羽毛球'
},{
xtype:'checkboxfield',
boxLabel:'兵乓球'
},{
xtype:'radiogroup',
fieldLabel:'性别',
columns:2,/*设置列数*/
items:[{
boxLabel:'男',
name:'sex'
},{
boxLabel:'女',
name:'sex'
}]
},{
xtype:'checkboxgroup',
fieldLabel:'爱好',
columns:3,
items:[{
boxLabel:'篮球'
},{
boxLabel:'足球'
},{
boxLabel:'橄榄球'
}]
}],
buttons:[{
text:'登陆'
},
{
text:'关闭'
}]
});
});
</script>
</body>
</html>