Extjs 之 FormPanel

简单记录一下开发中碰到的一些小问题，以便以后少走弯路。

一个formpanel写时碰到一个问题，因为不太熟悉API ,走了一很多弯路。

new Ext.form.FormPanel({
			
			xtype:"form",
			labelWidth:80,
			labelAlign:"left",
			layout:"form",
			width:350,
			height:550,
			padding:"2px",
			items:[
					{
						xtype:"fieldset",
						layout:"form",
						height:450,
						items:[       
						       
							{
								xtype:"textfield",
								fieldLabel:"登陆账号",
								name:"account",
								allowBlank:false,
								blankText:'用户账号不能为空.',
								vtype:"alphanum",
								vtypeText: "请输入字母和数字",
								anchor:"90%"
							},
							{
								xtype:"textfield",
								fieldLabel:"用户名",
								name:"nickname",
								allowBlank:false,
								blankText:'用户名不能为空.',
                                vtype: "alphanum",
                                vtypeText: "请输入字母和数字",
								anchor:"90%"
							},
							{
								xtype:"textfield",
								inputType:'password',
								fieldLabel:"密码",
								id:"password",
								name:"password",
								allowBlank:false,
								blankText:'用户密码不能为空.',
								anchor:"90%"
							},
							{
								xtype:"textfield",
								vtype: "ComparePW",
								inputType:'password',
								fieldLabel:"确认密码",
								Compareid:"password",
								id:"confirm",
								name:"confirm",
								anchor:"90%"
							},
							{
									xtype : 'combo',
									store : this.combStore('type',
											this.mapping),
									allowBlank:false,
									blankText:'请选择用户类型.',
									valueField : "value",
									displayField : "name",
									mode : 'local',
									editable : false,
									forceSelection : true,
									triggerAction : 'all',
									hiddenName : 'type',
									fieldLabel : '用户类型',
									emptyText : '选择',
									name : 'user_type',
									value : '',
									anchor:"90%"
							},
							{
								xtype:"textfield",
								fieldLabel:"绑定账号",
								name:"bind_account",
								anchor:"90%"
							},
							{
								xtype:"textfield",
								fieldLabel:"邮箱",
								name:"email",
							    vtype: "email",  
							    vtypeText: "不是有效的邮箱地址", 
							    anchor:"90%"
							},
							{
								xtype:"textfield",
								fieldLabel:"密码保护",
								name:"verify",
								anchor:"90%"
							},
							{
								xtype:"textarea",
								fieldLabel:"描述",
								name:"remark",
								anchor:"90%",
								height:80
							}
						]
					}
				]
		}
		);

不加vtype的验证时很好，加了以后就成下图这样了。

 

把anchor:"100%"改成anchor:"90%"问题解决，因为如果要做验证的话，控件后面要加一个错误提示的图片，所以要留点空间给它。

转载于:https://www.cnblogs.com/cruiseblog/articles/1816053.html