详解extjs的灵活布局的表单（转）

 

详解extjs的灵活布局的表单

 

 

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

 

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

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

 

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

 

 

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

 

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

 

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

 

 

自己的一个实现：

 

var collectionRuleForm = new Ext.FormPanel({
				name : 'collectionRuleForm',
				labelAlign : 'right',
				labelWidth : 80,
				frame : true,
				bodyStyle : 'padding:5 5 5 5',
				items:[{//行1
					layout:"column",//从左往右的布局 
					items:[{
						columnWidth:.3,//该列在整行中所占的百分比  
						layout:"form",//从上往下的布局 
						items:[{
							name : 'title',
							fieldLabel : '名称',
							xtype : 'textfield',
							allowBlank : false,
							anchor : '99%'
						}]
					},{
						columnWidth:.3,//该列在整行中所占的百分比  
						layout:"form",//从上往下的布局 
						items:[{
							name : 'sort_by',
							fieldLabel : '排序',
							xtype : 'numberfield',
							anchor : '99%'
						}]
					},{
						columnWidth:.3,//该列在整行中所占的百分比  
						layout:"form",//从上往下的布局 
						items:[{
							name : 'bank_desc',
							fieldLabel : '类型描述',
							allowBlank : true,
							xtype : 'textarea',
							anchor : '99%'
						}]
			      }]
	         },{//第二行
				layout:"column",//从左往右的布局 
				items:[{
					columnWidth:.3,//该列在整行中所占的百分比  
					layout:"form",//从上往下的布局 
					items:[{
						name : 'title',
						fieldLabel : '名称',
						xtype : 'textfield',
						allowBlank : false,
						anchor : '99%'
					}]
				},{
					columnWidth:.3,//该列在整行中所占的百分比  
					layout:"form",//从上往下的布局 
					items:[{
						name : 'sort_by',
						fieldLabel : '排序',
						xtype : 'numberfield',
						anchor : '99%'
					}]
				},{
					columnWidth:.3,//该列在整行中所占的百分比  
					layout:"form",//从上往下的布局 
					items:[{
						name : 'bank_desc',
						fieldLabel : '类型描述',
						allowBlank : true,
						xtype : 'textarea',
						anchor : '99%'
					}]
		      }]
	       }]
		});

 转载自：http://z-xiaofei168.iteye.com/blog/1136291