ExtJS注册表单

用户在注册时，需要填的表单太长，为此需显示滚动条，但注意有两个属性需要更改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();
							}
				   		}
				 	]
		});