This class is a centralized place for formatting functions inside the library. It includes functions to format various different types of data, such as text, dates and numeric values.
Localization 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}'
]);
Capitalize the given string. See Ext.String.capitalize.
Capitalize the given string. See Ext.String.capitalize.
This may be set to true
to make the currency function
append the currency sign to the formatted value.
This defaults to false
, but may be overridden in a locale file.
The number of decimal places that the currency function displays.
This defaults to 2
, but may be overridden in a locale file.
The character that the number function uses as a decimal point.
This defaults to .
, but may be overridden in a locale file.
Truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length. See Ext.String.ellipsis.
Truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length. See Ext.String.ellipsis.
Formats to a string. See Ext.String.format
Formats to a string. See Ext.String.format
Convert certain characters (&, <, >, and ') from their HTML character equivalents. See Ext.string.htmlDecode.
Convert certain characters (&, <, >, and ') from their HTML character equivalents. See Ext.string.htmlDecode.
Convert certain characters (&, <, >, and ') to their HTML character equivalents for literal display in web pages. See Ext.String.htmlEncode.
Adds left padding to a string. See Ext.String.leftPad
Adds left padding to a string. See Ext.String.leftPad
The character that the number function uses as a thousand separator.
This defaults to ,
, but may be overridden in a locale file.
Trims any whitespace from either side of a string. See Ext.String.trim.
Trims any whitespace from either side of a string. See Ext.String.trim.
Format a number as a currency
Format a number as a currency
The numeric value to format
The currency sign to use (defaults to currencySign)
The number of decimals to use for the currency (defaults to currencyPrecision)
True if the currency sign should be at the end of the string (defaults to currencyAtEnd)
The formatted currency string
Formats the passed date using the specified format pattern.
Formats the passed date using the specified format pattern.
The value to format. If a string is passed, it is converted to a Date by the Javascript Date object's parse() method.
(Optional) Any valid date format string. Defaults to Ext.Date.defaultFormat.
The formatted date string.
Returns a date rendering function that can be reused to apply a date format multiple times efficiently
Returns a date rendering function that can be reused to apply a date format multiple times efficiently
Any valid date format string. Defaults to Ext.Date.defaultFormat.
The date formatting function
Checks a reference and converts it to the default value if it's empty
Checks a reference and converts it to the default value if it's empty
Reference to check
The value to insert of it's undefined (defaults to "")
Escapes the passed string for use in a regular expression
Escapes the passed string for use in a regular expression
Simple format for a file size (xxx bytes, xxx KB, xxx MB)
Simple format for a file size (xxx bytes, xxx KB, xxx MB)
The numeric value to format
The formatted file size
Converts a string to all lower case letters
Converts a string to all lower case letters
The text to convert
The converted text
It does simple math for use in a template, for example:
var tpl = new Ext.Template('{value} * 10 = {value:math("* 10")}');
A function that operates on the passed value.
Converts newline characters to the HTML tag <br/>
Converts newline characters to the HTML tag <br/>
string value to format.
The string with embedded <br/> tags in place of newlines.
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 Ext4
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.
The number to format.
The way you would like to format this text.
The formatted number.
Returns a number rendering function that can be reused to apply a number format multiple times efficiently
Returns a number rendering function that can be reused to apply a number format multiple times efficiently
Any valid number format string for number
The number formatting function
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)
The encoded margins
An object with margin sizes for top, right, bottom and left
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.
The value to compare against
The singular form of the word
(optional) The plural form of the word (defaults to the singular with an "s")
Rounds the passed number to the required decimal precision.
Rounds the passed number to the required decimal precision.
The numeric value to round.
The number of decimal places to which to round the first parameter's value.
The rounded value.
Strips all script tags
Strips all script tags
The text from which to strip script tags
The stripped text
Strips all HTML tags
Strips all HTML tags
The text from which to strip tags
The stripped text
Returns a substring from within an original string
Returns a substring from within an original string
The original text
The start index of the substring
The length of the substring
The substring
Checks a reference and converts it to empty string if it is undefined
Checks a reference and converts it to empty string if it is undefined
Reference to check
Empty string if converted, otherwise the original value
Converts a string to all upper case letters
Converts a string to all upper case letters
The text to convert
The converted text