效果如图，亲测6.2.1版本可用
/**
*支持快速选择日期的日期控件
*/
Ext.define('ux.form.field.GridDate', {
extend: 'Ext.form.field.Date',
alias: 'widget.gridDateField',
requires: ['ux.picker.GridDate'],
pickerGrid: {
store: {
//默认配置
data: [{
value: 30,
text: '一个月后'
},
{
value: 90,
text: '三个月后'
},
{
value: 180,
text: '六个月后'
},
{
value: 365,
text: '一年后'
},
{
value: 365 * 2,
text: '两年后后'
},
{
value: 365 * 3,
text: '三年后'
}]
}
},
//创建弹窗
createPicker: function () {
var me = this,
format = Ext.String.format;
return new ux.picker.GridDate({
floating: true,
hidden: true,
pickerField: me,
pickerGrid: me.pickerGrid,
pickerDate: {
pickerField: me,
focusable: false,
// Key events are listened from the input field which is never blurred
preventRefocus: 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();
}
}
}
});
}
});
/**
* 支持快速选择日期的日期控件
*/
Ext.define('ux.picker.GridDate', {
extend: 'Ext.container.Container',
alias: 'widget.gridDatePicker',
requires: ['Ext.picker.Date', 'Ext.form.field.ComboBox'],
layout: 'hbox',
config: {
pickerDate: { },
pickerGrid: {
width: 120,
height:'100%',
title: '快速选择',
hideHeaders: true,
columns: [{
flex:1,
dataIndex: 'text'
}]
}
},
//初始化
initComponent: function () {
var me = this;
me.callParent(arguments);
me.add([me.getPickerGrid(), me.getPickerDate()]);
},
//创建时间控件
applyPickerDate: function (config) {
return Ext.factory(config, 'Ext.picker.Date', this.getPickerDate());
},
//创建下拉框
applyPickerGrid: function (config) {
return Ext.factory(config, 'Ext.grid.Panel', this.getPickerGrid());
},
//更新下拉框
updatePickerGrid: function (item) {
if (item) {
item.on({
itemclick: 'onItemclick',
scope: this
});
}
},
//快速选择
onItemclick: function (t, rec) {
//设置值
this.pickerField.setValue(new Date(Date.now() + 1000 * 60 * 60 * 24 * rec.get('value')));
//隐藏弹出层
this.pickerField.collapse();
},
//设置禁止时间
setDisabledDates: function (value) {
this.getPickerDate().setDisabledDates(value);
},
//设置禁止日期
setDisabledDays: function (value) {
this.getPickerDate().setDisabledDays(value);
},
//设置最小值
setMinValue: function (value) {
this.getPickerDate().setMinDate(value);
},
//设置最大值
setMaxValue: function (value) {
this.getPickerDate().setMaxDate(value);
},
//设置值
setValue:function (value) {
this.getPickerDate().setValue(value);
}
});