容器字段FieldContainer

 //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: '产地来源' }
            ]
        });