【ExtJS】自定义组件datetimefield(二)

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

接上【ExtJS】自定义组件datetimefield(一)

第三步:添加按钮事件绑定，获取选定的时间

privates:{
finishRenderChildren: function () {
var me = this;
me.hourBtn.finishRender();
me.minuteBtn.finishRender();
me.secondBtn.finishRender();
me.okBtn.finishRender();
me.callParent();
}
}, okHandler : function(){
var me = this,
btn = me.okBtn; if(btn && !btn.disabled){
me.setValue(this.getValue());
me.fireEvent('select', me, me.value);
me.onSelect();
}
return me;
},
setValue : function(date, isfixed){
var me = this;
if(isfixed!==true){
date.setHours(me.hourBtn.getValue());
date.setMinutes(me.minuteBtn.getValue());
date.setSeconds(me.secondBtn.getValue());
}
me.value=date;
me.update(me.value);
return me;
}

第四步:建新类My.form.field.DateTime，继承Ext.form.field.Date，修改其picker为自定义picker

Ext.define('My.form.field.DateTime', {
extend:'Ext.form.field.Date',
alias: 'widget.datetimefield',
requires: ['My.picker.DateTime'], format : "Y-m-d H:i:s", altFormats : "Y-m-d H:i:s", createPicker: function() {
var me = this,
format = Ext.String.format; return new Go.picker.DateTime({
pickerField: me,
ownerCt: me.ownerCt,
renderTo: document.body,
floating: true,
hidden: true,
focusOnShow: true,
minDate: me.minValue,
maxDate: me.maxValue,
disabledDatesRE: me.disabledDatesRE,
disabledDatesText: me.disabledDatesText,
disabledDays: me.disabledDays,
disabledDaysText: me.disabledDaysText,
format: me.format,
showToday: me.showToday,
startDay: me.startDay,
minText: format(me.minText, me.formatDate(me.minValue)),
maxText: format(me.maxText, me.formatDate(me.maxValue)),
listeners: {
scope: me,
select: me.onSelect
},
keyNavConfig: {
esc: function() {
me.collapse();
}
}
});
}
});

第五步:调用My.form.field.Date呈现效果

Ext.onReady(function(){
Ext.create('My.form.field.DateTime',{
renderTo:Ext.getBody(),
fieldLabel:'日期选择器',
value:'2013-04-27 12:12:12',
format:'Y-m-d H:i:s'
});
});

效果：