Clear Up
SharpKit Reference

Format Class

This class is a centralized place for formatting functions. It includes functions to format various different types of data, such as text, dates and numeric values.


This class contains several options for localization. These can be set once the library has loaded, all calls to the functions from that point will use the locale settings that were specified.

Options include:

  • thousandSeparator
  • decimalSeparator
  • currenyPrecision
  • currencySign
  • currencyAtEnd

This class also uses the default date format defined here: Ext.Date.defaultFormat.

Using with renderers

There are two helper functions that return a new function that can be used in conjunction with grid renderers:

columns: [{
            dataIndex: 'date',
            renderer: Ext.util.Format.dateRenderer('Y-m-d')
            }, {
            dataIndex: 'time',
            renderer: Ext.util.Format.numberRenderer('0.000')

Functions that only take a single argument can also be passed directly:

columns: [{
            dataIndex: 'cost',
            renderer: Ext.util.Format.usMoney
            }, {
            dataIndex: 'productCode',
            renderer: Ext.util.Format.uppercase

Using with XTemplates

XTemplates can also directly use Ext.util.Format functions:

new Ext.XTemplate([
            'Date: {startDate:date("Y-m-d")}',
            'Cost: {cost:usMoney}'

Namespace: Ext.util

Base Types




Name Description
capitalize(JsString) Alias for Ext.String.capitalize. Capitalize the given string
currency(object, object, object, object) Format a number as a currency.
date(object, object) Formats the passed date using the specified format pattern.
dateRenderer(JsString) Returns a date rendering function that can be reused to apply a date format multiple times efficiently.
defaultValue(object, object) Checks a reference and converts it to the default value if it's empty.
ellipsis(JsString, JsNumber, bool) Alias for Ext.String.ellipsis. Truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length
escapeRegex(JsString) Escapes the passed string for use in a regular expression.
fileSize(object) Simple format for a file size (xxx bytes, xxx KB, xxx MB).
format(JsString, JsString, JsString) Alias for Ext.String.format. Allows you to define a tokenized string and pass an arbitrary number of arguments to replace the tokens. Each token must be unique, and must increment in the format {0}, {1}, etc. Example usage:
var cls = 'my-class', text = 'Some text';
        var s = Ext.String.format('<div class="{0}">{1}</div>', cls, text);
        // s now contains the string: '<div class="my-class">Some text</div>'
htmlDecode(JsString) Alias for Ext.String.htmlDecode. Convert certain characters (&, <, >, ', and ") from their HTML character equivalents.
htmlEncode(JsString) Alias for Ext.String.htmlEncode. Convert certain characters (&, <, >, ', and ") to their HTML character equivalents for literal display in web pages.
leftPad(JsString, JsNumber, object) Alias for Ext.String.leftPad. Pads the left side of a string with a specified character. This is especially useful for normalizing number and date strings. Example usage:
var s = Ext.String.leftPad('123', 5, '0');
        // s now contains the string: '00123'
lowercase(JsString) Converts a string to all lower case letters.
math() It does simple math for use in a template, for example:
var tpl = new Ext.Template('{value} * 10 = {value:math("* 10")}');
nl2br(JsString) Converts newline characters to the HTML tag <br/>
number(JsNumber, JsString) Formats the passed number according to the passed format string. The number of digits after the decimal separator character specifies the number of decimal places in the resulting string. The local-specific decimal character is used in the result. The presence of a thousand separator character in the format string specifies that the locale-specific thousand separator (if any) is inserted separating thousand groups. By default, "," is expected as the thousand separator, and "." is expected as the decimal separator. New to Ext JS 4 Locale-specific characters are always used in the formatted output when inserting thousand and decimal separators. The format string must specify separator characters according to US/UK conventions ("," as the thousand separator, and "." as the decimal separator) To allow specification of format strings according to local conventions for separator characters, add the string /i to the end of the format string. examples (123456.789):
  • 0 - (123456) show only digits, no precision
  • 0.00 - (123456.78) show only digits, 2 precision
  • 0.0000 - (123456.7890) show only digits, 4 precision
  • 0,000 - (123,456) show comma and digits, no precision
  • 0,000.00 - (123,456.78) show comma and digits, 2 precision
  • 0,0.00 - (123,456.78) shortcut method, show comma and digits, 2 precision
  • To allow specification of the formatting string using UK/US grouping characters (,) and decimal (.) for international numbers, add /i to the end. For example: 0.000,00/i
    numberRenderer(JsString) Returns a number rendering function that can be reused to apply a number format multiple times efficiently.
    parseBox(object) Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result).
    plural(JsNumber, JsString, object) Selectively do a plural form of a word based on a numeric value. For example, in a template, {commentCount:plural("Comment")} would result in "1 Comment" if commentCount was 1 or would be "x Comments" if the value is 0 or greater than 1.
    round(object, JsNumber) Rounds the passed number to the required decimal precision.
    stripScripts(object) Strips all script tags.
    stripTags(object) Strips all HTML tags.
    substr(JsString, JsNumber, JsNumber) Returns a substring from within an original string.
    trim(JsString) Alias for Ext.String.trim. Trims whitespace from either end of a string, leaving spaces within the string intact. Example: @example
    var s = '  foo bar  ';
                alert('-' + s + '-');         //alerts "- foo bar -"
                alert('-' + Ext.String.trim(s) + '-');  //alerts "-foo bar-"
    undef(object) Checks a reference and converts it to empty string if it is undefined.
    uppercase(JsString) Converts a string to all upper case letters.
    usMoney(object) Format a number as US currency.


    Name Description
    currencyAtEnd This may be set to true to make the currency function append the currency sign to the formatted value. This may be overridden in a locale file. Defaults to: false
    currencyPrecision The number of decimal places that the currency function displays. This may be overridden in a locale file. Defaults to: 2
    currencySign The currency sign that the currency function displays. This may be overridden in a locale file. Defaults to: "$"
    decimalSeparator The character that the number function uses as a decimal point. This may be overridden in a locale file. Defaults to: "."
    thousandSeparator The character that the number function uses as a thousand separator. This may be overridden in a locale file. Defaults to: ","
    © Copyright 2005-2011 SharpKit. All rights reserved.