容器字段Ext.form.FieldContainer

<div id="fieldContainerForm" class="w_320">
    <h2>容器字段</h2>
</div>

Ext.onReady(function(){
    //Ext表單
    
    //Ext.form.Basic 基本表單組件二(拾取器字段Picker)
    //開發中使用表單面板組件Ext.form.Panel,它本質是一個標準的(面板)Ext.panel.Panel,它內置並自動建立了Ext.form.Basic基本表單組件
    //與原始表單主要3點不一樣(1.提交方式 2.表單驗證 3.表單組件)
    //1.提交方式(同步---異步)
    //2.表單驗證(須要手動驗證----配置便可使用)
    //3.表單組件(基本的組件------擴展的功能強大的組件)
    
    //Picker抽象類,具備惟一的觸發按鈕用於在字段下方動態彈出面板
    //拾取器組件如：(1.ComboBox,2.Date,3.Time)
    
    //初始化信息提示功能
    Ext.QuickTips.init();
    
    //容器字段Ext.form.FieldContainer
    //用途:把多個字段或者組件做爲一個表單項展現
    var fieldContainerForm = Ext.create('Ext.form.Panel',{
        title : '容器字段Ext.form.FieldContainer',
        width : 300,
        height : 150,
        renderTo : 'fieldContainerForm',
        bodyPadding : 5,
        frame : true,
        defaultType : 'textfield',
        fieldDefaults : {//統一設置默認屬性
            width : 260,
            labelWidth : 60,
            labelSeparator : ': ',
            msgTarget : 'side'
        },
        items : [{
            name : 'proName',
            fieldLabel : '商品名稱'
        },{
            name : 'proDate',
            xtype : 'fieldcontainer',
            fieldLabel : '生產日期',
            defaultType : 'textfield',
            hideLabel : false,
            
            layout : {//設置容器字段佈局
                type : 'hbox',
                align : 'middle'//垂直居中
            },
            combineErrors : true,//合併展現錯誤信息
            fieldDefaults : {
                hideLabel : true ,//隱藏字段標籤
                allowBlank : false//設置字段值不容許爲空
            },
            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 : '日'
            }]
        },{
            name : 'proAddress',
            fieldLabel : '產地來源'
        }],
        buttons : [{text : '肯定',handler : getMyContainerValue}]
        
    });
    
    //回調
    function getMyContainerValue(){
    
        console.log(fieldContainerForm.getForm().getValues());
    }
});