Ext.define('Ext.ux.form.MonthField', {
    extend: 'Ext.form.field.Picker',
    alias: 'widget.monthfield',
    //requires: ['Ext.picker.Date'],
    //alternateClassName: ['Ext.form.DateField', 'Ext.form.Date'],


    format: "Y-m",

    altFormats: "m/y|m/Y|m-y|m-Y|my|mY|y/m|Y/m|y-m|Y-m|ym|Ym",

    //disabledDaysText: "Disabled",

    //disabledDatesText: "Disabled",

    //minText: "The date in this field must be equal to or after {0}",

    //maxText: "The date in this field must be equal to or before {0}",

    //invalidText: "{0} is not a valid date - it must be in the format {1}",

    triggerCls: Ext.baseCSSPrefix + 'form-date-trigger',

    //showToday: true,

    //initTime: '12',

    //initTimeFormat: 'H',

    minValue: '',

    matchFieldWidth: false,

    startDay: new Date(),

    initComponent: function () {
        var me = this;


        me.disabledDatesRE = null;

        me.callParent();
    },

    initValue: function () {
        var me = this,
            value = me.value;

        if (Ext.isString(value)) {
            me.value = Ext.Date.parse(value, this.format);
        }
        if (me.value)
            me.startDay = me.value;
        me.callParent();
    },

    rawToValue: function (rawValue) {
        //return Ext.Date.parse(rawValue, this.format) || rawValue || null;
        return rawValue;
    },

    valueToRaw: function (value) {
        return this.formatDate(value);
    },
    setMinValue: function (dt) {
        this.minValue = dt;
    },


    formatDate: function (date) {
        return Ext.isDate(date) ? Ext.Date.dateFormat(date, this.format) : date;
    },
    createPicker: function () {
        var me = this,
            format = Ext.String.format;

        return Ext.create('Ext.picker.Month', {
            //renderTo: me.el,
            pickerField: me,
            ownerCt: me.ownerCt,
            renderTo: document.body,
            floating: true,
            shadow: false,
            focusOnShow: true,
            listeners: {
                scope: me,
                cancelclick: me.onCancelClick,
                okclick: me.onOkClick,
                yeardblclick: me.onOkClick,
                monthdblclick: me.onOkClick
            }
        });
    },

    onExpand: function () {
        //this.picker.show();
        this.picker.setValue(this.startDay);
        //

    },

    //    onCollapse: function () {
    //        this.focus(false, 60);
    //    },

    onOkClick: function (picker, value) {
        var me = this,
            month = value[0],
            year = value[1],
            date = new Date(year, month, 1);
        if (me.minValue != '') {
            var myMinDate = new Date(me.minValue + '-01');
            if (myMinDate.getTime() > date.getTime()) {
                me.startDay = myMinDate;
                me.setValue(myMinDate);
            } else {
                me.startDay = date;
                me.setValue(date);
            }

        } else {
            me.startDay = date;
            me.setValue(date);
        }
        this.picker.hide();
        //this.blur();
    },

    onCancelClick: function () {
        this.picker.hide();
        //this.blur();
    }

});