详解extjs的灵活布局的表单

最新推荐文章于 2019-06-29 10:54:00 发布

iteye_10371

最新推荐文章于 2019-06-29 10:54:00 发布

阅读量158

点赞数

分类专栏： Extjs

Extjs 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了extjs中的布局概念，包括column和form两种布局方式，并通过实例展示了如何在一个大表单中使用多种布局组合实现复杂的UI设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

详解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
						}]
					}]
		}