完成了日期时间选择字段,要实现日期时间下拉字段就很简单了,这个只需要修改日期下拉字段的createPicker方法,将选取器换成日期时间选择字段就行了,具体代码如下:
Ext.define('Test.ux.form.field.Datetime', {
extend:'Ext.form.field.Date',
alias: 'widget.datetimefield',
requires: ['Test.ux.picker.Datetime2'],
createPicker: function() {
var me = this,
format = Ext.String.format;
// Create floating Picker BoundList. It will acquire a floatParent by looking up
// its ancestor hierarchy (Pickers use their pickerField property as an upward link)
// for a floating component.
return new Test.ux.picker.Datetime2({
id: me.id + '-picker',
pickerField: me,
floating: true,
preventRefocus: true,
hidden: true,
minDate: me.minValue,
maxDate: me.maxValue,
disabledDatesRE: me.disabledDatesRE,
disabledDatesText: me.disabledDatesText,
ariaDisabledDatesText: me.ariaDisabledDatesText,
disabledDays: me.disabledDays,
disabledDaysText: me.disabledDaysText,
ariaDisabledDaysText: me.ariaDisabledDaysText,
format: me.format,
showToday: me.showToday,
startDay: me.startDay,
minText: format(me.minText, me.formatDate(me.minValue)),
ariaMinText: format(me.ariaMinText, me.formatDate(me.minValue, me.ariaFormat)),
maxText: format(me.maxText, me.formatDate(me.maxValue)),
ariaMaxText: format(me.ariaMaxText, me.formatDate(me.maxValue, me.ariaFormat)),
listeners: {
scope: me,
select: me.onSelect,
tabout: me.onTabOut
},
keyNavConfig: {
esc: function() {
me.inputEl.focus();
me.collapse();
}
}
});
}
});
主要修改的地方只是简单的将createPicker方法中的Ext.picker.Date替换为Test.ux.picker.Datetime2。
在使用的时候发现个问题,就是时间字段字段点不进去,经过调试,发现在日期选择字段中,当它作为日期下拉选择字段的选择器来使用的时候,会把MouseDown事件都屏蔽了,具体代码如下:
onMouseDown: function(e) {
e.preventDefault();
},
我们需要做的就是重写该方法,当单击的组件是数字字段时,允许单击操作,具体代码如下:
onMouseDown: function(e) {
var cmp = Ext.Component.fromElement(e.target);
if (cmp.isFormField) return;
e.preventDefault();
},
代码先通过触发事件的元素返回对应的组件,然后判断组件是否表单字段,如果是,则返回,不阻止事件,否则,阻止事件。
至此,日期时间下拉字段就完成了。