详解extjs的灵活布局的表单

?

???????? 我们发现，布局其实是由行和列组件组成，分成由左往右和由上往下两个方向，由左往右叫column，由上往下叫form。

?

???????? 整个大的表单是form布局，从上往下放置了5个小布局，在这里我以行n标记。

行1：行1从左往右有3个表单组件，所以是column布局；

{
   		layout:"column",
  		items:[{},{},{}] //items表示指定布局内的表单组件集合，在此有3个
}

??

行1内其实还有3个form布局，因为每个布局中都有一个表单组件，所以看起来并不是那么明显，我们完全可以放置多个表单组件到布局中。

{
   layout:"form",
   items:[{}] //只有一个表单组件
}

?

?

行1的完整代码是：

items:[{//行1
					layout:"column",//从左往右的布局 
					items:[{
						columnWidth:.3,//该列在整行中所占的百分比  
						layout:"form",//从上往下的布局 
						items:[{
							xtype:"textfield",
							fieldLabel:"姓名",
							allowBlank:false,
							width:120
						}]
					},{
						columnWidth:.3,//该列在整行中所占的百分比  
						layout:"form",//从上往下的布局 
						items:[{
							xtype:"textfield",
							inputType:"password",
							fieldLabel:"密码",
							allowBlank:false,
							minLength:6,
							maxLength:16,
							minLengthText:"温馨提示 ：密码长度最小为6个字符",
							maxLengthText:"温馨提示 ：密码长度最小为16个字符",
							width:120
						}]
					},{
						columnWidth:.3,//该列在整行中所占的百分比  
						layout:"form",//从上往下的布局 
						items:[{
							xtype:"textfield",
							fieldLabel:"邮箱",
							vtype:"email",
							allowBlank:false,
							width:120
						}]
					}]
		}