ux.form.field.GridDate 支持快速选择日期的日期控件

Posted 2020-09-27 魔狼再世

效果如图，亲测6.2.1版本可用

 1 /**
 2  *支持快速选择日期的日期控件
 3  */
 4 Ext.define(\'ux.form.field.GridDate\', {
 5     extend: \'Ext.form.field.Date\',
 6     alias: \'widget.gridDateField\',
 7     requires: [\'ux.picker.GridDate\'],
 8     pickerGrid: {
 9         store: {
10             //默认配置
11             data: [{
12                 value: 30,
13                 text: \'一个月后\'
14             },
15             {
16                 value: 90,
17                 text: \'三个月后\'
18             },
19             {
20                 value: 180,
21                 text: \'六个月后\'
22             },
23             {
24                 value: 365,
25                 text: \'一年后\'
26             },
27             {
28                 value: 365 * 2,
29                 text: \'两年后后\'
30             },
31             {
32                 value: 365 * 3,
33                 text: \'三年后\'
34             }]
35         }
36     },
37     //创建弹窗
38     createPicker: function () {
39         var me = this,
40         format = Ext.String.format;
41         return new ux.picker.GridDate({
42             floating: true,
43             hidden: true,
44             pickerField: me,
45             pickerGrid: me.pickerGrid,
46             pickerDate: {
47                 pickerField: me,
48                 focusable: false,
49                 // Key events are listened from the input field which is never blurred
50                 preventRefocus: true,
51                 minDate: me.minValue,
52                 maxDate: me.maxValue,
53                 disabledDatesRE: me.disabledDatesRE,
54                 disabledDatesText: me.disabledDatesText,
55                 ariaDisabledDatesText: me.ariaDisabledDatesText,
56                 disabledDays: me.disabledDays,
57                 disabledDaysText: me.disabledDaysText,
58                 ariaDisabledDaysText: me.ariaDisabledDaysText,
59                 format: me.format,
60                 showToday: me.showToday,
61                 startDay: me.startDay,
62                 minText: format(me.minText, me.formatDate(me.minValue)),
63                 ariaMinText: format(me.ariaMinText, me.formatDate(me.minValue, me.ariaFormat)),
64                 maxText: format(me.maxText, me.formatDate(me.maxValue)),
65                 ariaMaxText: format(me.ariaMaxText, me.formatDate(me.maxValue, me.ariaFormat)),
66                 listeners: {
67                     scope: me,
68                     select: me.onSelect,
69                     tabout: me.onTabOut
70                 },
71                 keyNavConfig: {
72                     esc: function () {
73                         me.inputEl.focus();
74                         me.collapse();
75                     }
76                 }
77             }
78         });
79     }
80 });

 1 /**
 2  * 支持快速选择日期的日期控件
 3  */
 4 Ext.define(\'ux.picker.GridDate\', {
 5     extend: \'Ext.container.Container\',
 6     alias: \'widget.gridDatePicker\',
 7     requires: [\'Ext.picker.Date\', \'Ext.form.field.ComboBox\'],
 8     layout: \'hbox\',
 9     config: {
10         pickerDate: {
11 
12         },
13         pickerGrid: {
14             width: 120,
15             height:\'100%\',
16             title: \'快速选择\',
17             hideHeaders: true,
18             columns: [{
19                 flex:1,
20                 dataIndex: \'text\'
21             }]
22         }
23     },
24     //初始化
25     initComponent: function () {
26         var me = this;
27         me.callParent(arguments);
28         me.add([me.getPickerGrid(), me.getPickerDate()]);
29     },
30     //创建时间控件
31     applyPickerDate: function (config) {
32         return Ext.factory(config, \'Ext.picker.Date\', this.getPickerDate());
33     },
34     //创建下拉框
35     applyPickerGrid: function (config) {
36         return Ext.factory(config, \'Ext.grid.Panel\', this.getPickerGrid());
37     },
38     //更新下拉框
39     updatePickerGrid: function (item) {
40         if (item) {
41             item.on({
42                 itemclick: \'onItemclick\',
43                 scope: this
44             });
45         }
46     },
47     //快速选择
48     onItemclick: function (t, rec) {
49         //设置值
50         this.pickerField.setValue(new Date(Date.now() + 1000 * 60 * 60 * 24 * rec.get(\'value\')));
51         //隐藏弹出层
52         this.pickerField.collapse();
53     },
54     //设置禁止时间
55     setDisabledDates: function (value) {
56         this.getPickerDate().setDisabledDates(value);
57     },
58     //设置禁止日期
59     setDisabledDays: function (value) {
60         this.getPickerDate().setDisabledDays(value);
61     },
62     //设置最小值
63     setMinValue: function (value) {
64         this.getPickerDate().setMinDate(value);
65     },
66     //设置最大值
67     setMaxValue: function (value) {
68         this.getPickerDate().setMaxDate(value);
69     },
70     //设置值
71     setValue:function (value) {
72         this.getPickerDate().setValue(value);
73     }
74 });