1. #1
    Sencha User willf1976's Avatar
    Join Date
    May 2009
    Location
    carpinteria, ca
    Posts
    84
    Vote Rating
    0
    willf1976 is on a distinguished road

      0  

    Default Custom Cell Formaters

    Custom Cell Formaters


    Hi All

    I have been going through the classes we have developed and sharing back with the community some of them that I think will be useful to others.

    Here our custom cell formaters

    Code:
    Ext.apply(Ext.util.Format, {
        ellipsis255 : function (value) {
            return Ext.util.Format.ellipsis(value, 255, false);
        },
        ellipsis64 : function (value) {
            return Ext.util.Format.ellipsis(value, 64, false);
        },
        ellipsis10 : function (value) {
            return Ext.util.Format.ellipsis(value, 10, false);
        },
    
        integer : function (value) {
            return Ext.util.Format.number(value, '0,000');
        },
        decimal2 : function (value) {
            return Ext.util.Format.number(value, '0,000.00');
        },
        decimal4 : function (value) {
            return Ext.util.Format.number(value, '0,000.0000');
        },
        trueFalse : function (value) {
            return (parseInt(value))?'true':'false';
        },
        yesNo : function (value) {
            return (parseInt(value))?'yes':'no';
        },
        onOff : function (value) {
            return (parseInt(value))?'on':'off';
        },
        enabledDisabled : function (value) {
            return (parseInt(value))?'enabled':'disabled';
        },
        activeInactive : function (value) {
            return (parseInt(value))?'active':'inactive';
        },
        checkedUnchecked : function (value) {
            return (parseInt(value))?'checked':'unchecked';
        },
        ISO8601Long : function (value) {
            if (!Ext.isEmpty(value)) {
                var date = Date.parseDate(value, 'Y-m-d H:i:s');
                return date.format("Y-m-d H:i:s");
            }
        },
        ISO8601Short : function (value) {
            if (!Ext.isEmpty(value)) {
                var date = Date.parseDate(value, 'Y-m-d H:i:s');
                return date.format("Y-m-d");
            }
        },
        ShortDate : function (value) {
            if (!Ext.isEmpty(value)) {
                var date = Date.parseDate(value, 'Y-m-d H:i:s');
                return date.format("n/j/Y");
            }
        },
        LongDate : function (value) {
            if (!Ext.isEmpty(value)) {
                var date = Date.parseDate(value, 'Y-m-d H:i:s');
                return date.format("l, F d, Y");
            }
        },
        FullDateTime : function (value) {
            if (!Ext.isEmpty(value)) {
                var date = Date.parseDate(value, 'Y-m-d H:i:s');
                return date.format("l, F d, Y g:i:s A");
            }
        },
        MonthDay : function (value) {
            if (!Ext.isEmpty(value)) {
                var date = Date.parseDate(value, 'Y-m-d H:i:s');
                return date.format("F d");
            }
        },
        ShortTime : function (value) {
            if (!Ext.isEmpty(value)) {
                var date = Date.parseDate(value, 'Y-m-d H:i:s');
                return date.format("g:i A");
            }
        },
        LongTime : function (value) {
            if (!Ext.isEmpty(value)) {
                var date = Date.parseDate(value, 'Y-m-d H:i:s');
                return date.format("g:i:s A");
            }
        },
        SortableDateTime : function (value) {
            if (!Ext.isEmpty(value)) {
                var date = Date.parseDate(value, 'Y-m-d H:i:s');
                return date.format("Y-m-d\\TH:i:s");
            }
        },
        UniversalSortableDateTime : function (value) {
            if (!Ext.isEmpty(value)) {
                var date = Date.parseDate(value, 'Y-m-d H:i:s');
                return date.format("Y-m-d H:i:sO");
            }
        },
        YearMonth : function (value) {
            if (!Ext.isEmpty(value)) {
                var date = Date.parseDate(value, 'Y-m-d H:i:s');
                return date.format("F, Y");
            }
        },
        YearQuarter : function (value) {
            if (!Ext.isEmpty(value)) {
                var date = Date.parseDate(value, 'Y-m-d H:i:s'),
                    quarter = Math.ceil(date.format('m') / 3),
                    year = date.format('Y');
                    return 'Q' + quarter + ' ' + year;
            }
        },
        
        Year : function (value) {
            if (!Ext.isEmpty(value)) {
                var date = Date.parseDate(value, 'Y-m-d H:i:s');
                return date.format('Y');
            }
        },
        
        YearMonthDayOfWeek : function (value) {
            if (!Ext.isEmpty(value)) {
                var date = Date.parseDate(value, 'Y-m-d H:i:s');
                return date.format("Y, F, l");
            }
        },
        
        DayMonthYear : function (value) {
            if (!Ext.isEmpty(value)) {
                var date = Date.parseDate(value, 'Y-m-d H:i:s');
                return date.format("d, F, Y");
            }
        },
        
        HourDayMonthYear : function (value) {
            if (!Ext.isEmpty(value)) {
                var date = Date.parseDate(value, 'Y-m-d H:i:s');
                return date.format("h a, d, F, Y");
            }
        },
        
        HourMinutesDayMonthYear : function (value) {
            if (!Ext.isEmpty(value)) {
                var date = Date.parseDate(value, 'Y-m-d H:i:s');
                return date.format("h:i a, d, F, Y");
            }
        },
        
        HourMinutesSecondsDayMonthYear : function (value) {
            if (!Ext.isEmpty(value)) {
                var date = Date.parseDate(value, 'Y-m-d H:i:s');
                return date.format("h:i:s a, d, F, Y");
            }
        },
        
        
        sortDirection : function (value) {
            if (!Ext.isEmpty(value)) {
                if (value == 'none') {
                    return '';    
                } else if (value == 'asc') {
                    return '^';    
                } else if (value == 'desc') {
                    return 'v';    
                }
            }
            return value;
        },
        
        noneToBlank : function (value) {
            if (!Ext.isEmpty(value)) {
                if (value == 'none') {
                    return '';    
                }
            }
            return value;
        },
        
        phone : function (value, metaData, record, rowIndex, colIndex, store) {    
            // If it's blank, save yourself some trouble by doing nothing.
            if (value == "") return;
        
            
        
            var phone = new String (value);
            var firstChar = phone.substring(0,1);
            if (firstChar!=1) {
                phone = phone.substring(0,14);
                firstChar = '';
            } else {
                phone = phone.substring(1,15);
            }
        
            /*
            "." means any character. If you try to use "(" and ")", the regular expression becomes 
            complicated sice both are reserve characters and escaping them sometimes fails. So just 
            use "." for any character and replace it later.
            */
            if (phone.match (".[0-9]{3}.[0-9]{3}-[0-9]{4}") == null)
            {
                /*
                Following "if" is for user making any changes to the formatted tel. no. If you don't put this 
                "if" condition, the user can not correct a digit by first deleting it and then entering a 
                correct one, since this will fire two "onkeyup" events : first one on deleting a 
                character and second one on entering the correct one. The first "onkeyup" event will fire this 
                function which will reformatt the tel no before the user gets a chace to correct the digit. This 
                will surely confuse the user. The "if" condition below eliminates that.
                */
                if (phone.match (".[0-9]{2}.[0-9]{3}-[0-9]{4}|" + ".[0-9].[0-9]{3}-[0-9]{4}|" +
                    ".[0-9]{3}.[0-9]{2}-[0-9]{4}|" + ".[0-9]{3}.[0-9]-[0-9]{4}") == null)
                {
                    /*
                    You will reach here only if the user is still typing the number or if he/she has 
                    messed up already formatted number. 
                    */
                    var phoneNumeric = phoneChar = "", i;
                    // Loop thru what user has entered.
                    for (i=0;i<phone.length;i++)
                    {
                        // Go thru what user has entered one character at a time.
                        phoneChar = phone.substr (i,1);
            
                        // If that character is not a number or is a White space, ignore it. Only if it is a digit, 
                        // concatinate it with a number string.
                        if (!isNaN (phoneChar) && (phoneChar != " ")) phoneNumeric = phoneNumeric + phoneChar;
                    }
            
                    phone = "";
                    // At this point, you have picked up only digits from what user has entered. Loop thru it.
                    for (i=0;i<phoneNumeric.length;i++)
                    {
                        // If it's the first digit, throw in "(" before that.
                        if (i == 0) phone = phone + "(";
                        // If you are on the 4th digit, put ") " before that.
                        if (i == 3) phone = phone + ") ";
                        // If you are on the 7th digit, insert "-" before that.
                        if (i == 6) phone = phone + "-";
                        // Add the digit to the phone charatcer string you are building.
                        phone = phone + phoneNumeric.substr (i,1);
                    }
                }
            } else { 
                // This means the tel no is in proper format. Make sure by replacing the 0th, 4th and 8th character.
                phone = "(" + phone.substring (1,4) + ") " + phone.substring (5,8) + "-" + phone.substring(9,13); 
            }
            // So far you are working internally. Refresh the screen with the re-formatted value.
            if (phone != value) value = phone;
            return firstChar + ' ' + value;
        },
        
        showNextColumn : function (value, metaData, record, rowIndex, colIndex, store) {
            var obj, n=1;
            for(obj in record.data) {
                if (n==colIndex+2) {
                    value = record.data[obj];
                    break;
                }
                n++;
            }
            return value;
        },
        showPercent : function (value) {
            return value + '%';
        }
    });

    Best regards

    Will Ferrer (Run the Business)

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Vote Rating
    851
    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


    Thanks for the contribution!
    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.

Thread Participants: 1

Tags for this Thread