//Ext.form.FieldContainer扩展自Ext.container.Container。当需要把多个字段或组件作为一个表单项展示的时候就需要此组件
Ext.QuickTips.init();//它可以把子元素排列好，并且在表单中提供唯一标签。
//Ext.get(document.body).update("<div></div>");
var f_Pannel = Ext.create('Ext.form.Panel', {
title: '容器字段实例',
//bodyPadding: 5,
renderTo: Ext.getBody(),
frame: true,
width: 400,
msgTarget:'side',
//height: 300,
fieldDefaults: {
//xtype: 'textfield',
labelWidth: 60,
width: 230//面板中的子组件是230，labelWidth+表单字段的宽度是230。
},
defaultType: 'textfield',
items: [{
fieldLabel: "商品名称"
},
{
xtype: 'fieldcontainer', fieldLabel: '生产日期',//fieldcontainer继承自Container，并混入了Labellabel
layout: {//因此
type:'hbox',//容器类字段水平摆放在一起，若为vbox则是垂直放在一起。
align:'middle'//这些组件在容器中的摆放位置。
},
combineErrors:true,
fieldDefaults:
{//width:230,即使在此处设置字段宽度为230，FieldContainer中的字段宽度依然不是230.
hideLabel: true,
allowBlank: false
},
defaultType: 'textfield',
items: [
{ inputId: 'yearId', fieldLabel: '年',flex:1},//在这里FieldContainer宽度仍然是230，但是不设置flex，则此字段就会占据Field
{ xtype: 'label', forId: 'yearId', text: '年' }, //容器大部分空间，以下其他字段无法显示。所以在Field容器中必须为每个要显示的字段配置flex属性。
//当容器布局为hbox时，容器内字段配置项flex是按比例分割容器的宽度而不分割高度
//为vbox时，按比例分割高度而不是宽度。
//flex必须在各表单字段内声明，表示各组件占总容器高度/宽度的比例。
{ inputId: 'monthId', fieldLabel: '月' ,flex:1},
{ xtype: 'label', forId: 'monthId', text: '月' },
{ inputId: 'dayId', fieldLabel: '日',flex:1},
{ xtype: 'label', forId: 'dayId', text: '日' },
],
},
{ fieldLabel: '产地来源' }
]
});