用户在注册时,需要填的表单太长,为此需显示滚动条,但注意有两个属性需要更改formPanel:autoHeight:false,height:100%,autoScroll : true,由于整个的form是放在fieldset中,
其默认的布局时靠左边的,可以通过columnlayout来控制设置左右两个item的itemwidth为.5
来使其居中,但也可采用下面的技巧labelWidth : 450,//设置较宽的宽度 labelAlign : "right"
var form = new Ext.FormPanel({ autoHeight : false, region: 'center', border : false, labelWidth : 450, labelAlign : "right", bodyStyle:'padding:2px;background-color:#D4E1F2;overflow-x:hidden;overflow-y:scroll', height:'100%', frame : true, autoScroll : true, items : [ { autoHeight : true, xtype : 'fieldset', title : '用户注册信息', items : [ {//用户名 fieldLabel : '用户名称', xtype : 'textfield', name : 'projectName', allowBlank : false, blankText : '用户名称不能为空', minLength : 6, minLengthText : '用户名称长度不得小于4个字符长度', maxLength : 20, maxLengthText : '用户名称长度不得小于20个字符长度', width:'250px', emptyText:'用户名长度在4-20个字符之间' }, {// 密码信息 fieldLabel : '密码', width:'200px', xtype : 'textfield', id:'pass1', emptyText:'密码长度6个字符', blankText : '密码长度最短为6个字符', inputType : 'password', allowBlank : false, minLength : 6, minLengthText : '密码长度不得小于6个字符长度', name : 'pass', vtype : 'password' }, {// 重复密码信息 fieldLabel : '重复密码', xtype : 'textfield', width:'200px', name:'repass', emptyText:'请确认密码', blankText : '请确认密码', id:'pass2', inputType : 'password', vtype : 'password', vtypeText:"密码不一致", minLength : 6, minLengthText : '密码长度不得小于6个字符长度', confirmTo:"pass1", initialPassField : 'pass' }, {//项目活动名称 fieldLabel : '项目活动名称', width:'250px', xtype : 'textfield', name : 'projectName', allowBlank : false, emptyText:'请输入项目活动名称', blankText : '项目活动名称不能为空', minLength : 4, minLengthText : '项目活动名称长度不得小于4个字符长度', maxLength : 20, maxLengthText : '项目活动名称长度不得小于20个字符长度' },{//项目设计文件版本号 fieldLabel : '项目设计文件版本号', width:'250px', xtype : 'textfield', name : 'fileNum', emptyText:'请输入文件版本号', allowBlank : false, blankText : '项目设计文件版本号不能为空', minLength : 4, minLengthText : '项目设计文件版本号长度不得小于4个字符长度', maxLength : 20, maxLengthText : '项目设计文件版本号长度不得小于20个字符长度' }, {//项目设计文件完成日期 fieldLabel : '项目设计文件完成日期', width:'350px', xtype : 'datefield', format:"Y-m-d", name : 'finishdate', allowBlank : false, emptyText : '请选择日期' }, {//项目参与方 width:'250px', fieldLabel : '项目参与方', xtype : 'textfield', name : 'participator', emptyText : '请输入项目参与方名称', allowBlank : false, blankText : '项目参与分不能为空', minLength : 4, minLengthText : '项目参与方长度不得小于4个字符长度', maxLength : 20, maxLengthText : '项目参与方长度不得小于20个字符长度' }, {//项目所在领域 fieldLabel : '项目所在领域', width:'250px', xtype : 'textfield', name : 'projectArea', allowBlank : false, blankText : '项目所在领域不能为空', minLength : 4, emptyText : '请输入项目所在领域', minLengthText : '项目所在领域长度不得小于4个字符长度', maxLength : 20, maxLengthText : '项目所在领域长度不得小于20个字符长度' }, {//项目所选方法学 fieldLabel : '项目所选方法学', xtype : 'textfield', width:'250px', name : 'method', allowBlank : false, emptyText : '请输入项目所选方法学', blankText : '项目所选方法学不能为空', minLength : 4, minLengthText : '项目所选方法学长度不得小于4个字符长度', maxLength : 20, maxLengthText : '项目所选方法学长度不得小于20个字符长度' }, {//预计年均气体减排量 fieldLabel : '预计年均气体减排量', xtype : 'textfield', emptyText : '请输入预计气体减排量', name : 'gasEmissions', width:'250px', allowBlank : false, blankText : '预计年均气体减排量' }, {//单位名称 fieldLabel : '单位名称', width:'250px', emptyText : '请输入单位名称', xtype : 'textfield', name : 'companyName', allowBlank : false, blankText : '单位名称不能为空', minLength : 4, minLengthText : '单位名称长度不得小于4个字符长度', maxLength : 20, maxLengthText : '单位名称长度不得小于20个字符长度' }, {//营业执照号码 fieldLabel : '营业执照号码', xtype : 'textfield', emptyText : '请输入营业执照号码', name : 'businessLicense', allowBlank : false, width:'250px', blankText : '营业执照号码不能为空', minLength : 4, minLengthText : '营业执照号码长度不得小于4个字符长度', maxLength : 20, maxLengthText : '营业执照号码长度不得小于20个字符长度' }, {//单位地址 fieldLabel : '单位地址', xtype : 'textfield', emptyText : '请输入单位详细地址', name : 'companyPlace', allowBlank : false, minLength : 4, width:'250px', blankText : '单位地址不能为空', minLengthText : '单位地址长度不得小于4个字符长度', maxLength : 20, maxLengthText : '单位地址长度不得小于20个字符长度' }, {//所在城市 fieldLabel : '所在城市', xtype : 'textfield', name : 'city', emptyText : '请输入详细地址', allowBlank : false, width:'250px', minLength : 4, blankText : '所在城市不能为空', minLengthText : '所在城市长度不得小于4个字符长度', maxLength : 20, maxLengthText : '所在城市长度不得小于20个字符长度' }, {//法定代表人 fieldLabel : '法定代表人', xtype : 'textfield', name : 'representative', width:'250px', emptyText : '请输入法定代表人', blankText : '法定代表人不能为空', allowBlank : false, minLength : 4, minLengthText : '法定代表人长度不得小于4个字符长度', maxLength : 20, maxLengthText : '法定代表人长度不得小于20个字符长度' }, {//邮政编码 fieldLabel : '邮政编码', width:'250px', emptyText : '邮政编码', xtype : 'textfield', name : 'postcode', allowBlank : false, regex:/^\s*\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*(\;\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*)*(\;)*\s*$/, regexText:"请输入正确的邮政编码格式!" }, {//联系电话 fieldLabel : '联系电话', xtype : 'textfield', emptyText : '请输入联系电话,例如010-1234567', name : 'tel', allowBlank : false, width:'250px', regex : /^(\d{3,4}-)\d{7,8}$/, //正则表达式 regexText:"请输入正确的电话格式!" }, {//联系人手机 fieldLabel : '联系人手机电话', xtype : 'textfield', width:'250px', emptyText : '请输入联系人手机号码', name : 'cellphone', allowBlank : false, minLength : 11, minLengthText : '联系人手机长度不得小于11个字符长度', regex :/^((\d{3,4}-)*\d{7,8}(-\d{3,4})*|13\d{9})$/, regexText:'请输入正确的电话格式' }, {//传真号码 fieldLabel : '传真号码', xtype : 'textfield', name : 'fileNum', width:'250px', emptyText : '请输入传真号码', allowBlank : false, minLength : 4, minLengthText : '传真长度不得小于4个字符长度', maxLength : 20, maxLengthText : '传真长度不得小于20个字符长度' }, {//联系人 fieldLabel : '联系人', xtype : 'textfield', emptyText : '请输入联系人', name : 'fileNum', allowBlank : false, minLength : 4, width:'250px', minLengthText : '联系人长度不得小于4个字符长度', maxLength : 20, maxLengthText : '联系人长度不得小于20个字符长度' }, {//邮箱地址 fieldLabel : '邮箱地址', xtype : 'textfield', emptyText : '请输入邮箱地址', name : 'fileNum', allowBlank : false, width:'250px', minLength : 4, minLengthText : '邮箱地址长度不得小于4个字符长度', maxLength : 20, maxLengthText : '邮箱地址长度不得小于20个字符长度' } ] } ], buttons : [{ text : '提交', scope : this, handler:function(){ alert(Ext.encode(form.form.getValues())); } }, { text : '重置', handler:function(){ form.form.reset(); } } ] });