Hybrid View

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

      1  

    Default MonthField for ExtJS 4.1

    MonthField for ExtJS 4.1


    I created this component to select month and year, based on date field.

    Code:
    /**
     * Month field component.
     * @extends Ext.form.field.Date
     * @author Maicon Schelter
     */
    Ext.define('Ext.form.field.Month',{
    
         extend        : 'Ext.form.field.Date'
        ,alias        : ['widget.monthfield']
    
        /**
         * @cfg {String} format
         * Format date component.
         */
        ,format        : 'm/Y'
    
       /**
         * Create component picker month.
         * @method createPicker
         * @return {Object}
         * @private
         */
        ,createPicker : function()
        {
            var  me        = this
                ,picker    = me.monthPicker;
    
            if(!picker)
            {
                me.monthPicker = picker = new Ext.picker.Month({
                     ownerCt    : me.ownerCt
                    ,renderTo    : document.body
                    ,floating    : true
                    ,shadow        : false
                    ,small        : me.showToday === false
                    ,listeners : {
                         scope            : me
                        ,cancelclick    : me.onCancelClick
                        ,okclick        : me.onOkClick
                        ,yeardblclick    : me.onOkClick
                        ,monthdblclick    : me.onOkClick
                    }
                });
    
                if(!me.disableAnim)
                {
                    picker.hide();
                    me.isExpanded = false;
                }
    
                me.on('beforehide', Ext.Function.bind(me.hideMonthPicker, me, [false]));
            }
    
            return picker;
        }
    
        /**
         * Click component method.
         * @method onOkClick
         * @param {Object} picker
         * @param {String} value
         * @private
         */
        ,onOkClick : function(picker, value)
        {
            var  me        = this
                ,month    = value[0]
                ,year    = value[1]
                ,date    = new Date(year, month, 1);
    
            if(date.getMonth() !== month)
            {
                date = Ext.Date.getLastDateOfMonth(new Date(year, month, 1));
            }
    
            me.activeDate = date = Ext.util.Format.date(date, me.format);
            me.setValue(date);
            me.hideMonthPicker();
        }
    
        /**
         * Cancel selection and set last value.
         * @method onCancelClick
         * @private
         */
        ,onCancelClick : function()
        {
            this.setValue(this.activeDate);
            this.hideMonthPicker();
        }
    
        /**
         * Show or hide picker month.
         * @method hideMonthPicker
         * @param {Boolean} animate
         * @return {Object}
         */
        ,hideMonthPicker : function(animate)
        {
            var  me        = this
                ,picker    = me.picker;
    
            if(picker)
            {
                if(me.shouldAnimate(animate))
                {
                    me.runAnimation(true);
                }
                else
                {
                    picker.hide();
                    me.isExpanded = false;
                }
            }
    
            return me;
        }
    
        /**
         * Return animate show or hide component.
         * @method shouldAnimate
         * @param {Boolean} animate
         * @return {Boolean}
         */
        ,shouldAnimate : function(animate)
        {
            return Ext.isDefined(animate) ? animate : !this.disableAnim;
        }
    
        /**
         * Show or hide picker month animate.
         * @method runAnimation
         * @param {Boolean} isHide
         */
        ,runAnimation : function(isHide)
        {
            var     me        = this
                ,picker    = this.picker
                ,options = {
                     duration : 200
                    ,callback : function()
                    {
                        if(isHide)
                        {
                            picker.hide();
                            me.isExpanded = false;
                        }
                        else
                        {
                            picker.show();
                            me.isExpanded = true;
                        }
                    }
                };
    
            if(isHide)
            {
                picker.el.slideOut('t', options);
            }
            else
            {
                picker.el.slideIn('t', options);
            }
        }
    });


    File to download.
    Month.zip

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Nice documentation! One thing, you have initComponent with no custom code in it, you should remove this as it's wasteful.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

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

      1  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Nice documentation! One thing, you have initComponent with no custom code in it, you should remove this as it's wasteful.
    Ops, sorry, i forgot the initComponent at my code. Code and file are updated.
    Thanks!

  4. #4
    Sencha User
    Join Date
    Oct 2008
    Posts
    3
    Vote Rating
    0
    jwells is on a distinguished road

      0  

    Default


    Works fantastic in 4.1. Thanks for your efforts!

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Location
    Poitiers, France
    Posts
    20
    Vote Rating
    3
    youss.imzourh is on a distinguished road

      0  

    Default


    Brilliant work!

    Thanks dude!

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

      0  

    Default


    Worked fine until today (31/05/2012).
    When choosing a February date set to March (
    Similarly, if you choose to September - is chosen in August, with the remaining months, everything is OK, what could be the reason?

    Code:
    {
                    xtype: 'monthfield',
                    submitFormat: 'Y-m-d',
                    name: 'dat-fld',
                    id:'dat-fld',
                    anchor: '100%',
                    width:140,
                    labelWidth:50,
                    fieldLabel: "Date",
                    format: 'm.Y',
                    value:dateMap          
     }

  7. #7
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Vote Rating
    5
    webfriend13 is on a distinguished road

      2  

    Default


    Hi All,

    Can someone please tell me how to use this control. When i unzip it, i just see one file & the extension is unknown.

    Please provide help and suggestions.

    Thank you.