Extjs 日期控件扩展，只显示月份

//Extjs 引用

var rq_formPanel = new Ext.FormPanel({
	border : false,
	hideLabel : true,
	autoWidth : true,
	height : 26,
	labelWidth : 35,
	style : {
		padding : '4 0 0 10'// 上 右 下 左
	},
	items : [{
		xtype : 'datefield',// 日期控件
		width : 145,
		validateOnBlur : true,
		fieldLabel : '月份',
		plugins : 'monthPickerPlugin',
		name : 'slsj_ks',
		format : 'Y-m',
		value : new Date()
	}]
});

monthPickerPlugin.js 插件js

Ext.ux.MonthPickerPlugin = function() {   
    var picker;   
    var oldDateDefaults;   
  
    this.init = function(pk) {   
        picker = pk;   
        picker.onTriggerClick = picker.onTriggerClick.createSequence(onClick);   
        picker.getValue = picker.getValue.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay);   
        picker.beforeBlur = picker.beforeBlur.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay);   
    };   
  
    function setDefaultMonthDay() {   
        oldDateDefaults = Date.defaults.d;   
        Date.defaults.d = 1;   
        return true;   
    }   
  
    function restoreDefaultMonthDay(ret) {   
        Date.defaults.d = oldDateDefaults;   
        return ret;   
    }   
  
    function onClick(e, el, opt) {   
        var p = picker.menu.picker;   
        p.activeDate = p.activeDate.getFirstDateOfMonth();   
        if (p.value) {   
            p.value = p.value.getFirstDateOfMonth();   
        }   
  
        p.showMonthPicker();   
           
        if (!p.disabled) {   
            p.monthPicker.stopFx();   
            p.monthPicker.show();   
   // if you want to click,you can the dblclick event change click  
            p.mun(p.monthPicker, 'click', p.onMonthClick, p);   
            p.mun(p.monthPicker, 'click', p.onMonthDblClick, p);   
            p.onMonthClick = p.onMonthClick.createSequence(pickerClick);   
            p.onMonthDblClick = p.onMonthDblClick.createSequence(pickerDblclick);   
            p.mon(p.monthPicker, 'click', p.onMonthClick, p);   
            p.mon(p.monthPicker, 'click', p.onMonthDblClick, p);   
        }   
    }   
  
    function pickerClick(e, t) {   
        var el = new Ext.Element(t);   
        if (el.is('button.x-date-mp-cancel')) {   
            picker.menu.hide();   
        } else if(el.is('button.x-date-mp-ok')) {   
            var p = picker.menu.picker;   
            p.setValue(p.activeDate);   
            p.fireEvent('select', p, p.value);   
        }   
    }   
  
    function pickerDblclick(e, t) {   
        var el = new Ext.Element(t);   
        if (el.parent()   
            && (el.parent().is('td.x-date-mp-month')   
            || el.parent().is('td.x-date-mp-year'))) {   
  
            var p = picker.menu.picker;   
            p.setValue(p.activeDate);   
            p.fireEvent('select', p, p.value);   
        }   
    }   
};   
  
Ext.preg('monthPickerPlugin', Ext.ux.MonthPickerPlugin);