1. #1
    Ext JS Premium Member
    Join Date
    Jun 2011
    Location
    St. Louis
    Posts
    212
    Vote Rating
    9
    jimmylu98 will become famous soon enough

      0  

    Default EXT4: monthfield with month picker for Extjs4

    EXT4: monthfield with month picker for Extjs4


    I extend datafield to create monthfield. It will have month picker and display month ( or date - first date of the picked month ).

    PHP Code:
    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'],
        
    selectMonthnull,
        
    createPicker: function() {
            var 
    me this,
                
    format Ext.String.format;
            return 
    Ext.create('Ext.picker.Month', {
                
    pickerFieldme,
                
    ownerCtme.ownerCt,
                
    renderTodocument.body,
                
    floatingtrue,
                
    hiddentrue,
                
    focusOnShowtrue,
                
    minDateme.minValue,
                
    maxDateme.maxValue,
                
    disabledDatesREme.disabledDatesRE,
                
    disabledDatesTextme.disabledDatesText,
                
    disabledDaysme.disabledDays,
                
    disabledDaysTextme.disabledDaysText,
                
    formatme.format,
                
    showTodayme.showToday,
                
    startDayme.startDay,
                
    minTextformat(me.minTextme.formatDate(me.minValue)),
                
    maxTextformat(me.maxTextme.formatDate(me.maxValue)),
                
    listeners: { 
            
    select:        { scopeme,   fnme.onSelect     }, 
            
    monthdblclick: { scopeme,   fnme.onOKClick     },    
            
    yeardblclick:  { scopeme,   fnme.onOKClick     },
            
    OkClick:       { scopeme,   fnme.onOKClick     },    
            
    CancelClick:   { scopeme,   fnme.onCancelClick }        
                },
                
    keyNavConfig: {
                    
    esc: function() {
                        
    me.collapse();
                    }
                }
            });
        },
        
    onCancelClick: function() {
            var 
    me this;    
        
    me.selectMonth null;
            
    me.collapse();
        },
        
    onOKClick: function() {
            var 
    me this;    
        if( 
    me.selectMonth ) {
                   
    me.setValue(me.selectMonth);
                
    me.fireEvent('select'meme.selectMonth);
        }
            
    me.collapse();
        },
        
    onSelect: function(md) {
            var 
    me this;    
        
    me.selectMonth = new Date(( d[0]+) +'/1/'+d[1]);
        }
    }); 
    To use it:
    PHP Code:
          xtype'monthfield',
          
    format'F, Y',  
          
    value: new Date() 

  2. #2
    Sencha User
    Join Date
    May 2007
    Posts
    2
    Vote Rating
    0
    raider is on a distinguished road

      0  

    Default


    Good job guys

  3. #3
    Sencha User
    Join Date
    Jan 2010
    Posts
    37
    Vote Rating
    0
    DerSalz is on a distinguished road

      0  

    Default


    Excellent! Well done! I really appreciate this extension! Thanks a lot!

  4. #4
    Sencha User
    Join Date
    Mar 2010
    Posts
    3
    Vote Rating
    0
    prabhu_patil is on a distinguished road

      0  

    Thumbs up Perfect

    Perfect


    Thanks a lot

  5. #5
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goiânia
    Posts
    472
    Vote Rating
    12
    wemerson.januario will become famous soon enough

      0  

    Default


    excelent
    Wemerson Januario
    Twitter:
    @januariocoder
    Email: wemerson.januario@gmail.com

    From: Goiânia, Brazil
    Ext JS Developer

  6. #6
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    4
    Vote Rating
    0
    kpw.joseluis is on a distinguished road

      0  

    Default


    Very useful.

    Thanks.

  7. #7
    Sencha User
    Join Date
    Mar 2012
    Posts
    1
    Vote Rating
    0
    Adams2235 is on a distinguished road

      0  

    Default


    The same to you,thanks

  8. #8
    Sencha User
    Join Date
    May 2010
    Location
    Kiev, Ukraine
    Posts
    135
    Vote Rating
    7
    khmurach is on a distinguished road

      0  

    Default


    Should it submit day=1?
    Demo here http://ext4all.com/post/ext4-monthfi...ker-for-extjs4

  9. #9
    Sencha User
    Join Date
    Apr 2009
    Posts
    10
    Vote Rating
    1
    kalchas is on a distinguished road

      0  

    Default Localisation issue

    Localisation issue


    Hi guys,
    Thank you very much for this excellent picker. I use it in an ext js 4 application, which I have localized in the greek language (see the localisation file). I figured out, that the picker without localisation works perfectly. Note that I have chosen the format 'F, Y' for the picker. With the localisation, I pick a month-year, the picker selects the correct month-year, and when I click out of the picker, the year remains correct but the month changes to its original value. Now I use the format 'm/Y' that works. I noticed that
    if I comment out the line: monthNames : Ext.Date.monthNames,
    in the ext-lang-el_GR.js file, it works ok, showing the months in English.
    if(Ext.picker.Date){
    Ext.apply(Ext.picker.Date.prototype, {
    todayText : "Σήμερα",
    minText : "Η Ημερομηνία είναι προγενέστερη από την παλαιότερη αποδεκτή",
    maxText : "Η Ημερομηνία είναι μεταγενέστερη από την νεότερη αποδεκτή",
    disabledDaysText : "",
    disabledDatesText : "",
    monthNames : Ext.Date.monthNames,
    dayNames : Ext.Date.dayNames,
    nextText : 'Επόμενος Μήνας (Control+Δεξί Βέλος)',
    prevText : 'Προηγούμενος Μήνας (Control + Αριστερό Βέλος)',
    monthYearText : 'Επιλογή Μηνός (Control + Επάνω/Κάτω Βέλος για μεταβολή ετών)',
    todayTip : "{0} (ΠΛήκτρο Διαστήματος)",
    format : "d/m/y"
    });
    }

    I also tried to change a format of a normal datepicker, to 'F, Y'. That is, I chose a date and the result was ok, (month Year). When I clicked out of the datepicker, the values remained unchanged.
    Thanks in advance,
    Harry

  10. #10
    Sencha User
    Join Date
    Jun 2011
    Posts
    12
    Vote Rating
    0
    shawon is on a distinguished road

      0  

    Default


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