<div id="timeForm" class="w_320">
<h2>时间选择器</h2>
</div>
<div id="dateForm" 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.field.Time
Ext.create('Ext.form.Panel',{
title : '时间选择器Ext.form.field.Time',
width : 300,
height : 100,
renderTo : 'timeForm',
frame : true,
bodyStyle : 'padding:5px',
items : [{
id : 'timeId',
name : 'timeName',
width : 260,
fieldLabel : '选择时间',
xtype : 'timefield',
labelSeparator : ': ',
msgTarget : 'side',
autoFitErrors : false,//展示错误信息时是否自动调整宽度
maxValue : '18:00',//最大时间
maxText : '时间应小于{0}',//大于时间提示
minValue : '08:00',
minText : '时间应大于{0}',
pickerMaxHeight : 70,//下拉列表最大高度
increment : 60,//时间间隔为60分钟
format : 'H时i分s秒',//G表示24时计时法
invalidText : '时间格式无效',
value : new Date() //默认当前时间
}]
});
//三、日期选择器Ext.form.field.Date
Ext.create('Ext.form.Panel',{
title : '日期选择器Ext.form.field.Date',
width : 300,
height : 100,
renderTo : 'dateForm',
frame : true,
bodyStyle : 'padding:5px',
items : [{
id : 'dateFormId',
name : 'dateFormName',
fieldLabel : '选择日期',
xtype : 'datefield',
width : 260,
labelSeparator : ': ',
msgTarget : 'side',
autoFitErrors : false,
format : 'Y年m月d日',//日期格式
maxValue : '12/31/2016',
minValue : '01/01/2016',
disabledDates : ['2016年01月14日'],//禁止选择日期(与format格式相同)
disabledDatesText : '禁止选择日期',
disabledDays : [0,6],//禁止选择星期日和星期六
disabledDaysText : '禁止选择日期',
value : '01/18/2016'//默认日期(今天:new Date())
}]
});
});
