Ext.onReady(function(){
Ext.QuickTips.init();
var form = new Ext.FormPanel({
frame:true,
width:500,
monitorValid:true,//把有formBind:true的按钮与验证绑定
layout:'form',
labelWidth:55,
title:'添加个人信息',
labelAlign:'right',
renderTo:Ext.getBody(),
submit:function() {
this.getEl().dom.action = 'getForm';
this.getEl().dom.method = 'POST';
this.getEl().dom.submit();
},
items:[{
xtype:'panel',
layout:'column', //布局格式，使items里的标签元素在同一行
items:[{
fieldLabel:'用户名',
columnWidth:.5,
layout:'form',//layout:'column'布局格式不显示fieldLabel字段,需要嵌套layout：'form'布局格式
xtype:'textfield',
allowBlank:false,
labelWidth:60,
labelAlign:'right',
blankText:'不能为空，请填写',
name:'userName',
anchor:'90%'
},{
columnWidth:.2,
layout:'form',
labelAlgin:'right',
items:[{
xtype:'radio',
fieldLabel:'性别',
labelWidth:40,
labelAlign:'right',
layout:'form',
boxLabel:'男',
name:'sex',
checked:true,
inputValue:'man',
anchor:'95%'
}]
},{
columnWidth:.3,
layout:'form',
items:[{
xtype:'radio',
boxLabel:'女',
labelSeparator:'',//去除分隔符
name:'sex',
inputValue:'woman',
anchor:'95%'
}]
}]
},{//上面是第一行
xtype:'panel',
layout:'column',
items:[{
columnWidth:.5,
fieldLabel:'出生日期',
xtype:'datefield',
layout:'form',
labelWidth:60,
labelAlign:'right',
name:'birthday',
anchor:'90%'
},{
columnWidth:.5,
layout:'form',
items:[{
labelWidth:40,
xtype:'combo',
name:'degree',
labelAlign:'right',
fieldLabel:'学位',
store:['小学','初中','高中','专科','本科','硕士','博士'],
emptyText:'请选择适合你的学历..',
anchor:'90%'
}]
}]
},{//上面是第二行
xtype:'panel',
layout:'column',
items:[{
columnWidth:.3,
fieldLabel:'使用框架',
labelWidth:60,
labelAlign:'right',
layout:'form',
xtype:'checkbox',
boxLabel:'spring',
name:'spring',
inputValue:'spring'
},{
columnWidth:.2,
layout:'form',
items:[{
xtype:'checkbox',
boxLabel:'struts2',
name:'struts2',
inputValue:'struts2',
anchor:'95%'
}]
},{
columnWidth:.5,
layout:'form',
items:[{
xtype:'checkbox',
boxLabel:'hibernate',
name:'hibernate',
inputValue:'hibernate',
ancher:'95%'
}]
}]
},{//上面是第三行
xtype:'textfield',
fieldLabel:'Email',
labelWidth:60,
labelAlign:'right',
name:'email',
vtype:'email',//email验证
vtypeText:'Email格式错误',
anchor:'56%'//控制文本框长度
},{//上面是第四行
xtype:'textarea',
fieldLabel:'个性签名',
labelWidth:60,
labelAlign:'right',
name:'oneWord',
height:50,
anchor:'95%'
},{//上面是第五行
xtype:'htmleditor',
fieldLabel:'想说的话',
labelWidth:'60',
labelAlign:'right',
name:'wantToSay',
anchor:'95%',
enableAlignments:false,//去除左右对其工具栏
enableLists:false //去除列表工具栏
}],
buttons:[{text:'确定',handler:login,formBind:true},{text:'取消',handler:reset}]
});
function login(){
form.form.submit();
}
function reset(){
form.form.reset();
}
})
效果展示
[img]http://dl2.iteye.com/upload/attachment/0087/3474/c0ebeece-8345-3953-a344-e5e8390ac244.jpg[/img]
