The documentation for the ExtReact product diverges somewhat from the
documentation of other Sencha products. The sections below describe
documentation for all products except where indicated as unique to
ExtReact.
Many classes have shortcut names used when creating (instantiating) a class with a
configuration object. The shortcut name is referred to as an alias (or xtype if the
class extends Ext.Component). The alias/xtype is listed next to the class name of
applicable classes for quick reference.
ExtReact component classes list the configurable name prominently at the top of the API class doc followed by the fully-qualified class name.
Framework classes or their members may be specified as private or protected. Else,
the class / member is public. Public, protected, and private are access
descriptors used to convey how and when the class or class member should be used.
Public classes and class members are available for use by any other class or application code and may be relied upon as a stable and persistent within major product versions. Public classes and members may safely be extended via a subclass.
Protected class members are stable public members intended to be used by the
owning class or its subclasses. Protected members may safely be extended via a subclass.
Private classes and class members are used internally by the framework and are not intended to be used by application developers. Private classes and members may change or be omitted from the framework at any time without notice and should not be relied upon in application logic.
ExtReact component classes display
configuration options as props
ExtReact component classes do not list
properties as a dedicated member type, but rather as
read only props
static label next to the
method name. *See Static below.Below is an example class member that we can disect to show the syntax of a class member (the lookupComponent method as viewed from the Ext.button.Button class in this case).
Let's look at each part of the member row:
lookupComponent in this example)( item ) in this example)Ext.Component in this case). This may be omitted for methods that do not
return anything other than undefined or may display as multiple possible values
separated by a forward slash / signifying that what is returned may depend on the
results of the method call (i.e. a method may return a Component if a get method calls is
successful or false if unsuccessful which would be displayed as
Ext.Component/Boolean).PROTECTED in
this example - see the Flags section below)Ext.container.Container in this example). The source
class will be displayed as a blue link if the member originates from the current class
and gray if it is inherited from an ancestor or mixed-in class.view source in the example)item : Object in the example).undefined a "Returns" section
will note the type of class or object returned and a description (Ext.Component in the
example)Available since 3.4.0 - not pictured in
the example) just after the member descriptionDefaults to: false)The API documentation uses a number of flags to further commnicate the class member's function and intent. The label may be represented by a text label, an abbreviation, or an icon.
All ExtReact props are bindable
unless decorated as immutable
Immutable ExtReact props may not be use as a configurable prop when instantiating a component
classInstance.method1().method2().etc();false is returned from
an event handler- Indicates a framework class
- A singleton framework class. *See the singleton flag for more information
- A component-type framework class (any class within the Ext JS framework that extends Ext.Component)
- Indicates that the class, member, or guide is new in the currently viewed version
- Indicates a class member of type config
Or in the case of an ExtReact component class this
indicates a member of type prop
- Indicates a class member of type property
- Indicates a class member of type
method
- Indicates a class member of type event
- Indicates a class member of type
theme variable
- Indicates a class member of type
theme mixin
- Indicates that the class, member, or guide is new in the currently viewed version
Just below the class name on an API doc page is a row of buttons corresponding to the types of members owned by the current class. Each button shows a count of members by type (this count is updated as filters are applied). Clicking the button will navigate you to that member section. Hovering over the member-type button will reveal a popup menu of all members of that type for quick navigation.
Getting and setter methods that correlate to a class config option will show up in the methods section as well as in the configs section of both the API doc and the member-type menus just beneath the config they work with. The getter and setter method documentation will be found in the config row for easy reference.
ExtReact component classes do not hoist the getter /
setter methods into the prop. All methods will be described in the
Methods section
Your page history is kept in localstorage and displayed (using the available real estate) just below the top title bar. By default, the only search results shown are the pages matching the product / version you're currently viewing. You can expand what is displayed by clicking on the button on the right-hand side of the history bar and choosing the "All" radio option. This will show all recent pages in the history bar for all products / versions.
Within the history config menu you will also see a listing of your recent page visits. The results are filtered by the "Current Product / Version" and "All" radio options. Clicking on the button will clear the history bar as well as the history kept in local storage.
If "All" is selected in the history config menu the checkbox option for "Show product details in the history bar" will be enabled. When checked, the product/version for each historic page will show alongside the page name in the history bar. Hovering the cursor over the page names in the history bar will also show the product/version as a tooltip.
Both API docs and guides can be searched for using the search field at the top of the page.
On API doc pages there is also a filter input field that filters the member rows using the filter string. In addition to filtering by string you can filter the class members by access level, inheritance, and read only. This is done using the checkboxes at the top of the page.
The checkbox at the bottom of the API class navigation tree filters the class list to include or exclude private classes.
Clicking on an empty search field will show your last 10 searches for quick navigation.
Each API doc page (with the exception of Javascript primitives pages) has a menu view of metadata relating to that class. This metadata view will have one or more of the following:
Ext.button.Button class has an alternate class name of Ext.Button). Alternate class
names are commonly maintained for backward compatibility.Runnable examples (Fiddles) are expanded on a page by default. You can collapse and expand example code blocks individually using the arrow on the top-left of the code block. You can also toggle the collapse state of all examples using the toggle button on the top-right of the page. The toggle-all state will be remembered between page loads.
Class members are collapsed on a page by default. You can expand and collapse members using the arrow icon on the left of the member row or globally using the expand / collapse all toggle button top-right.
Viewing the docs on narrower screens or browsers will result in a view optimized for a smaller form factor. The primary differences between the desktop and "mobile" view are:
The class source can be viewed by clicking on the class name at the top of an API doc page. The source for class members can be viewed by clicking on the "view source" link on the right-hand side of the member row.
This class defines some basic methods for handling dates.
The date parsing and formatting syntax contains a subset of
PHP's date() function, and the formats that are
supported will provide results equivalent to their PHP versions.
The following is a list of all currently supported formats:
Format Description Example returned values
------ ----------------------------------------------------------------------- -----------------------
d Day of the month, 2 digits with leading zeros 01 to 31
D A short textual representation of the day of the week Mon to Sun
j Day of the month without leading zeros 1 to 31
l A full textual representation of the day of the week Sunday to Saturday
N ISO-8601 numeric representation of the day of the week 1 (for Monday) through 7 (for Sunday)
S English ordinal suffix for the day of the month, 2 characters st, nd, rd or th. Works well with j
w Numeric representation of the day of the week 0 (for Sunday) to 6 (for Saturday)
z The day of the year (starting from 0) 0 to 364 (365 in leap years)
W ISO-8601 week number of year, weeks starting on Monday 01 to 53
F A full textual representation of a month, such as January or March January to December
m Numeric representation of a month, with leading zeros 01 to 12
M A short textual representation of a month Jan to Dec
n Numeric representation of a month, without leading zeros 1 to 12
t Number of days in the given month 28 to 31
L Whether it's a leap year 1 if it is a leap year, 0 otherwise.
o ISO-8601 year number (identical to (Y), but if the ISO week number (W) Examples: 1998 or 2004
belongs to the previous or next year, that year is used instead)
Y A full numeric representation of a year, 4 digits Examples: 1999 or 2003
y A two digit representation of a year Examples: 99 or 03
a Lowercase Ante meridiem and Post meridiem am or pm
A Uppercase Ante meridiem and Post meridiem AM or PM
g 12-hour format of an hour without leading zeros 1 to 12
G 24-hour format of an hour without leading zeros 0 to 23
h 12-hour format of an hour with leading zeros 01 to 12
H 24-hour format of an hour with leading zeros 00 to 23
i Minutes, with leading zeros 00 to 59
s Seconds, with leading zeros 00 to 59
u Decimal fraction of a second Examples:
(minimum 1 digit, arbitrary number of digits allowed) 001 (i.e. 0.001s) or
100 (i.e. 0.100s) or
999 (i.e. 0.999s) or
999876543210 (i.e. 0.999876543210s)
O Difference to Greenwich time (GMT) in hours and minutes Example: +1030
P Difference to Greenwich time (GMT) with colon between hours and minutes Example: -08:00
T Timezone abbreviation of the machine running the code Examples: EST, MDT, PDT ...
Z Timezone offset in seconds (negative if west of UTC, positive if east) -43200 to 50400
c ISO 8601 date represented as the local time with an offset to UTC appended.
Notes: Examples:
1) If unspecified, the month / day defaults to the current month / day, 1991 or
the time defaults to midnight, while the timezone defaults to the 1992-10 or
browser's timezone. If a time is specified, it must include both hours 1993-09-20 or
and minutes. The "T" delimiter, seconds, milliseconds and timezone 1994-08-19T16:20+01:00 or
are optional. 1995-07-18T17:21:28-02:00 or
2) The decimal fraction of a second, if specified, must contain at 1996-06-17T18:22:29.98765+03:00 or
least 1 digit (there is no limit to the maximum number 1997-05-16T19:23:30,12345-0400 or
of digits allowed), and may be delimited by either a '.' or a ',' 1998-04-15T20:24:31.2468Z or
Refer to the examples on the right for the various levels of 1999-03-14T20:24:32Z or
date-time granularity which are supported, or see 2000-02-13T21:25:33
http://www.w3.org/TR/NOTE-datetime for more info. 2001-01-12 22:26:34
C An ISO date string as implemented by the native Date object's 1962-06-17T09:21:34.125Z
[Date.toISOString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
method. This outputs the numeric part with *UTC* hour and minute
values, and indicates this by appending the `'Z'` timezone
identifier.
U Seconds since the Unix Epoch (January 1 1970 00:00:00 GMT) 1193432466 or -2138434463
MS Microsoft AJAX serialized dates \/Date(1238606590509)\/ (i.e. UTC milliseconds since epoch) or
\/Date(1238606590509+0800)\/
time A javascript millisecond timestamp 1350024476440
timestamp A UNIX timestamp (same as U) 1350024866
Example usage (note that you must escape format specifiers with '\' to render them as character literals):
// Sample date:
// 'Wed Jan 10 2007 15:05:01 GMT-0600 (Central Standard Time)'
var dt = new Date('1/10/2007 03:05:01 PM GMT-0600');
console.log(Ext.Date.format(dt, 'Y-m-d')); // 2007-01-10
console.log(Ext.Date.format(dt, 'F j, Y, g:i a')); // January 10, 2007, 3:05 pm
console.log(Ext.Date.format(dt, 'l, \\t\\he jS \\of F Y h:i:s A')); // Wednesday, the 10th of January 2007 03:05:01 PM
Here are some standard date/time patterns that you might find helpful. They are not part of the source of Ext.Date, but to use them you can simply copy this block of code into any script that is included after Ext.Date and they will also become globally available on the Date object. Feel free to add or remove patterns as needed in your code.
Ext.Date.patterns = {
ISO8601Long:"Y-m-d H:i:s",
ISO8601Short:"Y-m-d",
ShortDate: "n/j/Y",
LongDate: "l, F d, Y",
FullDateTime: "l, F d, Y g:i:s A",
MonthDay: "F d",
ShortTime: "g:i A",
LongTime: "g:i:s A",
SortableDateTime: "Y-m-d\\TH:i:s",
UniversalSortableDateTime: "Y-m-d H:i:sO",
YearMonth: "F, Y"
};
Example usage:
var dt = new Date();
console.log(Ext.Date.format(dt, Ext.Date.patterns.ShortDate));
Developer-written, custom formats may be used by supplying both a formatting and a parsing function which perform to specialized requirements. The functions are stored in parseFunctions and formatFunctions.
An array of textual day names. Override these values for international dates.
Example:
Ext.Date.dayNames = [
'SundayInYourLang',
'MondayInYourLang'
// ...
];
Defaults to:
[
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
]
The date format string that the Ext.util.Format#dateRenderer and Ext.util.Format#date functions use. See Ext.Date for details.
This is the format that flexParse uses to disambiguate all-numeric input dates.
This may be overridden in a locale file.
Defaults to:
'm/d/Y'
An object hash containing default date values used during date parsing.
The following properties are available:
y: Number - The default year value. Defaults to undefined.m: Number - The default 1-based month value. Defaults to undefined.d: Number - The default day value. Defaults to undefined.h: Number - The default hour value. Defaults to undefined.i: Number - The default minute value. Defaults to undefined.s: Number - The default second value. Defaults to undefined.ms: Number - The default millisecond value. Defaults to undefined.Override these properties to customize the default date values used by the parse method.
Note: In countries which experience Daylight Saving Time (i.e. DST), the h, i, s
and ms properties may coincide with the exact time in which DST takes effect.
It is the responsibility of the developer to account for this.
Example Usage:
// set default day value to the first day of the month
Ext.Date.defaults.d = 1;
// parse a February date string containing only year and month values.
// setting the default day value to 1 prevents weird date rollover issues
// when attempting to parse the following date string on, for example, March 31st 2009
Ext.Date.parse('2009-02', 'Y-m'); // returns a Date object representing February 1st 2009
Defaults to:
{}
The default time format.
This may be overridden in a locale file.
Defaults to:
'h:i A'
The day on which the week starts. 0 being Sunday, through 6 being Saturday.
This may be overridden in a locale file.
Defaults to:
0
The base format-code to formatting-function hashmap used by the format method. Formatting functions are strings (or functions which return strings) which will return the appropriate value when evaluated in the context of the Date object from which the format method is called. Add to / override these mappings for custom date formatting.
Note: Ext.Date.format() treats characters as literals if an appropriate mapping
cannot be found.
Example:
Ext.Date.formatCodes.x = "Ext.util.Format.leftPad(this.getDate(), 2, '0')";
console.log(Ext.Date.format(new Date(), 'X'); // returns the current day of the month
Defaults to:
{
/* eslint-disable max-len */
d: "Ext.String.leftPad(m.getDate(), 2, '0')",
D: "Ext.Date.getShortDayName(m.getDay())",
// get localized short day name
j: "m.getDate()",
l: "Ext.Date.dayNames[m.getDay()]",
N: "(m.getDay() ? m.getDay() : 7)",
S: "Ext.Date.getSuffix(m)",
w: "m.getDay()",
z: "Ext.Date.getDayOfYear(m)",
W: "Ext.String.leftPad(Ext.Date.getWeekOfYear(m), 2, '0')",
F: "Ext.Date.monthNames[m.getMonth()]",
m: "Ext.String.leftPad(m.getMonth() + 1, 2, '0')",
M: "Ext.Date.getShortMonthName(m.getMonth())",
// get localized short month name
n: "(m.getMonth() + 1)",
t: "Ext.Date.getDaysInMonth(m)",
L: "(Ext.Date.isLeapYear(m) ? 1 : 0)",
o: "(m.getFullYear() + (Ext.Date.getWeekOfYear(m) == 1 && m.getMonth() > 0 ? +1 : (Ext.Date.getWeekOfYear(m) >= 52 && m.getMonth() < 11 ? -1 : 0)))",
Y: "Ext.String.leftPad(m.getFullYear(), 4, '0')",
y: "('' + m.getFullYear()).substring(2, 4)",
a: "(m.getHours() < 12 ? 'am' : 'pm')",
A: "(m.getHours() < 12 ? 'AM' : 'PM')",
g: "((m.getHours() % 12) ? m.getHours() % 12 : 12)",
G: "m.getHours()",
h: "Ext.String.leftPad((m.getHours() % 12) ? m.getHours() % 12 : 12, 2, '0')",
H: "Ext.String.leftPad(m.getHours(), 2, '0')",
i: "Ext.String.leftPad(m.getMinutes(), 2, '0')",
s: "Ext.String.leftPad(m.getSeconds(), 2, '0')",
u: "Ext.String.leftPad(m.getMilliseconds(), 3, '0')",
O: "Ext.Date.getGMTOffset(m)",
P: "Ext.Date.getGMTOffset(m, true)",
T: "Ext.Date.getTimezone(m)",
Z: "(m.getTimezoneOffset() * -60)",
/* eslint-enable max-len */
c: function() {
// ISO-8601 -- GMT format
var c = "Y-m-dTH:i:sP",
code = [],
l = c.length,
i, e;
for (i = 0; i < l; ++i) {
e = c.charAt(i);
// treat T as a character literal
code.push(e === "T" ? "'T'" : utilDate.getFormatCode(e));
}
return code.join(" + ");
},
C: function() {
// ISO-1601 -- browser format. UTC numerics with the 'Z' TZ id.
return 'm.toISOString()';
},
U: "Math.round(m.getTime() / 1000)"
}
An object hash in which each property is a date formatting function. The property name is the format string which corresponds to the produced formatted date string.
This object is automatically populated with date formatting functions as date formats are requested for Ext standard formatting strings.
Custom formatting functions may be inserted into this object, keyed by a name which from then on may be used as a format string to format.
Example:
Ext.Date.formatFunctions['x-date-format'] = myDateFormatter;
A formatting function should return a string representation of the Date object which is the scope (this) of the function.
To enable date strings to also be parsed according to that format, a corresponding parsing function must be placed into the parseFunctions property.
Defaults to:
{
"MS": function() {
// UTC milliseconds since Unix epoch (MS-AJAX serialized date format (MRSF))
return '\\/Date(' + this.getTime() + ')\\/';
},
"time": function() {
return this.getTime().toString();
},
"timestamp": function() {
return utilDate.format(this, 'U');
}
}
An array of textual month names. Override these values for international dates.
Example:
Ext.Date.monthNames = [
'JanInYourLang',
'FebInYourLang'
// ...
];
Defaults to:
[
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
]
An object hash of zero-based JavaScript month numbers (with short month names as keys).
Note: keys are case-sensitive.
Override these values for international dates.
Example:
Ext.Date.monthNumbers = {
'LongJanNameInYourLang': 0,
'ShortJanNameInYourLang':0,
'LongFebNameInYourLang':1,
'ShortFebNameInYourLang':1
// ...
};
Defaults to:
{
January: 0,
Jan: 0,
February: 1,
Feb: 1,
March: 2,
Mar: 2,
April: 3,
Apr: 3,
May: 4,
June: 5,
Jun: 5,
July: 6,
Jul: 6,
August: 7,
Aug: 7,
September: 8,
Sep: 8,
October: 9,
Oct: 9,
November: 10,
Nov: 10,
December: 11,
Dec: 11
}
Defaults to:
{
// Notes:
// g = {Number} calculation group (0 or 1. only group 1 contributes to
// date calculations.)
// c = {String} calculation method (required for group 1. null for group 0.
// {0} = currentGroup - position in regex result array)
// s = {String} regex pattern. all matches are stored in results[], and are
// accessible by the calculation mapped to 'c'
d: {
g: 1,
c: "d = parseInt(results[{0}], 10);\n",
s: "(3[0-1]|[1-2][0-9]|0[1-9])"
},
// day of month with leading zeroes (01 - 31)
j: {
g: 1,
c: "d = parseInt(results[{0}], 10);\n",
s: "(3[0-1]|[1-2][0-9]|[1-9])"
},
// day of month without leading zeroes (1 - 31)
D: function() {
var a = [],
i;
// get localised short day names
for (i = 0; i < 7; i++) {
a.push(utilDate.getShortDayName(i));
}
return {
g: 0,
c: null,
s: "(?:" + a.join("|") + ")"
};
},
l: function() {
return {
g: 0,
c: null,
s: "(?:" + utilDate.dayNames.join("|") + ")"
};
},
N: {
g: 0,
c: null,
s: "[1-7]"
},
// ISO-8601 day number (1 (monday) - 7 (sunday))
//<locale type="object" property="parseCodes">
S: {
g: 0,
c: null,
s: "(?:st|nd|rd|th)"
},
//</locale>
w: {
g: 0,
c: null,
s: "[0-6]"
},
// JavaScript day number (0 (sunday) - 6 (saturday))
z: {
g: 1,
c: "z = parseInt(results[{0}], 10);\n",
s: "(\\d{1,3})"
},
// day of the year (0 - 364 (365 in leap years))
W: {
g: 1,
c: "W = parseInt(results[{0}], 10);\n",
s: "(\\d{2})"
},
// ISO-8601 week number (with leading zero)
F: function() {
return {
g: 1,
c: "m = parseInt(me.getMonthNumber(results[{0}]), 10);\n",
s: "(" + utilDate.monthNames.join("|") + ")"
};
},
M: function() {
var a = [],
i;
// get localised short month names
for (i = 0; i < 12; i++) {
a.push(utilDate.getShortMonthName(i));
}
return Ext.applyIf({
s: "(" + a.join("|") + ")"
}, utilDate.formatCodeToRegex("F"));
},
m: {
g: 1,
c: "m = parseInt(results[{0}], 10) - 1;\n",
s: "(1[0-2]|0[1-9])"
},
// month number with leading zeros (01 - 12)
n: {
g: 1,
c: "m = parseInt(results[{0}], 10) - 1;\n",
s: "(1[0-2]|[1-9])"
},
// month number without leading zeros (1 - 12)
t: {
g: 0,
c: null,
s: "(?:\\d{2})"
},
// no. of days in the month (28 - 31)
L: {
g: 0,
c: null,
s: "(?:1|0)"
},
o: {
g: 1,
c: "y = parseInt(results[{0}], 10);\n",
s: "(\\d{4})"
},
// ISO-8601 year number (with leading zero)
Y: {
g: 1,
c: "y = parseInt(results[{0}], 10);\n",
s: "(\\d{4})"
},
// 4-digit year
y: {
g: 1,
c: "var ty = parseInt(results[{0}], 10);\n" + "y = ty > me.y2kYear ? 1900 + ty : 2000 + ty;\n",
// 2-digit year
s: "(\\d{2})"
},
// In the am/pm parsing routines, we allow both upper and lower case
// even though it doesn't exactly match the spec. It gives much more flexibility
// in being able to specify case insensitive regexes.
/* eslint-disable indent */
//<locale type="object" property="parseCodes">
a: {
g: 1,
c: "if (/(am)/i.test(results[{0}])) {\n" + "if (!h || h == 12) { h = 0; }\n" + "} else { if (!h || h < 12) { h = (h || 0) + 12; }}",
s: "(am|pm|AM|PM)",
calcAtEnd: true
},
//</locale>
//<locale type="object" property="parseCodes">
A: {
g: 1,
c: "if (/(am)/i.test(results[{0}])) {\n" + "if (!h || h == 12) { h = 0; }\n" + "} else { if (!h || h < 12) { h = (h || 0) + 12; }}",
s: "(AM|PM|am|pm)",
calcAtEnd: true
},
//</locale>
g: {
g: 1,
c: "h = parseInt(results[{0}], 10);\n",
s: "(1[0-2]|[1-9])"
},
// 12-hr format of an hour without leading zeroes (1 - 12)
G: {
g: 1,
c: "h = parseInt(results[{0}], 10);\n",
s: "(2[0-3]|1[0-9]|[0-9])"
},
// 24-hr format of an hour without leading zeroes (0 - 23)
h: {
g: 1,
c: "h = parseInt(results[{0}], 10);\n",
s: "(1[0-2]|0[1-9])"
},
// 12-hr format of an hour with leading zeroes (01 - 12)
H: {
g: 1,
c: "h = parseInt(results[{0}], 10);\n",
s: "(2[0-3]|[0-1][0-9])"
},
// 24-hr format of an hour with leading zeroes (00 - 23)
i: {
g: 1,
c: "i = parseInt(results[{0}], 10);\n",
s: "([0-5][0-9])"
},
// minutes with leading zeros (00 - 59)
s: {
g: 1,
c: "s = parseInt(results[{0}], 10);\n",
s: "([0-5][0-9])"
},
// seconds with leading zeros (00 - 59)
u: {
g: 1,
c: "ms = results[{0}]; ms = parseInt(ms, 10)/Math.pow(10, ms.length - 3);\n",
s: "(\\d+)"
},
// decimal fraction of a second (minimum = 1 digit, maximum = unlimited)
/* eslint-disable max-len */
O: {
g: 1,
c: [
"o = results[{0}];",
"var sn = o.substring(0,1),",
// get + / - sign
"hr = o.substring(1,3)*1 + Math.floor(o.substring(3,5) / 60),",
// get hours (performs minutes-to-hour conversion also, just in case)
"mn = o.substring(3,5) % 60;",
// get minutes
"o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))? (sn + Ext.String.leftPad(hr, 2, '0') + Ext.String.leftPad(mn, 2, '0')) : null;\n"
].join(// -12hrs <= GMT offset <= 14hrs
"\n"),
s: "([+-]\\d{4})"
},
// GMT offset in hrs and mins
P: {
g: 1,
c: [
"o = results[{0}];",
"var sn = o.substring(0,1),",
// get + / - sign
"hr = o.substring(1,3)*1 + Math.floor(o.substring(4,6) / 60),",
// get hours (performs minutes-to-hour conversion also, just in case)
"mn = o.substring(4,6) % 60;",
// get minutes
"o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))? (sn + Ext.String.leftPad(hr, 2, '0') + Ext.String.leftPad(mn, 2, '0')) : null;\n"
].join(// -12hrs <= GMT offset <= 14hrs
"\n"),
s: "([+-]\\d{2}:\\d{2})"
},
// GMT offset in hrs and mins (with colon separator)
T: {
g: 0,
c: null,
s: "[A-Z]{1,5}"
},
// timezone abbrev. may be between 1 - 5 chars
Z: {
g: 1,
c: "zz = results[{0}] * 1;\n" + // -43200 <= UTC offset <= 50400
"zz = (-43200 <= zz && zz <= 50400)? zz : null;\n",
s: "([+-]?\\d{1,5})"
},
// leading '+' sign is optional for UTC offset
c: function() {
var calc = [],
arr = [
utilDate.formatCodeToRegex("Y", 1),
// year
utilDate.formatCodeToRegex("m", 2),
// month
utilDate.formatCodeToRegex("d", 3),
// day
utilDate.formatCodeToRegex("H", 4),
// hour
utilDate.formatCodeToRegex("i", 5),
// minute
utilDate.formatCodeToRegex("s", 6),
// second
{
c: "ms = results[7] || '0'; ms = parseInt(ms, 10)/Math.pow(10, ms.length - 3);\n"
},
// decimal fraction of a second (minimum = 1 digit, maximum = unlimited)
{
c: [
// allow either "Z" (i.e. UTC) or "-0530" or "+08:00" (i.e. UTC offset) timezone delimiters. assumes local timezone if no timezone is specified
"if (results[8]) {",
// timezone specified
"if (results[8] == 'Z') {",
"zz = 0;",
// UTC
"}",
"else if (results[8].indexOf(':') > -1) {",
utilDate.formatCodeToRegex("P", 8).c,
// timezone offset with colon separator
"}",
"else {",
utilDate.formatCodeToRegex("O", 8).c,
// timezone offset without colon separator
"}",
"}"
].join('\n')
}
],
i, l;
for (i = 0 , l = arr.length; i < l; ++i) {
calc.push(arr[i].c);
}
return {
g: 1,
c: calc.join(""),
s: [
arr[0].s,
// year (required)
"(?:",
"-",
arr[1].s,
// month (optional)
"(?:",
"-",
arr[2].s,
// day (optional)
"(?:",
"(?:T| )?",
// time delimiter -- either a "T" or a single blank space
arr[3].s,
":",
arr[4].s,
// hour AND minute, delimited by a single colon (optional). MUST be preceded by either a "T" or a single blank space
"(?::",
arr[5].s,
")?",
// seconds (optional)
"(?:(?:\\.|,)(\\d+))?",
// decimal fraction of a second (e.g. ",12345" or ".98765") (optional)
"(Z|(?:[-+]\\d{2}(?::)?\\d{2}))?",
// "Z" (UTC) or "-0530" (UTC offset without colon delimiter) or "+08:00" (UTC offset with colon delimiter) (optional)
")?",
")?",
")?"
].join("")
};
},
U: {
g: 1,
c: "u = parseInt(results[{0}], 10);\n",
s: "(-?\\d+)"
}
}
An object hash in which each property is a date parsing function. The property name is the format string which that function parses.
This object is automatically populated with date parsing functions as date formats are requested for Ext standard formatting strings.
Custom parsing functions may be inserted into this object, keyed by a name which from then on may be used as a format string to parse.
Example:
Ext.Date.parseFunctions['x-date-format'] = myDateParser;
A parsing function should return a Date object, and is passed the following parameters:
date: String - The date string to parse.strict: Boolean - true to validate date strings while parsing
(i.e. prevent JavaScript Date "rollover"). The default must be false.
Invalid date strings should return null when parsed.To enable Dates to also be formatted according to that format, a corresponding formatting function must be placed into the formatFunctions property.
Defaults to:
{
"MS": function(input, strict) {
// note: the timezone offset is ignored since the MS Ajax server sends
// a UTC milliseconds-since-Unix-epoch value (negative values are allowed)
var r = (input || '').match(MSFormatRe);
return r ? new nativeDate(((r[1] || '') + r[2]) * 1) : null;
},
"time": function(input, strict) {
var num = parseInt(input, 10);
if (num || num === 0) {
return new nativeDate(num);
}
return null;
},
"timestamp": function(input, strict) {
var num = parseInt(input, 10);
if (num || num === 0) {
return new nativeDate(num * 1000);
}
return null;
}
}
Global flag which determines if strict date parsing should be used. Strict date parsing will not roll-over invalid dates, which is the default behavior of JavaScript Date objects. (see parse for more information)
Defaults to:
false
The days on which weekend falls. 0 being Sunday, through 6 being Saturday.
This may be overridden in a locale file.
Defaults to:
[
0,
6
]
Provides a convenient method for performing basic date arithmetic. This method does not modify the Date instance being called - it creates and returns a new Date instance containing the resulting date value.
Examples:
// Basic usage:
var dt = Ext.Date.add(new Date('10/29/2006'), Ext.Date.DAY, 5);
console.log(dt); // returns 'Fri Nov 03 2006 00:00:00'
// Negative values will be subtracted:
var dt2 = Ext.Date.add(new Date('10/1/2006'), Ext.Date.DAY, -5);
console.log(dt2); // returns 'Tue Sep 26 2006 00:00:00'
// Decimal values can be used:
var dt3 = Ext.Date.add(new Date('10/1/2006'), Ext.Date.DAY, 1.25);
console.log(dt3); // returns 'Mon Oct 02 2006 06:00:00'
date : Date
The date to modify
interval : String
A valid date interval enum value.
value : Number
The amount to add to the current date.
preventDstAdjust : Boolean (optional)
true to prevent adjustments when crossing
daylight savings boundaries.
Defaults to: false
The new Date instance.
Align the date to unit.
date : Date
The date to be aligned.
unit : String
The unit. This unit is compatible with the date interval constants.
step : Number
The aligned date.
Checks if a date falls on or between the given start and end dates.
date : Date
The date to check
start : Date
Start date
end : Date
End date
true if this date falls on or between the given start and end dates.
Attempts to clear all time information from this Date by setting the time to midnight of the same day, automatically adjusting for Daylight Saving Time (DST) where applicable.
Note: DST timezone information for the browser's host operating system is assumed to be up-to-date.
date : Date
The date
clone : Boolean (optional)
true to create a clone of this date, clear the time and
return it.
Defaults to: false
this or the clone.
Creates and returns a new Date instance with the exact same date value as the called instance. Dates are copied and passed by reference, so if a copied date variable is modified later, the original variable will also be changed. When the intention is to create a new variable that will not modify the original instance, you should create a clone.
Example of correctly cloning a date:
//wrong way:
var orig = new Date('10/1/2006');
var copy = orig;
copy.setDate(5);
console.log(orig); // returns 'Thu Oct 05 2006'!
//correct way:
var orig = new Date('10/1/2006'),
copy = Ext.Date.clone(orig);
copy.setDate(5);
console.log(orig); // returns 'Thu Oct 01 2006'
date : Date
The date.
The new Date instance.
Calculate how many units are there between two time.
min : Date
The first time.
max : Date
The second time.
unit : String
The unit. This unit is compatible with the date interval constants.
The maximum number n of units that min + n * unit <= max.
Formats a date given the supplied format string.
date : Date
The date to format
format : String
The format string
The formatted date or an empty string if date parameter is not a JavaScript Date object
Checks if the specified format contains information about anything other than the time.
format : String
The format to check
True if the format contains information about date/day information.
Checks if the specified format contains hour information
format : String
The format to check
True if the format contains hour information
Get the numeric day number of the year, adjusted for leap year.
var dt = new Date('9/17/2011');
console.log(Ext.Date.getDayOfYear(dt)); // 259
date : Date
The date
0 to 364 (365 in leap years).
Get the number of days in the current month, adjusted for leap year.
date : Date
The date
The number of days in the month.
Returns the number of milliseconds between two dates.
dateA : Date
The first date.
dateB : Date (optional)
The second date.
Defaults to: new Date()
The difference in milliseconds
Get the date of the first day of the month in which this date resides.
date : Date
The date
Get the first day of the current month, adjusted for leap year. The returned value is the numeric day index within the week (0-6) which can be used in conjunction with the monthNames array to retrieve the textual day name.
var dt = new Date('1/10/2007'),
firstDay = Ext.Date.getFirstDayOfMonth(dt);
console.log(Ext.Date.dayNames[firstDay]); // output: 'Monday'
date : Date
The date
The day number (0-6).
Get the offset from GMT of the current date (equivalent to the format specifier 'O').
var dt = new Date('9/17/2011');
console.log(Ext.Date.getGMTOffset(dt));
date : Date
The date
colon : Boolean (optional)
true to separate the hours and minutes with a colon.
Defaults to: false
The 4-character offset string prefixed with + or - (e.g. '-0600').
Get the date of the last day of the month in which this date resides.
date : Date
The date
Get the last day of the current month, adjusted for leap year. The returned value is the numeric day index within the week (0-6) which can be used in conjunction with the monthNames array to retrieve the textual day name.
var dt = new Date('1/10/2007'),
lastDay = Ext.Date.getLastDayOfMonth(dt);
console.log(Ext.Date.dayNames[lastDay]); // output: 'Wednesday'
date : Date
The date
The day number (0-6).
Get the zero-based JavaScript month number for the given short/full month name. Override this function for international dates.
name : String
The short/full month name.
The zero-based JavaScript month number.
Get the short day name for the given day number. Override this function for international dates.
day : Number
A zero-based JavaScript day number.
The short day name.
Get the short month name for the given month number. Override this function for international dates.
month : Number
A zero-based JavaScript month number.
The short month name.
Get the English ordinal suffix of the current day (equivalent to the format specifier 'S').
date : Date
The date
'st, 'nd', 'rd' or 'th'.
Get the timezone abbreviation of the current date (equivalent to the format specifier 'T').
Note: The date string returned by the JavaScript Date object's toString() method varies
between browsers (e.g. FF vs IE) and system region settings (e.g. IE in Asia vs IE in
America). For a given date string e.g. "Thu Oct 25 2007 22:55:35 GMT+0800 (Malay Peninsula
Standard Time)", getTimezone() first tries to get the timezone abbreviation from between
a pair of parentheses (which may or may not be present), failing which it proceeds to get
the timezone abbreviation from the GMT offset portion of the date string.
var dt = new Date('9/17/2011');
console.log(Ext.Date.getTimezone(dt));
date : Date
The date
The abbreviated timezone name (e.g. 'CST', 'PDT', 'EDT', 'MPST' ...).
Get the numeric ISO-8601 week number of the year. (equivalent to the format specifier 'W', but without a leading zero).
var dt = new Date('9/17/2011');
console.log(Ext.Date.getWeekOfYear(dt)); // 37
date : Date
The date.
1 to 53.
Checks if the current date is affected by Daylight Saving Time (DST).
date : Date
The date
true if the current date is affected by DST.
Compares if two dates are equal by comparing their values.
date1 : Date
date2 : Date
true if the date values are equal
Checks if the current date falls within a leap year.
var dt = new Date('1/10/2011');
console.log(Ext.Date.isLeapYear(dt)); // false
date : Date
The date
true if the current date falls within a leap year, false otherwise.
Checks if the specified format contains only month information.
format : String
Format to check
Checks if the passed Date parameters will cause a JavaScript Date "rollover".
year : Number
4-digit year.
month : Number
1-based month-of-year.
day : Number
Day of month.
hour : Number (optional)
Hour.
minute : Number (optional)
Minute.
second : Number (optional)
Second.
millisecond : Number (optional)
Millisecond.
true if the passed parameters do not cause a Date "rollover",
false otherwise.
Checks if the date is a weekend day. Uses weekendDays.
Available since: 6.2.0
date : Date
The date.
true if the day falls on a weekend.
Checks if the specified format contains only year information.
format : String
Format to check.
Converts the passed local date into a UTC date.
For example, if the passed date is:
Wed Jun 01 2016 00:00:00 GMT+1000 (AUS Eastern Standard Time), then
the returned date will be Wed Jun 01 2016 10:00:00 GMT+1000 (AUS Eastern Standard Time).
Available since: 6.2.0
d : Date
The date to convert.
The date as UTC. Does not modify the passed date.
Parses the passed string using the specified date format.
Note that this function expects normal calendar dates, meaning that months are 1-based
(i.e. 1 = January). The defaults hash will be used for any date value (i.e. year,
month, day, hour, minute, second or millisecond) which cannot be found in the passed string.
If a corresponding default date value has not been specified in the defaults hash,
the current date's year, month, day or DST-adjusted zero-hour time value will be used
instead. Keep in mind that the input date string must precisely match the specified format
string in order for the parse operation to be successful (failed parse operations return a
null value).
Example:
//dt = Fri May 25 2007 (current date)
var dt = new Date();
//dt = Thu May 25 2006 (today's month/day in 2006)
dt = Ext.Date.parse("2006", "Y");
//dt = Sun Jan 15 2006 (all date parts specified)
dt = Ext.Date.parse("2006-01-15", "Y-m-d");
//dt = Sun Jan 15 2006 15:20:01
dt = Ext.Date.parse("2006-01-15 3:20:01 PM", "Y-m-d g:i:s A");
// attempt to parse Sun Feb 29 2006 03:20:01 in strict mode
dt = Ext.Date.parse("2006-02-29 03:20:01", "Y-m-d H:i:s", true); // returns null
When no format is specified, this method parses the date in a flexible way allowing
for different delimiters and textual month names to infer the position of the other
parts.
Supported inferred date orders when alphabetic month names are used are:
- `D,M,Y`
- `M,D,Y`
- `Y,M,D`
If the passed in date consists of all numeric tokens then the relative magnitude of the first two tokens is used to make an inference about the user's intention. If one token is less than 13 and the other is greater than 12, then the user's intention is known.
Failing this, the defaultFormat is used to determine the input order for the current locale.
Part delimiters may be any of these:
- `'/'`
- `'-'`
- `'.'`
- `'\'`
- `' '` (space)
For example, the inputs "Jun 1 62" and "1 Jun 62" would be understood as the
first of June, 1962 in all English locales regardless of the locale's default date
ordering.
If "25/1/62" was passed in, it's obvious that the user means the twenty fifth
of January.
If, however, "1/6/62" was passed in, the defaultFormat would be consulted
to disambiguate the meaning of those first two tokens.
input : String
The date string to parse.
format : String (optional)
The expected date string format. If not passed, the date string will be parsed heuristically as described above.
strict : Boolean (optional)
Pass true to validate date strings while parsing
(i.e. prevents JavaScript Date "rollover"). Invalid date strings will return null
when parsed.
Defaults to: false
The parsed Date, or null if an invalid date string.
Provides a convenient method for performing basic date arithmetic. This method does not modify the Date instance being called - it creates and returns a new Date instance containing the resulting date value.
Examples:
// Basic usage:
var dt = Ext.Date.subtract(new Date('10/29/2006'), Ext.Date.DAY, 5);
console.log(dt); // returns 'Tue Oct 24 2006 00:00:00'
// Negative values will be added:
var dt2 = Ext.Date.subtract(new Date('10/1/2006'), Ext.Date.DAY, -5);
console.log(dt2); // returns 'Fri Oct 6 2006 00:00:00'
// Decimal values can be used:
var dt3 = Ext.Date.subtract(new Date('10/1/2006'), Ext.Date.DAY, 1.25);
console.log(dt3); // returns 'Fri Sep 29 2006 06:00:00'
date : Date
The date to modify
interval : String
A valid date interval enum value.
value : Number
The amount to subtract from the current date.
preventDstAdjust : Boolean (optional)
true to prevent adjustments when crossing
daylight savings boundaries.
Defaults to: false
The new Date instance.
Removes all escaping for a date format string. In date formats, using a '\' can be used to escape special characters.
format : String
The format to unescape
The unescaped format
Create a UTC date.
Available since: 6.2.0
year : Number
The year.
month : Number
The month.
day : Number
The day.
hour : Number (optional)
The hour.
Defaults to: 0
min : Number (optional)
The minutes.
Defaults to: 0
s : Number (optional)
The seconds.
Defaults to: 0
ms : Number (optional)
The milliseconds.
Defaults to: 0
The UTC date.
Converts the passed UTC date into a local date.
For example, if the passed date is:
Wed Jun 01 2016 00:10:00 GMT+1000 (AUS Eastern Standard Time), then
the returned date will be Wed Jun 01 2016 00:00:00 GMT+1000 (AUS Eastern Standard Time).
Available since: 6.2.0
d : Date
The date to convert.
The date as a local. Does not modify the passed date.
format : Object
Create private copy of Ext JS's Ext.util.Format.format() method
ExtReact | Terms of Use