容器字段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: '产地来源' }

            ]

        });