Hybrid View

  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
    May 2010
    Location
    Kiev, Ukraine
    Posts
    134
    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

  4. #4
    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

  5. #5
    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?

  6. #6
    Sencha User maiconschelter's Avatar
    Join Date
    Nov 2008
    Location
    Brazil
    Posts
    15
    Vote Rating
    6
    maiconschelter is on a distinguished road

      0  

    Default


    Quote Originally Posted by shawon View Post
    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

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

      0  

    Default


    thanks maiconschelter,
    it resolved the issue.

  8. #8
    Sencha User
    Join Date
    May 2012
    Posts
    6
    Vote Rating
    0
    alexfrg is on a distinguished road

      0  

    Default


    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)

  9. #9
    Sencha User
    Join Date
    Jun 2012
    Posts
    82
    Vote Rating
    1
    dr-dan is on a distinguished road

      0  

    Default


    DELETED
    Last edited by dr-dan; 19 Oct 2012 at 3:42 AM. Reason: didnt see second page

  10. #10
    Sencha User
    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    316
    Vote Rating
    2
    mjhaston is on a distinguished road

      0  

    Default


    Super helpful. Thank you!