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
    36,754
    Vote Rating
    827
    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
    Join Date
    May 2012
    Posts
    6
    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.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."