Extjs.FormPanel
刚刚学习ExtJS ,备注一哈代码 防止忘记。。。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="resources/css/ext-all.css" rel="stylesheet" />
<script src="JS/ext-all.js"></script>
<script src="JS/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.QuickTips.init();//支持Tips提示
Ext.form.Field.prototype.megTarget = 'side';//提示的方式
Ext.apply(Ext.form.VTypes, {
password: function(val, field) {
if (field.confirmTo) {
var pwd = Ext.get(field.confirmTo);
return (val == pwd.getValue());
}
return true;
}
});
var form1 = new Ext.form.FormPanel({
width: 400,autoHeight:true,
renderTo: "myform",
frame: true,
title: "用户信息",
items: [{
xtype: "fieldset",
checkboxToggle: true,
checkboxName: "checkInfo",
title: "选填信息",
defaultType: "textfield",
width: 380,
autoHeight: true,
items: [{
name: "UserName",
id: "UserName",
fieldLabel: "用户名称",
xtype: "textfield",
emptyText: "请输入用户名称!",
anchor:"96%"
}, {
name: "UserPwd",
id: "UserPwd",
fieldLabel: "用户密码",
xtype: "textfield",
emptyText: "请输入用户密码!",
inputType: "password", //输入的类型
anchor: "96%",
allowBlank: false,//是否允许为空
blankText:"密码不能为空！"
},
{
fieldLabel: "确认密码",
id: "confirmpass",
name: "confirmpass",
inputType: "password", //输入的类型
vtype: "password",
vtypeText: "两次输入的密码不一至！",
confirmTo: "UserPwd",
anchor:"96%"
},
{
fieldLabel: "Emial",
vtype: "email",
vtypeText: "不是有效的邮箱地址！",
name:"txtEmial",
anchor:"96%"
}
]
}
, {
xtype: "fieldset",
collapsible: true,
title:"详细信息",
width: 380,
defaultType: "textfield",
items: [{
fieldLabel: "爱好",
name: "hbody",
value: '呵呵 上网',
anchor: "96%"
}, {
xtype: "combo",
name: "sex",
store: ["男", "女", "保密"],
fieldLabel: "性别",
anchor:"96%",
emptyText: "请选择姓别"
}]
}
,
{
xtype: "fieldset",
title: "业务爱好",
width: 380,
labelWidth: 100,
labelAlign:"left",
autoHeight: true,
items: [
{
frame:true,
xtype: "panel",
layout: "column",
fieldLable: "爱好",
items: [
{
columnWidth: 2,
xtype: "checkbox",
boxLabel: "足球"
},
{
columnWidth: 2,
xtype: "checkbox",
boxLabel: "篮球"
},
{
columnWidth: 2,
xtype: "checkbox",
boxLabel: "乒乓球"
},
{
columnWidth: 2,
xtype: "checkbox",
boxLabel: "羽毛球"
}, ,
{
columnWidth: 2,
xtype: "checkbox",
boxLabel: "排球",
checked:true
}
]
}
]
}
],
buttonAlign: "center",
buttons:[{text:"确认"},{text:"取消"}]
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="myform">
</div>
</form>
</body>
</html>
