Extjs 只显示年月的控件

Example:

this.yearMonth = new Ext.form.DateField({
    name : 'YEAR_MONTH',
    format : 'Y-m',
    editable : false,
    allowBlank : false,
    maxValue : new Date(),
    plugins: 'monthPickerPlugin',
    listeners : {
        scope : this,
        'select' : function(dft){
        }
    }
});

View Code

monthPickerPlugin.js:

 1 /*!
 2  * Copyright(c) 2009 Costin Bereveanu, KEYPOINT SOLUTIONS
 3  * costin@keypoint.ro
 4  * http://www.keypoint.ro/ext/extensions/license.txt
 5  */
 6 Ext.ux.MonthPickerPlugin = function() {
 7     var picker;
 8     var oldDateDefaults;
 9 
10     this.init = function(pk) {
11         picker = pk;
12         picker.onTriggerClick = picker.onTriggerClick.createSequence(onClick);
13         picker.getValue = picker.getValue.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay);
14         picker.beforeBlur = picker.beforeBlur.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay);
15     };
16 
17     function setDefaultMonthDay() {
18         oldDateDefaults = Date.defaults.d;
19         Date.defaults.d = 1;
20         return true;
21     }
22 
23     function restoreDefaultMonthDay(ret) {
24         Date.defaults.d = oldDateDefaults;
25         return ret;
26     }
27 
28     function onClick(e, el, opt) {
29         var p = picker.menu.picker;
30         p.activeDate = p.activeDate.getFirstDateOfMonth();
31         if (p.value) {
32             p.value = p.value.getFirstDateOfMonth();
33         }
34 
35         p.showMonthPicker();
36         
37         if (!p.disabled) {
38             p.monthPicker.stopFx();
39             p.monthPicker.show();
40             
41             p.mun(p.monthPicker, 'click', p.onMonthClick, p);
42             p.mun(p.monthPicker, 'dblclick', p.onMonthDblClick, p);
43             p.onMonthClick = p.onMonthClick.createSequence(pickerClick);
44             p.onMonthDblClick = p.onMonthDblClick.createSequence(pickerDblclick);
45             p.mon(p.monthPicker, 'click', p.onMonthClick, p);
46             p.mon(p.monthPicker, 'dblclick', p.onMonthDblClick, p);
47         }
48     }
49 
50     function pickerClick(e, t) {
51         var el = new Ext.Element(t);
52         if (el.is('button.x-date-mp-cancel')) {
53             picker.menu.hide();
54         } else if(el.is('button.x-date-mp-ok')) {
55             var p = picker.menu.picker;
56             p.setValue(p.activeDate);
57             p.fireEvent('select', p, p.value);
58         }
59     }
60 
61     function pickerDblclick(e, t) {
62         var el = new Ext.Element(t);
63         if (el.parent()
64             && (el.parent().is('td.x-date-mp-month')
65             || el.parent().is('td.x-date-mp-year'))) {
66 
67             var p = picker.menu.picker;
68             p.setValue(p.activeDate);
69             p.fireEvent('select', p, p.value);
70         }
71     }
72 };
73 Ext.preg('monthPickerPlugin', Ext.ux.MonthPickerPlugin);

View Code

效果图：

具体事例参考：http://www.keypoint.ro/ext/

posted on 2013-06-13 09:23 宁静*勤奋阅读(1410) 评论(0) 编辑收藏举报