The name of the property in the global namespace (The window in browser environments) which refers to the current instance of Ext.
This is usually "Ext", but if a sandboxed build of ExtJS is being used, this will be an alternative name.
If code is being generated for use by eval or to create a new Function, and the global instance
* of Ext must be referenced, this is the name that should be built into the code.
// 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 {Number} Milliseconds since UNIX epoch. * @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. * @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 * @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})?\\)\\/'), 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 * @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 * @type String */ MILLI : "ms", /** * Date interval constant * @type String */ SECOND : "s", /** * Date interval constant * @type String */ MINUTE : "mi", /** Date interval constant * @type String */ HOUR : "h", /** * Date interval constant * @type String */ DAY : "d", /** * Date interval constant * @type String */ MONTH : "mo", /** * Date interval constant * @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 = {
'LongJanNameInYourLang': 0,
'ShortJanNameInYourLang':0,
'LongFebNameInYourLang':1,
'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 may be overridden in a locale file.
*/ defaultFormat : "m/d/Y", //
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'
* Other.awesome.Class
* will simply be loaded from ./Other/awesome/Class.js
*/
paths: {
'Ext': '.'
},
/**
* @cfg {Boolean} preserveScripts
* False to remove and optionally {@link #garbageCollect garbage-collect} asynchronously loaded scripts,
* True to retain script element for browser debugger compatibility and improved load performance.
*/
preserveScripts : true,
/**
* @cfg {String} scriptCharset
* Optional charset to specify encoding of dynamic script content.
*/
scriptCharset : undefined
},
/**
* Set the configuration for the loader. This should be called right after ext-(debug).js
* is included in the page, and before Ext.onReady. i.e:
*
*
*
*
*
* Refer to config options of {@link Ext.Loader} for the list of possible properties
*
* @param {Object} config The config object to override the default values
* @return {Ext.Loader} this
*/
setConfig: function(name, value) {
if (Ext.isObject(name) && arguments.length === 1) {
Ext.merge(Loader.config, name);
}
else {
Loader.config[name] = (Ext.isObject(value)) ? Ext.merge(Loader.config[name], value) : value;
}
return Loader;
},
/**
* Get the config value corresponding to the specified name. If no name is given, will return the config object
* @param {String} name The config property name
* @return {Object}
*/
getConfig: function(name) {
if (name) {
return Loader.config[name];
}
return Loader.config;
},
/**
* Sets the path of a namespace.
* For Example:
*
* Ext.Loader.setPath('Ext', '.');
*
* @param {String/Object} name See {@link Ext.Function#flexSetter flexSetter}
* @param {String} path See {@link Ext.Function#flexSetter flexSetter}
* @return {Ext.Loader} this
* @method
*/
setPath: flexSetter(function(name, path) {
Loader.config.paths[name] = path;
return Loader;
}),
/**
* Sets a batch of path entries
*
* @param {Object } paths a set of className: path mappings
* @return {Ext.Loader} this
*/
addClassPathMappings: function(paths) {
var name;
for(name in paths){
Loader.config.paths[name] = paths[name];
}
return Loader;
},
/**
* Translates a className to a file path by adding the
* the proper prefix and converting the .'s to /'s. For example:
*
* Ext.Loader.setPath('My', '/path/to/My');
*
* alert(Ext.Loader.getPath('My.awesome.Class')); // alerts '/path/to/My/awesome/Class.js'
*
* Note that the deeper namespace levels, if explicitly set, are always resolved first. For example:
*
* Ext.Loader.setPath({
* 'My': '/path/to/lib',
* 'My.awesome': '/other/path/for/awesome/stuff',
* 'My.awesome.more': '/more/awesome/path'
* });
*
* alert(Ext.Loader.getPath('My.awesome.Class')); // alerts '/other/path/for/awesome/stuff/Class.js'
*
* alert(Ext.Loader.getPath('My.awesome.more.Class')); // alerts '/more/awesome/path/Class.js'
*
* alert(Ext.Loader.getPath('My.cool.Class')); // alerts '/path/to/lib/cool/Class.js'
*
* alert(Ext.Loader.getPath('Unknown.strange.Stuff')); // alerts 'Unknown/strange/Stuff.js'
*
* @param {String} className
* @return {String} path
*/
getPath: function(className) {
var path = '',
paths = Loader.config.paths,
prefix = Loader.getPrefix(className);
if (prefix.length > 0) {
if (prefix === className) {
return paths[prefix];
}
path = paths[prefix];
className = className.substring(prefix.length + 1);
}
if (path.length > 0) {
path += '/';
}
return path.replace(slashDotSlashRe, '/') + className.replace(dotRe, "/") + '.js';
},
/**
* @private
* @param {String} className
*/
getPrefix: function(className) {
var paths = Loader.config.paths,
prefix, deepestPrefix = '';
if (paths.hasOwnProperty(className)) {
return className;
}
for (prefix in paths) {
if (paths.hasOwnProperty(prefix) && prefix + '.' === className.substring(0, prefix.length + 1)) {
if (prefix.length > deepestPrefix.length) {
deepestPrefix = prefix;
}
}
}
return deepestPrefix;
},
/**
* @private
* @param {String} className
*/
isAClassNameWithAKnownPrefix: function(className) {
var prefix = Loader.getPrefix(className);
// we can only say it's really a class if className is not equal to any known namespace
return prefix !== '' && prefix !== className;
},
/**
* Loads all classes by the given names and all their direct dependencies; optionally executes the given callback function when
* finishes, within the optional scope. This method is aliased by {@link Ext#require Ext.require} for convenience
* @param {String/Array} expressions Can either be a string or an array of string
* @param {Function} fn (Optional) The callback function
* @param {Object} scope (Optional) The execution scope (`this`) of the callback function
* @param {String/Array} excludes (Optional) Classes to be excluded, useful when being used with expressions
*/
require: function(expressions, fn, scope, excludes) {
if (fn) {
fn.call(scope);
}
},
/**
* Synchronously loads all classes by the given names and all their direct dependencies; optionally executes the given callback function when finishes, within the optional scope. This method is aliased by {@link Ext#syncRequire} for convenience
* @param {String/Array} expressions Can either be a string or an array of string
* @param {Function} fn (Optional) The callback function
* @param {Object} scope (Optional) The execution scope (`this`) of the callback function
* @param {String/Array} excludes (Optional) Classes to be excluded, useful when being used with expressions
*/
syncRequire: function() {},
/**
* Explicitly exclude files from being loaded. Useful when used in conjunction with a broad include expression.
* Can be chained with more `require` and `exclude` methods, eg:
*
* Ext.exclude('Ext.data.*').require('*');
*
* Ext.exclude('widget.button*').require('widget.*');
*
* @param {Array} excludes
* @return {Object} object contains `require` method for chaining
*/
exclude: function(excludes) {
return {
require: function(expressions, fn, scope) {
return Loader.require(expressions, fn, scope, excludes);
},
syncRequire: function(expressions, fn, scope) {
return Loader.syncRequire(expressions, fn, scope, excludes);
}
};
},
/**
* Add a new listener to be executed when all required scripts are fully loaded
*
* @param {Function} fn The function callback to be executed
* @param {Object} scope The execution scope (this) of the callback function
* @param {Boolean} withDomReady Whether or not to wait for document dom ready as well
*/
onReady: function(fn, scope, withDomReady, options) {
var oldFn;
if (withDomReady !== false && Ext.onDocumentReady) {
oldFn = fn;
fn = function() {
Ext.onDocumentReady(oldFn, scope, options);
};
}
fn.call(scope);
}
});
var queue = [],
isClassFileLoaded = {},
isFileLoaded = {},
classNameToFilePathMap = {},
scriptElements = {},
readyListeners = [],
usedClasses = [],
requiresMap = {};
Ext.apply(Loader, {
/**
* @private
*/
documentHead: typeof document != 'undefined' && (document.head || document.getElementsByTagName('head')[0]),
/**
* Flag indicating whether there are still files being loaded
* @private
*/
isLoading: false,
/**
* Maintain the queue for all dependencies. Each item in the array is an object of the format:
*
* {
* requires: [...], // The required classes for this queue item
* callback: function() { ... } // The function to execute when all classes specified in requires exist
* }
*
* @private
*/
queue: queue,
/**
* Maintain the list of files that have already been handled so that they never get double-loaded
* @private
*/
isClassFileLoaded: isClassFileLoaded,
/**
* @private
*/
isFileLoaded: isFileLoaded,
/**
* Maintain the list of listeners to execute when all required scripts are fully loaded
* @private
*/
readyListeners: readyListeners,
/**
* Contains classes referenced in `uses` properties.
* @private
*/
optionalRequires: usedClasses,
/**
* Map of fully qualified class names to an array of dependent classes.
* @private
*/
requiresMap: requiresMap,
/**
* @private
*/
numPendingFiles: 0,
/**
* @private
*/
numLoadedFiles: 0,
/** @private */
hasFileLoadError: false,
/**
* @private
*/
classNameToFilePathMap: classNameToFilePathMap,
/**
* The number of scripts loading via loadScript.
* @private
*/
scriptsLoading: 0,
/**
* @private
*/
syncModeEnabled: false,
scriptElements: scriptElements,
/**
* Refresh all items in the queue. If all dependencies for an item exist during looping,
* it will execute the callback and call refreshQueue again. Triggers onReady when the queue is
* empty
* @private
*/
refreshQueue: function() {
var ln = queue.length,
i, item, j, requires;
// When the queue of loading classes reaches zero, trigger readiness
if (!ln && !Loader.scriptsLoading) {
return Loader.triggerReady();
}
for (i = 0; i < ln; i++) {
item = queue[i];
if (item) {
requires = item.requires;
// Don't bother checking when the number of files loaded
// is still less than the array length
if (requires.length > Loader.numLoadedFiles) {
continue;
}
// Remove any required classes that are loaded
for (j = 0; j < requires.length; ) {
if (Manager.isCreated(requires[j])) {
// Take out from the queue
arrayErase(requires, j, 1);
}
else {
j++;
}
}
// If we've ended up with no required classes, call the callback
if (item.requires.length === 0) {
arrayErase(queue, i, 1);
item.callback.call(item.scope);
Loader.refreshQueue();
break;
}
}
}
return Loader;
},
/**
* Inject a script element to document's head, call onLoad and onError accordingly
* @private
*/
injectScriptElement: function(url, onLoad, onError, scope, charset) {
var script = document.createElement('script'),
dispatched = false,
config = Loader.config,
onLoadFn = function() {
if(!dispatched) {
dispatched = true;
script.onload = script.onreadystatechange = script.onerror = null;
if (typeof config.scriptChainDelay == 'number') {
//free the stack (and defer the next script)
defer(onLoad, config.scriptChainDelay, scope);
} else {
onLoad.call(scope);
}
Loader.cleanupScriptElement(script, config.preserveScripts === false, config.garbageCollect);
}
},
onErrorFn = function(arg) {
defer(onError, 1, scope); //free the stack
Loader.cleanupScriptElement(script, config.preserveScripts === false, config.garbageCollect);
};
script.type = 'text/javascript';
script.onerror = onErrorFn;
charset = charset || config.scriptCharset;
if (charset) {
script.charset = charset;
}
/*
* IE9 Standards mode (and others) SHOULD follow the load event only
* (Note: IE9 supports both onload AND readystatechange events)
*/
if ('addEventListener' in script ) {
script.onload = onLoadFn;
} else if ('readyState' in script) { // for true to make the {@link #currency} function
* append the currency sign to the formatted value.
*
* This may be overridden in a locale file.
*/
currencyAtEnd: false,
//this reference) in which the
* function is called. If not specified, this will refer to the browser window.
* @param {Array} args (optional) The default Array of arguments.
*/
Ext.util.DelayedTask = function(fn, scope, args) {
var me = this,
id,
call = function() {
clearInterval(id);
id = null;
fn.apply(scope, args || []);
};
/**
* Cancels any pending timeout and queues a new one
* @param {Number} delay The milliseconds to delay
* @param {Function} newFn (optional) Overrides function passed to constructor
* @param {Object} newScope (optional) Overrides scope passed to constructor. Remember that if no scope
* is specified, this will refer to the browser window.
* @param {Array} newArgs (optional) Overrides args passed to constructor
*/
this.delay = function(delay, newFn, newScope, newArgs) {
me.cancel();
fn = newFn || fn;
scope = newScope || scope;
args = newArgs || args;
id = setInterval(call, delay);
};
/**
* Cancel the last queued timeout
*/
this.cancel = function(){
if (id) {
clearInterval(id);
id = null;
}
};
};
//@tag dom,core
//@define Ext.util.Event
//@require Ext.util.DelayedTask
Ext.require('Ext.util.DelayedTask', function() {
/**
* Represents single event type that an Observable object listens to.
* All actual listeners are tracked inside here. When the event fires,
* it calls all the registered listener functions.
*
* @private
*/
Ext.util.Event = Ext.extend(Object, (function() {
var noOptions = {};
function createTargeted(handler, listener, o, scope){
return function(){
if (o.target === arguments[0]){
handler.apply(scope, arguments);
}
};
}
function createBuffered(handler, listener, o, scope) {
listener.task = new Ext.util.DelayedTask();
return function() {
listener.task.delay(o.buffer, handler, scope, Ext.Array.toArray(arguments));
};
}
function createDelayed(handler, listener, o, scope) {
return function() {
var task = new Ext.util.DelayedTask();
if (!listener.tasks) {
listener.tasks = [];
}
listener.tasks.push(task);
task.delay(o.delay || 10, handler, scope, Ext.Array.toArray(arguments));
};
}
function createSingle(handler, listener, o, scope) {
return function() {
var event = listener.ev;
if (event.removeListener(listener.fn, scope) && event.observable) {
// Removing from a regular Observable-owned, named event (not an anonymous
// event such as Ext's readyEvent): Decrement the listeners count
event.observable.hasListeners[event.name]--;
}
return handler.apply(scope, arguments);
};
}
return {
/**
* @property {Boolean} isEvent
* `true` in this class to identify an object as an instantiated Event, or subclass thereof.
*/
isEvent: true,
constructor: function(observable, name) {
this.name = name;
this.observable = observable;
this.listeners = [];
},
addListener: function(fn, scope, options) {
var me = this,
listener;
scope = scope || me.observable;
if (!fn) {
Ext.Error.raise({
sourceClass: Ext.getClassName(this.observable),
sourceMethod: "addListener",
msg: "The specified callback function is undefined"
});
}
if (!me.isListening(fn, scope)) {
listener = me.createListener(fn, scope, options);
if (me.firing) {
// if we are currently firing this event, don't disturb the listener loop
me.listeners = me.listeners.slice(0);
}
me.listeners.push(listener);
}
},
createListener: function(fn, scope, options) {
options = options || noOptions;
scope = scope || this.observable;
var listener = {
fn: fn,
scope: scope,
o: options,
ev: this
},
handler = fn;
// The order is important. The 'single' wrapper must be wrapped by the 'buffer' and 'delayed' wrapper
// because the event removal that the single listener does destroys the listener's DelayedTask(s)
if (options.single) {
handler = createSingle(handler, listener, options, scope);
}
if (options.target) {
handler = createTargeted(handler, listener, options, scope);
}
if (options.delay) {
handler = createDelayed(handler, listener, options, scope);
}
if (options.buffer) {
handler = createBuffered(handler, listener, options, scope);
}
listener.fireFn = handler;
return listener;
},
findListener: function(fn, scope) {
var listeners = this.listeners,
i = listeners.length,
listener,
s;
while (i--) {
listener = listeners[i];
if (listener) {
s = listener.scope;
// Compare the listener's scope with *JUST THE PASSED SCOPE* if one is passed, and only fall back to the owning Observable if none is passed.
// We cannot use the test (s == scope || s == this.observable)
// Otherwise, if the Observable itself adds Ext.emptyFn as a listener, and then Ext.emptyFn is added under another scope, there will be a false match.
if (listener.fn == fn && (s == (scope || this.observable))) {
return i;
}
}
}
return - 1;
},
isListening: function(fn, scope) {
return this.findListener(fn, scope) !== -1;
},
removeListener: function(fn, scope) {
var me = this,
index,
listener,
k;
index = me.findListener(fn, scope);
if (index != -1) {
listener = me.listeners[index];
if (me.firing) {
me.listeners = me.listeners.slice(0);
}
// cancel and remove a buffered handler that hasn't fired yet
if (listener.task) {
listener.task.cancel();
delete listener.task;
}
// cancel and remove all delayed handlers that haven't fired yet
k = listener.tasks && listener.tasks.length;
if (k) {
while (k--) {
listener.tasks[k].cancel();
}
delete listener.tasks;
}
// remove this listener from the listeners array
Ext.Array.erase(me.listeners, index, 1);
return true;
}
return false;
},
// Iterate to stop any buffered/delayed events
clearListeners: function() {
var listeners = this.listeners,
i = listeners.length;
while (i--) {
this.removeListener(listeners[i].fn, listeners[i].scope);
}
},
fire: function() {
var me = this,
listeners = me.listeners,
count = listeners.length,
i,
args,
listener;
if (count > 0) {
me.firing = true;
for (i = 0; i < count; i++) {
listener = listeners[i];
args = arguments.length ? Array.prototype.slice.call(arguments, 0) : [];
if (listener.o) {
args.push(listener.o);
}
if (listener && listener.fireFn.apply(listener.scope || me.observable, args) === false) {
return (me.firing = false);
}
}
}
me.firing = false;
return true;
}
};
}()));
});
//@tag dom,core
//@require util/Event.js
//@define Ext.EventManager
/**
* @class Ext.EventManager
* Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides
* several useful events directly.
* See {@link Ext.EventObject} for more details on normalized event objects.
* @singleton
*/
Ext.EventManager = new function() {
var EventManager = this,
doc = document,
win = window,
initExtCss = function() {
// find the body element
var bd = doc.body || doc.getElementsByTagName('body')[0],
baseCSSPrefix = Ext.baseCSSPrefix,
cls = [baseCSSPrefix + 'body'],
htmlCls = [],
supportsLG = Ext.supports.CSS3LinearGradient,
supportsBR = Ext.supports.CSS3BorderRadius,
resetCls = [],
html,
resetElementSpec;
if (!bd) {
return false;
}
html = bd.parentNode;
function add (c) {
cls.push(baseCSSPrefix + c);
}
//Let's keep this human readable!
if (Ext.isIE) {
add('ie');
// very often CSS needs to do checks like "IE7+" or "IE6 or 7". To help
// reduce the clutter (since CSS/SCSS cannot do these tests), we add some
// additional classes:
//
// x-ie7p : IE7+ : 7 <= ieVer
// x-ie7m : IE7- : ieVer <= 7
// x-ie8p : IE8+ : 8 <= ieVer
// x-ie8m : IE8- : ieVer <= 8
// x-ie9p : IE9+ : 9 <= ieVer
// x-ie78 : IE7 or 8 : 7 <= ieVer <= 8
//
if (Ext.isIE6) {
add('ie6');
} else { // ignore pre-IE6 :)
add('ie7p');
if (Ext.isIE7) {
add('ie7');
} else {
add('ie8p');
if (Ext.isIE8) {
add('ie8');
} else {
add('ie9p');
if (Ext.isIE9) {
add('ie9');
}
}
}
}
if (Ext.isIE6 || Ext.isIE7) {
add('ie7m');
}
if (Ext.isIE6 || Ext.isIE7 || Ext.isIE8) {
add('ie8m');
}
if (Ext.isIE7 || Ext.isIE8) {
add('ie78');
}
}
if (Ext.isGecko) {
add('gecko');
if (Ext.isGecko3) {
add('gecko3');
}
if (Ext.isGecko4) {
add('gecko4');
}
if (Ext.isGecko5) {
add('gecko5');
}
}
if (Ext.isOpera) {
add('opera');
}
if (Ext.isWebKit) {
add('webkit');
}
if (Ext.isSafari) {
add('safari');
if (Ext.isSafari2) {
add('safari2');
}
if (Ext.isSafari3) {
add('safari3');
}
if (Ext.isSafari4) {
add('safari4');
}
if (Ext.isSafari5) {
add('safari5');
}
if (Ext.isSafari5_0) {
add('safari5_0')
}
}
if (Ext.isChrome) {
add('chrome');
}
if (Ext.isMac) {
add('mac');
}
if (Ext.isLinux) {
add('linux');
}
if (!supportsBR) {
add('nbr');
}
if (!supportsLG) {
add('nlg');
}
// If we are not globally resetting scope, but just resetting it in a wrapper around
// serarately rendered widgets, then create a common reset element for use when creating
// measurable elements. Using a common DomHelper spec.
if (Ext.scopeResetCSS) {
// Create Ext.resetElementSpec for use in Renderable when wrapping top level Components.
resetElementSpec = Ext.resetElementSpec = {
cls: baseCSSPrefix + 'reset'
};
if (!supportsLG) {
resetCls.push(baseCSSPrefix + 'nlg');
}
if (!supportsBR) {
resetCls.push(baseCSSPrefix + 'nbr');
}
if (resetCls.length) {
resetElementSpec.cn = {
cls: resetCls.join(' ')
};
}
Ext.resetElement = Ext.getBody().createChild(resetElementSpec);
if (resetCls.length) {
Ext.resetElement = Ext.get(Ext.resetElement.dom.firstChild);
}
}
// Otherwise, the common reset element is the document body
else {
Ext.resetElement = Ext.getBody();
add('reset');
}
// add to the parent to allow for selectors x-strict x-border-box, also set the isBorderBox property correctly
if (html) {
if (Ext.isStrict && (Ext.isIE6 || Ext.isIE7)) {
Ext.isBorderBox = false;
}
else {
Ext.isBorderBox = true;
}
if(Ext.isBorderBox) {
htmlCls.push(baseCSSPrefix + 'border-box');
}
if (Ext.isStrict) {
htmlCls.push(baseCSSPrefix + 'strict');
} else {
htmlCls.push(baseCSSPrefix + 'quirks');
}
Ext.fly(html, '_internal').addCls(htmlCls);
}
Ext.fly(bd, '_internal').addCls(cls);
return true;
};
Ext.apply(EventManager, {
/**
* Check if we have bound our global onReady listener
* @private
*/
hasBoundOnReady: false,
/**
* Check if fireDocReady has been called
* @private
*/
hasFiredReady: false,
/**
* Additionally, allow the 'DOM' listener thread to complete (usually desirable with mobWebkit, Gecko)
* before firing the entire onReady chain (high stack load on Loader) by specifying a delay value
* @default 1ms
* @private
*/
deferReadyEvent : 1,
/*
* diags: a list of event names passed to onReadyEvent (in chron order)
* @private
*/
onReadyChain : [],
/**
* Holds references to any onReady functions
* @private
*/
readyEvent:
(function () {
var event = new Ext.util.Event();
event.fire = function () {
Ext._beforeReadyTime = Ext._beforeReadyTime || new Date().getTime();
event.self.prototype.fire.apply(event, arguments);
Ext._afterReadytime = new Date().getTime();
};
return event;
}()),
/**
* Fires when a DOM event handler finishes its run, just before returning to browser control.
* This can be useful for performing cleanup, or upfdate tasks which need to happen only
* after all code in an event handler has been run, but which should not be executed in a timer
* due to the intervening browser reflow/repaint which would take place.
*
*/
idleEvent: new Ext.util.Event(),
/**
* detects whether the EventManager has been placed in a paused state for synchronization
* with external debugging / perf tools (PageAnalyzer)
* @private
*/
isReadyPaused: function(){
return (/[?&]ext-pauseReadyFire\b/i.test(location.search) && !Ext._continueFireReady);
},
/**
* Binds the appropriate browser event for checking if the DOM has loaded.
* @private
*/
bindReadyEvent: function() {
if (EventManager.hasBoundOnReady) {
return;
}
// Test scenario where Core is dynamically loaded AFTER window.load
if ( doc.readyState == 'complete' ) { // Firefox4+ got support for this state, others already do.
EventManager.onReadyEvent({
type: doc.readyState || 'body'
});
} else {
document.addEventListener('DOMContentLoaded', EventManager.onReadyEvent, false);
window.addEventListener('load', EventManager.onReadyEvent, false);
EventManager.hasBoundOnReady = true;
}
},
onReadyEvent : function(e) {
if (e && e.type) {
EventManager.onReadyChain.push(e.type);
}
if (EventManager.hasBoundOnReady) {
document.removeEventListener('DOMContentLoaded', EventManager.onReadyEvent, false);
window.removeEventListener('load', EventManager.onReadyEvent, false);
}
if (!Ext.isReady) {
EventManager.fireDocReady();
}
},
/**
* We know the document is loaded, so trigger any onReady events.
* @private
*/
fireDocReady: function() {
if (!Ext.isReady) {
Ext._readyTime = new Date().getTime();
Ext.isReady = true;
Ext.supports.init();
EventManager.onWindowUnload();
EventManager.readyEvent.onReadyChain = EventManager.onReadyChain; //diags report
if (Ext.isNumber(EventManager.deferReadyEvent)) {
Ext.Function.defer(EventManager.fireReadyEvent, EventManager.deferReadyEvent);
EventManager.hasDocReadyTimer = true;
} else {
EventManager.fireReadyEvent();
}
}
},
/**
* Fires the ready event
* @private
*/
fireReadyEvent: function(){
var readyEvent = EventManager.readyEvent;
// Unset the timer flag here since other onReady events may be
// added during the fire() call and we don't want to block them
EventManager.hasDocReadyTimer = false;
EventManager.isFiring = true;
// Ready events are all single: true, if we get to the end
// & there are more listeners, it means they were added
// inside some other ready event
while (readyEvent.listeners.length && !EventManager.isReadyPaused()) {
readyEvent.fire();
}
EventManager.isFiring = false;
EventManager.hasFiredReady = true;
},
/**
* Adds a listener to be notified when the document is ready (before onload and before images are loaded).
*
* @param {Function} fn The method the event invokes.
* @param {Object} [scope] The scope (`this` reference) in which the handler function executes.
* Defaults to the browser window.
* @param {Object} [options] Options object as passed to {@link Ext.Element#addListener}.
*/
onDocumentReady: function(fn, scope, options) {
options = options || {};
// force single, only ever fire it once
options.single = true;
EventManager.readyEvent.addListener(fn, scope, options);
// If we're in the middle of firing, or we have a deferred timer
// pending, drop out since the event will be fired later
if (!(EventManager.isFiring || EventManager.hasDocReadyTimer)) {
if (Ext.isReady) {
EventManager.fireReadyEvent();
} else {
EventManager.bindReadyEvent();
}
}
},
// --------------------- event binding ---------------------
/**
* Contains a list of all document mouse downs, so we can ensure they fire even when stopEvent is called.
* @private
*/
stoppedMouseDownEvent: new Ext.util.Event(),
/**
* Options to parse for the 4th argument to addListener.
* @private
*/
propRe: /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate|freezeEvent)$/,
/**
* Get the id of the element. If one has not been assigned, automatically assign it.
* @param {HTMLElement/Ext.Element} element The element to get the id for.
* @return {String} id
*/
getId : function(element) {
var id;
element = Ext.getDom(element);
if (element === doc || element === win) {
id = element === doc ? Ext.documentId : Ext.windowId;
}
else {
id = Ext.id(element);
}
if (!Ext.cache[id]) {
Ext.addCacheEntry(id, null, element);
}
return id;
},
/**
* Convert a "config style" listener into a set of flat arguments so they can be passed to addListener
* @private
* @param {Object} element The element the event is for
* @param {Object} event The event configuration
* @param {Object} isRemove True if a removal should be performed, otherwise an add will be done.
*/
prepareListenerConfig: function(element, config, isRemove) {
var propRe = EventManager.propRe,
key, value, args;
// loop over all the keys in the object
for (key in config) {
if (config.hasOwnProperty(key)) {
// if the key is something else then an event option
if (!propRe.test(key)) {
value = config[key];
// if the value is a function it must be something like click: function() {}, scope: this
// which means that there might be multiple event listeners with shared options
if (typeof value == 'function') {
// shared options
args = [element, key, value, config.scope, config];
} else {
// if its not a function, it must be an object like click: {fn: function() {}, scope: this}
args = [element, key, value.fn, value.scope, value];
}
if (isRemove) {
EventManager.removeListener.apply(EventManager, args);
} else {
EventManager.addListener.apply(EventManager, args);
}
}
}
}
},
mouseEnterLeaveRe: /mouseenter|mouseleave/,
/**
* Normalize cross browser event differences
* @private
* @param {Object} eventName The event name
* @param {Object} fn The function to execute
* @return {Object} The new event name/function
*/
normalizeEvent: function(eventName, fn) {
if (EventManager.mouseEnterLeaveRe.test(eventName) && !Ext.supports.MouseEnterLeave) {
if (fn) {
fn = Ext.Function.createInterceptor(fn, EventManager.contains);
}
eventName = eventName == 'mouseenter' ? 'mouseover' : 'mouseout';
} else if (eventName == 'mousewheel' && !Ext.supports.MouseWheel && !Ext.isOpera) {
eventName = 'DOMMouseScroll';
}
return {
eventName: eventName,
fn: fn
};
},
/**
* Checks whether the event's relatedTarget is contained inside (or is) the element.
* @private
* @param {Object} event
*/
contains: function(event) {
var parent = event.browserEvent.currentTarget,
child = EventManager.getRelatedTarget(event);
if (parent && parent.firstChild) {
while (child) {
if (child === parent) {
return false;
}
child = child.parentNode;
if (child && (child.nodeType != 1)) {
child = null;
}
}
}
return true;
},
/**
* Appends an event handler to an element. The shorthand version {@link #on} is equivalent. Typically you will
* use {@link Ext.Element#addListener} directly on an Element in favor of calling this version.
* @param {String/HTMLElement} el The html element or id to assign the event handler to.
* @param {String} eventName The name of the event to listen for.
* @param {Function} handler The handler function the event invokes. This function is passed
* the following parameters:this reference) in which the handler function is executed. Defaults to the 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. Defaults to the Element.See {@link Ext.Element#addListener} for examples of how to use these options.
*/ addListener: function(element, eventName, fn, scope, options) { // Check if we've been passed a "config style" event. if (typeof eventName !== 'string') { EventManager.prepareListenerConfig(element, eventName); return; } var dom = element.dom || Ext.getDom(element), bind, wrap; if (!fn) { Ext.Error.raise({ sourceClass: 'Ext.EventManager', sourceMethod: 'addListener', targetElement: element, eventName: eventName, msg: 'Error adding "' + eventName + '\" listener. The handler function is undefined.' }); } // create the wrapper function options = options || {}; bind = EventManager.normalizeEvent(eventName, fn); wrap = EventManager.createListenerWrap(dom, eventName, bind.fn, scope, options); if (dom.attachEvent) { dom.attachEvent('on' + bind.eventName, wrap); } else { dom.addEventListener(bind.eventName, wrap, options.capture || false); } if (dom == doc && eventName == 'mousedown') { EventManager.stoppedMouseDownEvent.addListener(wrap); } // add all required data into the event cache EventManager.getEventListenerCache(element.dom ? element : dom, eventName).push({ fn: fn, wrap: wrap, scope: scope }); }, /** * Removes an event handler from an element. The shorthand version {@link #un} is equivalent. Typically * you will use {@link Ext.Element#removeListener} directly on an Element in favor of calling this version. * @param {String/HTMLElement} el The id or html element from which to remove the listener. * @param {String} eventName The name of the event. * @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.
*/
removeListener : function(element, eventName, fn, scope) {
// handle our listener config object syntax
if (typeof eventName !== 'string') {
EventManager.prepareListenerConfig(element, eventName, true);
return;
}
var dom = Ext.getDom(element),
el = element.dom ? element : Ext.get(dom),
cache = EventManager.getEventListenerCache(el, eventName),
bindName = EventManager.normalizeEvent(eventName).eventName,
i = cache.length, j,
listener, wrap, tasks;
while (i--) {
listener = cache[i];
if (listener && (!fn || listener.fn == fn) && (!scope || listener.scope === scope)) {
wrap = listener.wrap;
// clear buffered calls
if (wrap.task) {
clearTimeout(wrap.task);
delete wrap.task;
}
// clear delayed calls
j = wrap.tasks && wrap.tasks.length;
if (j) {
while (j--) {
clearTimeout(wrap.tasks[j]);
}
delete wrap.tasks;
}
if (dom.detachEvent) {
dom.detachEvent('on' + bindName, wrap);
} else {
dom.removeEventListener(bindName, wrap, false);
}
if (wrap && dom == doc && eventName == 'mousedown') {
EventManager.stoppedMouseDownEvent.removeListener(wrap);
}
// remove listener from cache
Ext.Array.erase(cache, i, 1);
}
}
},
/**
* Removes all event handers from an element. Typically you will use {@link Ext.Element#removeAllListeners}
* directly on an Element in favor of calling this version.
* @param {String/HTMLElement} el The id or html element from which to remove all event handlers.
*/
removeAll : function(element) {
var el = element.dom ? element : Ext.get(element),
cache, events, eventName;
if (!el) {
return;
}
cache = (el.$cache || el.getCache());
events = cache.events;
for (eventName in events) {
if (events.hasOwnProperty(eventName)) {
EventManager.removeListener(el, eventName);
}
}
cache.events = {};
},
/**
* Recursively removes all previous added listeners from an element and its children. Typically you will use {@link Ext.Element#purgeAllListeners}
* directly on an Element in favor of calling this version.
* @param {String/HTMLElement} el The id or html element from which to remove all event handlers.
* @param {String} eventName (optional) The name of the event.
*/
purgeElement : function(element, eventName) {
var dom = Ext.getDom(element),
i = 0, len;
if (eventName) {
EventManager.removeListener(element, eventName);
}
else {
EventManager.removeAll(element);
}
if (dom && dom.childNodes) {
for (len = element.childNodes.length; i < len; i++) {
EventManager.purgeElement(element.childNodes[i], eventName);
}
}
},
/**
* Create the wrapper function for the event
* @private
* @param {HTMLElement} dom The dom element
* @param {String} ename The event name
* @param {Function} fn The function to execute
* @param {Object} scope The scope to execute callback in
* @param {Object} options The options
* @return {Function} the wrapper function
*/
createListenerWrap : function(dom, ename, fn, scope, options) {
options = options || {};
var f, gen, escapeRx = /\\/g, wrap = function(e, args) {
// Compile the implementation upon first firing
if (!gen) {
f = ['if(!' + Ext.name + ') {return;}'];
if(options.buffer || options.delay || options.freezeEvent) {
f.push('e = new X.EventObjectImpl(e, ' + (options.freezeEvent ? 'true' : 'false' ) + ');');
} else {
f.push('e = X.EventObject.setEvent(e);');
}
if (options.delegate) {
// double up '\' characters so escape sequences survive the
// string-literal translation
f.push('var result, t = e.getTarget("' + (options.delegate + '').replace(escapeRx, '\\\\') + '", this);');
f.push('if(!t) {return;}');
} else {
f.push('var t = e.target, result;');
}
if (options.target) {
f.push('if(e.target !== options.target) {return;}');
}
if(options.stopEvent) {
f.push('e.stopEvent();');
} else {
if(options.preventDefault) {
f.push('e.preventDefault();');
}
if(options.stopPropagation) {
f.push('e.stopPropagation();');
}
}
if(options.normalized === false) {
f.push('e = e.browserEvent;');
}
if(options.buffer) {
f.push('(wrap.task && clearTimeout(wrap.task));');
f.push('wrap.task = setTimeout(function() {');
}
if(options.delay) {
f.push('wrap.tasks = wrap.tasks || [];');
f.push('wrap.tasks.push(setTimeout(function() {');
}
// finally call the actual handler fn
f.push('result = fn.call(scope || dom, e, t, options);');
if(options.single) {
f.push('evtMgr.removeListener(dom, ename, fn, scope);');
}
// Fire the global idle event for all events except mousemove which is too common, and
// fires too frequently and fast to be use in tiggering onIdle processing.
if (ename !== 'mousemove') {
f.push('if (evtMgr.idleEvent.listeners.length) {');
f.push('evtMgr.idleEvent.fire();');
f.push('}');
}
if(options.delay) {
f.push('}, ' + options.delay + '));');
}
if(options.buffer) {
f.push('}, ' + options.buffer + ');');
}
f.push('return result;')
gen = Ext.cacheableFunctionFactory('e', 'options', 'fn', 'scope', 'ename', 'dom', 'wrap', 'args', 'X', 'evtMgr', f.join('\n'));
}
return gen.call(dom, e, options, fn, scope, ename, dom, wrap, args, Ext, EventManager);
};
return wrap;
},
/**
* Get the event cache for a particular element for a particular event
* @private
* @param {HTMLElement} element The element
* @param {Object} eventName The event name
* @return {Array} The events for the element
*/
getEventListenerCache : function(element, eventName) {
var elementCache, eventCache;
if (!element) {
return [];
}
if (element.$cache) {
elementCache = element.$cache;
} else {
// getId will populate the cache for this element if it isn't already present
elementCache = Ext.cache[EventManager.getId(element)];
}
eventCache = elementCache.events || (elementCache.events = {});
return eventCache[eventName] || (eventCache[eventName] = []);
},
// --------------------- utility methods ---------------------
mouseLeaveRe: /(mouseout|mouseleave)/,
mouseEnterRe: /(mouseover|mouseenter)/,
/**
* Stop the event (preventDefault and stopPropagation)
* @param {Event} The event to stop
*/
stopEvent: function(event) {
EventManager.stopPropagation(event);
EventManager.preventDefault(event);
},
/**
* Cancels bubbling of the event.
* @param {Event} The event to stop bubbling.
*/
stopPropagation: function(event) {
event = event.browserEvent || event;
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
/**
* Prevents the browsers default handling of the event.
* @param {Event} The event to prevent the default
*/
preventDefault: function(event) {
event = event.browserEvent || event;
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
// Some keys events require setting the keyCode to -1 to be prevented
try {
// all ctrl + X and F1 -> F12
if (event.ctrlKey || event.keyCode > 111 && event.keyCode < 124) {
event.keyCode = -1;
}
} catch (e) {
// see this outdated document http://support.microsoft.com/kb/934364/en-us for more info
}
}
},
/**
* Gets the related target from the event.
* @param {Object} event The event
* @return {HTMLElement} The related target.
*/
getRelatedTarget: function(event) {
event = event.browserEvent || event;
var target = event.relatedTarget;
if (!target) {
if (EventManager.mouseLeaveRe.test(event.type)) {
target = event.toElement;
} else if (EventManager.mouseEnterRe.test(event.type)) {
target = event.fromElement;
}
}
return EventManager.resolveTextNode(target);
},
/**
* Gets the x coordinate from the event
* @param {Object} event The event
* @return {Number} The x coordinate
*/
getPageX: function(event) {
return EventManager.getPageXY(event)[0];
},
/**
* Gets the y coordinate from the event
* @param {Object} event The event
* @return {Number} The y coordinate
*/
getPageY: function(event) {
return EventManager.getPageXY(event)[1];
},
/**
* Gets the x & y coordinate from the event
* @param {Object} event The event
* @return {Number[]} The x/y coordinate
*/
getPageXY: function(event) {
event = event.browserEvent || event;
var x = event.pageX,
y = event.pageY,
docEl = doc.documentElement,
body = doc.body;
// pageX/pageY not available (undefined, not null), use clientX/clientY instead
if (!x && x !== 0) {
x = event.clientX + (docEl && docEl.scrollLeft || body && body.scrollLeft || 0) - (docEl && docEl.clientLeft || body && body.clientLeft || 0);
y = event.clientY + (docEl && docEl.scrollTop || body && body.scrollTop || 0) - (docEl && docEl.clientTop || body && body.clientTop || 0);
}
return [x, y];
},
/**
* Gets the target of the event.
* @param {Object} event The event
* @return {HTMLElement} target
*/
getTarget: function(event) {
event = event.browserEvent || event;
return EventManager.resolveTextNode(event.target || event.srcElement);
},
// technically no need to browser sniff this, however it makes
// no sense to check this every time, for every event, whether
// the string is equal.
/**
* Resolve any text nodes accounting for browser differences.
* @private
* @param {HTMLElement} node The node
* @return {HTMLElement} The resolved node
*/
resolveTextNode: Ext.isGecko ?
function(node) {
if (!node) {
return;
}
// work around firefox bug, https://bugzilla.mozilla.org/show_bug.cgi?id=101197
var s = HTMLElement.prototype.toString.call(node);
if (s == '[xpconnect wrapped native prototype]' || s == '[object XULElement]') {
return;
}
return node.nodeType == 3 ? node.parentNode: node;
}: function(node) {
return node && node.nodeType == 3 ? node.parentNode: node;
},
// --------------------- custom event binding ---------------------
// Keep track of the current width/height
curWidth: 0,
curHeight: 0,
/**
* Adds a listener to be notified when the browser window is resized and provides resize event buffering (100 milliseconds),
* passes new viewport width and height to handlers.
* @param {Function} fn The handler function the window resize event invokes.
* @param {Object} scope The scope (this reference) in which the handler function executes. Defaults to the browser window.
* @param {Boolean} options Options object as passed to {@link Ext.Element#addListener}
*/
onWindowResize: function(fn, scope, options) {
var resize = EventManager.resizeEvent;
if (!resize) {
EventManager.resizeEvent = resize = new Ext.util.Event();
EventManager.on(win, 'resize', EventManager.fireResize, null, {buffer: 100});
}
resize.addListener(fn, scope, options);
},
/**
* Fire the resize event.
* @private
*/
fireResize: function() {
var w = Ext.Element.getViewWidth(),
h = Ext.Element.getViewHeight();
//whacky problem in IE where the resize event will sometimes fire even though the w/h are the same.
if (EventManager.curHeight != h || EventManager.curWidth != w) {
EventManager.curHeight = h;
EventManager.curWidth = w;
EventManager.resizeEvent.fire(w, h);
}
},
/**
* Removes the passed window resize listener.
* @param {Function} fn The method the event invokes
* @param {Object} scope The scope of handler
*/
removeResizeListener: function(fn, scope) {
var resize = EventManager.resizeEvent;
if (resize) {
resize.removeListener(fn, scope);
}
},
/**
* Adds a listener to be notified when the browser window is unloaded.
* @param {Function} fn The handler function the window unload event invokes.
* @param {Object} scope The scope (this reference) in which the handler function executes. Defaults to the browser window.
* @param {Boolean} options Options object as passed to {@link Ext.Element#addListener}
*/
onWindowUnload: function(fn, scope, options) {
var unload = EventManager.unloadEvent;
if (!unload) {
EventManager.unloadEvent = unload = new Ext.util.Event();
EventManager.addListener(win, 'unload', EventManager.fireUnload);
}
if (fn) {
unload.addListener(fn, scope, options);
}
},
/**
* Fires the unload event for items bound with onWindowUnload
* @private
*/
fireUnload: function() {
// wrap in a try catch, could have some problems during unload
try {
// relinquish references.
doc = win = undefined;
var gridviews, i, ln,
el, cache;
EventManager.unloadEvent.fire();
// Work around FF3 remembering the last scroll position when refreshing the grid and then losing grid view
if (Ext.isGecko3) {
gridviews = Ext.ComponentQuery.query('gridview');
i = 0;
ln = gridviews.length;
for (; i < ln; i++) {
gridviews[i].scrollToTop();
}
}
// Purge all elements in the cache
cache = Ext.cache;
for (el in cache) {
if (cache.hasOwnProperty(el)) {
EventManager.removeAll(el);
}
}
} catch(e) {
}
},
/**
* Removes the passed window unload listener.
* @param {Function} fn The method the event invokes
* @param {Object} scope The scope of handler
*/
removeUnloadListener: function(fn, scope) {
var unload = EventManager.unloadEvent;
if (unload) {
unload.removeListener(fn, scope);
}
},
/**
* note 1: IE fires ONLY the keydown event on specialkey autorepeat
* note 2: Safari < 3.1, Gecko (Mac/Linux) & Opera fire only the keypress event on specialkey autorepeat
* (research done by Jan Wolter at http://unixpapa.com/js/key.html)
* @private
*/
useKeyDown: Ext.isWebKit ?
parseInt(navigator.userAgent.match(/AppleWebKit\/(\d+)/)[1], 10) >= 525 :
!((Ext.isGecko && !Ext.isWindows) || Ext.isOpera),
/**
* Indicates which event to use for getting key presses.
* @return {String} The appropriate event name.
*/
getKeyEvent: function() {
return EventManager.useKeyDown ? 'keydown' : 'keypress';
}
});
// route "< ie9-Standards" to a legacy IE onReady implementation
if(!('addEventListener' in document) && document.attachEvent) {
Ext.apply( EventManager, {
/* Customized implementation for Legacy IE. The default implementation is configured for use
* with all other 'standards compliant' agents.
* References: http://javascript.nwbox.com/IEContentLoaded/
* licensed courtesy of http://developer.yahoo.com/yui/license.html
*/
/**
* This strategy has minimal benefits for Sencha solutions that build themselves (ie. minimal initial page markup).
* However, progressively-enhanced pages (with image content and/or embedded frames) will benefit the most from it.
* Browser timer resolution is too poor to ensure a doScroll check more than once on a page loaded with minimal
* assets (the readystatechange event 'complete' usually beats the doScroll timer on a 'lightly-loaded' initial document).
*/
pollScroll : function() {
var scrollable = true;
try {
document.documentElement.doScroll('left');
} catch(e) {
scrollable = false;
}
// on IE8, when running within an iFrame, document.body is not immediately available
if (scrollable && document.body) {
EventManager.onReadyEvent({
type:'doScroll'
});
} else {
/*
* minimize thrashing --
* adjusted for setTimeout's close-to-minimums (not too low),
* as this method SHOULD always be called once initially
*/
EventManager.scrollTimeout = setTimeout(EventManager.pollScroll, 20);
}
return scrollable;
},
/**
* Timer for doScroll polling
* @private
*/
scrollTimeout: null,
/* @private
*/
readyStatesRe : /complete/i,
/* @private
*/
checkReadyState: function() {
var state = document.readyState;
if (EventManager.readyStatesRe.test(state)) {
EventManager.onReadyEvent({
type: state
});
}
},
bindReadyEvent: function() {
var topContext = true;
if (EventManager.hasBoundOnReady) {
return;
}
//are we in an IFRAME? (doScroll ineffective here)
try {
topContext = window.frameElement === undefined;
} catch(e) {
// If we throw an exception, it means we're probably getting access denied,
// which means we're in an iframe cross domain.
topContext = false;
}
if (!topContext || !doc.documentElement.doScroll) {
EventManager.pollScroll = Ext.emptyFn; //then noop this test altogether
}
// starts doScroll polling if necessary
if (EventManager.pollScroll() === true) {
return;
}
// Core is loaded AFTER initial document write/load ?
if (doc.readyState == 'complete' ) {
EventManager.onReadyEvent({type: 'already ' + (doc.readyState || 'body') });
} else {
doc.attachEvent('onreadystatechange', EventManager.checkReadyState);
window.attachEvent('onload', EventManager.onReadyEvent);
EventManager.hasBoundOnReady = true;
}
},
onReadyEvent : function(e) {
if (e && e.type) {
EventManager.onReadyChain.push(e.type);
}
if (EventManager.hasBoundOnReady) {
document.detachEvent('onreadystatechange', EventManager.checkReadyState);
window.detachEvent('onload', EventManager.onReadyEvent);
}
if (Ext.isNumber(EventManager.scrollTimeout)) {
clearTimeout(EventManager.scrollTimeout);
delete EventManager.scrollTimeout;
}
if (!Ext.isReady) {
EventManager.fireDocReady();
}
},
//diags: a list of event types passed to onReadyEvent (in chron order)
onReadyChain : []
});
}
/**
* Alias for {@link Ext.Loader#onReady Ext.Loader.onReady} with withDomReady set to true
* @member Ext
* @method onReady
*/
Ext.onReady = function(fn, scope, options) {
Ext.Loader.onReady(fn, scope, true, options);
};
/**
* Alias for {@link Ext.EventManager#onDocumentReady Ext.EventManager.onDocumentReady}
* @member Ext
* @method onDocumentReady
*/
Ext.onDocumentReady = EventManager.onDocumentReady;
/**
* Alias for {@link Ext.EventManager#addListener Ext.EventManager.addListener}
* @member Ext.EventManager
* @method on
*/
EventManager.on = EventManager.addListener;
/**
* Alias for {@link Ext.EventManager#removeListener Ext.EventManager.removeListener}
* @member Ext.EventManager
* @method un
*/
EventManager.un = EventManager.removeListener;
Ext.onReady(initExtCss);
};
//@tag dom,core
//@require EventManager.js
//@define Ext.EventObject
/**
* @class Ext.EventObject
Just as {@link Ext.Element} wraps around a native DOM node, Ext.EventObject
wraps the browser's native event-object normalizing cross-browser differences,
such as which mouse button is clicked, keys pressed, mechanisms to stop
event-propagation along with a method to prevent default actions from taking place.
For example:
function handleClick(e, t){ // e is not a standard event object, it is a Ext.EventObject
e.preventDefault();
var target = e.getTarget(); // same as t (the target HTMLElement)
...
}
var myDiv = {@link Ext#get Ext.get}("myDiv"); // get reference to an {@link Ext.Element}
myDiv.on( // 'on' is shorthand for addListener
"click", // perform an action on click of myDiv
handleClick // reference to the action handler
);
// other methods to do the same:
Ext.EventManager.on("myDiv", 'click', handleClick);
Ext.EventManager.addListener("myDiv", 'click', handleClick);
* @singleton
* @markdown
*/
Ext.define('Ext.EventObjectImpl', {
uses: ['Ext.util.Point'],
/** Key constant @type Number */
BACKSPACE: 8,
/** Key constant @type Number */
TAB: 9,
/** Key constant @type Number */
NUM_CENTER: 12,
/** Key constant @type Number */
ENTER: 13,
/** Key constant @type Number */
RETURN: 13,
/** Key constant @type Number */
SHIFT: 16,
/** Key constant @type Number */
CTRL: 17,
/** Key constant @type Number */
ALT: 18,
/** Key constant @type Number */
PAUSE: 19,
/** Key constant @type Number */
CAPS_LOCK: 20,
/** Key constant @type Number */
ESC: 27,
/** Key constant @type Number */
SPACE: 32,
/** Key constant @type Number */
PAGE_UP: 33,
/** Key constant @type Number */
PAGE_DOWN: 34,
/** Key constant @type Number */
END: 35,
/** Key constant @type Number */
HOME: 36,
/** Key constant @type Number */
LEFT: 37,
/** Key constant @type Number */
UP: 38,
/** Key constant @type Number */
RIGHT: 39,
/** Key constant @type Number */
DOWN: 40,
/** Key constant @type Number */
PRINT_SCREEN: 44,
/** Key constant @type Number */
INSERT: 45,
/** Key constant @type Number */
DELETE: 46,
/** Key constant @type Number */
ZERO: 48,
/** Key constant @type Number */
ONE: 49,
/** Key constant @type Number */
TWO: 50,
/** Key constant @type Number */
THREE: 51,
/** Key constant @type Number */
FOUR: 52,
/** Key constant @type Number */
FIVE: 53,
/** Key constant @type Number */
SIX: 54,
/** Key constant @type Number */
SEVEN: 55,
/** Key constant @type Number */
EIGHT: 56,
/** Key constant @type Number */
NINE: 57,
/** Key constant @type Number */
A: 65,
/** Key constant @type Number */
B: 66,
/** Key constant @type Number */
C: 67,
/** Key constant @type Number */
D: 68,
/** Key constant @type Number */
E: 69,
/** Key constant @type Number */
F: 70,
/** Key constant @type Number */
G: 71,
/** Key constant @type Number */
H: 72,
/** Key constant @type Number */
I: 73,
/** Key constant @type Number */
J: 74,
/** Key constant @type Number */
K: 75,
/** Key constant @type Number */
L: 76,
/** Key constant @type Number */
M: 77,
/** Key constant @type Number */
N: 78,
/** Key constant @type Number */
O: 79,
/** Key constant @type Number */
P: 80,
/** Key constant @type Number */
Q: 81,
/** Key constant @type Number */
R: 82,
/** Key constant @type Number */
S: 83,
/** Key constant @type Number */
T: 84,
/** Key constant @type Number */
U: 85,
/** Key constant @type Number */
V: 86,
/** Key constant @type Number */
W: 87,
/** Key constant @type Number */
X: 88,
/** Key constant @type Number */
Y: 89,
/** Key constant @type Number */
Z: 90,
/** Key constant @type Number */
CONTEXT_MENU: 93,
/** Key constant @type Number */
NUM_ZERO: 96,
/** Key constant @type Number */
NUM_ONE: 97,
/** Key constant @type Number */
NUM_TWO: 98,
/** Key constant @type Number */
NUM_THREE: 99,
/** Key constant @type Number */
NUM_FOUR: 100,
/** Key constant @type Number */
NUM_FIVE: 101,
/** Key constant @type Number */
NUM_SIX: 102,
/** Key constant @type Number */
NUM_SEVEN: 103,
/** Key constant @type Number */
NUM_EIGHT: 104,
/** Key constant @type Number */
NUM_NINE: 105,
/** Key constant @type Number */
NUM_MULTIPLY: 106,
/** Key constant @type Number */
NUM_PLUS: 107,
/** Key constant @type Number */
NUM_MINUS: 109,
/** Key constant @type Number */
NUM_PERIOD: 110,
/** Key constant @type Number */
NUM_DIVISION: 111,
/** Key constant @type Number */
F1: 112,
/** Key constant @type Number */
F2: 113,
/** Key constant @type Number */
F3: 114,
/** Key constant @type Number */
F4: 115,
/** Key constant @type Number */
F5: 116,
/** Key constant @type Number */
F6: 117,
/** Key constant @type Number */
F7: 118,
/** Key constant @type Number */
F8: 119,
/** Key constant @type Number */
F9: 120,
/** Key constant @type Number */
F10: 121,
/** Key constant @type Number */
F11: 122,
/** Key constant @type Number */
F12: 123,
/**
* The mouse wheel delta scaling factor. This value depends on browser version and OS and
* attempts to produce a similar scrolling experience across all platforms and browsers.
*
* To change this value:
*
* Ext.EventObjectImpl.prototype.WHEEL_SCALE = 72;
*
* @type Number
* @markdown
*/
WHEEL_SCALE: (function () {
var scale;
if (Ext.isGecko) {
// Firefox uses 3 on all platforms
scale = 3;
} else if (Ext.isMac) {
// Continuous scrolling devices have momentum and produce much more scroll than
// discrete devices on the same OS and browser. To make things exciting, Safari
// (and not Chrome) changed from small values to 120 (like IE).
if (Ext.isSafari && Ext.webKitVersion >= 532.0) {
// Safari changed the scrolling factor to match IE (for details see
// https://bugs.webkit.org/show_bug.cgi?id=24368). The WebKit version where this
// change was introduced was 532.0
// Detailed discussion:
// https://bugs.webkit.org/show_bug.cgi?id=29601
// http://trac.webkit.org/browser/trunk/WebKit/chromium/src/mac/WebInputEventFactory.mm#L1063
scale = 120;
} else {
// MS optical wheel mouse produces multiples of 12 which is close enough
// to help tame the speed of the continuous mice...
scale = 12;
}
// Momentum scrolling produces very fast scrolling, so increase the scale factor
// to help produce similar results cross platform. This could be even larger and
// it would help those mice, but other mice would become almost unusable as a
// result (since we cannot tell which device type is in use).
scale *= 3;
} else {
// IE, Opera and other Windows browsers use 120.
scale = 120;
}
return scale;
}()),
/**
* Simple click regex
* @private
*/
clickRe: /(dbl)?click/,
// safari keypress events for special keys return bad keycodes
safariKeys: {
3: 13, // enter
63234: 37, // left
63235: 39, // right
63232: 38, // up
63233: 40, // down
63276: 33, // page up
63277: 34, // page down
63272: 46, // delete
63273: 36, // home
63275: 35 // end
},
// normalize button clicks, don't see any way to feature detect this.
btnMap: Ext.isIE ? {
1: 0,
4: 1,
2: 2
} : {
0: 0,
1: 1,
2: 2
},
/**
* @property {Boolean} ctrlKey
* True if the control key was down during the event.
* In Mac this will also be true when meta key was down.
*/
/**
* @property {Boolean} altKey
* True if the alt key was down during the event.
*/
/**
* @property {Boolean} shiftKey
* True if the shift key was down during the event.
*/
constructor: function(event, freezeEvent){
if (event) {
this.setEvent(event.browserEvent || event, freezeEvent);
}
},
setEvent: function(event, freezeEvent){
var me = this, button, options;
if (event == me || (event && event.browserEvent)) { // already wrapped
return event;
}
me.browserEvent = event;
if (event) {
// normalize buttons
button = event.button ? me.btnMap[event.button] : (event.which ? event.which - 1 : -1);
if (me.clickRe.test(event.type) && button == -1) {
button = 0;
}
options = {
type: event.type,
button: button,
shiftKey: event.shiftKey,
// mac metaKey behaves like ctrlKey
ctrlKey: event.ctrlKey || event.metaKey || false,
altKey: event.altKey,
// in getKey these will be normalized for the mac
keyCode: event.keyCode,
charCode: event.charCode,
// cache the targets for the delayed and or buffered events
target: Ext.EventManager.getTarget(event),
relatedTarget: Ext.EventManager.getRelatedTarget(event),
currentTarget: event.currentTarget,
xy: (freezeEvent ? me.getXY() : null)
};
} else {
options = {
button: -1,
shiftKey: false,
ctrlKey: false,
altKey: false,
keyCode: 0,
charCode: 0,
target: null,
xy: [0, 0]
};
}
Ext.apply(me, options);
return me;
},
/**
* Stop the event (preventDefault and stopPropagation)
*/
stopEvent: function(){
this.stopPropagation();
this.preventDefault();
},
/**
* Prevents the browsers default handling of the event.
*/
preventDefault: function(){
if (this.browserEvent) {
Ext.EventManager.preventDefault(this.browserEvent);
}
},
/**
* Cancels bubbling of the event.
*/
stopPropagation: function(){
var browserEvent = this.browserEvent;
if (browserEvent) {
if (browserEvent.type == 'mousedown') {
Ext.EventManager.stoppedMouseDownEvent.fire(this);
}
Ext.EventManager.stopPropagation(browserEvent);
}
},
/**
* Gets the character code for the event.
* @return {Number}
*/
getCharCode: function(){
return this.charCode || this.keyCode;
},
/**
* Returns a normalized keyCode for the event.
* @return {Number} The key code
*/
getKey: function(){
return this.normalizeKey(this.keyCode || this.charCode);
},
/**
* Normalize key codes across browsers
* @private
* @param {Number} key The key code
* @return {Number} The normalized code
*/
normalizeKey: function(key){
// can't feature detect this
return Ext.isWebKit ? (this.safariKeys[key] || key) : key;
},
/**
* Gets the x coordinate of the event.
* @return {Number}
* @deprecated 4.0 Replaced by {@link #getX}
*/
getPageX: function(){
return this.getX();
},
/**
* Gets the y coordinate of the event.
* @return {Number}
* @deprecated 4.0 Replaced by {@link #getY}
*/
getPageY: function(){
return this.getY();
},
/**
* Gets the x coordinate of the event.
* @return {Number}
*/
getX: function() {
return this.getXY()[0];
},
/**
* Gets the y coordinate of the event.
* @return {Number}
*/
getY: function() {
return this.getXY()[1];
},
/**
* Gets the page coordinates of the event.
* @return {Number[]} The xy values like [x, y]
*/
getXY: function() {
if (!this.xy) {
// same for XY
this.xy = Ext.EventManager.getPageXY(this.browserEvent);
}
return this.xy;
},
/**
* Gets the target for the event.
* @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
* @param {Number/HTMLElement} 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.Element object instead of DOM node
* @return {HTMLElement}
*/
getTarget : function(selector, maxDepth, returnEl){
if (selector) {
return Ext.fly(this.target).findParent(selector, maxDepth, returnEl);
}
return returnEl ? Ext.get(this.target) : this.target;
},
/**
* Gets the related target.
* @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
* @param {Number/HTMLElement} 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.Element object instead of DOM node
* @return {HTMLElement}
*/
getRelatedTarget : function(selector, maxDepth, returnEl){
if (selector) {
return Ext.fly(this.relatedTarget).findParent(selector, maxDepth, returnEl);
}
return returnEl ? Ext.get(this.relatedTarget) : this.relatedTarget;
},
/**
* Correctly scales a given wheel delta.
* @param {Number} delta The delta value.
*/
correctWheelDelta : function (delta) {
var scale = this.WHEEL_SCALE,
ret = Math.round(delta / scale);
if (!ret && delta) {
ret = (delta < 0) ? -1 : 1; // don't allow non-zero deltas to go to zero!
}
return ret;
},
/**
* Returns the mouse wheel deltas for this event.
* @return {Object} An object with "x" and "y" properties holding the mouse wheel deltas.
*/
getWheelDeltas : function () {
var me = this,
event = me.browserEvent,
dx = 0, dy = 0; // the deltas
if (Ext.isDefined(event.wheelDeltaX)) { // WebKit has both dimensions
dx = event.wheelDeltaX;
dy = event.wheelDeltaY;
} else if (event.wheelDelta) { // old WebKit and IE
dy = event.wheelDelta;
} else if (event.detail) { // Gecko
dy = -event.detail; // gecko is backwards
// Gecko sometimes returns really big values if the user changes settings to
// scroll a whole page per scroll
if (dy > 100) {
dy = 3;
} else if (dy < -100) {
dy = -3;
}
// Firefox 3.1 adds an axis field to the event to indicate direction of
// scroll. See https://developer.mozilla.org/en/Gecko-Specific_DOM_Events
if (Ext.isDefined(event.axis) && event.axis === event.HORIZONTAL_AXIS) {
dx = dy;
dy = 0;
}
}
return {
x: me.correctWheelDelta(dx),
y: me.correctWheelDelta(dy)
};
},
/**
* Normalizes mouse wheel y-delta across browsers. To get x-delta information, use
* {@link #getWheelDeltas} instead.
* @return {Number} The mouse wheel y-delta
*/
getWheelDelta : function(){
var deltas = this.getWheelDeltas();
return deltas.y;
},
/**
* Returns true if the target of this event is a child of el. Unless the allowEl parameter is set, it will return false if if the target is el.
* Example usage:
// Handle click on any child of an element
Ext.getBody().on('click', function(e){
if(e.within('some-el')){
alert('Clicked on a child of some-el!');
}
});
// Handle click directly on an element, ignoring clicks on child nodes
Ext.getBody().on('click', function(e,t){
if((t.id == 'some-el') && !e.within(t, true)){
alert('Clicked directly on some-el!');
}
});
HTMLEvents
*MouseEvents
*UIEvents
*Returns an array of unique class names based upon the input strings, or string arrays.
*The number of parameters is unlimited.
*Example
// Add x-invalid and x-mandatory classes, do not duplicate
myElement.dom.className = Ext.core.Element.mergeClsList(this.initialClasses, 'x-invalid x-mandatory');
changed property will be true.
* @static
* @inheritable
*/
mergeClsList: function() {
var clsList, clsHash = {},
i, length, j, listLength, clsName, result = [],
changed = false;
for (i = 0, length = arguments.length; i < length; i++) {
clsList = arguments[i];
if (Ext.isString(clsList)) {
clsList = clsList.replace(trimRe, '').split(whitespaceRe);
}
if (clsList) {
for (j = 0, listLength = clsList.length; j < listLength; j++) {
clsName = clsList[j];
if (!clsHash[clsName]) {
if (i) {
changed = true;
}
clsHash[clsName] = true;
}
}
}
}
for (clsName in clsHash) {
result.push(clsName);
}
result.changed = changed;
return result;
},
/**
* Returns an array of unique class names deom the first parameter with all class names * from the second parameter removed.
*Example
// Remove x-invalid and x-mandatory classes if present.
myElement.dom.className = Ext.core.Element.removeCls(this.initialClasses, 'x-invalid x-mandatory');
existingClsList.
* @return {Array} An array of strings representing remaining class names. If class names were removed, the changed property will be true.
* @static
* @inheritable
*/
removeCls: function(existingClsList, removeClsList) {
var clsHash = {},
i, length, clsName, result = [],
changed = false;
if (existingClsList) {
if (Ext.isString(existingClsList)) {
existingClsList = existingClsList.replace(trimRe, '').split(whitespaceRe);
}
for (i = 0, length = existingClsList.length; i < length; i++) {
clsHash[existingClsList[i]] = true;
}
}
if (removeClsList) {
if (Ext.isString(removeClsList)) {
removeClsList = removeClsList.split(whitespaceRe);
}
for (i = 0, length = removeClsList.length; i < length; i++) {
clsName = removeClsList[i];
if (clsHash[clsName]) {
changed = true;
delete clsHash[clsName];
}
}
}
for (clsName in clsHash) {
result.push(clsName);
}
result.changed = changed;
return result;
},
/**
* @property
* Visibility mode constant for use with {@link Ext.dom.Element#setVisibilityMode}.
* Use the CSS 'visibility' property to hide the element.
*
* Note that in this mode, {@link Ext.dom.Element#isVisible isVisible} may return true
* for an element even though it actually has a parent element that is hidden. For this
* reason, and in most cases, using the {@link #OFFSETS} mode is a better choice.
* @static
* @inheritable
*/
VISIBILITY: 1,
/**
* @property
* Visibility mode constant for use with {@link Ext.dom.Element#setVisibilityMode}.
* Use the CSS 'display' property to hide the element.
* @static
* @inheritable
*/
DISPLAY: 2,
/**
* @property
* Visibility mode constant for use with {@link Ext.dom.Element#setVisibilityMode}.
* Use CSS absolute positioning and top/left offsets to hide the element.
* @static
* @inheritable
*/
OFFSETS: 3,
/**
* @property
* Visibility mode constant for use with {@link Ext.dom.Element#setVisibilityMode}.
* Add or remove the {@link Ext.Layer#visibilityCls} class to hide the element.
* @static
* @inheritable
*/
ASCLASS: 4
},
constructor: function(element, forceNew) {
var me = this,
dom = typeof element == 'string'
? document.getElementById(element)
: element,
id;
if (!dom) {
return null;
}
id = dom.id;
if (!forceNew && id && Ext.cache[id]) {
// element object already exists
return Ext.cache[id].el;
}
/**
* @property {HTMLElement} dom
* The DOM element
*/
me.dom = dom;
/**
* @property {String} id
* The DOM element ID
*/
me.id = id || Ext.id(dom);
me.self.addToCache(me);
},
/**
* 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=true] false to override the default setAttribute to use expandos.
* @return {Ext.dom.Element} this
*/
set: function(o, useSet) {
var el = this.dom,
attr,
value;
for (attr in o) {
if (o.hasOwnProperty(attr)) {
value = o[attr];
if (attr == 'style') {
this.applyStyles(value);
}
else if (attr == 'cls') {
el.className = value;
}
else if (useSet !== false) {
if (value === undefined) {
el.removeAttribute(attr);
} else {
el.setAttribute(attr, value);
}
}
else {
el[attr] = value;
}
}
}
return this;
},
/**
* @property {String} defaultUnit
* The default unit to append to CSS values where a unit isn't provided.
*/
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);
},
/**
* 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;
},
/**
* 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) {
Ext.removeNode(dom);
delete me.dom;
}
},
/**
* 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) {
if (!el) {
return false;
}
var me = this,
dom = el.dom || el;
// we need el-contains-itself logic here because isAncestor does not do that:
return (dom === me.dom) || Ext.dom.AbstractElement.isAncestor(me.dom, dom);
},
/**
* Returns the value of an attribute from the element's underlying DOM node.
* @param {String} name The attribute name
* @param {String} [namespace] The namespace in which to look for the attribute
* @return {String} The attribute value
*/
getAttribute: function(name, ns) {
var dom = this.dom;
return dom.getAttributeNS(ns, name) || dom.getAttribute(ns + ":" + name) || dom.getAttribute(name) || dom[name];
},
/**
* Update the innerHTML of this element
* @param {String} html The new HTML
* @return {Ext.dom.Element} this
*/
update: function(html) {
if (this.dom) {
this.dom.innerHTML = html;
}
return this;
},
/**
* Set the innerHTML of this element
* @param {String} html The new HTML
* @return {Ext.Element} this
*/
setHTML: function(html) {
if(this.dom) {
this.dom.innerHTML = html;
}
return this;
},
/**
* Returns the innerHTML of an Element or an empty string if the element's
* dom no longer exists.
*/
getHTML: function() {
return this.dom ? this.dom.innerHTML : '';
},
/**
* Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
hide: function() {
this.setVisible(false);
return this;
},
/**
* Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
show: function() {
this.setVisible(true);
return this;
},
/**
* Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
* the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
* @param {Boolean} visible Whether the element is visible
* @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
* @return {Ext.Element} this
*/
setVisible: function(visible, animate) {
var me = this,
statics = me.self,
mode = me.getVisibilityMode(),
prefix = Ext.baseCSSPrefix;
switch (mode) {
case statics.VISIBILITY:
me.removeCls([prefix + 'hidden-display', prefix + 'hidden-offsets']);
me[visible ? 'removeCls' : 'addCls'](prefix + 'hidden-visibility');
break;
case statics.DISPLAY:
me.removeCls([prefix + 'hidden-visibility', prefix + 'hidden-offsets']);
me[visible ? 'removeCls' : 'addCls'](prefix + 'hidden-display');
break;
case statics.OFFSETS:
me.removeCls([prefix + 'hidden-visibility', prefix + 'hidden-display']);
me[visible ? 'removeCls' : 'addCls'](prefix + 'hidden-offsets');
break;
}
return me;
},
getVisibilityMode: function() {
// Only flyweights won't have a $cache object, by calling getCache the cache
// will be created for future accesses. As such, we're eliminating the method
// call since it's mostly redundant
var data = (this.$cache || this.getCache()).data,
visMode = data.visibilityMode;
if (visMode === undefined) {
data.visibilityMode = visMode = this.self.DISPLAY;
}
return visMode;
},
/**
* Use this to change the visibility mode between {@link #VISIBILITY}, {@link #DISPLAY}, {@link #OFFSETS} or {@link #ASCLASS}.
*/
setVisibilityMode: function(mode) {
(this.$cache || this.getCache()).data.visibilityMode = mode;
return this;
},
getCache: function() {
var me = this,
id = me.dom.id || Ext.id(me.dom);
// Note that we do not assign an ID to the calling object here.
// An Ext.dom.Element will have one assigned at construction, and an Ext.dom.AbstractElement.Fly must not have one.
// We assign an ID to the DOM element if it does not have one.
me.$cache = Ext.cache[id] || Ext.addCacheEntry(id, null, me.dom);
return me.$cache;
}
}, function() {
var AbstractElement = this;
/**
* @private
* @member Ext
*/
Ext.getDetachedBody = function () {
var detachedEl = AbstractElement.detachedBodyEl;
if (!detachedEl) {
detachedEl = document.createElement('div');
AbstractElement.detachedBodyEl = detachedEl = new AbstractElement.Fly(detachedEl);
detachedEl.isDetachedBody = true;
}
return detachedEl;
};
/**
* @private
* @member Ext
*/
Ext.getElementById = function (id) {
var el = document.getElementById(id),
detachedBodyEl;
if (!el && (detachedBodyEl = AbstractElement.detachedBodyEl)) {
el = detachedBodyEl.dom.querySelector('#' + Ext.escapeId(id));
}
return el;
};
/**
* @member Ext
* @method get
* @inheritdoc Ext.dom.Element#get
*/
Ext.get = function(el) {
return Ext.dom.Element.get(el);
};
this.addStatics({
/**
* @class Ext.dom.AbstractElement.Fly
* @extends Ext.dom.AbstractElement
*
* A non-persistent wrapper for a DOM element which may be used to execute methods of {@link Ext.dom.Element}
* upon a DOM element without creating an instance of {@link Ext.dom.Element}.
*
* A **singleton** instance of this class is returned when you use {@link Ext#fly}
*
* Because it is a singleton, this Flyweight does not have an ID, and must be used and discarded in a single line.
* You should not keep and use the reference to this singleton over multiple lines because methods that you call
* may themselves make use of {@link Ext#fly} and may change the DOM element to which the instance refers.
*/
Fly: new Ext.Class({
extend: AbstractElement,
/**
* @property {Boolean} isFly
* This is `true` to identify Element flyweights
*/
isFly: true,
constructor: function(dom) {
this.dom = dom;
},
/**
* @private
* Attach this fliyweight instance to the passed DOM element.
*
* Note that a flightweight does **not** have an ID, and does not acquire the ID of the DOM element.
*/
attach: function (dom) {
// Attach to the passed DOM element. The same code as in Ext.Fly
this.dom = dom;
// Use cached data if there is existing cached data for the referenced DOM element,
// otherwise it will be created when needed by getCache.
this.$cache = dom.id ? Ext.cache[dom.id] : null;
return this;
}
}),
_flyweights: {},
/**
* Gets the singleton {@link Ext.dom.AbstractElement.Fly flyweight} element, with the passed node as the active element.
*
* Because it is a singleton, this Flyweight does not have an ID, and must be used and discarded in a single line.
* You may not keep and use the reference to this singleton over multiple lines because methods that you call
* may themselves make use of {@link Ext#fly} and may change the DOM element to which the instance refers.
*
* {@link Ext#fly} is alias for {@link Ext.dom.AbstractElement#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.dom.Element
* class.
*
* @param {String/HTMLElement} dom The dom node or id
* @param {String} [named] Allows for creation of named reusable flyweights to prevent conflicts (e.g.
* internally Ext uses "_global")
* @return {Ext.dom.AbstractElement.Fly} The singleton flyweight object (or null if no matching element was found)
* @static
* @member Ext.dom.AbstractElement
*/
fly: function(dom, named) {
var fly = null,
_flyweights = AbstractElement._flyweights;
named = named || '_global';
dom = Ext.getDom(dom);
if (dom) {
fly = _flyweights[named] || (_flyweights[named] = new AbstractElement.Fly());
// Attach to the passed DOM element.
// This code performs the same function as Fly.attach, but inline it for efficiency
fly.dom = dom;
// Use cached data if there is existing cached data for the referenced DOM element,
// otherwise it will be created when needed by getCache.
fly.$cache = dom.id ? Ext.cache[dom.id] : null;
}
return fly;
}
});
/**
* @member Ext
* @method fly
* @inheritdoc Ext.dom.AbstractElement#fly
*/
Ext.fly = function() {
return AbstractElement.fly.apply(AbstractElement, arguments);
};
(function (proto) {
/**
* @method destroy
* @member Ext.dom.AbstractElement
* @inheritdoc Ext.dom.AbstractElement#remove
* Alias to {@link #remove}.
*/
proto.destroy = proto.remove;
/**
* Returns a child element of this element given its `id`.
* @method getById
* @member Ext.dom.AbstractElement
* @param {String} id The id of the desired child element.
* @param {Boolean} [asDom=false] True to return the DOM element, false to return a
* wrapped Element object.
*/
if (document.querySelector) {
proto.getById = function (id, asDom) {
// for normal elements getElementById is the best solution, but if the el is
// not part of the document.body, we have to resort to querySelector
var dom = document.getElementById(id) ||
this.dom.querySelector('#'+Ext.escapeId(id));
return asDom ? dom : (dom ? Ext.get(dom) : null);
};
} else {
proto.getById = function (id, asDom) {
var dom = document.getElementById(id);
return asDom ? dom : (dom ? Ext.get(dom) : null);
};
}
}(this.prototype));
});
}());
//@tag dom,core
//@require AbstractElement.js
//@define Ext.dom.AbstractElement-static
//@define Ext.dom.AbstractElement
/**
* @class Ext.dom.AbstractElement
*/
Ext.dom.AbstractElement.addInheritableStatics({
unitRe: /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
camelRe: /(-[a-z])/gi,
cssRe: /([a-z0-9\-]+)\s*:\s*([^;\s]+(?:\s*[^;\s]+)*);?/gi,
opacityRe: /alpha\(opacity=(.*)\)/i,
propertyCache: {},
defaultUnit : "px",
borders: {l: 'border-left-width', r: 'border-right-width', t: 'border-top-width', b: 'border-bottom-width'},
paddings: {l: 'padding-left', r: 'padding-right', t: 'padding-top', b: 'padding-bottom'},
margins: {l: 'margin-left', r: 'margin-right', t: 'margin-top', b: 'margin-bottom'},
/**
* Test if size has a unit, otherwise appends the passed unit string, or the default for this Element.
* @param size {Object} The size to set
* @param units {String} The units to append to a numeric size value
* @private
* @static
*/
addUnits: function(size, units) {
// Most common case first: Size is set to a number
if (typeof size == 'number') {
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 (!this.unitRe.test(size)) {
if (Ext.isDefined(Ext.global.console)) {
Ext.global.console.warn("Warning, size detected as NaN on Element.addUnits.");
}
return size || '';
}
return size;
},
/**
* @static
* @private
*/
isAncestor: function(p, c) {
var ret = false;
p = Ext.getDom(p);
c = Ext.getDom(c);
if (p && c) {
if (p.contains) {
return p.contains(c);
} else if (p.compareDocumentPosition) {
return !!(p.compareDocumentPosition(c) & 16);
} else {
while ((c = c.parentNode)) {
ret = c == p || ret;
}
}
}
return ret;
},
/**
* Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
* (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
* @static
* @param {Number/String} box The encoded margins
* @return {Object} An object with margin sizes for top, right, bottom and left
*/
parseBox: function(box) {
if (typeof box != 'string') {
box = box.toString();
}
var parts = box.split(' '),
ln = parts.length;
if (ln == 1) {
parts[1] = parts[2] = parts[3] = parts[0];
}
else if (ln == 2) {
parts[2] = parts[0];
parts[3] = parts[1];
}
else if (ln == 3) {
parts[3] = parts[1];
}
return {
top :parseFloat(parts[0]) || 0,
right :parseFloat(parts[1]) || 0,
bottom:parseFloat(parts[2]) || 0,
left :parseFloat(parts[3]) || 0
};
},
/**
* Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
* (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
* @static
* @param {Number/String} box The encoded margins
* @param {String} units The type of units to add
* @return {String} An string with unitized (px if units is not specified) metrics for top, right, bottom and left
*/
unitizeBox: function(box, units) {
var a = this.addUnits,
b = this.parseBox(box);
return a(b.top, units) + ' ' +
a(b.right, units) + ' ' +
a(b.bottom, units) + ' ' +
a(b.left, units);
},
// private
camelReplaceFn: function(m, a) {
return a.charAt(1).toUpperCase();
},
/**
* Normalizes CSS property keys from dash delimited to camel case JavaScript Syntax.
* For example:
*
* - border-width -> borderWidth
* - padding-top -> paddingTop
*
* @static
* @param {String} prop The property to normalize
* @return {String} The normalized string
*/
normalize: function(prop) {
// TODO: Mobile optimization?
if (prop == 'float') {
prop = Ext.supports.Float ? 'cssFloat' : 'styleFloat';
}
return this.propertyCache[prop] || (this.propertyCache[prop] = prop.replace(this.camelRe, this.camelReplaceFn));
},
/**
* Retrieves the document height
* @static
* @return {Number} documentHeight
*/
getDocumentHeight: function() {
return Math.max(!Ext.isStrict ? document.body.scrollHeight : document.documentElement.scrollHeight, this.getViewportHeight());
},
/**
* Retrieves the document width
* @static
* @return {Number} documentWidth
*/
getDocumentWidth: function() {
return Math.max(!Ext.isStrict ? document.body.scrollWidth : document.documentElement.scrollWidth, this.getViewportWidth());
},
/**
* Retrieves the viewport height of the window.
* @static
* @return {Number} viewportHeight
*/
getViewportHeight: function(){
return window.innerHeight;
},
/**
* Retrieves the viewport width of the window.
* @static
* @return {Number} viewportWidth
*/
getViewportWidth: function() {
return window.innerWidth;
},
/**
* Retrieves the viewport size of the window.
* @static
* @return {Object} object containing width and height properties
*/
getViewSize: function() {
return {
width: window.innerWidth,
height: window.innerHeight
};
},
/**
* Retrieves the current orientation of the window. This is calculated by
* determing if the height is greater than the width.
* @static
* @return {String} Orientation of window: 'portrait' or 'landscape'
*/
getOrientation: function() {
if (Ext.supports.OrientationChange) {
return (window.orientation == 0) ? 'portrait' : 'landscape';
}
return (window.innerHeight > window.innerWidth) ? 'portrait' : 'landscape';
},
/**
* Returns the top Element that is located at the passed coordinates
* @static
* @param {Number} x The x coordinate
* @param {Number} y The y coordinate
* @return {String} The found Element
*/
fromPoint: function(x, y) {
return Ext.get(document.elementFromPoint(x, y));
},
/**
* Converts a CSS string into an object with a property for each style.
*
* The sample code below would return an object with 2 properties, one
* for background-color and one for color.
*
* var css = 'background-color: red;color: blue; ';
* console.log(Ext.dom.Element.parseStyles(css));
*
* @static
* @param {String} styles A CSS string
* @return {Object} styles
*/
parseStyles: function(styles){
var out = {},
cssRe = this.cssRe,
matches;
if (styles) {
// Since we're using the g flag on the regex, we need to set the lastIndex.
// This automatically happens on some implementations, but not others, see:
// http://stackoverflow.com/questions/2645273/javascript-regular-expression-literal-persists-between-function-calls
// http://blog.stevenlevithan.com/archives/fixing-javascript-regexp
cssRe.lastIndex = 0;
while ((matches = cssRe.exec(styles))) {
out[matches[1]] = matches[2];
}
}
return out;
}
});
//TODO Need serious cleanups
(function(){
var doc = document,
AbstractElement = Ext.dom.AbstractElement,
activeElement = null,
isCSS1 = doc.compatMode == "CSS1Compat",
flyInstance,
fly = function (el) {
if (!flyInstance) {
flyInstance = new AbstractElement.Fly();
}
flyInstance.attach(el);
return flyInstance;
};
// If the browser does not support document.activeElement we need some assistance.
// This covers old Safari 3.2 (4.0 added activeElement along with just about all
// other browsers). We need this support to handle issues with old Safari.
if (!('activeElement' in doc) && doc.addEventListener) {
doc.addEventListener('focus',
function (ev) {
if (ev && ev.target) {
activeElement = (ev.target == doc) ? null : ev.target;
}
}, true);
}
/*
* Helper function to create the function that will restore the selection.
*/
function makeSelectionRestoreFn (activeEl, start, end) {
return function () {
activeEl.selectionStart = start;
activeEl.selectionEnd = end;
};
}
AbstractElement.addInheritableStatics({
/**
* Returns the active element in the DOM. If the browser supports activeElement
* on the document, this is returned. If not, the focus is tracked and the active
* element is maintained internally.
* @return {HTMLElement} The active (focused) element in the document.
*/
getActiveElement: function () {
return doc.activeElement || activeElement;
},
/**
* Creates a function to call to clean up problems with the work-around for the
* WebKit RightMargin bug. The work-around is to add "display: 'inline-block'" to
* the element before calling getComputedStyle and then to restore its original
* display value. The problem with this is that it corrupts the selection of an
* INPUT or TEXTAREA element (as in the "I-beam" goes away but ths focus remains).
* To cleanup after this, we need to capture the selection of any such element and
* then restore it after we have restored the display style.
*
* @param {Ext.dom.Element} target The top-most element being adjusted.
* @private
*/
getRightMarginFixCleaner: function (target) {
var supports = Ext.supports,
hasInputBug = supports.DisplayChangeInputSelectionBug,
hasTextAreaBug = supports.DisplayChangeTextAreaSelectionBug,
activeEl,
tag,
start,
end;
if (hasInputBug || hasTextAreaBug) {
activeEl = doc.activeElement || activeElement; // save a call
tag = activeEl && activeEl.tagName;
if ((hasTextAreaBug && tag == 'TEXTAREA') ||
(hasInputBug && tag == 'INPUT' && activeEl.type == 'text')) {
if (Ext.dom.Element.isAncestor(target, activeEl)) {
start = activeEl.selectionStart;
end = activeEl.selectionEnd;
if (Ext.isNumber(start) && Ext.isNumber(end)) { // to be safe...
// We don't create the raw closure here inline because that
// will be costly even if we don't want to return it (nested
// function decls and exprs are often instantiated on entry
// regardless of whether execution ever reaches them):
return makeSelectionRestoreFn(activeEl, start, end);
}
}
}
}
return Ext.emptyFn; // avoid special cases, just return a nop
},
getViewWidth: function(full) {
return full ? Ext.dom.Element.getDocumentWidth() : Ext.dom.Element.getViewportWidth();
},
getViewHeight: function(full) {
return full ? Ext.dom.Element.getDocumentHeight() : Ext.dom.Element.getViewportHeight();
},
getDocumentHeight: function() {
return Math.max(!isCSS1 ? doc.body.scrollHeight : doc.documentElement.scrollHeight, Ext.dom.Element.getViewportHeight());
},
getDocumentWidth: function() {
return Math.max(!isCSS1 ? doc.body.scrollWidth : doc.documentElement.scrollWidth, Ext.dom.Element.getViewportWidth());
},
getViewportHeight: function(){
return Ext.isIE ?
(Ext.isStrict ? doc.documentElement.clientHeight : doc.body.clientHeight) :
self.innerHeight;
},
getViewportWidth: function() {
return (!Ext.isStrict && !Ext.isOpera) ? doc.body.clientWidth :
Ext.isIE ? doc.documentElement.clientWidth : self.innerWidth;
},
getY: function(el) {
return Ext.dom.Element.getXY(el)[1];
},
getX: function(el) {
return Ext.dom.Element.getXY(el)[0];
},
getXY: function(el) {
var bd = doc.body,
docEl = doc.documentElement,
leftBorder = 0,
topBorder = 0,
ret = [0,0],
round = Math.round,
box,
scroll;
el = Ext.getDom(el);
if(el != doc && el != bd){
// IE has the potential to throw when getBoundingClientRect called
// on element not attached to dom
if (Ext.isIE) {
try {
box = el.getBoundingClientRect();
// In some versions of IE, the documentElement (HTML element) will have a 2px border that gets included, so subtract it off
topBorder = docEl.clientTop || bd.clientTop;
leftBorder = docEl.clientLeft || bd.clientLeft;
} catch (ex) {
box = { left: 0, top: 0 };
}
} else {
box = el.getBoundingClientRect();
}
scroll = fly(document).getScroll();
ret = [round(box.left + scroll.left - leftBorder), round(box.top + scroll.top - topBorder)];
}
return ret;
},
setXY: function(el, xy) {
(el = Ext.fly(el, '_setXY')).position();
var pts = el.translatePoints(xy),
style = el.dom.style,
pos;
for (pos in pts) {
if (!isNaN(pts[pos])) {
style[pos] = pts[pos] + "px";
}
}
},
setX: function(el, x) {
Ext.dom.Element.setXY(el, [x, false]);
},
setY: function(el, y) {
Ext.dom.Element.setXY(el, [false, y]);
},
/**
* Serializes a DOM form into a url encoded string
* @param {Object} form The form
* @return {String} The url encoded form
*/
serializeForm: function(form) {
var fElements = form.elements || (document.forms[form] || Ext.getDom(form)).elements,
hasSubmit = false,
encoder = encodeURIComponent,
data = '',
eLen = fElements.length,
element, name, type, options, hasValue, e,
o, oLen, opt;
for (e = 0; e < eLen; e++) {
element = fElements[e];
name = element.name;
type = element.type;
options = element.options;
if (!element.disabled && name) {
if (/select-(one|multiple)/i.test(type)) {
oLen = options.length;
for (o = 0; o < oLen; o++) {
opt = options[o];
if (opt.selected) {
hasValue = opt.hasAttribute ? opt.hasAttribute('value') : opt.getAttributeNode('value').specified;
data += Ext.String.format("{0}={1}&", encoder(name), encoder(hasValue ? opt.value : opt.text));
}
}
} else if (!(/file|undefined|reset|button/i.test(type))) {
if (!(/radio|checkbox/i.test(type) && !element.checked) && !(type == 'submit' && hasSubmit)) {
data += encoder(name) + '=' + encoder(element.value) + '&';
hasSubmit = /submit/i.test(type);
}
}
}
}
return data.substr(0, data.length - 1);
}
});
}());
//@tag dom,core
//@require Ext.dom.AbstractElement-static
//@define Ext.dom.AbstractElement-alignment
/**
* @class Ext.dom.AbstractElement
*/
Ext.dom.AbstractElement.override({
/**
* Gets the x,y coordinates specified by the anchor position on the element.
* @param {String} [anchor] The specified anchor position (defaults to "c"). See {@link Ext.dom.Element#alignTo}
* for details on supported anchor positions.
* @param {Boolean} [local] True to get the local (element top/left-relative) anchor position instead
* of page coordinates
* @param {Object} [size] An object containing the size to use for calculating anchor position
* {width: (target width), height: (target height)} (defaults to the element's current size)
* @return {Array} [x, y] An array containing the element's x and y coordinates
*/
getAnchorXY: function(anchor, local, size) {
//Passing a different size is useful for pre-calculating anchors,
//especially for anchored animations that change the el size.
anchor = (anchor || "tl").toLowerCase();
size = size || {};
var me = this,
vp = me.dom == document.body || me.dom == document,
width = size.width || vp ? window.innerWidth: me.getWidth(),
height = size.height || vp ? window.innerHeight: me.getHeight(),
xy,
rnd = Math.round,
myXY = me.getXY(),
extraX = vp ? 0: !local ? myXY[0] : 0,
extraY = vp ? 0: !local ? myXY[1] : 0,
hash = {
c: [rnd(width * 0.5), rnd(height * 0.5)],
t: [rnd(width * 0.5), 0],
l: [0, rnd(height * 0.5)],
r: [width, rnd(height * 0.5)],
b: [rnd(width * 0.5), height],
tl: [0, 0],
bl: [0, height],
br: [width, height],
tr: [width, 0]
};
xy = hash[anchor];
return [xy[0] + extraX, xy[1] + extraY];
},
alignToRe: /^([a-z]+)-([a-z]+)(\?)?$/,
/**
* Gets the x,y coordinates to align this element with another element. See {@link Ext.dom.Element#alignTo} for more info on the
* supported position values.
* @param {Ext.Element/HTMLElement/String} element The element to align to.
* @param {String} [position="tl-bl?"] The position to align to.
* @param {Array} [offsets=[0,0]] Offset the positioning by [x, y]
* @return {Array} [x, y]
*/
getAlignToXY: function(el, position, offsets, local) {
local = !!local;
el = Ext.get(el);
if (!el || !el.dom) {
throw new Error("Element.alignToXY with an element that doesn't exist");
}
offsets = offsets || [0, 0];
if (!position || position == '?') {
position = 'tl-bl?';
}
else if (! (/-/).test(position) && position !== "") {
position = 'tl-' + position;
}
position = position.toLowerCase();
var me = this,
matches = position.match(this.alignToRe),
dw = window.innerWidth,
dh = window.innerHeight,
p1 = "",
p2 = "",
a1,
a2,
x,
y,
swapX,
swapY,
p1x,
p1y,
p2x,
p2y,
width,
height,
region,
constrain;
if (!matches) {
throw "Element.alignTo with an invalid alignment " + position;
}
p1 = matches[1];
p2 = matches[2];
constrain = !!matches[3];
//Subtract the aligned el's internal xy from the target's offset xy
//plus custom offset to get the aligned el's new offset xy
a1 = me.getAnchorXY(p1, true);
a2 = el.getAnchorXY(p2, local);
x = a2[0] - a1[0] + offsets[0];
y = a2[1] - a1[1] + offsets[1];
if (constrain) {
width = me.getWidth();
height = me.getHeight();
region = el.getPageBox();
//If we are at a viewport boundary and the aligned el is anchored on a target border that is
//perpendicular to the vp border, allow the aligned el to slide on that border,
//otherwise swap the aligned el to the opposite border of the target.
p1y = p1.charAt(0);
p1x = p1.charAt(p1.length - 1);
p2y = p2.charAt(0);
p2x = p2.charAt(p2.length - 1);
swapY = ((p1y == "t" && p2y == "b") || (p1y == "b" && p2y == "t"));
swapX = ((p1x == "r" && p2x == "l") || (p1x == "l" && p2x == "r"));
if (x + width > dw) {
x = swapX ? region.left - width: dw - width;
}
if (x < 0) {
x = swapX ? region.right: 0;
}
if (y + height > dh) {
y = swapY ? region.top - height: dh - height;
}
if (y < 0) {
y = swapY ? region.bottom: 0;
}
}
return [x, y];
},
// private
getAnchor: function(){
var data = (this.$cache || this.getCache()).data,
anchor;
if (!this.dom) {
return;
}
anchor = data._anchor;
if(!anchor){
anchor = data._anchor = {};
}
return anchor;
},
// private ==> used outside of core
adjustForConstraints: function(xy, parent) {
var vector = this.getConstrainVector(parent, xy);
if (vector) {
xy[0] += vector[0];
xy[1] += vector[1];
}
return xy;
}
});
//@tag dom,core
//@require Ext.dom.AbstractElement-alignment
//@define Ext.dom.AbstractElement-insertion
//@define Ext.dom.AbstractElement
/**
* @class Ext.dom.AbstractElement
*/
Ext.dom.AbstractElement.addMethods({
/**
* Appends the passed element(s) to this element
* @param {String/HTMLElement/Ext.dom.AbstractElement} el
* The id of the node, a DOM Node or an existing Element.
* @return {Ext.dom.AbstractElement} This element
*/
appendChild: function(el) {
return Ext.get(el).appendTo(this);
},
/**
* Appends this element to the passed element
* @param {String/HTMLElement/Ext.dom.AbstractElement} el The new parent element.
* The id of the node, a DOM Node or an existing Element.
* @return {Ext.dom.AbstractElement} This element
*/
appendTo: function(el) {
Ext.getDom(el).appendChild(this.dom);
return this;
},
/**
* Inserts this element before the passed element in the DOM
* @param {String/HTMLElement/Ext.dom.AbstractElement} el The element before which this element will be inserted.
* The id of the node, a DOM Node or an existing Element.
* @return {Ext.dom.AbstractElement} This element
*/
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 {String/HTMLElement/Ext.dom.AbstractElement} el The element to insert after.
* The id of the node, a DOM Node or an existing Element.
* @return {Ext.dom.AbstractElement} This element
*/
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 {String/HTMLElement/Ext.dom.AbstractElement/Object} el The id or element to insert or a DomHelper config
* to create and insert
* @return {Ext.dom.AbstractElement} 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 {String/HTMLElement/Ext.dom.AbstractElement/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='before'] 'before' or 'after'
* @param {Boolean} [returnDom=false] True to return the .;ll;l,raw DOM element instead of Ext.dom.AbstractElement
* @return {Ext.dom.AbstractElement} The inserted Element. If an array is passed, the last inserted element is returned.
*/
insertSibling: function(el, where, returnDom){
var me = this,
isAfter = (where || 'before').toLowerCase() == 'after',
rt, insertEl, eLen, e;
if (Ext.isArray(el)) {
insertEl = me;
eLen = el.length;
for (e = 0; e < eLen; e++) {
rt = Ext.fly(insertEl, '_internal').insertSibling(el[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 {String/HTMLElement/Ext.dom.AbstractElement} el The element to replace.
* The id of the node, a DOM Node or an existing Element.
* @return {Ext.dom.AbstractElement} This element
*/
replace: function(el) {
el = Ext.get(el);
this.insertBefore(el);
el.remove();
return this;
},
/**
* Replaces this element with the passed element
* @param {String/HTMLElement/Ext.dom.AbstractElement/Object} el The new element (id of the node, a DOM Node
* or an existing Element) or a DomHelper config of an element to create
* @return {Ext.dom.AbstractElement} This element
*/
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.dom.AbstractElement.addToCache(me.isFlyweight ? new Ext.dom.AbstractElement(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] a child element of this element
* @param {Boolean} [returnDom=false] true to return the dom node instead of creating an Element
* @return {Ext.dom.AbstractElement} 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] DomHelper element config object for the wrapper element or null for an empty div
* @param {Boolean} [returnDom=false] True to return the raw DOM element instead of Ext.dom.AbstractElement
* @param {String} [selector] A {@link Ext.dom.Query DomQuery} selector to select a descendant node within the created element to use as the wrapping element.
* @return {HTMLElement/Ext.dom.AbstractElement} The newly created wrapper element
*/
wrap: function(config, returnDom, selector) {
var newEl = Ext.core.DomHelper.insertBefore(this.dom, config || {tag: "div"}, true),
target = newEl;
if (selector) {
target = Ext.DomQuery.selectNode(selector, newEl.dom);
}
target.appendChild(this.dom);
return returnDom ? newEl.dom : 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.
* See {@link Ext.dom.Helper#insertHtml} for details.
* @param {String} html The HTML fragment
* @param {Boolean} [returnEl=false] True to return an Ext.dom.AbstractElement
* @return {HTMLElement/Ext.dom.AbstractElement} 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;
}
});
//@tag dom,core
//@require Ext.dom.AbstractElement-insertion
//@define Ext.dom.AbstractElement-position
//@define Ext.dom.AbstractElement
/**
* @class Ext.dom.AbstractElement
*/
(function(){
var Element = Ext.dom.AbstractElement;
Element.override({
/**
* Gets the current X position of the element based on page coordinates. Element must be part of the DOM
* tree to have page coordinates (display:none or elements not appended return false).
* @return {Number} The X position of the element
*/
getX: function(el) {
return this.getXY(el)[0];
},
/**
* Gets the current Y position of the element based on page coordinates. Element must be part of the DOM
* tree to have page coordinates (display:none or elements not appended return false).
* @return {Number} The Y position of the element
*/
getY: function(el) {
return this.getXY(el)[1];
},
/**
* Gets the current position of the element based on page coordinates. Element must be part of the DOM
* tree to have page coordinates (display:none or elements not appended return false).
* @return {Array} The XY position of the element
*/
getXY: function() {
// @FEATUREDETECT
var point = window.webkitConvertPointFromNodeToPage(this.dom, new WebKitPoint(0, 0));
return [point.x, point.y];
},
/**
* Returns the offsets of this element from the passed element. Both element must be part of the DOM
* tree and not have display:none to have page coordinates.
* @param {Ext.Element/HTMLElement/String} element The element to get the offsets from.
* @return {Array} The XY page offsets (e.g. [100, -200])
*/
getOffsetsTo: function(el){
var o = this.getXY(),
e = Ext.fly(el, '_internal').getXY();
return [o[0]-e[0],o[1]-e[1]];
},
/**
* Sets the X position of the element based on page coordinates. Element must be part of the DOM tree
* to have page coordinates (display:none or elements not appended return false).
* @param {Number} The X position of the element
* @param {Boolean/Object} [animate] True for the default animation, or a standard Element
* animation config object
* @return {Ext.dom.AbstractElement} this
*/
setX: function(x){
return this.setXY([x, this.getY()]);
},
/**
* Sets the Y position of the element based on page coordinates. Element must be part of the DOM tree
* to have page coordinates (display:none or elements not appended return false).
* @param {Number} The Y position of the element
* @param {Boolean/Object} [animate] True for the default animation, or a standard Element
* animation config object
* @return {Ext.dom.AbstractElement} this
*/
setY: function(y) {
return this.setXY([this.getX(), y]);
},
/**
* Sets the element's left position directly using CSS style (instead of {@link #setX}).
* @param {String} left The left CSS property value
* @return {Ext.dom.AbstractElement} this
*/
setLeft: function(left) {
this.setStyle('left', Element.addUnits(left));
return this;
},
/**
* Sets the element's top position directly using CSS style (instead of {@link #setY}).
* @param {String} top The top CSS property value
* @return {Ext.dom.AbstractElement} this
*/
setTop: function(top) {
this.setStyle('top', Element.addUnits(top));
return this;
},
/**
* Sets the element's CSS right style.
* @param {String} right The right CSS property value
* @return {Ext.dom.AbstractElement} this
*/
setRight: function(right) {
this.setStyle('right', Element.addUnits(right));
return this;
},
/**
* Sets the element's CSS bottom style.
* @param {String} bottom The bottom CSS property value
* @return {Ext.dom.AbstractElement} this
*/
setBottom: function(bottom) {
this.setStyle('bottom', Element.addUnits(bottom));
return this;
},
/**
* Sets the position of the element in page coordinates, regardless of how the element is positioned.
* The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
* @param {Array} pos Contains X & Y [x, y] values for new position (coordinates are page-based)
* @param {Boolean/Object} [animate] True for the default animation, or a standard Element animation config object
* @return {Ext.dom.AbstractElement} this
*/
setXY: function(pos) {
var me = this,
pts,
style,
pt;
if (arguments.length > 1) {
pos = [pos, arguments[1]];
}
// me.position();
pts = me.translatePoints(pos);
style = me.dom.style;
for (pt in pts) {
if (!pts.hasOwnProperty(pt)) {
continue;
}
if (!isNaN(pts[pt])) {
style[pt] = pts[pt] + "px";
}
}
return me;
},
/**
* Gets the left X coordinate
* @param {Boolean} local True to get the local css position instead of page coordinate
* @return {Number}
*/
getLeft: function(local) {
return parseInt(this.getStyle('left'), 10) || 0;
},
/**
* Gets the right X coordinate of the element (element X position + element width)
* @param {Boolean} local True to get the local css position instead of page coordinate
* @return {Number}
*/
getRight: function(local) {
return parseInt(this.getStyle('right'), 10) || 0;
},
/**
* Gets the top Y coordinate
* @param {Boolean} local True to get the local css position instead of page coordinate
* @return {Number}
*/
getTop: function(local) {
return parseInt(this.getStyle('top'), 10) || 0;
},
/**
* Gets the bottom Y coordinate of the element (element Y position + element height)
* @param {Boolean} local True to get the local css position instead of page coordinate
* @return {Number}
*/
getBottom: function(local) {
return parseInt(this.getStyle('bottom'), 10) || 0;
},
/**
* Translates the passed page coordinates into left/top css values for this element
* @param {Number/Array} x The page x or an array containing [x, y]
* @param {Number} [y] The page y, required if x is not an array
* @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)}
*/
translatePoints: function(x, y) {
y = isNaN(x[1]) ? y : x[1];
x = isNaN(x[0]) ? x : x[0];
var me = this,
relative = me.isStyle('position', 'relative'),
o = me.getXY(),
l = parseInt(me.getStyle('left'), 10),
t = parseInt(me.getStyle('top'), 10);
l = !isNaN(l) ? l : (relative ? 0 : me.dom.offsetLeft);
t = !isNaN(t) ? t : (relative ? 0 : me.dom.offsetTop);
return {left: (x - o[0] + l), top: (y - o[1] + t)};
},
/**
* Sets the element's box. Use getBox() on another element to get a box obj.
* If animate is true then width, height, x and y will be animated concurrently.
* @param {Object} box The box to fill {x, y, width, height}
* @param {Boolean} [adjust] Whether to adjust for box-model issues automatically
* @param {Boolean/Object} [animate] true for the default animation or a standard
* Element animation config object
* @return {Ext.dom.AbstractElement} this
*/
setBox: function(box) {
var me = this,
width = box.width,
height = box.height,
top = box.top,
left = box.left;
if (left !== undefined) {
me.setLeft(left);
}
if (top !== undefined) {
me.setTop(top);
}
if (width !== undefined) {
me.setWidth(width);
}
if (height !== undefined) {
me.setHeight(height);
}
return this;
},
/**
* Return an object defining the area of this Element which can be passed to {@link #setBox} to
* set another Element's size/location to match this element.
*
* @param {Boolean} [contentBox] If true a box for the content of the element is returned.
* @param {Boolean} [local] If true the element's left and top are returned instead of page x/y.
* @return {Object} box An object in the format:
*
* {
* x: paragraph one
*paragraph two
*paragraph three
*
* Value Description
* ----- -----------------------------
* tl The top left corner (default)
* t The center of the top edge
* tr The top right corner
* l The center of the left edge
* c In the center of the element
* r The center of the right edge
* bl The bottom left corner
* b The center of the bottom edge
* br The bottom right corner
*
*
* Example Usage:
*
* // align el to other-el using the default positioning ("tl-bl", non-constrained)
* el.alignTo("other-el");
*
* // align the top left corner of el with the top right corner of other-el (constrained to viewport)
* el.alignTo("other-el", "tr?");
*
* // align the bottom right corner of el with the center left edge of other-el
* el.alignTo("other-el", "br-l?");
*
* // align the center of el with the bottom left corner of other-el and
* // adjust the x position by -6 pixels (and the y position by 0)
* el.alignTo("other-el", "c-bl", [-6, 0]);
*
* @param {String/HTMLElement/Ext.Element} element The element to align to.
* @param {String} [position="tl-bl?"] The position to align to
* @param {Number[]} [offsets] Offset the positioning by [x, y]
* @param {Boolean/Object} [animate] true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
alignTo: function(element, position, offsets, animate) {
var me = this;
return me.setXY(me.getAlignToXY(element, position, offsets),
me.anim && !!animate ? me.anim(animate) : false);
},
/**
* Returns the `[X, Y]` vector by which this element must be translated to make a best attempt
* to constrain within the passed constraint. Returns `false` is this element does not need to be moved.
*
* Priority is given to constraining the top and left within the constraint.
*
* The constraint may either be an existing element into which this element is to be constrained, or
* an {@link Ext.util.Region Region} into which this element is to be constrained.
*
* @param {Ext.Element/Ext.util.Region} constrainTo The Element or Region into which this element is to be constrained.
* @param {Number[]} proposedPosition A proposed `[X, Y]` position to test for validity and to produce a vector for instead
* of using this Element's current position;
* @returns {Number[]/Boolean} **If** this element *needs* to be translated, an `[X, Y]`
* vector by which this element must be translated. Otherwise, `false`.
*/
getConstrainVector: function(constrainTo, proposedPosition) {
if (!(constrainTo instanceof Ext.util.Region)) {
constrainTo = Ext.get(constrainTo).getViewRegion();
}
var thisRegion = this.getRegion(),
vector = [0, 0],
shadowSize = (this.shadow && !this.shadowDisabled) ? this.shadow.getShadowSize() : undefined,
overflowed = false;
// Shift this region to occupy the proposed position
if (proposedPosition) {
thisRegion.translateBy(proposedPosition[0] - thisRegion.x, proposedPosition[1] - thisRegion.y);
}
// Reduce the constrain region to allow for shadow
if (shadowSize) {
constrainTo.adjust(shadowSize[0], -shadowSize[1], -shadowSize[2], shadowSize[3]);
}
// Constrain the X coordinate by however much this Element overflows
if (thisRegion.right > constrainTo.right) {
overflowed = true;
vector[0] = (constrainTo.right - thisRegion.right); // overflowed the right
}
if (thisRegion.left + vector[0] < constrainTo.left) {
overflowed = true;
vector[0] = (constrainTo.left - thisRegion.left); // overflowed the left
}
// Constrain the Y coordinate by however much this Element overflows
if (thisRegion.bottom > constrainTo.bottom) {
overflowed = true;
vector[1] = (constrainTo.bottom - thisRegion.bottom); // overflowed the bottom
}
if (thisRegion.top + vector[1] < constrainTo.top) {
overflowed = true;
vector[1] = (constrainTo.top - thisRegion.top); // overflowed the top
}
return overflowed ? vector : false;
},
/**
* Calculates the x, y to center this element on the screen
* @return {Number[]} The x, y values [x, y]
*/
getCenterXY : function(){
return this.getAlignToXY(doc, 'c-c');
},
/**
* Centers the Element in either the viewport, or another Element.
* @param {String/HTMLElement/Ext.Element} [centerIn] The element in which to center the element.
*/
center : function(centerIn){
return this.alignTo(centerIn || doc, 'c-c');
}
};
}()));
//@tag dom,core
//@require Ext.dom.Element-alignment
//@define Ext.dom.Element-anim
//@define Ext.dom.Element
/**
* @class Ext.dom.Element
*/
/* ================================
* A Note About Wrapped Animations
* ================================
* A few of the effects below implement two different animations per effect, one wrapping
* animation that performs the visual effect and a "no-op" animation on this Element where
* no attributes of the element itself actually change. The purpose for this is that the
* wrapper is required for the effect to work and so it does the actual animation work, but
* we always animate `this` so that the element's events and callbacks work as expected to
* the callers of this API.
*
* Because of this, we always want each wrap animation to complete first (we don't want to
* cut off the visual effect early). To ensure that, we arbitrarily increase the duration of
* the element's no-op animation, also ensuring that it has a decent minimum value -- on slow
* systems, too-low durations can cause race conditions between the wrap animation and the
* element animation being removed out of order. Note that in each wrap's `afteranimate`
* callback it will explicitly terminate the element animation as soon as the wrap is complete,
* so there's no real danger in making the duration too long.
*
* This applies to all effects that get wrapped, including slideIn, slideOut, switchOff and frame.
*/
Ext.dom.Element.override({
/**
* Performs custom animation on this Element.
*
* The following properties may be specified in `from`, `to`, and `keyframe` objects:
*
* - `x` - The page X position in pixels.
*
* - `y` - The page Y position in pixels
*
* - `left` - The element's CSS `left` value. Units must be supplied.
*
* - `top` - The element's CSS `top` value. Units must be supplied.
*
* - `width` - The element's CSS `width` value. Units must be supplied.
*
* - `height` - The element's CSS `height` value. Units must be supplied.
*
* - `scrollLeft` - The element's `scrollLeft` value.
*
* - `scrollTop` - The element's `scrollTop` value.
*
* - `opacity` - The element's `opacity` value. This must be a value between `0` and `1`.
*
* **Be aware** that animating an Element which is being used by an Ext Component without in some way informing the
* Component about the changed element state will result in incorrect Component behaviour. This is because the
* Component will be using the old state of the element. To avoid this problem, it is now possible to directly
* animate certain properties of Components.
*
* @param {Object} config Configuration for {@link Ext.fx.Anim}.
* Note that the {@link Ext.fx.Anim#to to} config is required.
* @return {Ext.dom.Element} this
*/
animate: function(config) {
var me = this,
listeners,
anim,
animId = me.dom.id || Ext.id(me.dom);
if (!Ext.fx.Manager.hasFxBlock(animId)) {
// Bit of gymnastics here to ensure our internal listeners get bound first
if (config.listeners) {
listeners = config.listeners;
delete config.listeners;
}
if (config.internalListeners) {
config.listeners = config.internalListeners;
delete config.internalListeners;
}
anim = new Ext.fx.Anim(me.anim(config));
if (listeners) {
anim.on(listeners);
}
Ext.fx.Manager.queueFx(anim);
}
return me;
},
// @private - process the passed fx configuration.
anim: function(config) {
if (!Ext.isObject(config)) {
return (config) ? {} : false;
}
var me = this,
duration = config.duration || Ext.fx.Anim.prototype.duration,
easing = config.easing || 'ease',
animConfig;
if (config.stopAnimation) {
me.stopAnimation();
}
Ext.applyIf(config, Ext.fx.Manager.getFxDefaults(me.id));
// Clear any 'paused' defaults.
Ext.fx.Manager.setFxDefaults(me.id, {
delay: 0
});
animConfig = {
// Pass the DOM reference. That's tested first so will be converted to an Ext.fx.Target fastest.
target: me.dom,
remove: config.remove,
alternate: config.alternate || false,
duration: duration,
easing: easing,
callback: config.callback,
listeners: config.listeners,
iterations: config.iterations || 1,
scope: config.scope,
block: config.block,
concurrent: config.concurrent,
delay: config.delay || 0,
paused: true,
keyframes: config.keyframes,
from: config.from || {},
to: Ext.apply({}, config)
};
Ext.apply(animConfig.to, config.to);
// Anim API properties - backward compat
delete animConfig.to.to;
delete animConfig.to.from;
delete animConfig.to.remove;
delete animConfig.to.alternate;
delete animConfig.to.keyframes;
delete animConfig.to.iterations;
delete animConfig.to.listeners;
delete animConfig.to.target;
delete animConfig.to.paused;
delete animConfig.to.callback;
delete animConfig.to.scope;
delete animConfig.to.duration;
delete animConfig.to.easing;
delete animConfig.to.concurrent;
delete animConfig.to.block;
delete animConfig.to.stopAnimation;
delete animConfig.to.delay;
return animConfig;
},
/**
* Slides the element into view. An anchor point can be optionally passed to set the point of origin for the slide
* effect. This function automatically handles wrapping the element with a fixed-size container if needed. See the
* Fx class overview for valid anchor point options. Usage:
*
* // default: slide the element in from the top
* el.slideIn();
*
* // custom: slide the element in from the right with a 2-second duration
* el.slideIn('r', { duration: 2000 });
*
* // common config options shown with default values
* el.slideIn('t', {
* easing: 'easeOut',
* duration: 500
* });
*
* @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
* @param {Object} options (optional) Object literal with any of the Fx config options
* @param {Boolean} options.preserveScroll Set to true if preservation of any descendant elements'
* `scrollTop` values is required. By default the DOM wrapping operation performed by `slideIn` and
* `slideOut` causes the browser to lose all scroll positions.
* @return {Ext.dom.Element} The Element
*/
slideIn: function(anchor, obj, slideOut) {
var me = this,
elStyle = me.dom.style,
beforeAnim,
wrapAnim,
restoreScroll,
wrapDomParentNode;
anchor = anchor || "t";
obj = obj || {};
beforeAnim = function() {
var animScope = this,
listeners = obj.listeners,
box, originalStyles, anim, wrap;
if (!slideOut) {
me.fixDisplay();
}
box = me.getBox();
if ((anchor == 't' || anchor == 'b') && box.height === 0) {
box.height = me.dom.scrollHeight;
}
else if ((anchor == 'l' || anchor == 'r') && box.width === 0) {
box.width = me.dom.scrollWidth;
}
originalStyles = me.getStyles('width', 'height', 'left', 'right', 'top', 'bottom', 'position', 'z-index', true);
me.setSize(box.width, box.height);
// Cache all descendants' scrollTop & scrollLeft values if configured to preserve scroll.
if (obj.preserveScroll) {
restoreScroll = me.cacheScrollValues();
}
wrap = me.wrap({
id: Ext.id() + '-anim-wrap-for-' + me.id,
style: {
visibility: slideOut ? 'visible' : 'hidden'
}
});
wrapDomParentNode = wrap.dom.parentNode;
wrap.setPositioning(me.getPositioning());
if (wrap.isStyle('position', 'static')) {
wrap.position('relative');
}
me.clearPositioning('auto');
wrap.clip();
// The wrap will have reset all descendant scrollTops. Restore them if we cached them.
if (restoreScroll) {
restoreScroll();
}
// This element is temporarily positioned absolute within its wrapper.
// Restore to its default, CSS-inherited visibility setting.
// We cannot explicitly poke visibility:visible into its style because that overrides the visibility of the wrap.
me.setStyle({
visibility: '',
position: 'absolute'
});
if (slideOut) {
wrap.setSize(box.width, box.height);
}
switch (anchor) {
case 't':
anim = {
from: {
width: box.width + 'px',
height: '0px'
},
to: {
width: box.width + 'px',
height: box.height + 'px'
}
};
elStyle.bottom = '0px';
break;
case 'l':
anim = {
from: {
width: '0px',
height: box.height + 'px'
},
to: {
width: box.width + 'px',
height: box.height + 'px'
}
};
elStyle.right = '0px';
break;
case 'r':
anim = {
from: {
x: box.x + box.width,
width: '0px',
height: box.height + 'px'
},
to: {
x: box.x,
width: box.width + 'px',
height: box.height + 'px'
}
};
break;
case 'b':
anim = {
from: {
y: box.y + box.height,
width: box.width + 'px',
height: '0px'
},
to: {
y: box.y,
width: box.width + 'px',
height: box.height + 'px'
}
};
break;
case 'tl':
anim = {
from: {
x: box.x,
y: box.y,
width: '0px',
height: '0px'
},
to: {
width: box.width + 'px',
height: box.height + 'px'
}
};
elStyle.bottom = '0px';
elStyle.right = '0px';
break;
case 'bl':
anim = {
from: {
y: box.y + box.height,
width: '0px',
height: '0px'
},
to: {
y: box.y,
width: box.width + 'px',
height: box.height + 'px'
}
};
elStyle.bottom = '0px';
break;
case 'br':
anim = {
from: {
x: box.x + box.width,
y: box.y + box.height,
width: '0px',
height: '0px'
},
to: {
x: box.x,
y: box.y,
width: box.width + 'px',
height: box.height + 'px'
}
};
break;
case 'tr':
anim = {
from: {
x: box.x + box.width,
width: '0px',
height: '0px'
},
to: {
x: box.x,
width: box.width + 'px',
height: box.height + 'px'
}
};
elStyle.right = '0px';
break;
}
wrap.show();
wrapAnim = Ext.apply({}, obj);
delete wrapAnim.listeners;
wrapAnim = new Ext.fx.Anim(Ext.applyIf(wrapAnim, {
target: wrap,
duration: 500,
easing: 'ease-out',
from: slideOut ? anim.to : anim.from,
to: slideOut ? anim.from : anim.to
}));
// In the absence of a callback, this listener MUST be added first
wrapAnim.on('afteranimate', function() {
me.setStyle(originalStyles);
if (slideOut) {
if (obj.useDisplay) {
me.setDisplayed(false);
} else {
me.hide();
}
}
if (wrap.dom) {
if (wrap.dom.parentNode) {
wrap.dom.parentNode.insertBefore(me.dom, wrap.dom);
} else {
wrapDomParentNode.appendChild(me.dom);
}
wrap.remove();
}
// The unwrap will have reset all descendant scrollTops. Restore them if we cached them.
if (restoreScroll) {
restoreScroll();
}
// kill the no-op element animation created below
animScope.end();
});
// Add configured listeners after
if (listeners) {
wrapAnim.on(listeners);
}
};
me.animate({
// See "A Note About Wrapped Animations" at the top of this class:
duration: obj.duration ? Math.max(obj.duration, 500) * 2 : 1000,
listeners: {
beforeanimate: beforeAnim // kick off the wrap animation
}
});
return me;
},
/**
* Slides the element out of view. An anchor point can be optionally passed to set the end point for the slide
* effect. When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will
* still take up space in the document. The element must be removed from the DOM using the 'remove' config option if
* desired. This function automatically handles wrapping the element with a fixed-size container if needed. See the
* Fx class overview for valid anchor point options. Usage:
*
* // default: slide the element out to the top
* el.slideOut();
*
* // custom: slide the element out to the right with a 2-second duration
* el.slideOut('r', { duration: 2000 });
*
* // common config options shown with default values
* el.slideOut('t', {
* easing: 'easeOut',
* duration: 500,
* remove: false,
* useDisplay: false
* });
*
* @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
* @param {Object} options (optional) Object literal with any of the Fx config options
* @return {Ext.dom.Element} The Element
*/
slideOut: function(anchor, o) {
return this.slideIn(anchor, o, true);
},
/**
* Fades the element out while slowly expanding it in all directions. When the effect is completed, the element will
* be hidden (visibility = 'hidden') but block elements will still take up space in the document. Usage:
*
* // default
* el.puff();
*
* // common config options shown with default values
* el.puff({
* easing: 'easeOut',
* duration: 500,
* useDisplay: false
* });
*
* @param {Object} options (optional) Object literal with any of the Fx config options
* @return {Ext.dom.Element} The Element
*/
puff: function(obj) {
var me = this,
beforeAnim,
box = me.getBox(),
originalStyles = me.getStyles('width', 'height', 'left', 'right', 'top', 'bottom', 'position', 'z-index', 'font-size', 'opacity', true);
obj = Ext.applyIf(obj || {}, {
easing: 'ease-out',
duration: 500,
useDisplay: false
});
beforeAnim = function() {
me.clearOpacity();
me.show();
this.to = {
width: box.width * 2,
height: box.height * 2,
x: box.x - (box.width / 2),
y: box.y - (box.height /2),
opacity: 0,
fontSize: '200%'
};
this.on('afteranimate',function() {
if (me.dom) {
if (obj.useDisplay) {
me.setDisplayed(false);
} else {
me.hide();
}
me.setStyle(originalStyles);
obj.callback.call(obj.scope);
}
});
};
me.animate({
duration: obj.duration,
easing: obj.easing,
listeners: {
beforeanimate: {
fn: beforeAnim
}
}
});
return me;
},
/**
* Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
* When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still
* take up space in the document. The element must be removed from the DOM using the 'remove' config option if
* desired. Usage:
*
* // default
* el.switchOff();
*
* // all config options shown with default values
* el.switchOff({
* easing: 'easeIn',
* duration: .3,
* remove: false,
* useDisplay: false
* });
*
* @param {Object} options (optional) Object literal with any of the Fx config options
* @return {Ext.dom.Element} The Element
*/
switchOff: function(obj) {
var me = this,
beforeAnim;
obj = Ext.applyIf(obj || {}, {
easing: 'ease-in',
duration: 500,
remove: false,
useDisplay: false
});
beforeAnim = function() {
var animScope = this,
size = me.getSize(),
xy = me.getXY(),
keyframe, position;
me.clearOpacity();
me.clip();
position = me.getPositioning();
keyframe = new Ext.fx.Animator({
target: me,
duration: obj.duration,
easing: obj.easing,
keyframes: {
33: {
opacity: 0.3
},
66: {
height: 1,
y: xy[1] + size.height / 2
},
100: {
width: 1,
x: xy[0] + size.width / 2
}
}
});
keyframe.on('afteranimate', function() {
if (obj.useDisplay) {
me.setDisplayed(false);
} else {
me.hide();
}
me.clearOpacity();
me.setPositioning(position);
me.setSize(size);
// kill the no-op element animation created below
animScope.end();
});
};
me.animate({
// See "A Note About Wrapped Animations" at the top of this class:
duration: (Math.max(obj.duration, 500) * 2),
listeners: {
beforeanimate: {
fn: beforeAnim
}
}
});
return me;
},
/**
* Shows a ripple of exploding, attenuating borders to draw attention to an Element. Usage:
*
* // default: a single light blue ripple
* el.frame();
*
* // custom: 3 red ripples lasting 3 seconds total
* el.frame("#ff0000", 3, { duration: 3000 });
*
* // common config options shown with default values
* el.frame("#C3DAF9", 1, {
* duration: 1000 // duration of each individual ripple.
* // Note: Easing is not configurable and will be ignored if included
* });
*
* @param {String} [color='#C3DAF9'] The hex color value for the border.
* @param {Number} [count=1] The number of ripples to display.
* @param {Object} [options] Object literal with any of the Fx config options
* @return {Ext.dom.Element} The Element
*/
frame : function(color, count, obj){
var me = this,
beforeAnim;
color = color || '#C3DAF9';
count = count || 1;
obj = obj || {};
beforeAnim = function() {
me.show();
var animScope = this,
box = me.getBox(),
proxy = Ext.getBody().createChild({
id: me.id + '-anim-proxy',
style: {
position : 'absolute',
'pointer-events': 'none',
'z-index': 35000,
border : '0px solid ' + color
}
}),
proxyAnim;
proxyAnim = new Ext.fx.Anim({
target: proxy,
duration: obj.duration || 1000,
iterations: count,
from: {
top: box.y,
left: box.x,
borderWidth: 0,
opacity: 1,
height: box.height,
width: box.width
},
to: {
top: box.y - 20,
left: box.x - 20,
borderWidth: 10,
opacity: 0,
height: box.height + 40,
width: box.width + 40
}
});
proxyAnim.on('afteranimate', function() {
proxy.remove();
// kill the no-op element animation created below
animScope.end();
});
};
me.animate({
// See "A Note About Wrapped Animations" at the top of this class:
duration: (Math.max(obj.duration, 500) * 2) || 2000,
listeners: {
beforeanimate: {
fn: beforeAnim
}
}
});
return me;
},
/**
* Slides the element while fading it out of view. An anchor point can be optionally passed to set the ending point
* of the effect. Usage:
*
* // default: slide the element downward while fading out
* el.ghost();
*
* // custom: slide the element out to the right with a 2-second duration
* el.ghost('r', { duration: 2000 });
*
* // common config options shown with default values
* el.ghost('b', {
* easing: 'easeOut',
* duration: 500
* });
*
* @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')
* @param {Object} options (optional) Object literal with any of the Fx config options
* @return {Ext.dom.Element} The Element
*/
ghost: function(anchor, obj) {
var me = this,
beforeAnim;
anchor = anchor || "b";
beforeAnim = function() {
var width = me.getWidth(),
height = me.getHeight(),
xy = me.getXY(),
position = me.getPositioning(),
to = {
opacity: 0
};
switch (anchor) {
case 't':
to.y = xy[1] - height;
break;
case 'l':
to.x = xy[0] - width;
break;
case 'r':
to.x = xy[0] + width;
break;
case 'b':
to.y = xy[1] + height;
break;
case 'tl':
to.x = xy[0] - width;
to.y = xy[1] - height;
break;
case 'bl':
to.x = xy[0] - width;
to.y = xy[1] + height;
break;
case 'br':
to.x = xy[0] + width;
to.y = xy[1] + height;
break;
case 'tr':
to.x = xy[0] + width;
to.y = xy[1] - height;
break;
}
this.to = to;
this.on('afteranimate', function () {
if (me.dom) {
me.hide();
me.clearOpacity();
me.setPositioning(position);
}
});
};
me.animate(Ext.applyIf(obj || {}, {
duration: 500,
easing: 'ease-out',
listeners: {
beforeanimate: {
fn: beforeAnim
}
}
}));
return me;
},
/**
* Highlights the Element by setting a color (applies to the background-color by default, but can be changed using
* the "attr" config option) and then fading back to the original color. If no original color is available, you
* should provide the "endColor" config option which will be cleared after the animation. Usage:
*
* // default: highlight background to yellow
* el.highlight();
*
* // custom: highlight foreground text to blue for 2 seconds
* el.highlight("0000ff", { attr: 'color', duration: 2000 });
*
* // common config options shown with default values
* el.highlight("ffff9c", {
* attr: "backgroundColor", //can be any valid CSS property (attribute) that supports a color value
* endColor: (current color) or "ffffff",
* easing: 'easeIn',
* duration: 1000
* });
*
* @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading #
* (defaults to yellow: 'ffff9c')
* @param {Object} options (optional) Object literal with any of the Fx config options
* @return {Ext.dom.Element} The Element
*/
highlight: function(color, o) {
var me = this,
dom = me.dom,
from = {},
restore, to, attr, lns, event, fn;
o = o || {};
lns = o.listeners || {};
attr = o.attr || 'backgroundColor';
from[attr] = color || 'ffff9c';
if (!o.to) {
to = {};
to[attr] = o.endColor || me.getColor(attr, 'ffffff', '');
}
else {
to = o.to;
}
// Don't apply directly on lns, since we reference it in our own callbacks below
o.listeners = Ext.apply(Ext.apply({}, lns), {
beforeanimate: function() {
restore = dom.style[attr];
me.clearOpacity();
me.show();
event = lns.beforeanimate;
if (event) {
fn = event.fn || event;
return fn.apply(event.scope || lns.scope || window, arguments);
}
},
afteranimate: function() {
if (dom) {
dom.style[attr] = restore;
}
event = lns.afteranimate;
if (event) {
fn = event.fn || event;
fn.apply(event.scope || lns.scope || window, arguments);
}
}
});
me.animate(Ext.apply({}, o, {
duration: 1000,
easing: 'ease-in',
from: from,
to: to
}));
return me;
},
/**
* Creates a pause before any subsequent queued effects begin. If there are no effects queued after the pause it will
* have no effect. Usage:
*
* el.pause(1);
*
* @deprecated 4.0 Use the `delay` config to {@link #animate} instead.
* @param {Number} seconds The length of time to pause (in seconds)
* @return {Ext.Element} The Element
*/
pause: function(ms) {
var me = this;
Ext.fx.Manager.setFxDefaults(me.id, {
delay: ms
});
return me;
},
/**
* Fade an element in (from transparent to opaque). The ending opacity can be specified using the `opacity`
* config option. Usage:
*
* // default: fade in from opacity 0 to 100%
* el.fadeIn();
*
* // custom: fade in from opacity 0 to 75% over 2 seconds
* el.fadeIn({ opacity: .75, duration: 2000});
*
* // common config options shown with default values
* el.fadeIn({
* opacity: 1, //can be any value between 0 and 1 (e.g. .5)
* easing: 'easeOut',
* duration: 500
* });
*
* @param {Object} options (optional) Object literal with any of the Fx config options
* @return {Ext.Element} The Element
*/
fadeIn: function(o) {
var me = this;
me.animate(Ext.apply({}, o, {
opacity: 1,
internalListeners: {
beforeanimate: function(anim){
// restore any visibility/display that may have
// been applied by a fadeout animation
if (me.isStyle('display', 'none')) {
me.setDisplayed('');
} else {
me.show();
}
}
}
}));
return this;
},
/**
* Fade an element out (from opaque to transparent). The ending opacity can be specified using the `opacity`
* config option. Note that IE may require `useDisplay:true` in order to redisplay correctly.
* Usage:
*
* // default: fade out from the element's current opacity to 0
* el.fadeOut();
*
* // custom: fade out from the element's current opacity to 25% over 2 seconds
* el.fadeOut({ opacity: .25, duration: 2000});
*
* // common config options shown with default values
* el.fadeOut({
* opacity: 0, //can be any value between 0 and 1 (e.g. .5)
* easing: 'easeOut',
* duration: 500,
* remove: false,
* useDisplay: false
* });
*
* @param {Object} options (optional) Object literal with any of the Fx config options
* @return {Ext.Element} The Element
*/
fadeOut: function(o) {
var me = this;
o = Ext.apply({
opacity: 0,
internalListeners: {
afteranimate: function(anim){
var dom = me.dom;
if (dom && anim.to.opacity === 0) {
if (o.useDisplay) {
me.setDisplayed(false);
} else {
me.hide();
}
}
}
}
}, o);
me.animate(o);
return me;
},
/**
* Animates the transition of an element's dimensions from a starting height/width to an ending height/width. This
* method is a convenience implementation of {@link #shift}. Usage:
*
* // change height and width to 100x100 pixels
* el.scale(100, 100);
*
* // common config options shown with default values. The height and width will default to
* // the element's existing values if passed as null.
* el.scale(
* [element's width],
* [element's height], {
* easing: 'easeOut',
* duration: 350
* }
* );
*
* @deprecated 4.0 Just use {@link #animate} instead.
* @param {Number} width The new width (pass undefined to keep the original width)
* @param {Number} height The new height (pass undefined to keep the original height)
* @param {Object} options (optional) Object literal with any of the Fx config options
* @return {Ext.Element} The Element
*/
scale: function(w, h, o) {
this.animate(Ext.apply({}, o, {
width: w,
height: h
}));
return this;
},
/**
* Animates the transition of any combination of an element's dimensions, xy position and/or opacity. Any of these
* properties not specified in the config object will not be changed. This effect requires that at least one new
* dimension, position or opacity setting must be passed in on the config object in order for the function to have
* any effect. Usage:
*
* // slide the element horizontally to x position 200 while changing the height and opacity
* el.shift({ x: 200, height: 50, opacity: .8 });
*
* // common config options shown with default values.
* el.shift({
* width: [element's width],
* height: [element's height],
* x: [element's x position],
* y: [element's y position],
* opacity: [element's opacity],
* easing: 'easeOut',
* duration: 350
* });
*
* @deprecated 4.0 Just use {@link #animate} instead.
* @param {Object} options Object literal with any of the Fx config options
* @return {Ext.Element} The Element
*/
shift: function(config) {
this.animate(config);
return this;
}
});
//@tag dom,core
//@require Ext.dom.Element-anim
//@define Ext.dom.Element-dd
//@define Ext.dom.Element
/**
* @class Ext.dom.Element
*/
Ext.dom.Element.override({
/**
* Initializes a {@link Ext.dd.DD} drag drop object for this element.
* @param {String} group The group the DD object is member of
* @param {Object} config The DD config object
* @param {Object} overrides An object containing methods to override/implement on the DD object
* @return {Ext.dd.DD} The DD object
*/
initDD : function(group, config, overrides){
var dd = new Ext.dd.DD(Ext.id(this.dom), group, config);
return Ext.apply(dd, overrides);
},
/**
* Initializes a {@link Ext.dd.DDProxy} object for this element.
* @param {String} group The group the DDProxy object is member of
* @param {Object} config The DDProxy config object
* @param {Object} overrides An object containing methods to override/implement on the DDProxy object
* @return {Ext.dd.DDProxy} The DDProxy object
*/
initDDProxy : function(group, config, overrides){
var dd = new Ext.dd.DDProxy(Ext.id(this.dom), group, config);
return Ext.apply(dd, overrides);
},
/**
* Initializes a {@link Ext.dd.DDTarget} object for this element.
* @param {String} group The group the DDTarget object is member of
* @param {Object} config The DDTarget config object
* @param {Object} overrides An object containing methods to override/implement on the DDTarget object
* @return {Ext.dd.DDTarget} The DDTarget object
*/
initDDTarget : function(group, config, overrides){
var dd = new Ext.dd.DDTarget(Ext.id(this.dom), group, config);
return Ext.apply(dd, overrides);
}
});
//@tag dom,core
//@require Ext.dom.Element-dd
//@define Ext.dom.Element-fx
//@define Ext.dom.Element
/**
* @class Ext.dom.Element
*/
(function() {
var Element = Ext.dom.Element,
VISIBILITY = "visibility",
DISPLAY = "display",
NONE = "none",
HIDDEN = 'hidden',
VISIBLE = 'visible',
OFFSETS = "offsets",
ASCLASS = "asclass",
NOSIZE = 'nosize',
ORIGINALDISPLAY = 'originalDisplay',
VISMODE = 'visibilityMode',
ISVISIBLE = 'isVisible',
OFFSETCLASS = Ext.baseCSSPrefix + 'hide-offsets',
getDisplay = function(el) {
var data = (el.$cache || el.getCache()).data,
display = data[ORIGINALDISPLAY];
if (display === undefined) {
data[ORIGINALDISPLAY] = display = '';
}
return display;
},
getVisMode = function(el){
var data = (el.$cache || el.getCache()).data,
visMode = data[VISMODE];
if (visMode === undefined) {
data[VISMODE] = visMode = Element.VISIBILITY;
}
return visMode;
};
Element.override({
/**
* The element's default display mode.
*/
originalDisplay : "",
visibilityMode : 1,
/**
* Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
* the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
* @param {Boolean} visible Whether the element is visible
* @param {Boolean/Object} [animate] True for the default animation, or a standard Element animation config object
* @return {Ext.dom.Element} this
*/
setVisible : function(visible, animate) {
var me = this,
dom = me.dom,
visMode = getVisMode(me);
// hideMode string override
if (typeof animate == 'string') {
switch (animate) {
case DISPLAY:
visMode = Element.DISPLAY;
break;
case VISIBILITY:
visMode = Element.VISIBILITY;
break;
case OFFSETS:
visMode = Element.OFFSETS;
break;
case NOSIZE:
case ASCLASS:
visMode = Element.ASCLASS;
break;
}
me.setVisibilityMode(visMode);
animate = false;
}
if (!animate || !me.anim) {
if (visMode == Element.DISPLAY) {
return me.setDisplayed(visible);
} else if (visMode == Element.OFFSETS) {
me[visible?'removeCls':'addCls'](OFFSETCLASS);
} else if (visMode == Element.VISIBILITY) {
me.fixDisplay();
// Show by clearing visibility style. Explicitly setting to "visible" overrides parent visibility setting
dom.style.visibility = visible ? '' : HIDDEN;
} else if (visMode == Element.ASCLASS) {
me[visible?'removeCls':'addCls'](me.visibilityCls || Element.visibilityCls);
}
} else {
// closure for composites
if (visible) {
me.setOpacity(0.01);
me.setVisible(true);
}
if (!Ext.isObject(animate)) {
animate = {
duration: 350,
easing: 'ease-in'
};
}
me.animate(Ext.applyIf({
callback: function() {
if (!visible) {
me.setVisible(false).setOpacity(1);
}
},
to: {
opacity: (visible) ? 1 : 0
}
}, animate));
}
(me.$cache || me.getCache()).data[ISVISIBLE] = visible;
return me;
},
/**
* @private
* Determine if the Element has a relevant height and width available based
* upon current logical visibility state
*/
hasMetrics : function(){
var visMode = getVisMode(this);
return this.isVisible() || (visMode == Element.OFFSETS) || (visMode == Element.VISIBILITY);
},
/**
* Toggles the element's visibility or display, depending on visibility mode.
* @param {Boolean/Object} [animate] True for the default animation, or a standard Element animation config object
* @return {Ext.dom.Element} this
*/
toggle : function(animate){
var me = this;
me.setVisible(!me.isVisible(), me.anim(animate));
return me;
},
/**
* Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
* @param {Boolean/String} value Boolean value to display the element using its default display, or a string to set the display directly.
* @return {Ext.dom.Element} this
*/
setDisplayed : function(value) {
if(typeof value == "boolean"){
value = value ? getDisplay(this) : NONE;
}
this.setStyle(DISPLAY, value);
return this;
},
// private
fixDisplay : function(){
var me = this;
if (me.isStyle(DISPLAY, NONE)) {
me.setStyle(VISIBILITY, HIDDEN);
me.setStyle(DISPLAY, getDisplay(me)); // first try reverting to default
if (me.isStyle(DISPLAY, NONE)) { // if that fails, default to block
me.setStyle(DISPLAY, "block");
}
}
},
/**
* Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
* @param {Boolean/Object} [animate] true for the default animation or a standard Element animation config object
* @return {Ext.dom.Element} this
*/
hide : function(animate){
// hideMode override
if (typeof animate == 'string'){
this.setVisible(false, animate);
return this;
}
this.setVisible(false, this.anim(animate));
return this;
},
/**
* Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
* @param {Boolean/Object} [animate] true for the default animation or a standard Element animation config object
* @return {Ext.dom.Element} this
*/
show : function(animate){
// hideMode override
if (typeof animate == 'string'){
this.setVisible(true, animate);
return this;
}
this.setVisible(true, this.anim(animate));
return this;
}
});
}());
//@tag dom,core
//@require Ext.dom.Element-fx
//@define Ext.dom.Element-position
//@define Ext.dom.Element
/**
* @class Ext.dom.Element
*/
(function() {
var Element = Ext.dom.Element,
LEFT = "left",
RIGHT = "right",
TOP = "top",
BOTTOM = "bottom",
POSITION = "position",
STATIC = "static",
RELATIVE = "relative",
AUTO = "auto",
ZINDEX = "z-index",
BODY = 'BODY',
PADDING = 'padding',
BORDER = 'border',
SLEFT = '-left',
SRIGHT = '-right',
STOP = '-top',
SBOTTOM = '-bottom',
SWIDTH = '-width',
// special markup used throughout Ext when box wrapping elements
borders = {l: BORDER + SLEFT + SWIDTH, r: BORDER + SRIGHT + SWIDTH, t: BORDER + STOP + SWIDTH, b: BORDER + SBOTTOM + SWIDTH},
paddings = {l: PADDING + SLEFT, r: PADDING + SRIGHT, t: PADDING + STOP, b: PADDING + SBOTTOM},
paddingsTLRB = [paddings.l, paddings.r, paddings.t, paddings.b],
bordersTLRB = [borders.l, borders.r, borders.t, borders.b],
positionTopLeft = ['position', 'top', 'left'];
Element.override({
getX: function() {
return Element.getX(this.dom);
},
getY: function() {
return Element.getY(this.dom);
},
/**
* Gets the current position of the element based on page coordinates.
* Element must be part of the DOM tree to have page coordinates
* (display:none or elements not appended return false).
* @return {Number[]} The XY position of the element
*/
getXY: function() {
return Element.getXY(this.dom);
},
/**
* Returns the offsets of this element from the passed element. Both element must be part
* of the DOM tree and not have display:none to have page coordinates.
* @param {String/HTMLElement/Ext.Element} element The element to get the offsets from.
* @return {Number[]} The XY page offsets (e.g. `[100, -200]`)
*/
getOffsetsTo : function(el){
var o = this.getXY(),
e = Ext.fly(el, '_internal').getXY();
return [o[0] - e[0],o[1] - e[1]];
},
setX: function(x, animate) {
return this.setXY([x, this.getY()], animate);
},
setY: function(y, animate) {
return this.setXY([this.getX(), y], animate);
},
setLeft: function(left) {
this.setStyle(LEFT, this.addUnits(left));
return this;
},
setTop: function(top) {
this.setStyle(TOP, this.addUnits(top));
return this;
},
setRight: function(right) {
this.setStyle(RIGHT, this.addUnits(right));
return this;
},
setBottom: function(bottom) {
this.setStyle(BOTTOM, this.addUnits(bottom));
return this;
},
/**
* Sets the position of the element in page coordinates, regardless of how the element
* is positioned. The element must be part of the DOM tree to have page coordinates
* (`display:none` or elements not appended return false).
* @param {Number[]} pos Contains X & Y [x, y] values for new position (coordinates are page-based)
* @param {Boolean/Object} [animate] True for the default animation, or a standard Element
* animation config object
* @return {Ext.Element} this
*/
setXY: function(pos, animate) {
var me = this;
if (!animate || !me.anim) {
Element.setXY(me.dom, pos);
}
else {
if (!Ext.isObject(animate)) {
animate = {};
}
me.animate(Ext.applyIf({ to: { x: pos[0], y: pos[1] } }, animate));
}
return me;
},
pxRe: /^\d+(?:\.\d*)?px$/i,
/**
* Returns the x-coordinate of this element reletive to its `offsetParent`.
* @return {Number} The local x-coordinate (relative to the `offsetParent`).
*/
getLocalX: function() {
var me = this,
offsetParent,
x = me.getStyle(LEFT);
if (!x || x === AUTO) {
return 0;
}
if (x && me.pxRe.test(x)) {
return parseFloat(x);
}
x = me.getX();
offsetParent = me.dom.offsetParent;
if (offsetParent) {
x -= Ext.fly(offsetParent).getX();
}
return x;
},
/**
* Returns the y-coordinate of this element reletive to its `offsetParent`.
* @return {Number} The local y-coordinate (relative to the `offsetParent`).
*/
getLocalY: function() {
var me = this,
offsetParent,
y = me.getStyle(TOP);
if (!y || y === AUTO) {
return 0;
}
if (y && me.pxRe.test(y)) {
return parseFloat(y);
}
y = me.getY();
offsetParent = me.dom.offsetParent;
if (offsetParent) {
y -= Ext.fly(offsetParent).getY();
}
return y;
},
getLeft: function(local) {
return local ? this.getLocalX() : this.getX();
},
getRight: function(local) {
return (local ? this.getLocalX() : this.getX()) + this.getWidth();
},
getTop: function(local) {
return local ? this.getLocalY() : this.getY();
},
getBottom: function(local) {
return (local ? this.getLocalY() : this.getY()) + this.getHeight();
},
translatePoints: function(x, y) {
var me = this,
styles = me.getStyle(positionTopLeft),
relative = styles.position == 'relative',
left = parseFloat(styles.left),
top = parseFloat(styles.top),
xy = me.getXY();
if (Ext.isArray(x)) {
y = x[1];
x = x[0];
}
if (isNaN(left)) {
left = relative ? 0 : me.dom.offsetLeft;
}
if (isNaN(top)) {
top = relative ? 0 : me.dom.offsetTop;
}
left = (typeof x == 'number') ? x - xy[0] + left : undefined;
top = (typeof y == 'number') ? y - xy[1] + top : undefined;
return {
left: left,
top: top
};
},
setBox: function(box, adjust, animate) {
var me = this,
w = box.width,
h = box.height;
if ((adjust && !me.autoBoxAdjust) && !me.isBorderBox()) {
w -= (me.getBorderWidth("lr") + me.getPadding("lr"));
h -= (me.getBorderWidth("tb") + me.getPadding("tb"));
}
me.setBounds(box.x, box.y, w, h, animate);
return me;
},
getBox: function(contentBox, local) {
var me = this,
xy,
left,
top,
paddingWidth,
bordersWidth,
l, r, t, b, w, h, bx;
if (!local) {
xy = me.getXY();
} else {
xy = me.getStyle([LEFT, TOP]);
xy = [ parseFloat(xy.left) || 0, parseFloat(xy.top) || 0];
}
w = me.getWidth();
h = me.getHeight();
if (!contentBox) {
bx = {
x: xy[0],
y: xy[1],
0: xy[0],
1: xy[1],
width: w,
height: h
};
} else {
paddingWidth = me.getStyle(paddingsTLRB);
bordersWidth = me.getStyle(bordersTLRB);
l = (parseFloat(bordersWidth[borders.l]) || 0) + (parseFloat(paddingWidth[paddings.l]) || 0);
r = (parseFloat(bordersWidth[borders.r]) || 0) + (parseFloat(paddingWidth[paddings.r]) || 0);
t = (parseFloat(bordersWidth[borders.t]) || 0) + (parseFloat(paddingWidth[paddings.t]) || 0);
b = (parseFloat(bordersWidth[borders.b]) || 0) + (parseFloat(paddingWidth[paddings.b]) || 0);
bx = {
x: xy[0] + l,
y: xy[1] + t,
0: xy[0] + l,
1: xy[1] + t,
width: w - (l + r),
height: h - (t + b)
};
}
bx.right = bx.x + bx.width;
bx.bottom = bx.y + bx.height;
return bx;
},
getPageBox: function(getRegion) {
var me = this,
el = me.dom,
isDoc = el.nodeName == BODY,
w = isDoc ? Ext.dom.AbstractElement.getViewWidth() : el.offsetWidth,
h = isDoc ? Ext.dom.AbstractElement.getViewHeight() : el.offsetHeight,
xy = me.getXY(),
t = xy[1],
r = xy[0] + w,
b = xy[1] + h,
l = xy[0];
if (getRegion) {
return new Ext.util.Region(t, r, b, l);
}
else {
return {
left: l,
top: t,
width: w,
height: h,
right: r,
bottom: b
};
}
},
/**
* Sets the position of the element in page coordinates, regardless of how the element
* is positioned. The element must be part of the DOM tree to have page coordinates
* (`display:none` or elements not appended return false).
* @param {Number} x X value for new position (coordinates are page-based)
* @param {Number} y Y value for new position (coordinates are page-based)
* @param {Boolean/Object} [animate] True for the default animation, or a standard Element
* animation config object
* @return {Ext.dom.AbstractElement} this
*/
setLocation : function(x, y, animate) {
return this.setXY([x, y], animate);
},
/**
* Sets the position of the element in page coordinates, regardless of how the element
* is positioned. The element must be part of the DOM tree to have page coordinates
* (`display:none` or elements not appended return false).
* @param {Number} x X value for new position (coordinates are page-based)
* @param {Number} y Y value for new position (coordinates are page-based)
* @param {Boolean/Object} [animate] True for the default animation, or a standard Element
* animation config object
* @return {Ext.dom.AbstractElement} this
*/
moveTo : function(x, y, animate) {
return this.setXY([x, y], animate);
},
/**
* Initializes positioning on this element. If a desired position is not passed, it will make the
* the element positioned relative IF it is not already positioned.
* @param {String} [pos] Positioning to use "relative", "absolute" or "fixed"
* @param {Number} [zIndex] The zIndex to apply
* @param {Number} [x] Set the page X position
* @param {Number} [y] Set the page Y position
*/
position : function(pos, zIndex, x, y) {
var me = this;
if (!pos && me.isStyle(POSITION, STATIC)) {
me.setStyle(POSITION, RELATIVE);
} else if (pos) {
me.setStyle(POSITION, pos);
}
if (zIndex) {
me.setStyle(ZINDEX, zIndex);
}
if (x || y) {
me.setXY([x || false, y || false]);
}
},
/**
* Clears positioning back to the default when the document was loaded.
* @param {String} [value=''] The value to use for the left, right, top, bottom. You could use 'auto'.
* @return {Ext.dom.AbstractElement} this
*/
clearPositioning : function(value) {
value = value || '';
this.setStyle({
left : value,
right : value,
top : value,
bottom : value,
"z-index" : "",
position : STATIC
});
return this;
},
/**
* Gets an object with all CSS positioning properties. Useful along with #setPostioning to get
* snapshot before performing an update and then restoring the element.
* @return {Object}
*/
getPositioning : function(){
var styles = this.getStyle([LEFT, TOP, POSITION, RIGHT, BOTTOM, ZINDEX]);
styles[RIGHT] = styles[LEFT] ? '' : styles[RIGHT];
styles[BOTTOM] = styles[TOP] ? '' : styles[BOTTOM];
return styles;
},
/**
* Set positioning with an object returned by #getPositioning.
* @param {Object} posCfg
* @return {Ext.dom.AbstractElement} this
*/
setPositioning : function(pc) {
var me = this,
style = me.dom.style;
me.setStyle(pc);
if (pc.right == AUTO) {
style.right = "";
}
if (pc.bottom == AUTO) {
style.bottom = "";
}
return me;
},
/**
* Move this element relative to its current position.
* @param {String} direction Possible values are:
*
* - `"l"` (or `"left"`)
* - `"r"` (or `"right"`)
* - `"t"` (or `"top"`, or `"up"`)
* - `"b"` (or `"bottom"`, or `"down"`)
*
* @param {Number} distance How far to move the element in pixels
* @param {Boolean/Object} [animate] true for the default animation or a standard Element
* animation config object
*/
move: function(direction, distance, animate) {
var me = this,
xy = me.getXY(),
x = xy[0],
y = xy[1],
left = [x - distance, y],
right = [x + distance, y],
top = [x, y - distance],
bottom = [x, y + distance],
hash = {
l: left,
left: left,
r: right,
right: right,
t: top,
top: top,
up: top,
b: bottom,
bottom: bottom,
down: bottom
};
direction = direction.toLowerCase();
me.moveTo(hash[direction][0], hash[direction][1], animate);
},
/**
* Conveniently sets left and top adding default units.
* @param {String} left The left CSS property value
* @param {String} top The top CSS property value
* @return {Ext.dom.Element} this
*/
setLeftTop: function(left, top) {
var style = this.dom.style;
style.left = Element.addUnits(left);
style.top = Element.addUnits(top);
return this;
},
/**
* Returns the region of this element.
* The element must be part of the DOM tree to have a region
* (display:none or elements not appended return false).
* @return {Ext.util.Region} A Region containing "top, left, bottom, right" member data.
*/
getRegion: function() {
return this.getPageBox(true);
},
/**
* Returns the **content** region of this element. That is the region within the borders and padding.
* @return {Ext.util.Region} A Region containing "top, left, bottom, right" member data.
*/
getViewRegion: function() {
var me = this,
isBody = me.dom.nodeName == BODY,
scroll, pos, top, left, width, height;
// For the body we want to do some special logic
if (isBody) {
scroll = me.getScroll();
left = scroll.left;
top = scroll.top;
width = Ext.dom.AbstractElement.getViewportWidth();
height = Ext.dom.AbstractElement.getViewportHeight();
}
else {
pos = me.getXY();
left = pos[0] + me.getBorderWidth('l') + me.getPadding('l');
top = pos[1] + me.getBorderWidth('t') + me.getPadding('t');
width = me.getWidth(true);
height = me.getHeight(true);
}
return new Ext.util.Region(top, left + width - 1, top + height - 1, left);
},
/**
* Sets the element's position and size in one shot. If animation is true then width, height,
* x and y will be animated concurrently.
*
* @param {Number} x X value for new position (coordinates are page-based)
* @param {Number} y Y value for new position (coordinates are page-based)
* @param {Number/String} width The new width. This may be one of:
*
* - A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels)
* - A String used to set the CSS width style. Animation may **not** be used.
*
* @param {Number/String} height The new height. This may be one of:
*
* - A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels)
* - A String used to set the CSS height style. Animation may **not** be used.
*
* @param {Boolean/Object} [animate] true for the default animation or a standard Element
* animation config object
*
* @return {Ext.dom.AbstractElement} this
*/
setBounds: function(x, y, width, height, animate) {
var me = this;
if (!animate || !me.anim) {
me.setSize(width, height);
me.setLocation(x, y);
} else {
if (!Ext.isObject(animate)) {
animate = {};
}
me.animate(Ext.applyIf({
to: {
x: x,
y: y,
width: me.adjustWidth(width),
height: me.adjustHeight(height)
}
}, animate));
}
return me;
},
/**
* Sets the element's position and size the specified region. If animation is true then width, height,
* x and y will be animated concurrently.
*
* @param {Ext.util.Region} region The region to fill
* @param {Boolean/Object} [animate] true for the default animation or a standard Element
* animation config object
* @return {Ext.dom.AbstractElement} this
*/
setRegion: function(region, animate) {
return this.setBounds(region.left, region.top, region.right - region.left, region.bottom - region.top, animate);
}
});
}());
//@tag dom,core
//@require Ext.dom.Element-position
//@define Ext.dom.Element-scroll
//@define Ext.dom.Element
/**
* @class Ext.dom.Element
*/
Ext.dom.Element.override({
/**
* Returns true if this element is scrollable.
* @return {Boolean}
*/
isScrollable: function() {
var dom = this.dom;
return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;
},
/**
* Returns the current scroll position of the element.
* @return {Object} An object containing the scroll position in the format
* `{left: (scrollLeft), top: (scrollTop)}`
*/
getScroll: function() {
var d = this.dom,
doc = document,
body = doc.body,
docElement = doc.documentElement,
l,
t,
ret;
if (d == doc || d == body) {
if (Ext.isIE && Ext.isStrict) {
l = docElement.scrollLeft;
t = docElement.scrollTop;
} else {
l = window.pageXOffset;
t = window.pageYOffset;
}
ret = {
left: l || (body ? body.scrollLeft : 0),
top : t || (body ? body.scrollTop : 0)
};
} else {
ret = {
left: d.scrollLeft,
top : d.scrollTop
};
}
return ret;
},
/**
* Scrolls this element by the passed delta values, optionally animating.
*
* All of the following are equivalent:
*
* el.scrollBy(10, 10, true);
* el.scrollBy([10, 10], true);
* el.scrollBy({ x: 10, y: 10 }, true);
*
* @param {Number/Number[]/Object} deltaX Either the x delta, an Array specifying x and y deltas or
* an object with "x" and "y" properties.
* @param {Number/Boolean/Object} deltaY Either the y delta, or an animate flag or config object.
* @param {Boolean/Object} animate Animate flag/config object if the delta values were passed separately.
* @return {Ext.Element} this
*/
scrollBy: function(deltaX, deltaY, animate) {
var me = this,
dom = me.dom;
// Extract args if deltas were passed as an Array.
if (deltaX.length) {
animate = deltaY;
deltaY = deltaX[1];
deltaX = deltaX[0];
} else if (typeof deltaX != 'number') { // or an object
animate = deltaY;
deltaY = deltaX.y;
deltaX = deltaX.x;
}
if (deltaX) {
me.scrollTo('left', Math.max(Math.min(dom.scrollLeft + deltaX, dom.scrollWidth - dom.clientWidth), 0), animate);
}
if (deltaY) {
me.scrollTo('top', Math.max(Math.min(dom.scrollTop + deltaY, dom.scrollHeight - dom.clientHeight), 0), animate);
}
return me;
},
/**
* Scrolls this element the specified scroll point. It does NOT do bounds checking so
* if you scroll to a weird value it will try to do it. For auto bounds checking, use #scroll.
* @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
* @param {Number} value The new scroll value
* @param {Boolean/Object} [animate] true for the default animation or a standard Element
* animation config object
* @return {Ext.Element} this
*/
scrollTo: function(side, value, animate) {
//check if we're scrolling top or left
var top = /top/i.test(side),
me = this,
dom = me.dom,
animCfg,
prop;
if (!animate || !me.anim) {
// just setting the value, so grab the direction
prop = 'scroll' + (top ? 'Top' : 'Left');
dom[prop] = value;
// corrects IE, other browsers will ignore
dom[prop] = value;
}
else {
animCfg = {
to: {}
};
animCfg.to['scroll' + (top ? 'Top' : 'Left')] = value;
if (Ext.isObject(animate)) {
Ext.applyIf(animCfg, animate);
}
me.animate(animCfg);
}
return me;
},
/**
* Scrolls this element into view within the passed container.
* @param {String/HTMLElement/Ext.Element} [container=document.body] The container element
* to scroll. Should be a string (id), dom node, or Ext.Element.
* @param {Boolean} [hscroll=true] False to disable horizontal scroll.
* @param {Boolean/Object} [animate] true for the default animation or a standard Element
* animation config object
* @return {Ext.dom.Element} this
*/
scrollIntoView: function(container, hscroll, animate) {
container = Ext.getDom(container) || Ext.getBody().dom;
var el = this.dom,
offsets = this.getOffsetsTo(container),
// el's box
left = offsets[0] + container.scrollLeft,
top = offsets[1] + container.scrollTop,
bottom = top + el.offsetHeight,
right = left + el.offsetWidth,
// ct's box
ctClientHeight = container.clientHeight,
ctScrollTop = parseInt(container.scrollTop, 10),
ctScrollLeft = parseInt(container.scrollLeft, 10),
ctBottom = ctScrollTop + ctClientHeight,
ctRight = ctScrollLeft + container.clientWidth,
newPos;
if (el.offsetHeight > ctClientHeight || top < ctScrollTop) {
newPos = top;
} else if (bottom > ctBottom) {
newPos = bottom - ctClientHeight;
}
if (newPos != null) {
Ext.get(container).scrollTo('top', newPos, animate);
}
if (hscroll !== false) {
newPos = null;
if (el.offsetWidth > container.clientWidth || left < ctScrollLeft) {
newPos = left;
} else if (right > ctRight) {
newPos = right - container.clientWidth;
}
if (newPos != null) {
Ext.get(container).scrollTo('left', newPos, animate);
}
}
return this;
},
// @private
scrollChildIntoView: function(child, hscroll) {
Ext.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
},
/**
* Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
* within this element's scrollable range.
* @param {String} direction Possible values are:
*
* - `"l"` (or `"left"`)
* - `"r"` (or `"right"`)
* - `"t"` (or `"top"`, or `"up"`)
* - `"b"` (or `"bottom"`, or `"down"`)
*
* @param {Number} distance How far to scroll the element in pixels
* @param {Boolean/Object} [animate] true for the default animation or a standard Element
* animation config object
* @return {Boolean} Returns true if a scroll was triggered or false if the element
* was scrolled as far as it could go.
*/
scroll: function(direction, distance, animate) {
if (!this.isScrollable()) {
return false;
}
var el = this.dom,
l = el.scrollLeft, t = el.scrollTop,
w = el.scrollWidth, h = el.scrollHeight,
cw = el.clientWidth, ch = el.clientHeight,
scrolled = false, v,
hash = {
l: Math.min(l + distance, w - cw),
r: v = Math.max(l - distance, 0),
t: Math.max(t - distance, 0),
b: Math.min(t + distance, h - ch)
};
hash.d = hash.b;
hash.u = hash.t;
direction = direction.substr(0, 1);
if ((v = hash[direction]) > -1) {
scrolled = true;
this.scrollTo(direction == 'l' || direction == 'r' ? 'left' : 'top', v, this.anim(animate));
}
return scrolled;
}
});
//@tag dom,core
//@require Ext.dom.Element-scroll
//@define Ext.dom.Element-style
//@define Ext.dom.Element
/**
* @class Ext.dom.Element
*/
(function() {
var Element = Ext.dom.Element,
view = document.defaultView,
adjustDirect2DTableRe = /table-row|table-.*-group/,
INTERNAL = '_internal',
HIDDEN = 'hidden',
HEIGHT = 'height',
WIDTH = 'width',
ISCLIPPED = 'isClipped',
OVERFLOW = 'overflow',
OVERFLOWX = 'overflow-x',
OVERFLOWY = 'overflow-y',
ORIGINALCLIP = 'originalClip',
DOCORBODYRE = /#document|body/i,
// This reduces the lookup of 'me.styleHooks' by one hop in the prototype chain. It is
// the same object.
styleHooks,
edges, k, edge, borderWidth;
if (!view || !view.getComputedStyle) {
Element.prototype.getStyle = function (property, inline) {
var me = this,
dom = me.dom,
multiple = typeof property != 'string',
hooks = me.styleHooks,
prop = property,
props = prop,
len = 1,
isInline = inline,
camel, domStyle, values, hook, out, style, i;
if (multiple) {
values = {};
prop = props[0];
i = 0;
if (!(len = props.length)) {
return values;
}
}
if (!dom || dom.documentElement) {
return values || '';
}
domStyle = dom.style;
if (inline) {
style = domStyle;
} else {
style = dom.currentStyle;
// fallback to inline style if rendering context not available
if (!style) {
isInline = true;
style = domStyle;
}
}
do {
hook = hooks[prop];
if (!hook) {
hooks[prop] = hook = { name: Element.normalize(prop) };
}
if (hook.get) {
out = hook.get(dom, me, isInline, style);
} else {
camel = hook.name;
// In some cases, IE6 will throw Invalid Argument exceptions for properties
// like fontSize (/examples/tabs/tabs.html in 4.0 used to exhibit this but
// no longer does due to font style changes). There is a real cost to a try
// block, so we avoid it where possible...
if (hook.canThrow) {
try {
out = style[camel];
} catch (e) {
out = '';
}
} else {
// EXTJSIV-5657 - In IE9 quirks mode there is a chance that VML root element
// has neither `currentStyle` nor `style`. Return '' this case.
out = style ? style[camel] : '';
}
}
if (!multiple) {
return out;
}
values[prop] = out;
prop = props[++i];
} while (i < len);
return values;
};
}
Element.override({
getHeight: function(contentHeight, preciseHeight) {
var me = this,
dom = me.dom,
hidden = me.isStyle('display', 'none'),
height,
floating;
if (hidden) {
return 0;
}
height = Math.max(dom.offsetHeight, dom.clientHeight) || 0;
// IE9 Direct2D dimension rounding bug
if (Ext.supports.Direct2DBug) {
floating = me.adjustDirect2DDimension(HEIGHT);
if (preciseHeight) {
height += floating;
}
else if (floating > 0 && floating < 0.5) {
height++;
}
}
if (contentHeight) {
height -= me.getBorderWidth("tb") + me.getPadding("tb");
}
return (height < 0) ? 0 : height;
},
getWidth: function(contentWidth, preciseWidth) {
var me = this,
dom = me.dom,
hidden = me.isStyle('display', 'none'),
rect, width, floating;
if (hidden) {
return 0;
}
// Gecko will in some cases report an offsetWidth that is actually less than the width of the
// text contents, because it measures fonts with sub-pixel precision but rounds the calculated
// value down. Using getBoundingClientRect instead of offsetWidth allows us to get the precise
// subpixel measurements so we can force them to always be rounded up. See
// https://bugzilla.mozilla.org/show_bug.cgi?id=458617
// Rounding up ensures that the width includes the full width of the text contents.
if (Ext.supports.BoundingClientRect) {
rect = dom.getBoundingClientRect();
width = rect.right - rect.left;
width = preciseWidth ? width : Math.ceil(width);
} else {
width = dom.offsetWidth;
}
width = Math.max(width, dom.clientWidth) || 0;
// IE9 Direct2D dimension rounding bug
if (Ext.supports.Direct2DBug) {
// get the fractional portion of the sub-pixel precision width of the element's text contents
floating = me.adjustDirect2DDimension(WIDTH);
if (preciseWidth) {
width += floating;
}
// IE9 also measures fonts with sub-pixel precision, but unlike Gecko, instead of rounding the offsetWidth down,
// it rounds to the nearest integer. This means that in order to ensure that the width includes the full
// width of the text contents we need to increment the width by 1 only if the fractional portion is less than 0.5
else if (floating > 0 && floating < 0.5) {
width++;
}
}
if (contentWidth) {
width -= me.getBorderWidth("lr") + me.getPadding("lr");
}
return (width < 0) ? 0 : width;
},
setWidth: function(width, animate) {
var me = this;
width = me.adjustWidth(width);
if (!animate || !me.anim) {
me.dom.style.width = me.addUnits(width);
}
else {
if (!Ext.isObject(animate)) {
animate = {};
}
me.animate(Ext.applyIf({
to: {
width: width
}
}, animate));
}
return me;
},
setHeight : function(height, animate) {
var me = this;
height = me.adjustHeight(height);
if (!animate || !me.anim) {
me.dom.style.height = me.addUnits(height);
}
else {
if (!Ext.isObject(animate)) {
animate = {};
}
me.animate(Ext.applyIf({
to: {
height: height
}
}, animate));
}
return me;
},
applyStyles: function(style) {
Ext.DomHelper.applyStyles(this.dom, style);
return this;
},
setSize: function(width, height, animate) {
var me = this;
if (Ext.isObject(width)) { // in case of object from getSize()
animate = height;
height = width.height;
width = width.width;
}
width = me.adjustWidth(width);
height = me.adjustHeight(height);
if (!animate || !me.anim) {
me.dom.style.width = me.addUnits(width);
me.dom.style.height = me.addUnits(height);
}
else {
if (animate === true) {
animate = {};
}
me.animate(Ext.applyIf({
to: {
width: width,
height: height
}
}, animate));
}
return me;
},
getViewSize : function() {
var me = this,
dom = me.dom,
isDoc = DOCORBODYRE.test(dom.nodeName),
ret;
// If the body, use static methods
if (isDoc) {
ret = {
width : Element.getViewWidth(),
height : Element.getViewHeight()
};
} else {
ret = {
width : dom.clientWidth,
height : dom.clientHeight
};
}
return ret;
},
getSize: function(contentSize) {
return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
},
// TODO: Look at this
// private ==> used by Fx
adjustWidth : function(width) {
var me = this,
isNum = (typeof width == 'number');
if (isNum && me.autoBoxAdjust && !me.isBorderBox()) {
width -= (me.getBorderWidth("lr") + me.getPadding("lr"));
}
return (isNum && width < 0) ? 0 : width;
},
// private ==> used by Fx
adjustHeight : function(height) {
var me = this,
isNum = (typeof height == "number");
if (isNum && me.autoBoxAdjust && !me.isBorderBox()) {
height -= (me.getBorderWidth("tb") + me.getPadding("tb"));
}
return (isNum && height < 0) ? 0 : height;
},
/**
* Return the CSS color for the specified CSS attribute. rgb, 3 digit (like `#fff`) and valid values
* are convert to standard 6 digit hex color.
* @param {String} attr The css attribute
* @param {String} defaultValue The default value to use when a valid color isn't found
* @param {String} [prefix] defaults to #. Use an empty string when working with
* color anims.
*/
getColor : function(attr, defaultValue, prefix) {
var v = this.getStyle(attr),
color = prefix || prefix === '' ? prefix : '#',
h, len, i=0;
if (!v || (/transparent|inherit/.test(v))) {
return defaultValue;
}
if (/^r/.test(v)) {
v = v.slice(4, v.length - 1).split(',');
len = v.length;
for (; iThis class encapsulates a collection of DOM elements, providing methods to filter * members, or to perform collective actions upon the whole set.
*Although they are not listed, this class supports all of the methods of {@link Ext.dom.Element} and * {@link Ext.fx.Anim}. The methods from these classes will be performed on all the elements in this collection.
*All methods return this and can be chained.
* Usage:
var els = Ext.select("#some-el div.some-class", true);
// or select directly from an existing element
var el = Ext.get('some-el');
el.select('div.some-class', true);
els.setWidth(100); // all elements become 100 width
els.hide(true); // all elements fade out and hide
// or
els.setWidth(100).hide(true);