EXT4: monthfield with month picker for Extjs4

[maiconschelter]

Hey in ExtJS 4.1 RC1 the picker is not showing the "Ok" and "Cancel" button text. Can any one help me on this?

Found here: http://www.sencha.com/forum/showthre...Field&p=781724

[shawon]

thanks maiconschelter,
it resolved the issue.

[alexfrg]

In this example ( http://ext4all.com/post/ext4-monthfi...ker-for-extjs4 ),you can not selectin February- the dateis reset toMarch
Thisbugasitdepends on the currentdate (lastnedaleeverything workedOK)

[dr-dan]

DELETED

[mjhaston]

Super helpful. Thank you!

[JacobGu]

Has anyone updated the month field for 4.2(.1)? When I use it, the bottom row is cut off (i.e., Jun, Dec, 2013, 2018). (see screenshot). Using a regular date field and switching to month picker, it does show properly.Screen Shot 2013-05-28 at 1.12.24 PM.png

[mjhaston]

I wonder if it's a Neptune thing? You're using that theme correct? I'm using 4.1 and it still appears fine. I know you asked about 4.2, but thought I would chime in. I did go to 4.2 at one point, but the theme I'm using was a little out of sorts, so I went back.

[JacobGu]

It does look fine for me in 4.1. I'm in the process now of upgrading my application to 4.2.1 from 4.1.1, and this is a bug I am finding. It seems like it's something in the layout process because the picker height style is set too short (probably by layout manager).

[JacobGu]

Ok, so I've normalized it down to the simplest expression of the bug, that is, month picker used directly without the month field. It's clearly a bug in the Ext JS framework: http://jsfiddle.net/jacobg/fztKD/

Bug filed here: http://www.sencha.com/forum/showthre...bottom-cut-off

[jimmylu98]

There is a bug and I have reported use ticket system. And I tried to find this thread I have created, but I couldn't find. Looks someone move this thread to community discussion (It was in demo/example?).

Below are the line to fix the bug as well as updated full code.

        height: 200, 

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'],
    selectMonth: null,
    createPicker: function() {
        var me = this,
            format = Ext.String.format;
        return Ext.create('Ext.picker.Month', {
            pickerField: me,
            ownerCt: me.ownerCt,
            renderTo: document.body,
            floating: true,
            hidden: true,
            focusOnShow: true,
        height: 200,
            minDate: me.minValue,
            maxDate: me.maxValue,
            disabledDatesRE: me.disabledDatesRE,
            disabledDatesText: me.disabledDatesText,
            disabledDays: me.disabledDays,
            disabledDaysText: me.disabledDaysText,
            format: me.format,
            showToday: me.showToday,
            startDay: me.startDay,
            minText: format(me.minText, me.formatDate(me.minValue)),
            maxText: format(me.maxText, me.formatDate(me.maxValue)),
            listeners: { 
        select:        { scope: me,   fn: me.onSelect     }, 
        monthdblclick: { scope: me,   fn: me.onOKClick     },    
        yeardblclick:  { scope: me,   fn: me.onOKClick     },
        OkClick:       { scope: me,   fn: me.onOKClick     },    
        CancelClick:   { scope: me,   fn: me.onCancelClick }        
            },
            keyNavConfig: {
                esc: function() {
                    me.collapse();
                }
            }
        });
    },
    onSelect: function(m, d) {
        var me = this;    
    me.selectMonth = new Date(( d[0]+1 ) +'/1/'+d[1]);
    },
    onOKClick: function() {
        var me = this;    
    if( me.selectMonth ) {
               me.setValue(me.selectMonth);
            me.fireEvent('select', me, me.selectMonth);
    }
        me.collapse();
    },
    onCancelClick: function() {
        var me = this;    
    me.selectMonth = null;
        me.collapse();
    }
});