Ext.define("Ext.form.field.Month", {

	extend: "Ext.form.field.Date",

	alias: "widget.monthfield",

	requires: [
		"Ext.picker.Month"
	],

	alternateClassName: [
		"Ext.form.MonthField",
		"Ext.form.Month"
	],

	config: {
		selectedMonth: null
	},

	createPicker: function() {

		var i_self = this;
		var f_format = Ext.String.format;

		var i_body = Ext.getBody();

		var i_picker = Ext.create("Ext.picker.Month", {
			pickerField: i_self,
			ownerCt: i_self.ownerCt,
			renderTo: i_body,
			floating: true,
			hidden: true,
			focusOnShow: true,
			minDate: i_self.minValue,
			maxDate: i_self.maxValue,
			disabledDatesRE: i_self.disabledDatesRE,
			disabledDatesText: i_self.disabledDatesText,
			disabledDays: i_self.disabledDays,
			disabledDaysText: i_self.disabledDaysText,
			format: i_self.format,
			showToday: i_self.showToday,
			startDay: i_self.startDay,
			minText: f_format(i_self.minText, i_self.formatDate(i_self.minValue)),
			maxText: f_format(i_self.maxText, i_self.formatDate(i_self.maxValue)),
			listeners: {
				select: {
					scope: i_self,
					fn: i_self.onSelect
				},
				monthdblclick: {
					scope: i_self,
					fn: i_self.onSelect
				},
				yeardblclick: {
					scope: i_self,
					fn: i_self.onSelect
				},
				OkClick: {
					scope: i_self,
					fn: i_self.onOKClick
				},
				CancelClick: {
					scope: i_self,
					fn: i_self.onCancelClick
				}
			},
			keyNavConfig: {
				esc: function() {
					i_self.collapse();
				}
			}
		});

		return i_picker;
	},

	onCancelClick: function() {

		var i_self = this;
		i_self.setSelectedMonth(null);
		i_self.collapse();
	},

	onOKClick: function() {

		var i_self = this;

		var a_values = i_self.picker.getValue();
		
		var i_date = new Date();
		i_date.setMonth(a_values[0]);
		i_date.setYear(a_values[1]);

		i_self.setValue(i_date);
		i_self.collapse();
	},

	onSelect: function(i_field, i_date) {

		var i_self = this;
		i_self.setSelectedMonth(new Date((i_date[0] + 1) + "/1/" + i_date[1]));
	},

	onBlur: Ext.emptyFn,

	onFocusLeave: Ext.emptyFn
});