日期:2014-05-16  浏览次数:20396 次

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 : '单位名称不