容器字段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());
}
});