* var version = new Ext.Version('1.0.2beta');
* console.log(version.match(1)); // True
* console.log(version.match(1.0)); // True
* console.log(version.match('1.0.2')); // True
* console.log(version.match('1.0.2RC')); // False
*
// alternate sort directions
sort = Ext.String.toggle(sort, 'ASC', 'DESC');
// instead of conditional logic:
sort = (sort == 'ASC' ? 'DESC' : 'ASC');
var s = Ext.String.leftPad('123', 5, '0');
// s now contains the string: '00123'
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>'
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
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
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)\/
*
* 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
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"
};
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 {@link #parseFunctions} and {@link #formatFunctions}.
* @singleton */ /* * Most of the date-formatting functions below are the excellent work of Baron Schwartz. * (see http://www.xaprb.com/blog/2005/12/12/javascript-closures-for-runtime-efficiency/) * They generate precompiled functions from format patterns instead of parsing and * processing each pattern every time a date is formatted. These functions are available * on every Date object. */ (function() { // create private copy of Ext's Ext.util.Format.format() method // - to remove unnecessary dependency // - to resolve namespace conflict with MS-Ajax's implementation function xf(format) { var args = Array.prototype.slice.call(arguments, 1); return format.replace(/\{(\d+)\}/g, function(m, i) { return args[i]; }); } Ext.Date = { /** * Returns the current timestamp * @return {Date} The current timestamp * @method */ now: Date.now || function() { return +new Date(); }, /** * @private * Private for now */ toString: function(date) { var pad = Ext.String.leftPad; return date.getFullYear() + "-" + pad(date.getMonth() + 1, 2, '0') + "-" + pad(date.getDate(), 2, '0') + "T" + pad(date.getHours(), 2, '0') + ":" + pad(date.getMinutes(), 2, '0') + ":" + pad(date.getSeconds(), 2, '0'); }, /** * Returns the number of milliseconds between two dates * @param {Date} dateA The first date * @param {Date} dateB (optional) The second date, defaults to now * @return {Number} The difference in milliseconds */ getElapsed: function(dateA, dateB) { return Math.abs(dateA - (dateB || new Date())); }, /** * Global flag which determines if strict date parsing should be used. * Strict date parsing will not roll-over invalid dates, which is the * default behaviour of javascript Date objects. * (see {@link #parse} for more information) * Defaults to false. * @static * @type Boolean */ useStrict: false, // private formatCodeToRegex: function(character, currentGroup) { // Note: currentGroup - position in regex result array (see notes for Ext.Date.parseCodes below) var p = utilDate.parseCodes[character]; if (p) { p = typeof p == 'function'? p() : p; utilDate.parseCodes[character] = p; // reassign function result to prevent repeated execution } return p ? Ext.applyIf({ c: p.c ? xf(p.c, currentGroup || "{0}") : p.c }, p) : { g: 0, c: null, s: Ext.String.escapeRegex(character) // treat unrecognised characters as literals }; }, /** *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 {@link #parse}.
*
Example:
Ext.Date.parseFunctions['x-date-format'] = myDateParser;
A parsing function should return a Date object, and is passed the following parameters:
date : Stringstrict : BooleanTo enable Dates to also be formatted according to that format, a corresponding * formatting function must be placed into the {@link #formatFunctions} property. * @property parseFunctions * @static * @type Object */ parseFunctions: { "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 re = new RegExp('\\/Date\\(([-+])?(\\d+)(?:[+-]\\d{4})?\\)\\/'); var r = (input || '').match(re); return r? new Date(((r[1] || '') + r[2]) * 1) : null; } }, parseRegexes: [], /** *
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 {@link #format}. Example:
Ext.Date.formatFunctions['x-date-format'] = myDateFormatter;
A formatting function should return a string representation of the passed Date object, and is passed the following parameters:
date : DateTo enable date strings to also be parsed according to that format, a corresponding * parsing function must be placed into the {@link #parseFunctions} property. * @property formatFunctions * @static * @type Object */ formatFunctions: { "MS": function() { // UTC milliseconds since Unix epoch (MS-AJAX serialized date format (MRSF)) return '\\/Date(' + this.getTime() + ')\\/'; } }, y2kYear : 50, /** * Date interval constant * @static * @type String */ MILLI : "ms", /** * Date interval constant * @static * @type String */ SECOND : "s", /** * Date interval constant * @static * @type String */ MINUTE : "mi", /** Date interval constant * @static * @type String */ HOUR : "h", /** * Date interval constant * @static * @type String */ DAY : "d", /** * Date interval constant * @static * @type String */ MONTH : "mo", /** * Date interval constant * @static * @type String */ YEAR : "y", /** *
An object hash containing default date values used during date parsing.
*The following properties are available:
y : Numberm : Numberd : Numberh : Numberi : Numbers : Numberms : NumberOverride these properties to customize the default date values used by the {@link #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 responsiblity 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
Ext.Date.dayNames = [
'SundayInYourLang',
'MondayInYourLang',
...
];
Ext.Date.monthNames = [
'JanInYourLang',
'FebInYourLang',
...
];
Ext.Date.monthNumbers = {
'ShortJanNameInYourLang':0,
'ShortFebNameInYourLang':1,
...
};
The date format string that the {@link Ext.util.Format#dateRenderer} * and {@link Ext.util.Format#date} functions use. See {@link Ext.Date} for details.
*This defaults to m/d/Y, but may be overridden in a locale file.
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
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
var dt = new Date('1/10/2007'),
firstDay = Ext.Date.getFirstDayOfMonth(dt);
console.log(Ext.Date.dayNames[firstDay]); //output: 'Monday'
*
var dt = new Date('1/10/2007'),
lastDay = Ext.Date.getLastDayOfMonth(dt);
console.log(Ext.Date.dayNames[lastDay]); //output: 'Wednesday'
*
//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'
*
// 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'
* Encodes a Date. This returns the actual string which is inserted into the JSON string as the literal expression. * The returned value includes enclosing double quotation marks.
*The default return format is "yyyy-mm-ddThh:mm:ss".
*To override this:
Ext.JSON.encodeDate = function(d) {
return d.format('"Y-m-d"');
};
// gets dom node based on id
var elDom = Ext.getDom('elId');
// gets dom node based on the dom node
var elDom1 = Ext.getDom(elDom);
// If we don't know if we are working with an
// Ext.core.Element or a dom node use Ext.getDom
function(el){
var dom = Ext.getDom(el);
// do something with the dom node
}
* Removes this element from the document, removes all DOM event listeners, and deletes the cache reference.
* All DOM event listeners are removed from this element. If {@link Ext#enableNestedListenerRemoval Ext.enableNestedListenerRemoval} is
* true, then DOM event listeners are also removed from all child nodes. The body node
* will be ignored if passed in.
Utility method for returning a default value if the passed value is empty.
*The value is deemed to be empty if it is
Ext.addBehaviors({
// add a listener for click on all anchors in element with id foo
'#foo a@click' : function(e, t){
// do something
},
// add the same listener to multiple selectors (separated by comma BEFORE the @)
'#foo a, #bar span.some-class@mouseover' : function(){
// do something
}
});
*
// Example 1:
Ext.partition([true, false, true, true, false]); // [[true, true, true], [false, false]]
// Example 2:
Ext.partition(
Ext.query("p"),
function(val){
return val.className == "class1"
}
);
// true are those paragraph elements with a className of "class1",
// false set are those that do not have that className.
*
// Example:
Ext.invoke(Ext.query("p"), "getAttribute", "id");
// [el1.getAttribute("id"), el2.getAttribute("id"), ..., elN.getAttribute("id")]
* Zips N sets together.
*
// Example 1:
Ext.zip([1,2,3],[4,5,6]); // [[1,4],[2,5],[3,6]]
// Example 2:
Ext.zip(
[ "+", "-", "+"],
[ 12, 10, 22],
[ 43, 15, 96],
function(a, b, c){
return "$" + a + "" + b + "." + c
}
); // ["$+12.43", "$-10.15", "$+22.96"]
* The character that the {@link #number} function uses as a thousand separator.
*This defaults to ,, but may be overridden in a locale file.
The character that the {@link #number} function uses as a decimal point.
*This defaults to ., but may be overridden in a locale file.
The number of decimal places that the {@link #currency} function displays.
*This defaults to 2, but may be overridden in a locale file.
The currency sign that the {@link #currency} function displays.
*This defaults to $, but may be overridden in a locale file.
This may be set to true to make the {@link #currency} function
* append the currency sign to the formatted value.
This defaults to false, but may be overridden in a locale file.
* var tpl = new Ext.Template('{value} * 10 = {value:math("* 10")}');
* 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.
// Start a simple clock task that updates a div once per second
var updateClock = function(){
Ext.fly('clock').update(new Date().format('g:i:s A'));
}
var task = {
run: updateClock,
interval: 1000 //1 second
}
var runner = new Ext.util.TaskRunner();
runner.start(task);
// equivalent using TaskManager
Ext.TaskManager.start({
run: updateClock,
interval: 1000
});
* See the {@link #start} method for details about how to configure a task object.
* Also see {@link Ext.util.DelayedTask}. * * @constructor * @param {Number} interval (optional) The minimum precision in milliseconds supported by this TaskRunner instance * (defaults to 10) */ Ext.ns('Ext.util'); Ext.util.TaskRunner = function(interval) { interval = interval || 10; var tasks = [], removeQueue = [], id = 0, running = false, // private stopThread = function() { running = false; clearInterval(id); id = 0; }, // private startThread = function() { if (!running) { running = true; id = setInterval(runTasks, interval); } }, // private removeTask = function(t) { removeQueue.push(t); if (t.onStop) { t.onStop.apply(t.scope || t); } }, // private runTasks = function() { var rqLen = removeQueue.length, now = new Date().getTime(), i; if (rqLen > 0) { for (i = 0; i < rqLen; i++) { Ext.Array.remove(tasks, removeQueue[i]); } removeQueue = []; if (tasks.length < 1) { stopThread(); return; } } i = 0; var t, itime, rt, len = tasks.length; for (; i < len; ++i) { t = tasks[i]; itime = now - t.taskRunTime; if (t.interval <= itime) { rt = t.run.apply(t.scope || t, t.args || [++t.taskRunCount]); t.taskRunTime = now; if (rt === false || t.taskRunCount === t.repeat) { removeTask(t); return; } } if (t.duration && t.duration <= (now - t.taskStartTime)) { removeTask(t); } } }; /** * Starts a new task. * @method start * @param {Object} taskA config object that supports the following properties:
run : FunctionThe function to execute each time the task is invoked. The
* function will be called at each interval and passed the args argument if specified, and the
* current invocation count if not.
If a particular scope (this reference) is required, be sure to specify it using the scope argument.
Return false from this function to terminate the task.
interval : Numberargs : Arrayrun. If not specified, the current invocation count is passed.scope : Objectrun function. Defaults to the task config object.duration : Numberrepeat : NumberBefore each invocation, Ext injects the property taskRunCount into the task object so
* that calculations based on the repeat count can be performed.
// Start a simple clock task that updates a div once per second
var task = {
run: function(){
Ext.fly('clock').update(new Date().format('g:i:s A'));
},
interval: 1000 //1 second
}
Ext.TaskManager.start(task);
See the {@link #start} method for details about how to configure a task object.
* @singleton */ Ext.TaskManager = Ext.create('Ext.util.TaskRunner'); /** * @class Ext.is * * Determines information about the current platform the application is running on. * * @singleton */ Ext.is = { init : function(navigator) { var platforms = this.platforms, ln = platforms.length, i, platform; navigator = navigator || window.navigator; for (i = 0; i < ln; i++) { platform = platforms[i]; this[platform.identity] = platform.regex.test(navigator[platform.property]); } /** * @property Desktop True if the browser is running on a desktop machine * @type {Boolean} */ this.Desktop = this.Mac || this.Windows || (this.Linux && !this.Android); /** * @property Tablet True if the browser is running on a tablet (iPad) */ this.Tablet = this.iPad; /** * @property Phone True if the browser is running on a phone. * @type {Boolean} */ this.Phone = !this.Desktop && !this.Tablet; /** * @property iOS True if the browser is running on iOS * @type {Boolean} */ this.iOS = this.iPhone || this.iPad || this.iPod; /** * @property Standalone Detects when application has been saved to homescreen. * @type {Boolean} */ this.Standalone = !!window.navigator.standalone; }, /** * @property iPhone True when the browser is running on a iPhone * @type {Boolean} */ platforms: [{ property: 'platform', regex: /iPhone/i, identity: 'iPhone' }, /** * @property iPod True when the browser is running on a iPod * @type {Boolean} */ { property: 'platform', regex: /iPod/i, identity: 'iPod' }, /** * @property iPad True when the browser is running on a iPad * @type {Boolean} */ { property: 'userAgent', regex: /iPad/i, identity: 'iPad' }, /** * @property Blackberry True when the browser is running on a Blackberry * @type {Boolean} */ { property: 'userAgent', regex: /Blackberry/i, identity: 'Blackberry' }, /** * @property Android True when the browser is running on an Android device * @type {Boolean} */ { property: 'userAgent', regex: /Android/i, identity: 'Android' }, /** * @property Mac True when the browser is running on a Mac * @type {Boolean} */ { property: 'platform', regex: /Mac/i, identity: 'Mac' }, /** * @property Windows True when the browser is running on Windows * @type {Boolean} */ { property: 'platform', regex: /Win/i, identity: 'Windows' }, /** * @property Linux True when the browser is running on Linux * @type {Boolean} */ { property: 'platform', regex: /Linux/i, identity: 'Linux' }] }; Ext.is.init(); /** * @class Ext.supports * * Determines information about features are supported in the current environment * * @singleton */ Ext.supports = { init : function() { var doc = document, div = doc.createElement('div'), tests = this.tests, ln = tests.length, i, test; div.innerHTML = [ 'The DomHelper class provides a layer of abstraction from DOM and transparently supports creating * elements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates * from your DOM building code.
* *DomHelper element specification object
*A specification object is used when creating elements. Attributes of this object * are assumed to be element attributes, except for 4 special attributes: *
NOTE: For other arbitrary attributes, the value will currently not be automatically * HTML-escaped prior to building the element's HTML string. This means that if your attribute value * contains special characters that would not normally be allowed in a double-quoted attribute value, * you must manually HTML-encode it beforehand (see {@link Ext.String#htmlEncode}) or risk * malformed HTML being created. This behavior may change in a future release.
* *Insertion methods
*Commonly used insertion methods: *
Example
*This is an example, where an unordered list with 3 children items is appended to an existing
* element with id 'my-div':
var dh = Ext.core.DomHelper; // create shorthand alias
// specification object
var spec = {
id: 'my-ul',
tag: 'ul',
cls: 'my-list',
// append children after creating
children: [ // may also specify 'cn' instead of 'children'
{tag: 'li', id: 'item0', html: 'List Item 0'},
{tag: 'li', id: 'item1', html: 'List Item 1'},
{tag: 'li', id: 'item2', html: 'List Item 2'}
]
};
var list = dh.append(
'my-div', // the context element 'my-div' can either be the id or the actual node
spec // the specification object
);
Element creation specification parameters in this class may also be passed as an Array of * specification objects. This can be used to insert multiple sibling nodes into an existing * container very efficiently. For example, to add more list items to the example above:
dh.append('my-ul', [
{tag: 'li', id: 'item3', html: 'List Item 3'},
{tag: 'li', id: 'item4', html: 'List Item 4'}
]);
* Templating
*The real power is in the built-in templating. Instead of creating or appending any elements, * {@link #createTemplate} returns a Template object which can be used over and over to * insert new elements. Revisiting the example above, we could utilize templating this time: *
// create the node
var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
// get template
var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});
for(var i = 0; i < 5, i++){
tpl.append(list, [i]); // use template to append to the actual node
}
* An example using a template:
var html = '{2}';
var tpl = new Ext.core.DomHelper.createTemplate(html);
tpl.append('blog-roll', ['link1', 'http://www.edspencer.net/', "Ed's Site"]);
tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin's Site"]);
* The same example using named parameters:
var html = '{text}';
var tpl = new Ext.core.DomHelper.createTemplate(html);
tpl.append('blog-roll', {
id: 'link1',
url: 'http://www.edspencer.net/',
text: "Ed's Site"
});
tpl.append('blog-roll', {
id: 'link2',
url: 'http://www.dustindiaz.com/',
text: "Dustin's Site"
});
* Compiling Templates
*Templates are applied using regular expressions. The performance is great, but if * you are adding a bunch of DOM elements using the same template, you can increase * performance even further by {@link Ext.Template#compile "compiling"} the template. * The way "{@link Ext.Template#compile compile()}" works is the template is parsed and * broken up at the different variable points and a dynamic function is created and eval'ed. * The generated function performs string concatenation of these parts and the passed * variables instead of using regular expressions. *
var html = '{text}';
var tpl = new Ext.core.DomHelper.createTemplate(html);
tpl.compile();
//... use template like normal
* Performance Boost
*DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead * of DOM can significantly boost performance.
*Element creation specification parameters may also be strings. If {@link #useDom} is false, * then the string is used as innerHTML. If {@link #useDom} is true, a string specification * results in the creation of a text node. Usage:
*
Ext.core.DomHelper.useDom = true; // force it to use DOM; reduces performance
* DomQuery supports most of the CSS3 selectors spec, along with some custom selectors and basic XPath.
All selectors, attribute filters and pseudos below can be combined infinitely in any order. For example "div.foo:nth-child(odd)[@foo=bar].bar:first" would be a perfectly valid selector. Node filters are processed in the order in which they appear, which allows you to optimize your queries for your document structure.
The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.
Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.
*All instances of this class inherit the methods of {@link Ext.fx.Anim} making visual effects easily available to all DOM elements.
*Note that the events documented in this class are not Ext events, they encapsulate browser events. To * access the underlying browser event, see {@link Ext.EventObject#browserEvent}. Some older * browsers may not support the full range of events. Which events are supported is beyond the control of ExtJs.
* Usage:
// by id
var el = Ext.get("my-div");
// by DOM element reference
var el = Ext.get(myDivElement);
When an element is manipulated, by default there is no animation.
*
var el = Ext.get("my-div");
// no animation
el.setWidth(100);
* Many of the functions for manipulating an element have an optional "animate" parameter. This * parameter can be specified as boolean (true) for default animation effects.
*
// default animation
el.setWidth(100, true);
* To configure the effects, an object literal with animation options to use as the Element animation * configuration object can also be specified. Note that the supported Element animation configuration * options are a subset of the {@link Ext.fx.Anim} animation options specific to Fx effects. The supported * Element animation configuration options are:
Option Default Description
--------- -------- ---------------------------------------------
{@link Ext.fx.Anim#duration duration} .35 The duration of the animation in seconds
{@link Ext.fx.Anim#easing easing} easeOut The easing method
{@link Ext.fx.Anim#callback callback} none A function to execute when the anim completes
{@link Ext.fx.Anim#scope scope} this The scope (this) of the callback function
*
*
// Element animation options object
var opt = {
{@link Ext.fx.Anim#duration duration}: 1,
{@link Ext.fx.Anim#easing easing}: 'elasticIn',
{@link Ext.fx.Anim#callback callback}: this.foo,
{@link Ext.fx.Anim#scope scope}: this
};
// animation with some options set
el.setWidth(100, opt);
* The Element animation object being used for the animation will be set on the options * object as "anim", which allows you to stop or manipulate the animation. Here is an example:
*
// using the "anim" property to get the Anim object
if(opt.anim.isAnimated()){
opt.anim.stop();
}
* Also see the {@link #animate} method for another animation technique.
*Composite (Collections of) Elements
*For working with collections of Elements, see {@link Ext.CompositeElement}
* @constructor Create a new Element directly. * @param {String/HTMLElement} element * @param {Boolean} forceNew (optional) By default the constructor checks to see if there is already an instance of this element in the cache and if there is it returns the same instance. This will skip that check (useful for extending this class). */ (function() { var DOC = document, EC = Ext.cache; Ext.Element = Ext.core.Element = function(element, forceNew) { var dom = typeof element == "string" ? DOC.getElementById(element) : element, id; if (!dom) { return null; } id = dom.id; if (!forceNew && id && EC[id]) { // element object already exists return EC[id].el; } /** * The DOM element * @type HTMLElement */ this.dom = dom; /** * The DOM element ID * @type String */ this.id = id || Ext.id(dom); }; var DH = Ext.core.DomHelper, El = Ext.core.Element; El.prototype = { /** * Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function) * @param {Object} o The object with the attributes * @param {Boolean} useSet (optional) false to override the default setAttribute to use expandos. * @return {Ext.core.Element} this */ set: function(o, useSet) { var el = this.dom, attr, val; useSet = (useSet !== false) && !!el.setAttribute; for (attr in o) { if (o.hasOwnProperty(attr)) { val = o[attr]; if (attr == 'style') { DH.applyStyles(el, val); } else if (attr == 'cls') { el.className = val; } else if (useSet) { el.setAttribute(attr, val); } else { el[attr] = val; } } } return this; }, // Mouse events /** * @event click * Fires when a mouse click is detected within the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event contextmenu * Fires when a right click is detected within the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event dblclick * Fires when a mouse double click is detected within the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event mousedown * Fires when a mousedown is detected within the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event mouseup * Fires when a mouseup is detected within the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event mouseover * Fires when a mouseover is detected within the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event mousemove * Fires when a mousemove is detected with the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event mouseout * Fires when a mouseout is detected with the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event mouseenter * Fires when the mouse enters the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event mouseleave * Fires when the mouse leaves the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ // Keyboard events /** * @event keypress * Fires when a keypress is detected within the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event keydown * Fires when a keydown is detected within the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event keyup * Fires when a keyup is detected within the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ // HTML frame/object events /** * @event load * Fires when the user agent finishes loading all content within the element. Only supported by window, frames, objects and images. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event unload * Fires when the user agent removes all content from a window or frame. For elements, it fires when the target element or any of its content has been removed. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event abort * Fires when an object/image is stopped from loading before completely loaded. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event error * Fires when an object/image/frame cannot be loaded properly. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event resize * Fires when a document view is resized. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event scroll * Fires when a document view is scrolled. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ // Form events /** * @event select * Fires when a user selects some text in a text field, including input and textarea. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event change * Fires when a control loses the input focus and its value has been modified since gaining focus. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event submit * Fires when a form is submitted. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event reset * Fires when a form is reset. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event focus * Fires when an element receives focus either via the pointing device or by tab navigation. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event blur * Fires when an element loses focus either via the pointing device or by tabbing navigation. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ // User Interface events /** * @event DOMFocusIn * Where supported. Similar to HTML focus event, but can be applied to any focusable element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event DOMFocusOut * Where supported. Similar to HTML blur event, but can be applied to any focusable element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event DOMActivate * Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ // DOM Mutation events /** * @event DOMSubtreeModified * Where supported. Fires when the subtree is modified. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event DOMNodeInserted * Where supported. Fires when a node has been added as a child of another node. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event DOMNodeRemoved * Where supported. Fires when a descendant node of the element is removed. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event DOMNodeRemovedFromDocument * Where supported. Fires when a node is being removed from a document. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event DOMNodeInsertedIntoDocument * Where supported. Fires when a node is being inserted into a document. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event DOMAttrModified * Where supported. Fires when an attribute has been modified. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * @event DOMCharacterDataModified * Where supported. Fires when the character data has been modified. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. * @param {HtmlElement} t The target of the event. * @param {Object} o The options configuration passed to the {@link #addListener} call. */ /** * The default unit to append to CSS values where a unit isn't provided (defaults to px). * @type String */ defaultUnit: "px", /** * Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child) * @param {String} selector The simple selector to test * @return {Boolean} True if this element matches the selector, else false */ is: function(simpleSelector) { return Ext.DomQuery.is(this.dom, simpleSelector); }, /** * Tries to focus the element. Any exceptions are caught and ignored. * @param {Number} defer (optional) Milliseconds to defer the focus * @return {Ext.core.Element} this */ focus: function(defer, /* private */ dom) { var me = this; dom = dom || me.dom; try { if (Number(defer)) { Ext.defer(me.focus, defer, null, [null, dom]); } else { dom.focus(); } } catch(e) {} return me; }, /** * Tries to blur the element. Any exceptions are caught and ignored. * @return {Ext.core.Element} this */ blur: function() { try { this.dom.blur(); } catch(e) {} return this; }, /** * Returns the value of the "value" attribute * @param {Boolean} asNumber true to parse the value as a number * @return {String/Number} */ getValue: function(asNumber) { var val = this.dom.value; return asNumber ? parseInt(val, 10) : val; }, /** * Appends an event handler to this element. The shorthand version {@link #on} is equivalent. * @param {String} eventName The name of event to handle. * @param {Function} fn The handler function the event invokes. This function is passed * the following parameters:this reference) in which the handler function is executed.
* If omitted, defaults to this Element..
* @param {Object} options (optional) An object containing handler configuration properties.
* This may contain any of the following properties:this reference) in which the handler function is executed.
* If omitted, defaults to this Element.
* Combining Options
* In the following examples, the shorthand form {@link #on} is used rather than the more verbose
* addListener. The two are equivalent. Using the options argument, it is possible to combine different
* types of listeners:
*
* A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the
* options object. The options object is available as the third parameter in the handler function.
el.on('click', this.onClick, this, {
single: true,
delay: 100,
stopEvent : true,
forumId: 4
});
* Attaching multiple handlers in 1 call
* The method also allows for a single argument to be passed which is a config object containing properties
* which specify multiple handlers.
* Code:
el.on({
'click' : {
fn: this.onClick,
scope: this,
delay: 100
},
'mouseover' : {
fn: this.onMouseOver,
scope: this
},
'mouseout' : {
fn: this.onMouseOut,
scope: this
}
});
* Or a shorthand syntax:
* Code:
el.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
scope: this
});
* delegate
*This is a configuration option that you can pass along when registering a handler for * an event to assist with event delegation. Event delegation is a technique that is used to * reduce memory consumption and prevent exposure to memory-leaks. By registering an event * for a container element as opposed to each element within a container. By setting this * configuration option to a simple selector, the target element will be filtered to look for * a descendant of the target. * For example:
// using this markup:
<div id='elId'>
<p id='p1'>paragraph one</p>
<p id='p2' class='clickable'>paragraph two</p>
<p id='p3'>paragraph three</p>
</div>
// utilize event delegation to registering just one handler on the container element:
el = Ext.get('elId');
el.on(
'click',
function(e,t) {
// handle click
console.info(t.id); // 'p2'
},
this,
{
// filter the target element to be a descendant with the class 'clickable'
delegate: '.clickable'
}
);
*
el.removeListener('click', this.handlerFn);
// or
el.un('click', this.handlerFn);
this reference) was specified when the listener was added,
* then this must refer to the same object.
* @return {Ext.core.Element} this
*/
removeListener: function(eventName, fn, scope) {
Ext.EventManager.un(this.dom, eventName, fn, scope || this);
return this;
},
/**
* Removes all previous added listeners from this element
* @return {Ext.core.Element} this
*/
removeAllListeners: function() {
Ext.EventManager.removeAll(this.dom);
return this;
},
/**
* Recursively removes all previous added listeners from this element and its children
* @return {Ext.core.Element} this
*/
purgeAllListeners: function() {
Ext.EventManager.purgeElement(this);
return this;
},
/**
* @private Test if size has a unit, otherwise appends the passed unit string, or the default for this Element.
* @param size {Mixed} The size to set
* @param units {String} The units to append to a numeric size value
*/
addUnits: function(size, units) {
// Most common case first: Size is set to a number
if (Ext.isNumber(size)) {
return size + (units || this.defaultUnit || 'px');
}
// Size set to a value which means "auto"
if (size === "" || size == "auto" || size === undefined || size === null) {
return size || '';
}
// Otherwise, warn if it's not a valid CSS measurement
if (!unitPattern.test(size)) {
if (Ext.isDefined(Ext.global.console)) {
Ext.global.console.warn("Warning, size detected as NaN on Element.addUnits.");
}
return size || '';
}
return size;
},
/**
* Tests various css rules/browsers to determine if this element uses a border box
* @return {Boolean}
*/
isBorderBox: function() {
return Ext.isBorderBox || noBoxAdjust[(this.dom.tagName || "").toLowerCase()];
},
/**
* Removes this element's dom reference. Note that event and cache removal is handled at {@link Ext#removeNode Ext.removeNode}
*/ remove: function() { var me = this, dom = me.dom; if (dom) { delete me.dom; Ext.removeNode(dom); } }, /** * Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element. * @param {Function} overFn The function to call when the mouse enters the Element. * @param {Function} outFn The function to call when the mouse leaves the Element. * @param {Object} scope (optional) The scope (this reference) in which the functions are executed. Defaults to the Element's DOM element.
* @param {Object} options (optional) Options for the listener. See {@link Ext.util.Observable#addListener the options parameter}.
* @return {Ext.core.Element} this
*/
hover: function(overFn, outFn, scope, options) {
var me = this;
me.on('mouseenter', overFn, scope || me.dom, options);
me.on('mouseleave', outFn, scope || me.dom, options);
return me;
},
/**
* Returns true if this element is an ancestor of the passed element
* @param {HTMLElement/String} el The element to check
* @return {Boolean} True if this element is an ancestor of el, else false
*/
contains: function(el) {
return ! el ? false: Ext.core.Element.isAncestor(this.dom, el.dom ? el.dom: el);
},
/**
* Returns the value of a namespaced attribute from the element's underlying DOM node.
* @param {String} namespace The namespace in which to look for the attribute
* @param {String} name The attribute name
* @return {String} The attribute value
* @deprecated
*/
getAttributeNS: function(ns, name) {
return this.getAttribute(name, ns);
},
/**
* Returns the value of an attribute from the element's underlying DOM node.
* @param {String} name The attribute name
* @param {String} namespace (optional) The namespace in which to look for the attribute
* @return {String} The attribute value
* @method
*/
getAttribute: (Ext.isIE && !(Ext.isIE9 && document.documentMode === 9)) ?
function(name, ns) {
var d = this.dom,
type;
if(ns) {
type = typeof d[ns + ":" + name];
if (type != 'undefined' && type != 'unknown') {
return d[ns + ":" + name] || null;
}
return null;
}
if (name === "for") {
name = "htmlFor";
}
return d[name] || null;
}: function(name, ns) {
var d = this.dom;
if (ns) {
return d.getAttributeNS(ns, name) || d.getAttribute(ns + ":" + name);
}
return d.getAttribute(name) || d[name] || null;
},
/**
* Update the innerHTML of this element
* @param {String} html The new HTML
* @return {Ext.core.Element} this
*/
update: function(html) {
if (this.dom) {
this.dom.innerHTML = html;
}
return this;
}
};
var ep = El.prototype;
El.addMethods = function(o) {
Ext.apply(ep, o);
};
/**
* Appends an event handler (shorthand for {@link #addListener}).
* @param {String} eventName The name of event to handle.
* @param {Function} fn The handler function the event invokes.
* @param {Object} scope (optional) The scope (this reference) in which the handler function is executed.
* @param {Object} options (optional) An object containing standard {@link #addListener} options
* @member Ext.core.Element
* @method on
*/
ep.on = ep.addListener;
/**
* Removes an event handler from this element (see {@link #removeListener} for additional notes).
* @param {String} eventName The name of the event from which to remove the handler.
* @param {Function} fn The handler function to remove. This must be a reference to the function passed into the {@link #addListener} call.
* @param {Object} scope If a scope (this reference) was specified when the listener was added,
* then this must refer to the same object.
* @return {Ext.core.Element} this
* @member Ext.core.Element
* @method un
*/
ep.un = ep.removeListener;
/**
* Removes all previous added listeners from this element
* @return {Ext.core.Element} this
* @member Ext.core.Element
* @method clearListeners
*/
ep.clearListeners = ep.removeAllListeners;
/**
* Removes this element's dom reference. Note that event and cache removal is handled at {@link Ext#removeNode Ext.removeNode}.
* Alias to {@link #remove}.
* @member Ext.core.Element
* @method destroy
*/
ep.destroy = ep.remove;
/**
* true to automatically adjust width and height settings for box-model issues (default to true)
*/
ep.autoBoxAdjust = true;
// private
var unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
docEl;
/**
* Retrieves Ext.core.Element objects.
* This method does not retrieve {@link Ext.Component Component}s. This method * retrieves Ext.core.Element objects which encapsulate DOM elements. To retrieve a Component by * its ID, use {@link Ext.ComponentManager#get}.
*Uses simple caching to consistently return the same object. Automatically fixes if an * object was recreated with the same id via AJAX or DOM.
* @param {Mixed} el The id of the node, a DOM Node or an existing Element. * @return {Element} The Element object (or null if no matching element was found) * @static * @member Ext.core.Element * @method get */ El.get = function(el) { var ex, elm, id; if (!el) { return null; } if (typeof el == "string") { // element id if (! (elm = DOC.getElementById(el))) { return null; } if (EC[el] && EC[el].el) { ex = EC[el].el; ex.dom = elm; } else { ex = El.addToCache(new El(elm)); } return ex; } else if (el.tagName) { // dom element if (! (id = el.id)) { id = Ext.id(el); } if (EC[id] && EC[id].el) { ex = EC[id].el; ex.dom = el; } else { ex = El.addToCache(new El(el)); } return ex; } else if (el instanceof El) { if (el != docEl) { // refresh dom element in case no longer valid, // catch case where it hasn't been appended // If an el instance is passed, don't pass to getElementById without some kind of id if (Ext.isIE && (el.id == undefined || el.id == '')) { el.dom = el.dom; } else { el.dom = DOC.getElementById(el.id) || el.dom; } } return el; } else if (el.isComposite) { return el; } else if (Ext.isArray(el)) { return El.select(el); } else if (el == DOC) { // create a bogus element object representing the document object if (!docEl) { var f = function() {}; f.prototype = El.prototype; docEl = new f(); docEl.dom = DOC; } return docEl; } return null; }; El.addToCache = function(el, id) { if (el) { id = id || el.id; EC[id] = { el: el, data: {}, events: {} }; } return el; }; // private method for getting and setting element data El.data = function(el, key, value) { el = El.get(el); if (!el) { return null; } var c = EC[el.id].data; if (arguments.length == 2) { return c[key]; } else { return (c[key] = value); } }; // private // Garbage collection - uncache elements/purge listeners on orphaned elements // so we don't hold a reference and cause the browser to retain them function garbageCollect() { if (!Ext.enableGarbageCollector) { clearInterval(El.collectorThreadId); } else { var eid, el, d, o; for (eid in EC) { if (!EC.hasOwnProperty(eid)) { continue; } o = EC[eid]; if (o.skipGarbageCollection) { continue; } el = o.el; d = el.dom; // ------------------------------------------------------- // Determining what is garbage: // ------------------------------------------------------- // !d // dom node is null, definitely garbage // ------------------------------------------------------- // !d.parentNode // no parentNode == direct orphan, definitely garbage // ------------------------------------------------------- // !d.offsetParent && !document.getElementById(eid) // display none elements have no offsetParent so we will // also try to look it up by it's id. However, check // offsetParent first so we don't do unneeded lookups. // This enables collection of elements that are not orphans // directly, but somewhere up the line they have an orphan // parent. // ------------------------------------------------------- if (!d || !d.parentNode || (!d.offsetParent && !DOC.getElementById(eid))) { if (d && Ext.enableListenerCollection) { Ext.EventManager.removeAll(d); } delete EC[eid]; } } // Cleanup IE Object leaks if (Ext.isIE) { var t = {}; for (eid in EC) { if (!EC.hasOwnProperty(eid)) { continue; } t[eid] = EC[eid]; } EC = Ext.cache = t; } } } El.collectorThreadId = setInterval(garbageCollect, 30000); var flyFn = function() {}; flyFn.prototype = El.prototype; // dom is optional El.Flyweight = function(dom) { this.dom = dom; }; El.Flyweight.prototype = new flyFn(); El.Flyweight.prototype.isFlyweight = true; El._flyweights = {}; /** *Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element - * the dom node can be overwritten by other code. Shorthand of {@link Ext.core.Element#fly}
*Use this to make one-time references to DOM elements which are not going to be accessed again either by * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get Ext.get} * will be more appropriate to take advantage of the caching provided by the Ext.core.Element class.
* @param {String/HTMLElement} el The dom node or id * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts * (e.g. internally Ext uses "_global") * @return {Element} The shared Element object (or null if no matching element was found) * @member Ext.core.Element * @method fly */ El.fly = function(el, named) { var ret = null; named = named || '_global'; el = Ext.getDom(el); if (el) { (El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el; ret = El._flyweights[named]; } return ret; }; /** * Retrieves Ext.core.Element objects. *This method does not retrieve {@link Ext.Component Component}s. This method * retrieves Ext.core.Element objects which encapsulate DOM elements. To retrieve a Component by * its ID, use {@link Ext.ComponentManager#get}.
*Uses simple caching to consistently return the same object. Automatically fixes if an * object was recreated with the same id via AJAX or DOM.
* Shorthand of {@link Ext.core.Element#get} * @param {Mixed} el The id of the node, a DOM Node or an existing Element. * @return {Element} The Element object (or null if no matching element was found) * @member Ext * @method get */ Ext.get = El.get; /** *Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element - * the dom node can be overwritten by other code. Shorthand of {@link Ext.core.Element#fly}
*Use this to make one-time references to DOM elements which are not going to be accessed again either by * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get Ext.get} * will be more appropriate to take advantage of the caching provided by the Ext.core.Element class.
* @param {String/HTMLElement} el The dom node or id * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts * (e.g. internally Ext uses "_global") * @return {Element} The shared Element object (or null if no matching element was found) * @member Ext * @method fly */ Ext.fly = El.fly; // speedy lookup for elements never to box adjust var noBoxAdjust = Ext.isStrict ? { select: 1 }: { input: 1, select: 1, textarea: 1 }; if (Ext.isIE || Ext.isGecko) { noBoxAdjust['button'] = 1; } })(); /** * @class Ext.core.Element */ Ext.core.Element.addMethods({ /** * Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child) * @param {String} selector The simple selector to test * @param {Number/Mixed} maxDepth (optional) The max depth to search as a number or element (defaults to 50 || document.body) * @param {Boolean} returnEl (optional) True to return a Ext.core.Element object instead of DOM node * @return {HTMLElement} The matching DOM node (or null if no match was found) */ findParent : function(simpleSelector, maxDepth, returnEl) { var p = this.dom, b = document.body, depth = 0, stopEl; maxDepth = maxDepth || 50; if (isNaN(maxDepth)) { stopEl = Ext.getDom(maxDepth); maxDepth = Number.MAX_VALUE; } while (p && p.nodeType == 1 && depth < maxDepth && p != b && p != stopEl) { if (Ext.DomQuery.is(p, simpleSelector)) { return returnEl ? Ext.get(p) : p; } depth++; p = p.parentNode; } return null; }, /** * Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child) * @param {String} selector The simple selector to test * @param {Number/Mixed} maxDepth (optional) The max depth to search as a number or element (defaults to 10 || document.body) * @param {Boolean} returnEl (optional) True to return a Ext.core.Element object instead of DOM node * @return {HTMLElement} The matching DOM node (or null if no match was found) */ findParentNode : function(simpleSelector, maxDepth, returnEl) { var p = Ext.fly(this.dom.parentNode, '_internal'); return p ? p.findParent(simpleSelector, maxDepth, returnEl) : null; }, /** * Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child). * This is a shortcut for findParentNode() that always returns an Ext.core.Element. * @param {String} selector The simple selector to test * @param {Number/Mixed} maxDepth (optional) The max depth to search as a number or element (defaults to 10 || document.body) * @return {Ext.core.Element} The matching DOM node (or null if no match was found) */ up : function(simpleSelector, maxDepth) { return this.findParentNode(simpleSelector, maxDepth, true); }, /** * Creates a {@link Ext.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id). * @param {String} selector The CSS selector * @return {CompositeElement/CompositeElement} The composite element */ select : function(selector) { return Ext.core.Element.select(selector, false, this.dom); }, /** * Selects child nodes based on the passed CSS selector (the selector should not contain an id). * @param {String} selector The CSS selector * @return {Array} An array of the matched nodes */ query : function(selector) { return Ext.DomQuery.select(selector, this.dom); }, /** * Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id). * @param {String} selector The CSS selector * @param {Boolean} returnDom (optional) True to return the DOM node instead of Ext.core.Element (defaults to false) * @return {HTMLElement/Ext.core.Element} The child Ext.core.Element (or DOM node if returnDom = true) */ down : function(selector, returnDom) { var n = Ext.DomQuery.selectNode(selector, this.dom); return returnDom ? n : Ext.get(n); }, /** * Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id). * @param {String} selector The CSS selector * @param {Boolean} returnDom (optional) True to return the DOM node instead of Ext.core.Element (defaults to false) * @return {HTMLElement/Ext.core.Element} The child Ext.core.Element (or DOM node if returnDom = true) */ child : function(selector, returnDom) { var node, me = this, id; id = Ext.get(me).id; // Escape . or : id = id.replace(/[\.:]/g, "\\$0"); node = Ext.DomQuery.selectNode('#' + id + " > " + selector, me.dom); return returnDom ? node : Ext.get(node); }, /** * Gets the parent node for this element, optionally chaining up trying to match a selector * @param {String} selector (optional) Find a parent node that matches the passed simple selector * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.core.Element * @return {Ext.core.Element/HTMLElement} The parent node or null */ parent : function(selector, returnDom) { return this.matchNode('parentNode', 'parentNode', selector, returnDom); }, /** * Gets the next sibling, skipping text nodes * @param {String} selector (optional) Find the next sibling that matches the passed simple selector * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.core.Element * @return {Ext.core.Element/HTMLElement} The next sibling or null */ next : function(selector, returnDom) { return this.matchNode('nextSibling', 'nextSibling', selector, returnDom); }, /** * Gets the previous sibling, skipping text nodes * @param {String} selector (optional) Find the previous sibling that matches the passed simple selector * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.core.Element * @return {Ext.core.Element/HTMLElement} The previous sibling or null */ prev : function(selector, returnDom) { return this.matchNode('previousSibling', 'previousSibling', selector, returnDom); }, /** * Gets the first child, skipping text nodes * @param {String} selector (optional) Find the next sibling that matches the passed simple selector * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.core.Element * @return {Ext.core.Element/HTMLElement} The first child or null */ first : function(selector, returnDom) { return this.matchNode('nextSibling', 'firstChild', selector, returnDom); }, /** * Gets the last child, skipping text nodes * @param {String} selector (optional) Find the previous sibling that matches the passed simple selector * @param {Boolean} returnDom (optional) True to return a raw dom node instead of an Ext.core.Element * @return {Ext.core.Element/HTMLElement} The last child or null */ last : function(selector, returnDom) { return this.matchNode('previousSibling', 'lastChild', selector, returnDom); }, matchNode : function(dir, start, selector, returnDom) { if (!this.dom) { return null; } var n = this.dom[start]; while (n) { if (n.nodeType == 1 && (!selector || Ext.DomQuery.is(n, selector))) { return !returnDom ? Ext.get(n) : n; } n = n[dir]; } return null; } }); /** * @class Ext.core.Element */ Ext.core.Element.addMethods({ /** * Appends the passed element(s) to this element * @param {String/HTMLElement/Array/Element/CompositeElement} el * @return {Ext.core.Element} this */ appendChild : function(el) { return Ext.get(el).appendTo(this); }, /** * Appends this element to the passed element * @param {Mixed} el The new parent element * @return {Ext.core.Element} this */ appendTo : function(el) { Ext.getDom(el).appendChild(this.dom); return this; }, /** * Inserts this element before the passed element in the DOM * @param {Mixed} el The element before which this element will be inserted * @return {Ext.core.Element} this */ insertBefore : function(el) { el = Ext.getDom(el); el.parentNode.insertBefore(this.dom, el); return this; }, /** * Inserts this element after the passed element in the DOM * @param {Mixed} el The element to insert after * @return {Ext.core.Element} this */ insertAfter : function(el) { el = Ext.getDom(el); el.parentNode.insertBefore(this.dom, el.nextSibling); return this; }, /** * Inserts (or creates) an element (or DomHelper config) as the first child of this element * @param {Mixed/Object} el The id or element to insert or a DomHelper config to create and insert * @return {Ext.core.Element} The new child */ insertFirst : function(el, returnDom) { el = el || {}; if (el.nodeType || el.dom || typeof el == 'string') { // element el = Ext.getDom(el); this.dom.insertBefore(el, this.dom.firstChild); return !returnDom ? Ext.get(el) : el; } else { // dh config return this.createChild(el, this.dom.firstChild, returnDom); } }, /** * Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element * @param {Mixed/Object/Array} el The id, element to insert or a DomHelper config to create and insert *or* an array of any of those. * @param {String} where (optional) 'before' or 'after' defaults to before * @param {Boolean} returnDom (optional) True to return the .;ll;l,raw DOM element instead of Ext.core.Element * @return {Ext.core.Element} The inserted Element. If an array is passed, the last inserted element is returned. */ insertSibling: function(el, where, returnDom){ var me = this, rt, isAfter = (where || 'before').toLowerCase() == 'after', insertEl; if(Ext.isArray(el)){ insertEl = me; Ext.each(el, function(e) { rt = Ext.fly(insertEl, '_internal').insertSibling(e, where, returnDom); if(isAfter){ insertEl = rt; } }); return rt; } el = el || {}; if(el.nodeType || el.dom){ rt = me.dom.parentNode.insertBefore(Ext.getDom(el), isAfter ? me.dom.nextSibling : me.dom); if (!returnDom) { rt = Ext.get(rt); } }else{ if (isAfter && !me.dom.nextSibling) { rt = Ext.core.DomHelper.append(me.dom.parentNode, el, !returnDom); } else { rt = Ext.core.DomHelper[isAfter ? 'insertAfter' : 'insertBefore'](me.dom, el, !returnDom); } } return rt; }, /** * Replaces the passed element with this element * @param {Mixed} el The element to replace * @return {Ext.core.Element} this */ replace : function(el) { el = Ext.get(el); this.insertBefore(el); el.remove(); return this; }, /** * Replaces this element with the passed element * @param {Mixed/Object} el The new element or a DomHelper config of an element to create * @return {Ext.core.Element} this */ replaceWith: function(el){ var me = this; if(el.nodeType || el.dom || typeof el == 'string'){ el = Ext.get(el); me.dom.parentNode.insertBefore(el, me.dom); }else{ el = Ext.core.DomHelper.insertBefore(me.dom, el); } delete Ext.cache[me.id]; Ext.removeNode(me.dom); me.id = Ext.id(me.dom = el); Ext.core.Element.addToCache(me.isFlyweight ? new Ext.core.Element(me.dom) : me); return me; }, /** * Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element. * @param {Object} config DomHelper element config object. If no tag is specified (e.g., {tag:'input'}) then a div will be * automatically generated with the specified attributes. * @param {HTMLElement} insertBefore (optional) a child element of this element * @param {Boolean} returnDom (optional) true to return the dom node instead of creating an Element * @return {Ext.core.Element} The new child element */ createChild : function(config, insertBefore, returnDom) { config = config || {tag:'div'}; if (insertBefore) { return Ext.core.DomHelper.insertBefore(insertBefore, config, returnDom !== true); } else { return Ext.core.DomHelper[!this.dom.firstChild ? 'insertFirst' : 'append'](this.dom, config, returnDom !== true); } }, /** * Creates and wraps this element with another element * @param {Object} config (optional) DomHelper element config object for the wrapper element or null for an empty div * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Ext.core.Element * @return {HTMLElement/Element} The newly created wrapper element */ wrap : function(config, returnDom) { var newEl = Ext.core.DomHelper.insertBefore(this.dom, config || {tag: "div"}, !returnDom), d = newEl.dom || newEl; d.appendChild(this.dom); return newEl; }, /** * Inserts an html fragment into this element * @param {String} where Where to insert the html in relation to this element - beforeBegin, afterBegin, beforeEnd, afterEnd. * @param {String} html The HTML fragment * @param {Boolean} returnEl (optional) True to return an Ext.core.Element (defaults to false) * @return {HTMLElement/Ext.core.Element} The inserted node (or nearest related if more than 1 inserted) */ insertHtml : function(where, html, returnEl) { var el = Ext.core.DomHelper.insertHtml(where, this.dom, html); return returnEl ? Ext.get(el) : el; } }); /** * @class Ext.core.Element */ (function(){ Ext.core.Element.boxMarkup = '
// change the height to 200px and animate with default configuration
Ext.fly('elementId').setHeight(200, true);
// change the height to 150px and animate with a custom configuration
Ext.fly('elId').setHeight(150, {
duration : .5, // animation will have a duration of .5 seconds
// will change the content to "finished"
callback: function(){ this.{@link #update}("finished"); }
});
* Wraps the specified element with a special 9 element markup/CSS block that renders by default as * a gray container with a gradient background, rounde