ux.form.field.Month 只能選年、月的時間擴展

效果如圖,親測6.2.1版本可用,用法同時間選擇控件ui

 1 //月彈窗擴展
 2 //只選月
 3 Ext.define('ux.picker.Month', {
 4     extend: 'Ext.picker.Month',
 5     alias: 'widget.uxMonthpicker',
 6     alternateClassName: 'ux.uxMonthPicker',
 7     afterRender: function () {
 8         var me = this;
 9         //取消監聽mousedown事件,不然沒法觸發事件
10         me.el.on('mousedown', me.onElClick, me, { translate: false });
11         me.callParent();
12 } 13 });

 

 1 //擴展
 2 //只能選月的時間擴展
 3 Ext.define('ux.form.field.Month', {
 4     extend: 'Ext.form.field.Date',
 5     alias: 'widget.uxMonthfield',
 6     xtype: 'uxMonthfield',
 7     requires: ['ux.picker.Month'],
 8     format: 'Y-m',
 9     selectMonth: new Date(),
10     createPicker: function () {
11         var me = this;
12         return new ux.picker.Month({
13             value: new Date(),
14             renderTo: document.body,
15             floating: true,
16             hidden: true,
17             focusOnShow: true,
18             listeners: {
19                 scope: me,
20                 select: me.onSelect,
21                 cancelclick: me.onCancelClick,
22                 okclick: me.onOKClick,
23                 yeardblclick: me.onOKClick,
24                 monthdblclick: me.onOKClick
25             }
26         });
27     },
28     onCancelClick: function () {
29         var me = this;
30         me.selectMonth = null;
31         me.collapse();
32     },
33     onOKClick: function () {
34         var me = this;
35         if (me.selectMonth) {
36             me.setValue(me.selectMonth);
37             me.fireEvent('select', me, me.selectMonth);
38         }
39         me.collapse();
40     },
41     onSelect: function (m, d) {
42         var me = this;
43         me.selectMonth = new Date((d[0] + 1) + '/1/' + d[1]);
44     }
45 });
相關文章
相關標籤/搜索