ExtJS 中Label、Fieldset字段集、FieldContainer 容器字段

[b]Ext.form.Label[/b]:可以与表单中的一个字段进行关联，通常情况下可以使用表单字段的fieldLabel配置项，只有当布局不能满足要求时，才使用Ext.form.Label 标签字段。
{//Ext.form.Label 标签字段
xtype:'label',
forId:'userName',//关联inputId为userName的表单字段
text:'用户名'
},
{
name:'userName',
xtype:'textfield',
inputId:'userName',
hideLabel:true //隐藏字段标签
}
注：使用标签字段需要通过它的forId配置项与目标字段的inputId配置项进行匹配，如果在label元素内点击文本，就会触发目标字段控件，焦点将会自动转移到目标控件上。
[b]
Ext.form.FieldSet字段集[/b]：标准的字段容器，默认布局为“anchor”,也可以指定为其他布局。常用来将含义相近的字段组织在一起，是表单结构清晰明了。
//Ext.form.fieldSet
{
title:'产品信息(fieldset)',
xtype:'fieldset',
collapsible:true,//显示展开收缩状态的切换按钮
bodyPadding:5,
defaults:{//统一设置表单字段默认属性
labelSeparator:":",//分隔符
labelWidth:50,
width:160
},
defaultType:'textfield',//设置表单字段的默认类型
items:[{
fieldLabel:'产地'
},{
fieldLabel:'售价'
}]
},
{
title:'产品描述',
xtype:'fieldset',
bodyPadding:5,
checkboxToggle:true,
checkboxName:'description',//提交数据时，复选框对应的name
labelSeparator:':',
items:[{
fieldLabel:'简介',
labelSeparator:':',
labelWidth:50,
width:160,
xtype:'textarea'
}]
}

[b]Ext.form.FieldContainer容器字段[/b]：当需要把多个字段或组件作为一个表单项展示的时候用到该组件。把资源很好的排列起来，并且在表单中提供唯一的标签。
//Ex.form.FieldContainer容器字段
{
fieldLabel:'商品名称'
},{
xtype:'fieldcontainer',
fieldLabel:'生产日期',
layout:{//设置容器字段布局
type:'hbox',
align:'middle'//垂直居中
},
combineErrors:true,//合并展示错误信息
fieldDefaults:{
hideLabel:true,//隐藏字段标签
allowBlank:false
},
defaultType:'textfield',
items:[{
fieldLabel:'年',
flex:1,
inputId:'yearId'
},{
xtype:'label',
forId:'yearId',
text:'年'
},{
fieldLabel:'月',
flex:1,
inputId:'monthId'
},{
xtype:'label',
forId:'monthId',
text:'月'
},{
fieldLabel:'日',
flex:1,
inputId:'dayId'
},{
xtype:'label',
forId:'dayId',
text:'日'
}]
},{
fieldLabel:'产地来源'
}