// 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: StringThe date string to parse.
* strict: BooleanTrue to validate date strings while parsing * (i.e. prevent javascript Date "rollover") (The default must be false). * Invalid date strings should return null when parsed.
*
To enable Dates to also be formatted according to that format, a corresponding * formatting function must be placed into the {@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: DateThe Date to format.
*
To 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: NumberThe default year value. (defaults to undefined)
* m: NumberThe default 1-based month value. (defaults to undefined)
* d: NumberThe default day value. (defaults to undefined)
* h: NumberThe default hour value. (defaults to undefined)
* i: NumberThe default minute value. (defaults to undefined)
* s: NumberThe default second value. (defaults to undefined)
* ms: NumberThe default millisecond value. (defaults to undefined)
*
Override 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,
//` * * @param {String} The string value to format. * @return {String} The string with embedded `
` tags in place of newlines. */ nl2br : function(v) { return Ext.isEmpty(v) ? '' : v.replace(nl2brRe, '
'); }, /** * Alias for {@link Ext.String#capitalize}. * @method * @inheritdoc Ext.String#capitalize */ capitalize: Ext.String.capitalize, /** * Alias for {@link Ext.String#ellipsis}. * @method * @inheritdoc Ext.String#ellipsis */ ellipsis: Ext.String.ellipsis, /** * Alias for {@link Ext.String#format}. * @method * @inheritdoc Ext.String#format */ format: Ext.String.format, /** * Alias for {@link Ext.String#htmlDecode}. * @method * @inheritdoc Ext.String#htmlDecode */ htmlDecode: Ext.String.htmlDecode, /** * Alias for {@link Ext.String#htmlEncode}. * @method * @inheritdoc Ext.String#htmlEncode */ htmlEncode: Ext.String.htmlEncode, /** * Alias for {@link Ext.String#leftPad}. * @method * @inheritdoc Ext.String#leftPad */ leftPad: Ext.String.leftPad, /** * Alias for {@link Ext.String#trim}. * @method * @inheritdoc Ext.String#trim */ trim : Ext.String.trim, /** * 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). * * @param {Number/String} v The encoded margins * @return {Object} An object with margin sizes for top, right, bottom and left */ parseBox : function(box) { box = Ext.isEmpty(box) ? '' : box; if (Ext.isNumber(box)) { 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 :parseInt(parts[0], 10) || 0, right :parseInt(parts[1], 10) || 0, bottom:parseInt(parts[2], 10) || 0, left :parseInt(parts[3], 10) || 0 }; }, /** * Escapes the passed string for use in a regular expression. * @param {String} str * @return {String} */ escapeRegex : function(s) { return s.replace(/([\-.*+?\^${}()|\[\]\/\\])/g, "\\$1"); } }); }()); //@tag extras,core //@require Format.js //@define Ext.util.TaskManager //@define Ext.TaskManager /** * Provides the ability to execute one or more arbitrary tasks in a asynchronous manner. * Generally, you can use the singleton {@link Ext.TaskManager} instead, but if needed, * you can create separate instances of TaskRunner. Any number of separate tasks can be * started at any time and will run independently of each other. * * Example usage: * * // Start a simple clock task that updates a div once per second * var updateClock = function () { * Ext.fly('clock').update(new Date().format('g:i:s A')); * } * * var runner = new Ext.util.TaskRunner(); * var task = runner.start({ * run: updateClock, * interval: 1000 * } * * The equivalent using TaskManager: * * var task = Ext.TaskManager.start({ * run: updateClock, * interval: 1000 * }); * * To end a running task: * * Ext.TaskManager.stop(task); * * If a task needs to be started and stopped repeated over time, you can create a * {@link Ext.util.TaskRunner.Task Task} instance. * * var task = runner.newTask({ * run: function () { * // useful code * }, * interval: 1000 * }); * * task.start(); * * // ... * * task.stop(); * * // ... * * task.start(); * * A re-usable, one-shot task can be managed similar to the above: * * var task = runner.newTask({ * run: function () { * // useful code to run once * }, * repeat: 1 * }); * * task.start(); * * // ... * * task.start(); * * See the {@link #start} method for details about how to configure a task object. * * Also see {@link Ext.util.DelayedTask}. * * @constructor * @param {Number/Object} [interval=10] The minimum precision in milliseconds supported by this * TaskRunner instance. Alternatively, a config object to apply to the new instance. */ Ext.define('Ext.util.TaskRunner', { /** * @cfg interval * The timer resolution. */ interval: 10, /** * @property timerId * The id of the current timer. * @private */ timerId: null, constructor: function (interval) { var me = this; if (typeof interval == 'number') { me.interval = interval; } else if (interval) { Ext.apply(me, interval); } me.tasks = []; me.timerFn = Ext.Function.bind(me.onTick, me); }, /** * Creates a new {@link Ext.util.TaskRunner.Task Task} instance. These instances can * be easily started and stopped. * @param {Object} config The config object. For details on the supported properties, * see {@link #start}. */ newTask: function (config) { var task = new Ext.util.TaskRunner.Task(config); task.manager = this; return task; }, /** * Starts a new task. * * Before each invocation, Ext injects the property `taskRunCount` into the task object * so that calculations based on the repeat count can be performed. * * The returned task will contain a `destroy` method that can be used to destroy the * task and cancel further calls. This is equivalent to the {@link #stop} method. * * @param {Object} task A config object that supports the following properties: * @param {Function} task.run The function to execute each time the task is invoked. The * function will be called at each interval and passed the `args` argument if specified, * and the current invocation count if not. * * If a particular scope (`this` reference) is required, be sure to specify it using * the `scope` argument. * * @param {Function} task.onError The function to execute in case of unhandled * error on task.run. * * @param {Boolean} task.run.return `false` from this function to terminate the task. * * @param {Number} task.interval The frequency in milliseconds with which the task * should be invoked. * * @param {Object[]} task.args An array of arguments to be passed to the function * specified by `run`. If not specified, the current invocation count is passed. * * @param {Object} task.scope The scope (`this` reference) in which to execute the * `run` function. Defaults to the task config object. * * @param {Number} task.duration The length of time in milliseconds to invoke the task * before stopping automatically (defaults to indefinite). * * @param {Number} task.repeat The number of times to invoke the task before stopping * automatically (defaults to indefinite). * @return {Object} The task */ start: function(task) { var me = this, now = new Date().getTime(); if (!task.pending) { me.tasks.push(task); task.pending = true; // don't allow the task to be added to me.tasks again } task.stopped = false; // might have been previously stopped... task.taskStartTime = now; task.taskRunTime = task.fireOnStart !== false ? 0 : task.taskStartTime; task.taskRunCount = 0; if (!me.firing) { if (task.fireOnStart !== false) { me.startTimer(0, now); } else { me.startTimer(task.interval, now); } } return task; }, /** * Stops an existing running task. * @param {Object} task The task to stop * @return {Object} The task */ stop: function(task) { // NOTE: we don't attempt to remove the task from me.tasks at this point because // this could be called from inside a task which would then corrupt the state of // the loop in onTick if (!task.stopped) { task.stopped = true; if (task.onStop) { task.onStop.call(task.scope || task, task); } } return task; }, /** * Stops all tasks that are currently running. */ stopAll: function() { // onTick will take care of cleaning up the mess after this point... Ext.each(this.tasks, this.stop, this); }, //------------------------------------------------------------------------- firing: false, nextExpires: 1e99, // private onTick: function () { var me = this, tasks = me.tasks, now = new Date().getTime(), nextExpires = 1e99, len = tasks.length, expires, newTasks, i, task, rt, remove; me.timerId = null; me.firing = true; // ensure we don't startTimer during this loop... // tasks.length can be > len if start is called during a task.run call... so we // first check len to avoid tasks.length reference but eventually we need to also // check tasks.length. we avoid repeating use of tasks.length by setting len at // that time (to help the next loop) for (i = 0; i < len || i < (len = tasks.length); ++i) { task = tasks[i]; if (!(remove = task.stopped)) { expires = task.taskRunTime + task.interval; if (expires <= now) { rt = 1; // otherwise we have a stale "rt" try { rt = task.run.apply(task.scope || task, task.args || [++task.taskRunCount]); } catch (taskError) { try { if (task.onError) { rt = task.onError.call(task.scope || task, task, taskError); } } catch (ignore) { } } task.taskRunTime = now; if (rt === false || task.taskRunCount === task.repeat) { me.stop(task); remove = true; } else { remove = task.stopped; // in case stop was called by run expires = now + task.interval; } } if (!remove && task.duration && task.duration <= (now - task.taskStartTime)) { me.stop(task); remove = true; } } if (remove) { task.pending = false; // allow the task to be added to me.tasks again // once we detect that a task needs to be removed, we copy the tasks that // will carry forward into newTasks... this way we avoid O(N*N) to remove // each task from the tasks array (and ripple the array down) and also the // potentially wasted effort of making a new tasks[] even if all tasks are // going into the next wave. if (!newTasks) { newTasks = tasks.slice(0, i); // we don't set me.tasks here because callbacks can also start tasks, // which get added to me.tasks... so we will visit them in this loop // and account for their expirations in nextExpires... } } else { if (newTasks) { newTasks.push(task); // we've cloned the tasks[], so keep this one... } if (nextExpires > expires) { nextExpires = expires; // track the nearest expiration time } } } if (newTasks) { // only now can we copy the newTasks to me.tasks since no user callbacks can // take place me.tasks = newTasks; } me.firing = false; // we're done, so allow startTimer afterwards if (me.tasks.length) { // we create a new Date here because all the callbacks could have taken a long // time... we want to base the next timeout on the current time (after the // callback storm): me.startTimer(nextExpires - now, new Date().getTime()); } }, // private startTimer: function (timeout, now) { var me = this, expires = now + timeout, timerId = me.timerId; // Check to see if this request is enough in advance of the current timer. If so, // we reschedule the timer based on this new expiration. if (timerId && me.nextExpires - expires > me.interval) { clearTimeout(timerId); timerId = null; } if (!timerId) { if (timeout < me.interval) { timeout = me.interval; } me.timerId = setTimeout(me.timerFn, timeout); me.nextExpires = expires; } } }, function () { var me = this, proto = me.prototype; /** * Destroys this instance, stopping all tasks that are currently running. * @method destroy */ proto.destroy = proto.stopAll; /** * @class Ext.TaskManager * @extends Ext.util.TaskRunner * @singleton * * A static {@link Ext.util.TaskRunner} instance that can be used to start and stop * arbitrary tasks. See {@link Ext.util.TaskRunner} for supported methods and task * config properties. * * // Start a simple clock task that updates a div once per second * var task = { * run: function(){ * Ext.fly('clock').update(new Date().format('g:i:s A')); * }, * interval: 1000 //1 second * } * * Ext.TaskManager.start(task); * * See the {@link #start} method for details about how to configure a task object. */ Ext.util.TaskManager = Ext.TaskManager = new me(); /** * Instances of this class are created by {@link Ext.util.TaskRunner#newTask} method. * * For details on config properties, see {@link Ext.util.TaskRunner#start}. * @class Ext.util.TaskRunner.Task */ me.Task = new Ext.Class({ isTask: true, /** * This flag is set to `true` by {@link #stop}. * @private */ stopped: true, // this avoids the odd combination of !stopped && !pending /** * Override default behavior */ fireOnStart: false, constructor: function (config) { Ext.apply(this, config); }, /** * Restarts this task, clearing it duration, expiration and run count. * @param {Number} [interval] Optionally reset this task's interval. */ restart: function (interval) { if (interval !== undefined) { this.interval = interval; } this.manager.start(this); }, /** * Starts this task if it is not already started. * @param {Number} [interval] Optionally reset this task's interval. */ start: function (interval) { if (this.stopped) { this.restart(interval); } }, /** * Stops this task. */ stop: function () { this.manager.stop(this); } }); proto = me.Task.prototype; /** * Destroys this instance, stopping this task's execution. * @method destroy */ proto.destroy = proto.stop; }); //@tag extras,core //@require ../util/TaskManager.js /** * @class Ext.perf.Accumulator * @private */ Ext.define('Ext.perf.Accumulator', (function () { var currentFrame = null, khrome = Ext.global['chrome'], formatTpl, // lazy init on first request for timestamp (avoids infobar in IE until needed) // Also avoids kicking off Chrome's microsecond timer until first needed getTimestamp = function () { getTimestamp = function () { return new Date().getTime(); }; var interval, toolbox; // If Chrome is started with the --enable-benchmarking switch if (Ext.isChrome && khrome && khrome.Interval) { interval = new khrome.Interval(); interval.start(); getTimestamp = function () { return interval.microseconds() / 1000; }; } else if (window.ActiveXObject) { try { // the above technique is not very accurate for small intervals... toolbox = new ActiveXObject('SenchaToolbox.Toolbox'); Ext.senchaToolbox = toolbox; // export for other uses getTimestamp = function () { return toolbox.milliseconds; }; } catch (e) { // ignore } } else if (Date.now) { getTimestamp = Date.now; } Ext.perf.getTimestamp = Ext.perf.Accumulator.getTimestamp = getTimestamp; return getTimestamp(); }; function adjustSet (set, time) { set.sum += time; set.min = Math.min(set.min, time); set.max = Math.max(set.max, time); } function leaveFrame (time) { var totalTime = time ? time : (getTimestamp() - this.time), // do this first me = this, // me = frame accum = me.accum; ++accum.count; if (! --accum.depth) { adjustSet(accum.total, totalTime); } adjustSet(accum.pure, totalTime - me.childTime); currentFrame = me.parent; if (currentFrame) { ++currentFrame.accum.childCount; currentFrame.childTime += totalTime; } } function makeSet () { return { min: Number.MAX_VALUE, max: 0, sum: 0 }; } function makeTap (me, fn) { return function () { var frame = me.enter(), ret = fn.apply(this, arguments); frame.leave(); return ret; }; } function round (x) { return Math.round(x * 100) / 100; } function setToJSON (count, childCount, calibration, set) { var data = { avg: 0, min: set.min, max: set.max, sum: 0 }; if (count) { calibration = calibration || 0; data.sum = set.sum - childCount * calibration; data.avg = data.sum / count; // min and max cannot be easily corrected since we don't know the number of // child calls for them. } return data; } return { constructor: function (name) { var me = this; me.count = me.childCount = me.depth = me.maxDepth = 0; me.pure = makeSet(); me.total = makeSet(); me.name = name; }, statics: { getTimestamp: getTimestamp }, format: function (calibration) { if (!formatTpl) { formatTpl = new Ext.XTemplate([ '{name} - {count} call(s)', '
',
'',
'
',
'',
'',
'
',
'',
''
].join('');
doc.body.appendChild(div);
}
while (n--) {
test = tests[n];
if (div || test.early) {
me[test.identity] = test.fn.call(me, doc, div);
} else {
notRun.push(test);
}
}
if (div) {
doc.body.removeChild(div);
}
me.tests = notRun;
},
/**
* @property PointerEvents True if document environment supports the CSS3 pointer-events style.
* @type {Boolean}
*/
PointerEvents: 'pointerEvents' in document.documentElement.style,
/**
* @property CSS3BoxShadow True if document environment supports the CSS3 box-shadow style.
* @type {Boolean}
*/
CSS3BoxShadow: 'boxShadow' in document.documentElement.style || 'WebkitBoxShadow' in document.documentElement.style || 'MozBoxShadow' in document.documentElement.style,
/**
* @property ClassList True if document environment supports the HTML5 classList API.
* @type {Boolean}
*/
ClassList: !!document.documentElement.classList,
/**
* @property OrientationChange True if the device supports orientation change
* @type {Boolean}
*/
OrientationChange: ((typeof window.orientation != 'undefined') && ('onorientationchange' in window)),
/**
* @property DeviceMotion True if the device supports device motion (acceleration and rotation rate)
* @type {Boolean}
*/
DeviceMotion: ('ondevicemotion' in window),
/**
* @property Touch True if the device supports touch
* @type {Boolean}
*/
// is.Desktop is needed due to the bug in Chrome 5.0.375, Safari 3.1.2
// and Safari 4.0 (they all have 'ontouchstart' in the window object).
Touch: ('ontouchstart' in window) && (!Ext.is.Desktop),
/**
* @property TimeoutActualLateness True if the browser passes the "actualLateness" parameter to
* setTimeout. See: https://developer.mozilla.org/en/DOM/window.setTimeout
* @type {Boolean}
*/
TimeoutActualLateness: (function(){
setTimeout(function(){
Ext.supports.TimeoutActualLateness = arguments.length !== 0;
}, 0);
}()),
tests: [
/**
* @property Transitions True if the device supports CSS3 Transitions
* @type {Boolean}
*/
{
identity: 'Transitions',
fn: function(doc, div) {
var prefix = [
'webkit',
'Moz',
'o',
'ms',
'khtml'
],
TE = 'TransitionEnd',
transitionEndName = [
prefix[0] + TE,
'transitionend', //Moz bucks the prefixing convention
prefix[2] + TE,
prefix[3] + TE,
prefix[4] + TE
],
ln = prefix.length,
i = 0,
out = false;
for (; i < ln; i++) {
if (getStyle(div, prefix[i] + "TransitionProperty")) {
Ext.supports.CSS3Prefix = prefix[i];
Ext.supports.CSS3TransitionEnd = transitionEndName[i];
out = true;
break;
}
}
return out;
}
},
/**
* @property RightMargin True if the device supports right margin.
* See https://bugs.webkit.org/show_bug.cgi?id=13343 for why this is needed.
* @type {Boolean}
*/
{
identity: 'RightMargin',
fn: function(doc, div) {
var view = doc.defaultView;
return !(view && view.getComputedStyle(div.firstChild.firstChild, null).marginRight != '0px');
}
},
/**
* @property DisplayChangeInputSelectionBug True if INPUT elements lose their
* selection when their display style is changed. Essentially, if a text input
* has focus and its display style is changed, the I-beam disappears.
*
* This bug is encountered due to the work around in place for the {@link #RightMargin}
* bug. This has been observed in Safari 4.0.4 and older, and appears to be fixed
* in Safari 5. It's not clear if Safari 4.1 has the bug, but it has the same WebKit
* version number as Safari 5 (according to http://unixpapa.com/js/gecko.html).
*/
{
identity: 'DisplayChangeInputSelectionBug',
early: true,
fn: function() {
var webKitVersion = Ext.webKitVersion;
// WebKit but older than Safari 5 or Chrome 6:
return 0 < webKitVersion && webKitVersion < 533;
}
},
/**
* @property DisplayChangeTextAreaSelectionBug True if TEXTAREA elements lose their
* selection when their display style is changed. Essentially, if a text area has
* focus and its display style is changed, the I-beam disappears.
*
* This bug is encountered due to the work around in place for the {@link #RightMargin}
* bug. This has been observed in Chrome 10 and Safari 5 and older, and appears to
* be fixed in Chrome 11.
*/
{
identity: 'DisplayChangeTextAreaSelectionBug',
early: true,
fn: function() {
var webKitVersion = Ext.webKitVersion;
/*
Has bug w/textarea:
(Chrome) Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_7; en-US)
AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.127
Safari/534.16
(Safari) Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_7; en-us)
AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5
Safari/533.21.1
No bug:
(Chrome) Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7)
AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.57
Safari/534.24
*/
return 0 < webKitVersion && webKitVersion < 534.24;
}
},
/**
* @property TransparentColor True if the device supports transparent color
* @type {Boolean}
*/
{
identity: 'TransparentColor',
fn: function(doc, div, view) {
view = doc.defaultView;
return !(view && view.getComputedStyle(div.lastChild, null).backgroundColor != 'transparent');
}
},
/**
* @property ComputedStyle True if the browser supports document.defaultView.getComputedStyle()
* @type {Boolean}
*/
{
identity: 'ComputedStyle',
fn: function(doc, div, view) {
view = doc.defaultView;
return view && view.getComputedStyle;
}
},
/**
* @property Svg True if the device supports SVG
* @type {Boolean}
*/
{
identity: 'Svg',
fn: function(doc) {
return !!doc.createElementNS && !!doc.createElementNS( "http:/" + "/www.w3.org/2000/svg", "svg").createSVGRect;
}
},
/**
* @property Canvas True if the device supports Canvas
* @type {Boolean}
*/
{
identity: 'Canvas',
fn: function(doc) {
return !!doc.createElement('canvas').getContext;
}
},
/**
* @property Vml True if the device supports VML
* @type {Boolean}
*/
{
identity: 'Vml',
fn: function(doc) {
var d = doc.createElement("div");
d.innerHTML = "";
return (d.childNodes.length == 2);
}
},
/**
* @property Float True if the device supports CSS float
* @type {Boolean}
*/
{
identity: 'Float',
fn: function(doc, div) {
return !!div.lastChild.style.cssFloat;
}
},
/**
* @property AudioTag True if the device supports the HTML5 audio tag
* @type {Boolean}
*/
{
identity: 'AudioTag',
fn: function(doc) {
return !!doc.createElement('audio').canPlayType;
}
},
/**
* @property History True if the device supports HTML5 history
* @type {Boolean}
*/
{
identity: 'History',
fn: function() {
var history = window.history;
return !!(history && history.pushState);
}
},
/**
* @property CSS3DTransform True if the device supports CSS3DTransform
* @type {Boolean}
*/
{
identity: 'CSS3DTransform',
fn: function() {
return (typeof WebKitCSSMatrix != 'undefined' && new WebKitCSSMatrix().hasOwnProperty('m41'));
}
},
/**
* @property CSS3LinearGradient True if the device supports CSS3 linear gradients
* @type {Boolean}
*/
{
identity: 'CSS3LinearGradient',
fn: function(doc, div) {
var property = 'background-image:',
webkit = '-webkit-gradient(linear, left top, right bottom, from(black), to(white))',
w3c = 'linear-gradient(left top, black, white)',
moz = '-moz-' + w3c,
opera = '-o-' + w3c,
options = [property + webkit, property + w3c, property + moz, property + opera];
div.style.cssText = options.join(';');
return ("" + div.style.backgroundImage).indexOf('gradient') !== -1;
}
},
/**
* @property CSS3BorderRadius True if the device supports CSS3 border radius
* @type {Boolean}
*/
{
identity: 'CSS3BorderRadius',
fn: function(doc, div) {
var domPrefixes = ['borderRadius', 'BorderRadius', 'MozBorderRadius', 'WebkitBorderRadius', 'OBorderRadius', 'KhtmlBorderRadius'],
pass = false,
i;
for (i = 0; i < domPrefixes.length; i++) {
if (document.body.style[domPrefixes[i]] !== undefined) {
return true;
}
}
return pass;
}
},
/**
* @property GeoLocation True if the device supports GeoLocation
* @type {Boolean}
*/
{
identity: 'GeoLocation',
fn: function() {
return (typeof navigator != 'undefined' && typeof navigator.geolocation != 'undefined') || (typeof google != 'undefined' && typeof google.gears != 'undefined');
}
},
/**
* @property MouseEnterLeave True if the browser supports mouseenter and mouseleave events
* @type {Boolean}
*/
{
identity: 'MouseEnterLeave',
fn: function(doc, div){
return ('onmouseenter' in div && 'onmouseleave' in div);
}
},
/**
* @property MouseWheel True if the browser supports the mousewheel event
* @type {Boolean}
*/
{
identity: 'MouseWheel',
fn: function(doc, div) {
return ('onmousewheel' in div);
}
},
/**
* @property Opacity True if the browser supports normal css opacity
* @type {Boolean}
*/
{
identity: 'Opacity',
fn: function(doc, div){
// Not a strict equal comparison in case opacity can be converted to a number.
if (Ext.isIE6 || Ext.isIE7 || Ext.isIE8) {
return false;
}
div.firstChild.style.cssText = 'opacity:0.73';
return div.firstChild.style.opacity == '0.73';
}
},
/**
* @property Placeholder True if the browser supports the HTML5 placeholder attribute on inputs
* @type {Boolean}
*/
{
identity: 'Placeholder',
fn: function(doc) {
return 'placeholder' in doc.createElement('input');
}
},
/**
* @property Direct2DBug True if when asking for an element's dimension via offsetWidth or offsetHeight,
* getBoundingClientRect, etc. the browser returns the subpixel width rounded to the nearest pixel.
* @type {Boolean}
*/
{
identity: 'Direct2DBug',
fn: function() {
return Ext.isString(document.body.style.msTransformOrigin);
}
},
/**
* @property BoundingClientRect True if the browser supports the getBoundingClientRect method on elements
* @type {Boolean}
*/
{
identity: 'BoundingClientRect',
fn: function(doc, div) {
return Ext.isFunction(div.getBoundingClientRect);
}
},
{
identity: 'IncludePaddingInWidthCalculation',
fn: function(doc, div){
return div.childNodes[1].firstChild.offsetWidth == 210;
}
},
{
identity: 'IncludePaddingInHeightCalculation',
fn: function(doc, div){
return div.childNodes[1].firstChild.offsetHeight == 210;
}
},
/**
* @property ArraySort True if the Array sort native method isn't bugged.
* @type {Boolean}
*/
{
identity: 'ArraySort',
fn: function() {
var a = [1,2,3,4,5].sort(function(){ return 0; });
return a[0] === 1 && a[1] === 2 && a[2] === 3 && a[3] === 4 && a[4] === 5;
}
},
/**
* @property Range True if browser support document.createRange native method.
* @type {Boolean}
*/
{
identity: 'Range',
fn: function() {
return !!document.createRange;
}
},
/**
* @property CreateContextualFragment True if browser support CreateContextualFragment range native methods.
* @type {Boolean}
*/
{
identity: 'CreateContextualFragment',
fn: function() {
var range = Ext.supports.Range ? document.createRange() : false;
return range && !!range.createContextualFragment;
}
},
/**
* @property WindowOnError True if browser supports window.onerror.
* @type {Boolean}
*/
{
identity: 'WindowOnError',
fn: function () {
// sadly, we cannot feature detect this...
return Ext.isIE || Ext.isGecko || Ext.webKitVersion >= 534.16; // Chrome 10+
}
},
/**
* @property TextAreaMaxLength True if the browser supports maxlength on textareas.
* @type {Boolean}
*/
{
identity: 'TextAreaMaxLength',
fn: function(){
var el = document.createElement('textarea');
return ('maxlength' in el);
}
},
/**
* @property GetPositionPercentage True if the browser will return the left/top/right/bottom
* position as a percentage when explicitly set as a percentage value.
* @type {Boolean}
*/
// Related bug: https://bugzilla.mozilla.org/show_bug.cgi?id=707691#c7
{
identity: 'GetPositionPercentage',
fn: function(doc, div){
return getStyle(div.childNodes[2], 'left') == '10%';
}
}
]
};
}());
Ext.supports.init(); // run the "early" detections now
//@tag dom,core
//@require ../Support.js
//@define Ext.util.DelayedTask
/**
* @class Ext.util.DelayedTask
*
* The DelayedTask class provides a convenient way to "buffer" the execution of a method,
* performing setTimeout where a new timeout cancels the old timeout. When called, the
* task will wait the specified time period before executing. If durng that time period,
* the task is called again, the original call will be cancelled. This continues so that
* the function is only called a single time for each iteration.
*
* This method is especially useful for things like detecting whether a user has finished
* typing in a text field. An example would be performing validation on a keypress. You can
* use this class to buffer the keypress events for a certain number of milliseconds, and
* perform only if they stop for that amount of time.
*
* ## Usage
*
* var task = new Ext.util.DelayedTask(function(){
* alert(Ext.getDom('myInputField').value.length);
* });
*
* // Wait 500ms before calling our function. If the user presses another key
* // during that 500ms, it will be cancelled and we'll wait another 500ms.
* Ext.get('myInputField').on('keypress', function(){
* task.{@link #delay}(500);
* });
*
* Note that we are using a DelayedTask here to illustrate a point. The configuration
* option `buffer` for {@link Ext.util.Observable#addListener addListener/on} will
* also setup a delayed task for you to buffer events.
*
* @constructor The parameters to this constructor serve as defaults and are not required.
* @param {Function} fn (optional) The default function to call. If not specified here, it must be specified during the {@link #delay} call.
* @param {Object} scope (optional) The default scope (The 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;
}
};
}()));
});
/**
* Base class that provides a common interface for publishing events. Subclasses are expected to to have a property
* "events" with all the events defined, and, optionally, a property "listeners" with configured listeners defined.
*
* For example:
*
* Ext.define('Employee', {
* mixins: {
* observable: 'Ext.util.Observable'
* },
*
* constructor: function (config) {
* // The Observable constructor copies all of the properties of `config` on
* // to `this` using {@link Ext#apply}. Further, the `listeners` property is
* // processed to add listeners.
* //
* this.mixins.observable.constructor.call(this, config);
*
* this.addEvents(
* 'fired',
* 'quit'
* );
* }
* });
*
* This could then be used like this:
*
* var newEmployee = new Employee({
* name: employeeName,
* listeners: {
* quit: function() {
* // By default, "this" will be the object that fired the event.
* alert(this.name + " has quit!");
* }
* }
* });
*/
Ext.define('Ext.util.Observable', {
/* Begin Definitions */
requires: ['Ext.util.Event'],
statics: {
/**
* Removes **all** added captures from the Observable.
*
* @param {Ext.util.Observable} o The Observable to release
* @static
*/
releaseCapture: function(o) {
o.fireEvent = this.prototype.fireEvent;
},
/**
* Starts capture on the specified Observable. All events will be passed to the supplied function with the event
* name + standard signature of the event **before** the event is fired. If the supplied function returns false,
* the event will not fire.
*
* @param {Ext.util.Observable} o The Observable to capture events from.
* @param {Function} fn The function to call when an event is fired.
* @param {Object} scope (optional) The scope (`this` reference) in which the function is executed. Defaults to
* the Observable firing the event.
* @static
*/
capture: function(o, fn, scope) {
o.fireEvent = Ext.Function.createInterceptor(o.fireEvent, fn, scope);
},
/**
* Sets observability on the passed class constructor.
*
* This makes any event fired on any instance of the passed class also fire a single event through
* the **class** allowing for central handling of events on many instances at once.
*
* Usage:
*
* Ext.util.Observable.observe(Ext.data.Connection);
* Ext.data.Connection.on('beforerequest', function(con, options) {
* console.log('Ajax request made to ' + options.url);
* });
*
* @param {Function} c The class constructor to make observable.
* @param {Object} listeners An object containing a series of listeners to add. See {@link #addListener}.
* @static
*/
observe: function(cls, listeners) {
if (cls) {
if (!cls.isObservable) {
Ext.applyIf(cls, new this());
this.capture(cls.prototype, cls.fireEvent, cls);
}
if (Ext.isObject(listeners)) {
cls.on(listeners);
}
}
return cls;
},
/**
* Prepares a given class for observable instances. This method is called when a
* class derives from this class or uses this class as a mixin.
* @param {Function} T The class constructor to prepare.
* @private
*/
prepareClass: function (T, mixin) {
// T.hasListeners is the object to track listeners on class T. This object's
// prototype (__proto__) is the "hasListeners" of T.superclass.
// Instances of T will create "hasListeners" that have T.hasListeners as their
// immediate prototype (__proto__).
if (!T.HasListeners) {
// We create a HasListeners "class" for this class. The "prototype" of the
// HasListeners class is an instance of the HasListeners class associated
// with this class's super class (or with Observable).
var Observable = Ext.util.Observable,
HasListeners = function () {},
SuperHL = T.superclass.HasListeners || (mixin && mixin.HasListeners) ||
Observable.HasListeners;
// Make the HasListener class available on the class and its prototype:
T.prototype.HasListeners = T.HasListeners = HasListeners;
// And connect its "prototype" to the new HasListeners of our super class
// (which is also the class-level "hasListeners" instance).
HasListeners.prototype = T.hasListeners = new SuperHL();
}
}
},
/* End Definitions */
/**
* @cfg {Object} listeners
*
* A config object containing one or more event handlers to be added to this object during initialization. This
* should be a valid listeners config object as specified in the {@link #addListener} example for attaching multiple
* handlers at once.
*
* **DOM events from Ext JS {@link Ext.Component Components}**
*
* While _some_ Ext JS Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually
* only done when extra value can be added. For example the {@link Ext.view.View DataView}'s **`{@link
* Ext.view.View#itemclick itemclick}`** event passing the node clicked on. To access DOM events directly from a
* child element of a Component, we need to specify the `element` option to identify the Component property to add a
* DOM listener to:
*
* new Ext.panel.Panel({
* width: 400,
* height: 200,
* dockedItems: [{
* xtype: 'toolbar'
* }],
* listeners: {
* click: {
* element: 'el', //bind to the underlying el property on the panel
* fn: function(){ console.log('click el'); }
* },
* dblclick: {
* element: 'body', //bind to the underlying body property on the panel
* fn: function(){ console.log('dblclick body'); }
* }
* }
* });
*/
/**
* @property {Boolean} isObservable
* `true` in this class to identify an object as an instantiated Observable, or subclass thereof.
*/
isObservable: true,
/**
* @private
* Initial suspended call count. Incremented when {@link #suspendEvents} is called, decremented when {@link #resumeEvents} is called.
*/
eventsSuspended: 0,
/**
* @property {Object} hasListeners
* @readonly
* This object holds a key for any event that has a listener. The listener may be set
* directly on the instance, or on its class or a super class (via {@link #observe}) or
* on the {@link Ext.app.EventBus MVC EventBus}. The values of this object are truthy
* (a non-zero number) and falsy (0 or undefined). They do not represent an exact count
* of listeners. The value for an event is truthy if the event must be fired and is
* falsy if there is no need to fire the event.
*
* The intended use of this property is to avoid the expense of fireEvent calls when
* there are no listeners. This can be particularly helpful when one would otherwise
* have to call fireEvent hundreds or thousands of times. It is used like this:
*
* if (this.hasListeners.foo) {
* this.fireEvent('foo', this, arg1);
* }
*/
constructor: function(config) {
var me = this;
Ext.apply(me, config);
// The subclass may have already initialized it.
if (!me.hasListeners) {
me.hasListeners = new me.HasListeners();
}
me.events = me.events || {};
if (me.listeners) {
me.on(me.listeners);
me.listeners = null; //Set as an instance property to pre-empt the prototype in case any are set there.
}
if (me.bubbleEvents) {
me.enableBubble(me.bubbleEvents);
}
},
onClassExtended: function (T) {
if (!T.HasListeners) {
// Some classes derive from us and some others derive from those classes. All
// of these are passed to this method.
Ext.util.Observable.prepareClass(T);
}
},
// @private
eventOptionsRe : /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate|element|vertical|horizontal|freezeEvent)$/,
/**
* Adds listeners to any Observable object (or Ext.Element) which are automatically removed when this Component is
* destroyed.
*
* @param {Ext.util.Observable/Ext.Element} item The item to which to add a listener/listeners.
* @param {Object/String} ename The event name, or an object containing event name properties.
* @param {Function} fn (optional) If the `ename` parameter was an event name, this is the handler function.
* @param {Object} scope (optional) If the `ename` parameter was an event name, this is the scope (`this` reference)
* in which the handler function is executed.
* @param {Object} opt (optional) If the `ename` parameter was an event name, this is the
* {@link Ext.util.Observable#addListener addListener} options.
*/
addManagedListener : function(item, ename, fn, scope, options) {
var me = this,
managedListeners = me.managedListeners = me.managedListeners || [],
config;
if (typeof ename !== 'string') {
options = ename;
for (ename in options) {
if (options.hasOwnProperty(ename)) {
config = options[ename];
if (!me.eventOptionsRe.test(ename)) {
me.addManagedListener(item, ename, config.fn || config, config.scope || options.scope, config.fn ? config : options);
}
}
}
}
else {
managedListeners.push({
item: item,
ename: ename,
fn: fn,
scope: scope,
options: options
});
item.on(ename, fn, scope, options);
}
},
/**
* Removes listeners that were added by the {@link #mon} method.
*
* @param {Ext.util.Observable/Ext.Element} item The item from which to remove a listener/listeners.
* @param {Object/String} ename The event name, or an object containing event name properties.
* @param {Function} fn (optional) If the `ename` parameter was an event name, this is the handler function.
* @param {Object} scope (optional) If the `ename` parameter was an event name, this is the scope (`this` reference)
* in which the handler function is executed.
*/
removeManagedListener : function(item, ename, fn, scope) {
var me = this,
options,
config,
managedListeners,
length,
i;
if (typeof ename !== 'string') {
options = ename;
for (ename in options) {
if (options.hasOwnProperty(ename)) {
config = options[ename];
if (!me.eventOptionsRe.test(ename)) {
me.removeManagedListener(item, ename, config.fn || config, config.scope || options.scope);
}
}
}
}
managedListeners = me.managedListeners ? me.managedListeners.slice() : [];
for (i = 0, length = managedListeners.length; i < length; i++) {
me.removeManagedListenerItem(false, managedListeners[i], item, ename, fn, scope);
}
},
/**
* Fires the specified event with the passed parameters (minus the event name, plus the `options` object passed
* to {@link #addListener}).
*
* An event may be set to bubble up an Observable parent hierarchy (See {@link Ext.Component#getBubbleTarget}) by
* calling {@link #enableBubble}.
*
* @param {String} eventName The name of the event to fire.
* @param {Object...} args Variable number of parameters are passed to handlers.
* @return {Boolean} returns false if any of the handlers return false otherwise it returns true.
*/
fireEvent: function(eventName) {
eventName = eventName.toLowerCase();
var me = this,
events = me.events,
event = events && events[eventName],
ret = true;
// Only continue firing the event if there are listeners to be informed.
// Bubbled events will always have a listener count, so will be fired.
if (event && me.hasListeners[eventName]) {
ret = me.continueFireEvent(eventName, Ext.Array.slice(arguments, 1), event.bubble);
}
return ret;
},
/**
* Continue to fire event.
* @private
*
* @param {String} eventName
* @param {Array} args
* @param {Boolean} bubbles
*/
continueFireEvent: function(eventName, args, bubbles) {
var target = this,
queue, event,
ret = true;
do {
if (target.eventsSuspended) {
if ((queue = target.eventQueue)) {
queue.push([eventName, args, bubbles]);
}
return ret;
} else {
event = target.events[eventName];
// Continue bubbling if event exists and it is `true` or the handler didn't returns false and it
// configure to bubble.
if (event && event != true) {
if ((ret = event.fire.apply(event, args)) === false) {
break;
}
}
}
} while (bubbles && (target = target.getBubbleParent()));
return ret;
},
/**
* Gets the bubbling parent for an Observable
* @private
* @return {Ext.util.Observable} The bubble parent. null is returned if no bubble target exists
*/
getBubbleParent: function(){
var me = this, parent = me.getBubbleTarget && me.getBubbleTarget();
if (parent && parent.isObservable) {
return parent;
}
return null;
},
/**
* Appends an event handler to this object. For example:
*
* myGridPanel.on("mouseover", this.onMouseOver, this);
*
* The method also allows for a single argument to be passed which is a config object
* containing properties which specify multiple events. For example:
*
* myGridPanel.on({
* cellClick: this.onCellClick,
* mouseover: this.onMouseOver,
* mouseout: this.onMouseOut,
* scope: this // Important. Ensure "this" is correct during handler execution
* });
*
* One can also specify options for each event handler separately:
*
* myGridPanel.on({
* cellClick: {fn: this.onCellClick, scope: this, single: true},
* mouseover: {fn: panel.onMouseOver, scope: panel}
* });
*
* *Names* of methods in a specified scope may also be used. Note that
* `scope` MUST be specified to use this option:
*
* myGridPanel.on({
* cellClick: {fn: 'onCellClick', scope: this, single: true},
* mouseover: {fn: 'onMouseOver', scope: panel}
* });
*
* @param {String/Object} eventName The name of the event to listen for.
* May also be an object who's property names are event names.
*
* @param {Function} [fn] The method the event invokes, or *if `scope` is specified, the *name* of the method within
* the specified `scope`. Will be called with arguments
* given to {@link #fireEvent} plus the `options` parameter described below.
*
* @param {Object} [scope] The scope (`this` reference) in which the handler function is
* executed. **If omitted, defaults to the object which fired the event.**
*
* @param {Object} [options] An object containing handler configuration.
*
* **Note:** Unlike in ExtJS 3.x, the options object will also be passed as the last
* argument to every event handler.
*
* This object may contain any of the following properties:
*
* @param {Object} options.scope
* The scope (`this` reference) in which the handler function is executed. **If omitted,
* defaults to the object which fired the event.**
*
* @param {Number} options.delay
* The number of milliseconds to delay the invocation of the handler after the event fires.
*
* @param {Boolean} options.single
* True to add a handler to handle just the next firing of the event, and then remove itself.
*
* @param {Number} options.buffer
* Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
* by the specified number of milliseconds. If the event fires again within that time,
* the original handler is _not_ invoked, but the new handler is scheduled in its place.
*
* @param {Ext.util.Observable} options.target
* Only call the handler if the event was fired on the target Observable, _not_ if the event
* was bubbled up from a child Observable.
*
* @param {String} options.element
* **This option is only valid for listeners bound to {@link Ext.Component Components}.**
* The name of a Component property which references an element to add a listener to.
*
* This option is useful during Component construction to add DOM event listeners to elements of
* {@link Ext.Component Components} which will exist only after the Component is rendered.
* For example, to add a click listener to a Panel's body:
*
* new Ext.panel.Panel({
* title: 'The title',
* listeners: {
* click: this.handlePanelClick,
* element: 'body'
* }
* });
*
* **Combining Options**
*
* Using the options argument, it is possible to combine different types of listeners:
*
* A delayed, one-time listener.
*
* myPanel.on('hide', this.handleClick, this, {
* single: true,
* delay: 100
* });
*
*/
addListener: function(ename, fn, scope, options) {
var me = this,
config, event, hasListeners,
prevListenerCount = 0;
if (typeof ename !== 'string') {
options = ename;
for (ename in options) {
if (options.hasOwnProperty(ename)) {
config = options[ename];
if (!me.eventOptionsRe.test(ename)) {
me.addListener(ename, config.fn || config, config.scope || options.scope, config.fn ? config : options);
}
}
}
} else {
ename = ename.toLowerCase();
event = me.events[ename];
if (event && event.isEvent) {
prevListenerCount = event.listeners.length;
} else {
me.events[ename] = event = new Ext.util.Event(me, ename);
}
// Allow listeners: { click: 'onClick', scope: myObject }
if (typeof fn === 'string') {
if (!(scope[fn] || me[fn])) {
Ext.Error.raise('No method named "' + fn + '"');
}
fn = scope[fn] || me[fn];
}
event.addListener(fn, scope, options);
// If a new listener has been added (Event.addListener rejects duplicates of the same fn+scope)
// then increment the hasListeners counter
if (event.listeners.length !== prevListenerCount) {
hasListeners = me.hasListeners;
if (hasListeners.hasOwnProperty(ename)) {
// if we already have listeners at this level, just increment the count...
++hasListeners[ename];
} else {
// otherwise, start the count at 1 (which hides whatever is in our prototype
// chain)...
hasListeners[ename] = 1;
}
}
}
},
/**
* Removes an event handler.
*
* @param {String} eventName The type of event the handler was associated with.
* @param {Function} fn The handler to remove. **This must be a reference to the function passed into the
* {@link #addListener} call.**
* @param {Object} scope (optional) The scope originally specified for the handler. It must be the same as the
* scope argument specified in the original call to {@link #addListener} or the listener will not be removed.
*/
removeListener: function(ename, fn, scope) {
var me = this,
config,
event,
options;
if (typeof ename !== 'string') {
options = ename;
for (ename in options) {
if (options.hasOwnProperty(ename)) {
config = options[ename];
if (!me.eventOptionsRe.test(ename)) {
me.removeListener(ename, config.fn || config, config.scope || options.scope);
}
}
}
} else {
ename = ename.toLowerCase();
event = me.events[ename];
if (event && event.isEvent) {
if (event.removeListener(fn, scope) && !--me.hasListeners[ename]) {
// Delete this entry, since 0 does not mean no one is listening, just
// that no one is *directly& listening. This allows the eventBus or
// class observers to "poke" through and expose their presence.
delete me.hasListeners[ename];
}
}
}
},
/**
* Removes all listeners for this object including the managed listeners
*/
clearListeners: function() {
var events = this.events,
event,
key;
for (key in events) {
if (events.hasOwnProperty(key)) {
event = events[key];
if (event.isEvent) {
event.clearListeners();
}
}
}
this.clearManagedListeners();
},
purgeListeners : function() {
if (Ext.global.console) {
Ext.global.console.warn('Observable: purgeListeners has been deprecated. Please use clearListeners.');
}
return this.clearListeners.apply(this, arguments);
},
/**
* Removes all managed listeners for this object.
*/
clearManagedListeners : function() {
var managedListeners = this.managedListeners || [],
i = 0,
len = managedListeners.length;
for (; i < len; i++) {
this.removeManagedListenerItem(true, managedListeners[i]);
}
this.managedListeners = [];
},
/**
* Remove a single managed listener item
* @private
* @param {Boolean} isClear True if this is being called during a clear
* @param {Object} managedListener The managed listener item
* See removeManagedListener for other args
*/
removeManagedListenerItem: function(isClear, managedListener, item, ename, fn, scope){
if (isClear || (managedListener.item === item && managedListener.ename === ename && (!fn || managedListener.fn === fn) && (!scope || managedListener.scope === scope))) {
managedListener.item.un(managedListener.ename, managedListener.fn, managedListener.scope);
if (!isClear) {
Ext.Array.remove(this.managedListeners, managedListener);
}
}
},
purgeManagedListeners : function() {
if (Ext.global.console) {
Ext.global.console.warn('Observable: purgeManagedListeners has been deprecated. Please use clearManagedListeners.');
}
return this.clearManagedListeners.apply(this, arguments);
},
/**
* Adds the specified events to the list of events which this Observable may fire.
*
* @param {Object/String...} eventNames Either an object with event names as properties with
* a value of `true`. For example:
*
* this.addEvents({
* storeloaded: true,
* storecleared: true
* });
*
* Or any number of event names as separate parameters. For example:
*
* this.addEvents('storeloaded', 'storecleared');
*
*/
addEvents: function(o) {
var me = this,
events = me.events || (me.events = {}),
arg, args, i;
if (typeof o == 'string') {
for (args = arguments, i = args.length; i--; ) {
arg = args[i];
if (!events[arg]) {
events[arg] = true;
}
}
} else {
Ext.applyIf(me.events, o);
}
},
/**
* Checks to see if this object has any listeners for a specified event, or whether the event bubbles. The answer
* indicates whether the event needs firing or not.
*
* @param {String} eventName The name of the event to check for
* @return {Boolean} `true` if the event is being listened for or bubbles, else `false`
*/
hasListener: function(ename) {
return !!this.hasListeners[ename.toLowerCase()];
},
/**
* Suspends the firing of all events. (see {@link #resumeEvents})
*
* @param {Boolean} queueSuspended Pass as true to queue up suspended events to be fired
* after the {@link #resumeEvents} call instead of discarding all suspended events.
*/
suspendEvents: function(queueSuspended) {
this.eventsSuspended += 1;
if (queueSuspended && !this.eventQueue) {
this.eventQueue = [];
}
},
/**
* Resumes firing events (see {@link #suspendEvents}).
*
* If events were suspended using the `queueSuspended` parameter, then all events fired
* during event suspension will be sent to any listeners now.
*/
resumeEvents: function() {
var me = this,
queued = me.eventQueue,
qLen, q;
if (me.eventsSuspended && ! --me.eventsSuspended) {
delete me.eventQueue;
if (queued) {
qLen = queued.length;
for (q = 0; q < qLen; q++) {
me.continueFireEvent.apply(me, queued[q]);
}
}
}
},
/**
* Relays selected events from the specified Observable as if the events were fired by `this`.
*
* For example if you are extending Grid, you might decide to forward some events from store.
* So you can do this inside your initComponent:
*
* this.relayEvents(this.getStore(), ['load']);
*
* The grid instance will then have an observable 'load' event which will be passed the
* parameters of the store's load event and any function fired with the grid's load event
* would have access to the grid using the `this` keyword.
*
* @param {Object} origin The Observable whose events this object is to relay.
* @param {String[]} events Array of event names to relay.
* @param {String} [prefix] A common prefix to prepend to the event names. For example:
*
* this.relayEvents(this.getStore(), ['load', 'clear'], 'store');
*
* Now the grid will forward 'load' and 'clear' events of store as 'storeload' and 'storeclear'.
*/
relayEvents : function(origin, events, prefix) {
var me = this,
len = events.length,
i = 0,
oldName,
newName;
for (; i < len; i++) {
oldName = events[i];
newName = prefix ? prefix + oldName : oldName;
// Add the relaying function as a ManagedListener so that it is removed when this.clearListeners is called (usually when _this_ is destroyed)
me.mon(origin, oldName, me.createRelayer(newName));
}
},
/**
* @private
* Creates an event handling function which refires the event from this object as the passed event name.
* @param newName
* @param {Array} beginEnd (optional) The caller can specify on which indices to slice
* @returns {Function}
*/
createRelayer: function(newName, beginEnd){
var me = this;
return function() {
return me.fireEvent.apply(me, [newName].concat(Array.prototype.slice.apply(arguments, beginEnd || [0, -1])));
};
},
/**
* Enables events fired by this Observable to bubble up an owner hierarchy by calling `this.getBubbleTarget()` if
* present. There is no implementation in the Observable base class.
*
* This is commonly used by Ext.Components to bubble events to owner Containers.
* See {@link Ext.Component#getBubbleTarget}. The default implementation in Ext.Component returns the
* Component's immediate owner. But if a known target is required, this can be overridden to access the
* required target more quickly.
*
* Example:
*
* Ext.override(Ext.form.field.Base, {
* // Add functionality to Field's initComponent to enable the change event to bubble
* initComponent : Ext.Function.createSequence(Ext.form.field.Base.prototype.initComponent, function() {
* this.enableBubble('change');
* }),
*
* // We know that we want Field's events to bubble directly to the FormPanel.
* getBubbleTarget : function() {
* if (!this.formPanel) {
* this.formPanel = this.findParentByType('form');
* }
* return this.formPanel;
* }
* });
*
* var myForm = new Ext.formPanel({
* title: 'User Details',
* items: [{
* ...
* }],
* listeners: {
* change: function() {
* // Title goes red if form has been modified.
* myForm.header.setStyle('color', 'red');
* }
* }
* });
*
* @param {String/String[]} eventNames The event name to bubble, or an Array of event names.
*/
enableBubble: function(eventNames) {
if (eventNames) {
var me = this,
names = (typeof eventNames == 'string') ? arguments : eventNames,
length = names.length,
events = me.events,
ename, event, i;
for (i = 0; i < length; ++i) {
ename = names[i].toLowerCase();
event = events[ename];
if (!event || typeof event == 'boolean') {
events[ename] = event = new Ext.util.Event(me, ename);
}
// Event must fire if it bubbles (We don't know if anyone up the bubble hierarchy has listeners added)
me.hasListeners[ename] = (me.hasListeners[ename]||0) + 1;
event.bubble = true;
}
}
}
}, function() {
var Observable = this,
proto = Observable.prototype,
HasListeners = function () {},
prepareMixin = function (T) {
if (!T.HasListeners) {
var proto = T.prototype;
// Classes that use us as a mixin (best practice) need to be prepared.
Observable.prepareClass(T, this);
// Now that we are mixed in to class T, we need to watch T for derivations
// and prepare them also.
T.onExtended(function (U) {
Observable.prepareClass(U);
});
// Also, if a class uses us as a mixin and that class is then used as
// a mixin, we need to be notified of that as well.
if (proto.onClassMixedIn) {
// play nice with other potential overrides...
Ext.override(T, {
onClassMixedIn: function (U) {
prepareMixin.call(this, U);
this.callParent(arguments);
}
});
} else {
// just us chickens, so add the method...
proto.onClassMixedIn = function (U) {
prepareMixin.call(this, U);
};
}
}
};
HasListeners.prototype = {
//$$: 42 // to make sure we have a proper prototype
};
proto.HasListeners = Observable.HasListeners = HasListeners;
Observable.createAlias({
/**
* @method
* Shorthand for {@link #addListener}.
* @inheritdoc Ext.util.Observable#addListener
*/
on: 'addListener',
/**
* @method
* Shorthand for {@link #removeListener}.
* @inheritdoc Ext.util.Observable#removeListener
*/
un: 'removeListener',
/**
* @method
* Shorthand for {@link #addManagedListener}.
* @inheritdoc Ext.util.Observable#addManagedListener
*/
mon: 'addManagedListener',
/**
* @method
* Shorthand for {@link #removeManagedListener}.
* @inheritdoc Ext.util.Observable#removeManagedListener
*/
mun: 'removeManagedListener'
});
//deprecated, will be removed in 5.0
Observable.observeClass = Observable.observe;
// this is considered experimental (along with beforeMethod, afterMethod, removeMethodListener?)
// allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call
// private
function getMethodEvent(method){
var e = (this.methodEvents = this.methodEvents || {})[method],
returnValue,
v,
cancel,
obj = this,
makeCall;
if (!e) {
this.methodEvents[method] = e = {};
e.originalFn = this[method];
e.methodName = method;
e.before = [];
e.after = [];
makeCall = function(fn, scope, args){
if((v = fn.apply(scope || obj, args)) !== undefined){
if (typeof v == 'object') {
if(v.returnValue !== undefined){
returnValue = v.returnValue;
}else{
returnValue = v;
}
cancel = !!v.cancel;
}
else
if (v === false) {
cancel = true;
}
else {
returnValue = v;
}
}
};
this[method] = function(){
var args = Array.prototype.slice.call(arguments, 0),
b, i, len;
returnValue = v = undefined;
cancel = false;
for(i = 0, len = e.before.length; i < len; i++){
b = e.before[i];
makeCall(b.fn, b.scope, args);
if (cancel) {
return returnValue;
}
}
if((v = e.originalFn.apply(obj, args)) !== undefined){
returnValue = v;
}
for(i = 0, len = e.after.length; i < len; i++){
b = e.after[i];
makeCall(b.fn, b.scope, args);
if (cancel) {
return returnValue;
}
}
return returnValue;
};
}
return e;
}
Ext.apply(proto, {
onClassMixedIn: prepareMixin,
// these are considered experimental
// allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call
// adds an 'interceptor' called before the original method
beforeMethod : function(method, fn, scope){
getMethodEvent.call(this, method).before.push({
fn: fn,
scope: scope
});
},
// adds a 'sequence' called after the original method
afterMethod : function(method, fn, scope){
getMethodEvent.call(this, method).after.push({
fn: fn,
scope: scope
});
},
removeMethodListener: function(method, fn, scope){
var e = this.getMethodEvent(method),
i, len;
for(i = 0, len = e.before.length; i < len; i++){
if(e.before[i].fn == fn && e.before[i].scope == scope){
Ext.Array.erase(e.before, i, 1);
return;
}
}
for(i = 0, len = e.after.length; i < len; i++){
if(e.after[i].fn == fn && e.after[i].scope == scope){
Ext.Array.erase(e.after, i, 1);
return;
}
}
},
toggleEventLogging: function(toggle) {
Ext.util.Observable[toggle ? 'capture' : 'releaseCapture'](this, function(en) {
if (Ext.isDefined(Ext.global.console)) {
Ext.global.console.log(en, arguments);
}
});
}
});
});
/**
* @class Ext.util.HashMap
* * Represents a collection of a set of key and value pairs. Each key in the HashMap * must be unique, the same key cannot exist twice. Access to items is provided via * the key only. Sample usage: *
var map = new Ext.util.HashMap();
map.add('key1', 1);
map.add('key2', 2);
map.add('key3', 3);
map.each(function(key, value, length){
console.log(key, value, length);
});
* The HashMap is an unordered class, * there is no guarantee when iterating over the items that they will be in any particular * order. If this is required, then use a {@link Ext.util.MixedCollection}. *
*/ Ext.define('Ext.util.HashMap', { mixins: { observable: 'Ext.util.Observable' }, /** * @cfg {Function} keyFn A function that is used to retrieve a default key for a passed object. * A default is provided that returns the id property on the object. This function is only used * if the add method is called with a single argument. */ /** * Creates new HashMap. * @param {Object} config (optional) Config object. */ constructor: function(config) { config = config || {}; var me = this, keyFn = config.keyFn; me.addEvents( /** * @event add * Fires when a new item is added to the hash * @param {Ext.util.HashMap} this. * @param {String} key The key of the added item. * @param {Object} value The value of the added item. */ 'add', /** * @event clear * Fires when the hash is cleared. * @param {Ext.util.HashMap} this. */ 'clear', /** * @event remove * Fires when an item is removed from the hash. * @param {Ext.util.HashMap} this. * @param {String} key The key of the removed item. * @param {Object} value The value of the removed item. */ 'remove', /** * @event replace * Fires when an item is replaced in the hash. * @param {Ext.util.HashMap} this. * @param {String} key The key of the replaced item. * @param {Object} value The new value for the item. * @param {Object} old The old value for the item. */ 'replace' ); me.mixins.observable.constructor.call(me, config); me.clear(true); if (keyFn) { me.getKey = keyFn; } }, /** * Gets the number of items in the hash. * @return {Number} The number of items in the hash. */ getCount: function() { return this.length; }, /** * Implementation for being able to extract the key from an object if only * a single argument is passed. * @private * @param {String} key The key * @param {Object} value The value * @return {Array} [key, value] */ getData: function(key, value) { // if we have no value, it means we need to get the key from the object if (value === undefined) { value = key; key = this.getKey(value); } return [key, value]; }, /** * Extracts the key from an object. This is a default implementation, it may be overridden * @param {Object} o The object to get the key from * @return {String} The key to use. */ getKey: function(o) { return o.id; }, /** * Adds an item to the collection. Fires the {@link #event-add} event when complete. * * @param {String/Object} key The key to associate with the item, or the new item. * * If a {@link #getKey} implementation was specified for this HashMap, * or if the key of the stored items is in a property called `id`, * the HashMap will be able to *derive* the key for the new item. * In this case just pass the new item in this parameter. * * @param {Object} [o] The item to add. * * @return {Object} The item added. */ add: function(key, value) { var me = this; if (value === undefined) { value = key; key = me.getKey(value); } if (me.containsKey(key)) { return me.replace(key, value); } me.map[key] = value; ++me.length; if (me.hasListeners.add) { me.fireEvent('add', me, key, value); } return value; }, /** * Replaces an item in the hash. If the key doesn't exist, the * {@link #method-add} method will be used. * @param {String} key The key of the item. * @param {Object} value The new value for the item. * @return {Object} The new value of the item. */ replace: function(key, value) { var me = this, map = me.map, old; if (value === undefined) { value = key; key = me.getKey(value); } if (!me.containsKey(key)) { me.add(key, value); } old = map[key]; map[key] = value; if (me.hasListeners.replace) { me.fireEvent('replace', me, key, value, old); } return value; }, /** * Remove an item from the hash. * @param {Object} o The value of the item to remove. * @return {Boolean} True if the item was successfully removed. */ remove: function(o) { var key = this.findKey(o); if (key !== undefined) { return this.removeAtKey(key); } return false; }, /** * Remove an item from the hash. * @param {String} key The key to remove. * @return {Boolean} True if the item was successfully removed. */ removeAtKey: function(key) { var me = this, value; if (me.containsKey(key)) { value = me.map[key]; delete me.map[key]; --me.length; if (me.hasListeners.remove) { me.fireEvent('remove', me, key, value); } return true; } return false; }, /** * Retrieves an item with a particular key. * @param {String} key The key to lookup. * @return {Object} The value at that key. If it doesn't exist, undefined is returned. */ get: function(key) { return this.map[key]; }, /** * Removes all items from the hash. * @return {Ext.util.HashMap} this */ clear: function(/* private */ initial) { var me = this; me.map = {}; me.length = 0; if (initial !== true && me.hasListeners.clear) { me.fireEvent('clear', me); } return me; }, /** * Checks whether a key exists in the hash. * @param {String} key The key to check for. * @return {Boolean} True if they key exists in the hash. */ containsKey: function(key) { return this.map[key] !== undefined; }, /** * Checks whether a value exists in the hash. * @param {Object} value The value to check for. * @return {Boolean} True if the value exists in the dictionary. */ contains: function(value) { return this.containsKey(this.findKey(value)); }, /** * Return all of the keys in the hash. * @return {Array} An array of keys. */ getKeys: function() { return this.getArray(true); }, /** * Return all of the values in the hash. * @return {Array} An array of values. */ getValues: function() { return this.getArray(false); }, /** * Gets either the keys/values in an array from the hash. * @private * @param {Boolean} isKey True to extract the keys, otherwise, the value * @return {Array} An array of either keys/values from the hash. */ getArray: function(isKey) { var arr = [], key, map = this.map; for (key in map) { if (map.hasOwnProperty(key)) { arr.push(isKey ? key: map[key]); } } return arr; }, /** * Executes the specified function once for each item in the hash. * Returning false from the function will cease iteration. * * The paramaters passed to the function are: *-
*
- key : String
The key of the item
* - value : Number
The value of the item
* - length : Number
The total number of items in the hash
*
Provides a registry of all Components (instances of {@link Ext.Component} or any subclass * thereof) on a page so that they can be easily accessed by {@link Ext.Component component} * {@link Ext.Component#id id} (see {@link #get}, or the convenience method {@link Ext#getCmp Ext.getCmp}).
*This object also provides a registry of available Component classes
* indexed by a mnemonic code known as the Component's {@link Ext.Component#xtype xtype}.
* The xtype provides a way to avoid instantiating child Components
* when creating a full, nested config object for a complete Ext page.
A child Component may be specified simply as a config object
* as long as the correct {@link Ext.Component#xtype xtype} is specified so that if and when the Component
* needs rendering, the correct type can be looked up for lazy instantiation.
For a list of all available {@link Ext.Component#xtype xtypes}, see {@link Ext.Component}.
xtype. (Optional if the config contains a xtype).
* @return {Ext.Component} The newly instantiated Component.
*/
create: function(component, defaultType){
if (typeof component == 'string') {
return Ext.widget(component);
}
if (component.isComponent) {
return component;
}
return Ext.widget(component.xtype || defaultType, component);
},
registerType: function(type, cls) {
this.types[type] = cls;
cls[this.typeName] = type;
cls.prototype[this.typeName] = type;
}
});
/**
* Provides searching of Components within Ext.ComponentManager (globally) or a specific
* Ext.container.Container on the document with a similar syntax to a CSS selector.
*
* Components can be retrieved by using their {@link Ext.Component xtype}
*
* - `component`
* - `gridpanel`
*
* Matching by xtype matches inherited types, so in the following code, the previous field
* *of any type which inherits from `TextField`* will be found:
*
* prevField = myField.previousNode('textfield');
*
* To match only the exact type, pass the "shallow" flag (See {@link Ext.AbstractComponent#isXType AbstractComponent's isXType method})
*
* prevTextField = myField.previousNode('textfield(true)');
*
* An itemId or id must be prefixed with a #
*
* - `#myContainer`
*
* Attributes must be wrapped in brackets
*
* - `component[autoScroll]`
* - `panel[title="Test"]`
*
* Member expressions from candidate Components may be tested. If the expression returns a *truthy* value,
* the candidate Component will be included in the query:
*
* var disabledFields = myFormPanel.query("{isDisabled()}");
*
* Pseudo classes may be used to filter results in the same way as in {@link Ext.DomQuery DomQuery}:
*
* // Function receives array and returns a filtered array.
* Ext.ComponentQuery.pseudos.invalid = function(items) {
* var i = 0, l = items.length, c, result = [];
* for (; i < l; i++) {
* if (!(c = items[i]).isValid()) {
* result.push(c);
* }
* }
* return result;
* };
*
* var invalidFields = myFormPanel.query('field:invalid');
* if (invalidFields.length) {
* invalidFields[0].getEl().scrollIntoView(myFormPanel.body);
* for (var i = 0, l = invalidFields.length; i < l; i++) {
* invalidFields[i].getEl().frame("red");
* }
* }
*
* Default pseudos include:
*
* - not
* - first
* - last
*
* Queries return an array of components.
* Here are some example queries.
*
* // retrieve all Ext.Panels in the document by xtype
* var panelsArray = Ext.ComponentQuery.query('panel');
*
* // retrieve all Ext.Panels within the container with an id myCt
* var panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel');
*
* // retrieve all direct children which are Ext.Panels within myCt
* var directChildPanel = Ext.ComponentQuery.query('#myCt > panel');
*
* // retrieve all grids and trees
* var gridsAndTrees = Ext.ComponentQuery.query('gridpanel, treepanel');
*
* For easy access to queries based from a particular Container see the {@link Ext.container.Container#query},
* {@link Ext.container.Container#down} and {@link Ext.container.Container#child} methods. Also see
* {@link Ext.Component#up}.
*/
Ext.define('Ext.ComponentQuery', {
singleton: true,
requires: ['Ext.ComponentManager']
}, function() {
var cq = this,
// A function source code pattern with a placeholder which accepts an expression which yields a truth value when applied
// as a member on each item in the passed array.
filterFnPattern = [
'var r = [],',
'i = 0,',
'it = items,',
'l = it.length,',
'c;',
'for (; i < l; i++) {',
'c = it[i];',
'if (c.{0}) {',
'r.push(c);',
'}',
'}',
'return r;'
].join(''),
filterItems = function(items, operation) {
// Argument list for the operation is [ itemsArray, operationArg1, operationArg2...]
// The operation's method loops over each item in the candidate array and
// returns an array of items which match its criteria
return operation.method.apply(this, [ items ].concat(operation.args));
},
getItems = function(items, mode) {
var result = [],
i = 0,
length = items.length,
candidate,
deep = mode !== '>';
for (; i < length; i++) {
candidate = items[i];
if (candidate.getRefItems) {
result = result.concat(candidate.getRefItems(deep));
}
}
return result;
},
getAncestors = function(items) {
var result = [],
i = 0,
length = items.length,
candidate;
for (; i < length; i++) {
candidate = items[i];
while (!!(candidate = (candidate.ownerCt || candidate.floatParent))) {
result.push(candidate);
}
}
return result;
},
// Filters the passed candidate array and returns only items which match the passed xtype
filterByXType = function(items, xtype, shallow) {
if (xtype === '*') {
return items.slice();
}
else {
var result = [],
i = 0,
length = items.length,
candidate;
for (; i < length; i++) {
candidate = items[i];
if (candidate.isXType(xtype, shallow)) {
result.push(candidate);
}
}
return result;
}
},
// Filters the passed candidate array and returns only items which have the passed className
filterByClassName = function(items, className) {
var EA = Ext.Array,
result = [],
i = 0,
length = items.length,
candidate;
for (; i < length; i++) {
candidate = items[i];
if (candidate.hasCls(className)) {
result.push(candidate);
}
}
return result;
},
// Filters the passed candidate array and returns only items which have the specified property match
filterByAttribute = function(items, property, operator, value) {
var result = [],
i = 0,
length = items.length,
candidate;
for (; i < length; i++) {
candidate = items[i];
if (!value ? !!candidate[property] : (String(candidate[property]) === value)) {
result.push(candidate);
}
}
return result;
},
// Filters the passed candidate array and returns only items which have the specified itemId or id
filterById = function(items, id) {
var result = [],
i = 0,
length = items.length,
candidate;
for (; i < length; i++) {
candidate = items[i];
if (candidate.getItemId() === id) {
result.push(candidate);
}
}
return result;
},
// Filters the passed candidate array and returns only items which the named pseudo class matcher filters in
filterByPseudo = function(items, name, value) {
return cq.pseudos[name](items, value);
},
// Determines leading mode
// > for direct child, and ^ to switch to ownerCt axis
modeRe = /^(\s?([>\^])\s?|\s|$)/,
// Matches a token with possibly (true|false) appended for the "shallow" parameter
tokenRe = /^(#)?([\w\-]+|\*)(?:\((true|false)\))?/,
matchers = [{
// Checks for .xtype with possibly (true|false) appended for the "shallow" parameter
re: /^\.([\w\-]+)(?:\((true|false)\))?/,
method: filterByXType
},{
// checks for [attribute=value]
re: /^(?:[\[](?:@)?([\w\-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]])/,
method: filterByAttribute
}, {
// checks for #cmpItemId
re: /^#([\w\-]+)/,
method: filterById
}, {
// checks for :-
*
- evt : EventObjectThe {@link Ext.EventObject EventObject} describing the event.
*
- t : ElementThe {@link Ext.Element Element} which was the target of the event. * Note that this may be filtered by using the delegate option.
*
- o : ObjectThe options object from the addListener call.
*
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:-
*
- scope : ObjectThe scope (
thisreference) in which the handler function is executed. Defaults to the Element.
* - delegate : StringA simple selector to filter the target or look for a descendant of the target
*
- stopEvent : BooleanTrue to stop the event. That is stop propagation, and prevent the default action.
*
- preventDefault : BooleanTrue to prevent the default action
*
- stopPropagation : BooleanTrue to prevent event propagation
*
- normalized : BooleanFalse to pass a browser event to the handler function instead of an Ext.EventObject
*
- delay : NumberThe number of milliseconds to delay the invocation of the handler after te event fires.
*
- single : BooleanTrue to add a handler to handle just the next firing of the event, and then remove itself.
*
- buffer : NumberCauses the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed * by the specified number of milliseconds. If the event fires again within that time, the original * handler is not invoked, but the new handler is scheduled in its place.
*
- target : ElementOnly call the handler if the event was fired on the target Element, not if the event was bubbled up from a child node.
*
*
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
*-
*
- load *
- unload *
- select *
- change *
- submit *
- reset *
- resize *
- scroll *
MouseEvents
*-
*
- click *
- dblclick *
- mousedown *
- mouseup *
- mouseover *
- mousemove *
- mouseout *
UIEvents
*-
*
- focusin *
- focusout *
- activate *
- focus *
- blur *
Contents
`
*
* Using different `where` values inserts element to the following places:
*
* - beforeBegin: `Contents
`
* - afterBegin: `Contents
`
* - afterEnd: `Contents
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:
*
*
* // utilize event delegation to registering just one handler on the container element:
* el = Ext.get('elId');
* el.on(
* 'click',
* function(e,t) {
* // handle click
* console.info(t.id); // 'p2'
* },
* this,
* {
* // filter the target element to be a descendant with the class 'clickable'
* delegate: '.clickable'
* }
* );
*
* @return {Ext.dom.Element} this
*/
on: function(eventName, fn, scope, options) {
Ext.EventManager.on(this, eventName, fn, scope || this, options);
return this;
},
/**
* Removes an event handler from this element.
*
* **Note**: if a *scope* was explicitly specified when {@link #on adding} the listener,
* the same scope must be specified here.
*
* Example:
*
* el.un('click', this.handlerFn);
* // or
* el.removeListener('click', this.handlerFn);
*
* @param {String} eventName The name of the event from which to remove the handler.
* @param {Function} fn The handler function to remove. **This must be a reference to the function passed into the
* {@link #on} call.**
* @param {Object} scope If a scope (**this** reference) was specified when the listener was added, then this must
* refer to the same object.
* @return {Ext.dom.Element} this
*/
un: function(eventName, fn, scope) {
Ext.EventManager.un(this, eventName, fn, scope || this);
return this;
},
/**
* Removes all previous added listeners from this element
* @return {Ext.dom.Element} this
*/
removeAllListeners: function() {
Ext.EventManager.removeAll(this);
return this;
},
/**
* Recursively removes all previous added listeners from this element and its children
* @return {Ext.dom.Element} this
*/
purgeAllListeners: function() {
Ext.EventManager.purgeElement(this);
return this;
}
}, function() {
var EC = Ext.cache,
El = this,
AbstractElement = Ext.dom.AbstractElement,
focusRe = /a|button|embed|iframe|img|input|object|select|textarea/i,
nonSpaceRe = /\S/,
scriptTagRe = /(?: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 (; i" + Ext.String.format(Element.boxMarkup, cls) + "
"));
Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);
return el;
},
/**
* Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
* when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
* if a height has not been set using CSS.
* @return {Number}
*/
getComputedHeight : function() {
var me = this,
h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);
if (!h) {
h = parseFloat(me.getStyle(HEIGHT)) || 0;
if (!me.isBorderBox()) {
h += me.getFrameWidth('tb');
}
}
return h;
},
/**
* Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
* when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
* if a width has not been set using CSS.
* @return {Number}
*/
getComputedWidth : function() {
var me = this,
w = Math.max(me.dom.offsetWidth, me.dom.clientWidth);
if (!w) {
w = parseFloat(me.getStyle(WIDTH)) || 0;
if (!me.isBorderBox()) {
w += me.getFrameWidth('lr');
}
}
return w;
},
/**
* Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
* for more information about the sides.
* @param {String} sides
* @return {Number}
*/
getFrameWidth : function(sides, onlyContentBox) {
return (onlyContentBox && this.isBorderBox()) ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
},
/**
* Sets up event handlers to add and remove a css class when the mouse is over this element
* @param {String} className The class to add
* @param {Function} [testFn] A test function to execute before adding the class. The passed parameter
* will be the Element instance. If this functions returns false, the class will not be added.
* @param {Object} [scope] The scope to execute the testFn in.
* @return {Ext.dom.Element} this
*/
addClsOnOver : function(className, testFn, scope) {
var me = this,
dom = me.dom,
hasTest = Ext.isFunction(testFn);
me.hover(
function() {
if (hasTest && testFn.call(scope || me, me) === false) {
return;
}
Ext.fly(dom, INTERNAL).addCls(className);
},
function() {
Ext.fly(dom, INTERNAL).removeCls(className);
}
);
return me;
},
/**
* Sets up event handlers to add and remove a css class when this element has the focus
* @param {String} className The class to add
* @param {Function} [testFn] A test function to execute before adding the class. The passed parameter
* will be the Element instance. If this functions returns false, the class will not be added.
* @param {Object} [scope] The scope to execute the testFn in.
* @return {Ext.dom.Element} this
*/
addClsOnFocus : function(className, testFn, scope) {
var me = this,
dom = me.dom,
hasTest = Ext.isFunction(testFn);
me.on("focus", function() {
if (hasTest && testFn.call(scope || me, me) === false) {
return false;
}
Ext.fly(dom, INTERNAL).addCls(className);
});
me.on("blur", function() {
Ext.fly(dom, INTERNAL).removeCls(className);
});
return me;
},
/**
* Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)
* @param {String} className The class to add
* @param {Function} [testFn] A test function to execute before adding the class. The passed parameter
* will be the Element instance. If this functions returns false, the class will not be added.
* @param {Object} [scope] The scope to execute the testFn in.
* @return {Ext.dom.Element} this
*/
addClsOnClick : function(className, testFn, scope) {
var me = this,
dom = me.dom,
hasTest = Ext.isFunction(testFn);
me.on("mousedown", function() {
if (hasTest && testFn.call(scope || me, me) === false) {
return false;
}
Ext.fly(dom, INTERNAL).addCls(className);
var d = Ext.getDoc(),
fn = function() {
Ext.fly(dom, INTERNAL).removeCls(className);
d.removeListener("mouseup", fn);
};
d.on("mouseup", fn);
});
return me;
},
/**
* Returns the dimensions of the element available to lay content out in.
*
* getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and
* offsetWidth/clientWidth. To obtain the size excluding scrollbars, use getViewSize.
*
* Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
*
* @return {Object} Object describing width and height.
* @return {Number} return.width
* @return {Number} return.height
*/
getStyleSize : function() {
var me = this,
d = this.dom,
isDoc = DOCORBODYRE.test(d.nodeName),
s ,
w, h;
// If the body, use static methods
if (isDoc) {
return {
width : Element.getViewWidth(),
height : Element.getViewHeight()
};
}
s = me.getStyle([HEIGHT, WIDTH], true); //seek inline
// Use Styles if they are set
if (s.width && s.width != 'auto') {
w = parseFloat(s.width);
if (me.isBorderBox()) {
w -= me.getFrameWidth('lr');
}
}
// Use Styles if they are set
if (s.height && s.height != 'auto') {
h = parseFloat(s.height);
if (me.isBorderBox()) {
h -= me.getFrameWidth('tb');
}
}
// Use getWidth/getHeight if style not set.
return {width: w || me.getWidth(true), height: h || me.getHeight(true)};
},
/**
* Enable text selection for this element (normalized across browsers)
* @return {Ext.Element} this
*/
selectable : function() {
var me = this;
me.dom.unselectable = "off";
// Prevent it from bubles up and enables it to be selectable
me.on('selectstart', function (e) {
e.stopPropagation();
return true;
});
me.applyStyles("-moz-user-select: text; -khtml-user-select: text;");
me.removeCls(Ext.baseCSSPrefix + 'unselectable');
return me;
},
/**
* Disables text selection for this element (normalized across browsers)
* @return {Ext.dom.Element} this
*/
unselectable : function() {
var me = this;
me.dom.unselectable = "on";
me.swallowEvent("selectstart", true);
me.applyStyles("-moz-user-select:-moz-none;-khtml-user-select:none;");
me.addCls(Ext.baseCSSPrefix + 'unselectable');
return me;
}
});
Element.prototype.styleHooks = styleHooks = Ext.dom.AbstractElement.prototype.styleHooks;
if (Ext.isIE6 || Ext.isIE7) {
styleHooks.fontSize = styleHooks['font-size'] = {
name: 'fontSize',
canThrow: true
};
styleHooks.fontStyle = styleHooks['font-style'] = {
name: 'fontStyle',
canThrow: true
};
styleHooks.fontFamily = styleHooks['font-family'] = {
name: 'fontFamily',
canThrow: true
};
}
// override getStyle for border-*-width
if (Ext.isIEQuirks || Ext.isIE && Ext.ieVersion <= 8) {
function getBorderWidth (dom, el, inline, style) {
if (style[this.styleName] == 'none') {
return '0px';
}
return style[this.name];
}
edges = ['Top','Right','Bottom','Left'];
k = edges.length;
while (k--) {
edge = edges[k];
borderWidth = 'border' + edge + 'Width';
styleHooks['border-'+edge.toLowerCase()+'-width'] = styleHooks[borderWidth] = {
name: borderWidth,
styleName: 'border' + edge + 'Style',
get: getBorderWidth
};
}
}
}());
Ext.onReady(function () {
var opacityRe = /alpha\(opacity=(.*)\)/i,
trimRe = /^\s+|\s+$/g,
hooks = Ext.dom.Element.prototype.styleHooks;
// Ext.supports flags are not populated until onReady...
hooks.opacity = {
name: 'opacity',
afterSet: function(dom, value, el) {
if (el.isLayer) {
el.onOpacitySet(value);
}
}
};
if (!Ext.supports.Opacity && Ext.isIE) {
Ext.apply(hooks.opacity, {
get: function (dom) {
var filter = dom.style.filter,
match, opacity;
if (filter.match) {
match = filter.match(opacityRe);
if (match) {
opacity = parseFloat(match[1]);
if (!isNaN(opacity)) {
return opacity ? opacity / 100 : 0;
}
}
}
return 1;
},
set: function (dom, value) {
var style = dom.style,
val = style.filter.replace(opacityRe, '').replace(trimRe, '');
style.zoom = 1; // ensure dom.hasLayout
// value can be a number or '' or null... so treat falsey as no opacity
if (typeof(value) == 'number' && value >= 0 && value < 1) {
value *= 100;
style.filter = val + (val.length ? ' ' : '') + 'alpha(opacity='+value+')';
} else {
style.filter = val;
}
}
});
}
// else there is no work around for the lack of opacity support. Should not be a
// problem given that this has been supported for a long time now...
});
//@tag dom,core
//@require Ext.dom.Element-style
//@define Ext.dom.Element-traversal
//@define Ext.dom.Element
/**
* @class Ext.dom.Element
*/
Ext.dom.Element.override({
select: function(selector) {
return Ext.dom.Element.select(selector, false, this.dom);
}
});
//@tag dom,core
//@require Ext.dom.Element-traversal
/**
* This 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.
*
* Example:
*
* var els = Ext.select("#some-el div.some-class");
* // or select directly from an existing element
* var el = Ext.get('some-el');
* el.select('div.some-class');
*
* els.setWidth(100); // all elements become 100 width
* els.hide(true); // all elements fade out and hide
* // or
* els.setWidth(100).hide(true);
*/
Ext.define('Ext.dom.CompositeElementLite', {
alternateClassName: 'Ext.CompositeElementLite',
requires: ['Ext.dom.Element', 'Ext.dom.Query'],
statics: {
/**
* @private
* Copies all of the functions from Ext.dom.Element's prototype onto CompositeElementLite's prototype.
* This is called twice - once immediately below, and once again after additional Ext.dom.Element
* are added in Ext JS
*/
importElementMethods: function() {
var name,
elementPrototype = Ext.dom.Element.prototype,
prototype = this.prototype;
for (name in elementPrototype) {
if (typeof elementPrototype[name] == 'function'){
(function(key) {
prototype[key] = prototype[key] || function() {
return this.invoke(key, arguments);
};
}).call(prototype, name);
}
}
}
},
constructor: function(elements, root) {
/**
* @property {HTMLElement[]} elements
* The Array of DOM elements which this CompositeElement encapsulates.
*
* This will not *usually* be accessed in developers' code, but developers wishing to augment the capabilities
* of the CompositeElementLite class may use it when adding methods to the class.
*
* For example to add the `nextAll` method to the class to **add** all following siblings of selected elements,
* the code would be
*
* Ext.override(Ext.dom.CompositeElementLite, {
* nextAll: function() {
* var elements = this.elements, i, l = elements.length, n, r = [], ri = -1;
*
* // Loop through all elements in this Composite, accumulating
* // an Array of all siblings.
* for (i = 0; i < l; i++) {
* for (n = elements[i].nextSibling; n; n = n.nextSibling) {
* r[++ri] = n;
* }
* }
*
* // Add all found siblings to this Composite
* return this.add(r);
* }
* });
*
* @readonly
*/
this.elements = [];
this.add(elements, root);
this.el = new Ext.dom.AbstractElement.Fly();
},
/**
* @property {Boolean} isComposite
* `true` in this class to identify an object as an instantiated CompositeElement, or subclass thereof.
*/
isComposite: true,
// private
getElement: function(el) {
// Set the shared flyweight dom property to the current element
return this.el.attach(el);
},
// private
transformElement: function(el) {
return Ext.getDom(el);
},
/**
* Returns the number of elements in this Composite.
* @return {Number}
*/
getCount: function() {
return this.elements.length;
},
/**
* Adds elements to this Composite object.
* @param {HTMLElement[]/Ext.dom.CompositeElement} els Either an Array of DOM elements to add, or another Composite
* object who's elements should be added.
* @return {Ext.dom.CompositeElement} This Composite object.
*/
add: function(els, root) {
var elements = this.elements,
i, ln;
if (!els) {
return this;
}
if (typeof els == "string") {
els = Ext.dom.Element.selectorFunction(els, root);
}
else if (els.isComposite) {
els = els.elements;
}
else if (!Ext.isIterable(els)) {
els = [els];
}
for (i = 0, ln = els.length; i < ln; ++i) {
elements.push(this.transformElement(els[i]));
}
return this;
},
invoke: function(fn, args) {
var elements = this.elements,
ln = elements.length,
element,
i;
fn = Ext.dom.Element.prototype[fn];
for (i = 0; i < ln; i++) {
element = elements[i];
if (element) {
fn.apply(this.getElement(element), args);
}
}
return this;
},
/**
* Returns a flyweight Element of the dom element object at the specified index
* @param {Number} index
* @return {Ext.dom.Element}
*/
item: function(index) {
var el = this.elements[index],
out = null;
if (el) {
out = this.getElement(el);
}
return out;
},
// fixes scope with flyweight
addListener: function(eventName, handler, scope, opt) {
var els = this.elements,
len = els.length,
i, e;
for (i = 0; i < len; i++) {
e = els[i];
if (e) {
Ext.EventManager.on(e, eventName, handler, scope || e, opt);
}
}
return this;
},
/**
* Calls the passed function for each element in this composite.
* @param {Function} fn The function to call.
* @param {Ext.dom.Element} fn.el The current Element in the iteration. **This is the flyweight
* (shared) Ext.dom.Element instance, so if you require a a reference to the dom node, use el.dom.**
* @param {Ext.dom.CompositeElement} fn.c This Composite object.
* @param {Number} fn.index The zero-based index in the iteration.
* @param {Object} [scope] The scope (this reference) in which the function is executed.
* Defaults to the Element.
* @return {Ext.dom.CompositeElement} this
*/
each: function(fn, scope) {
var me = this,
els = me.elements,
len = els.length,
i, e;
for (i = 0; i < len; i++) {
e = els[i];
if (e) {
e = this.getElement(e);
if (fn.call(scope || e, e, me, i) === false) {
break;
}
}
}
return me;
},
/**
* Clears this Composite and adds the elements passed.
* @param {HTMLElement[]/Ext.dom.CompositeElement} els Either an array of DOM elements, or another Composite from which
* to fill this Composite.
* @return {Ext.dom.CompositeElement} this
*/
fill: function(els) {
var me = this;
me.elements = [];
me.add(els);
return me;
},
/**
* Filters this composite to only elements that match the passed selector.
* @param {String/Function} selector A string CSS selector or a comparison function. The comparison function will be
* called with the following arguments:
* @param {Ext.dom.Element} selector.el The current DOM element.
* @param {Number} selector.index The current index within the collection.
* @return {Ext.dom.CompositeElement} this
*/
filter: function(selector) {
var me = this,
els = me.elements,
len = els.length,
out = [],
i = 0,
isFunc = typeof selector == 'function',
add,
el;
for (; i < len; i++) {
el = els[i];
add = false;
if (el) {
el = me.getElement(el);
if (isFunc) {
add = selector.call(el, el, me, i) !== false;
} else {
add = el.is(selector);
}
if (add) {
out.push(me.transformElement(el));
}
}
}
me.elements = out;
return me;
},
/**
* Find the index of the passed element within the composite collection.
* @param {String/HTMLElement/Ext.Element/Number} el The id of an element, or an Ext.dom.Element, or an HtmlElement
* to find within the composite collection.
* @return {Number} The index of the passed Ext.dom.Element in the composite collection, or -1 if not found.
*/
indexOf: function(el) {
return Ext.Array.indexOf(this.elements, this.transformElement(el));
},
/**
* Replaces the specified element with the passed element.
* @param {String/HTMLElement/Ext.Element/Number} el The id of an element, the Element itself, the index of the
* element in this composite to replace.
* @param {String/Ext.Element} replacement The id of an element or the Element itself.
* @param {Boolean} [domReplace] True to remove and replace the element in the document too.
* @return {Ext.dom.CompositeElement} this
*/
replaceElement: function(el, replacement, domReplace) {
var index = !isNaN(el) ? el : this.indexOf(el),
d;
if (index > -1) {
replacement = Ext.getDom(replacement);
if (domReplace) {
d = this.elements[index];
d.parentNode.insertBefore(replacement, d);
Ext.removeNode(d);
}
Ext.Array.splice(this.elements, index, 1, replacement);
}
return this;
},
/**
* Removes all elements.
*/
clear: function() {
this.elements = [];
},
addElements: function(els, root) {
if (!els) {
return this;
}
if (typeof els == "string") {
els = Ext.dom.Element.selectorFunction(els, root);
}
var yels = this.elements,
eLen = els.length,
e;
for (e = 0; e < eLen; e++) {
yels.push(Ext.get(els[e]));
}
return this;
},
/**
* Returns the first Element
* @return {Ext.dom.Element}
*/
first: function() {
return this.item(0);
},
/**
* Returns the last Element
* @return {Ext.dom.Element}
*/
last: function() {
return this.item(this.getCount() - 1);
},
/**
* Returns true if this composite contains the passed element
* @param {String/HTMLElement/Ext.Element/Number} el The id of an element, or an Ext.Element, or an HtmlElement to
* find within the composite collection.
* @return {Boolean}
*/
contains: function(el) {
return this.indexOf(el) != -1;
},
/**
* Removes the specified element(s).
* @param {String/HTMLElement/Ext.Element/Number} el The id of an element, the Element itself, the index of the
* element in this composite or an array of any of those.
* @param {Boolean} [removeDom] True to also remove the element from the document
* @return {Ext.dom.CompositeElement} this
*/
removeElement: function(keys, removeDom) {
keys = [].concat(keys);
var me = this,
elements = me.elements,
kLen = keys.length,
val, el, k;
for (k = 0; k < kLen; k++) {
val = keys[k];
if ((el = (elements[val] || elements[val = me.indexOf(val)]))) {
if (removeDom) {
if (el.dom) {
el.remove();
} else {
Ext.removeNode(el);
}
}
Ext.Array.erase(elements, val, 1);
}
}
return me;
}
}, function() {
this.importElementMethods();
this.prototype.on = this.prototype.addListener;
if (Ext.DomQuery){
Ext.dom.Element.selectorFunction = Ext.DomQuery.select;
}
/**
* Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
* to be applied to many related elements in one statement through the returned
* {@link Ext.dom.CompositeElement CompositeElement} or
* {@link Ext.dom.CompositeElementLite CompositeElementLite} object.
* @param {String/HTMLElement[]} selector The CSS selector or an array of elements
* @param {HTMLElement/String} [root] The root element of the query or id of the root
* @return {Ext.dom.CompositeElementLite/Ext.dom.CompositeElement}
* @member Ext.dom.Element
* @method select
* @static
* @ignore
*/
Ext.dom.Element.select = function(selector, root) {
var elements;
if (typeof selector == "string") {
elements = Ext.dom.Element.selectorFunction(selector, root);
}
else if (selector.length !== undefined) {
elements = selector;
}
else {
throw new Error("[Ext.select] Invalid selector specified: " + selector);
}
return new Ext.CompositeElementLite(elements);
};
/**
* @member Ext
* @method select
* @inheritdoc Ext.dom.Element#select
* @ignore
*/
Ext.select = function() {
return Ext.dom.Element.select.apply(Ext.dom.Element, arguments);
};
});
/**
* This animation class is a mixin.
*
* Ext.util.Animate provides an API for the creation of animated transitions of properties and styles.
* This class is used as a mixin and currently applied to {@link Ext.Element}, {@link Ext.CompositeElement},
* {@link Ext.draw.Sprite}, {@link Ext.draw.CompositeSprite}, and {@link Ext.Component}. Note that Components
* have a limited subset of what attributes can be animated such as top, left, x, y, height, width, and
* opacity (color, paddings, and margins can not be animated).
*
* ## Animation Basics
*
* All animations require three things - `easing`, `duration`, and `to` (the final end value for each property)
* you wish to animate. Easing and duration are defaulted values specified below.
* Easing describes how the intermediate values used during a transition will be calculated.
* {@link Ext.fx.Anim#easing Easing} allows for a transition to change speed over its duration.
* You may use the defaults for easing and duration, but you must always set a
* {@link Ext.fx.Anim#to to} property which is the end value for all animations.
*
* Popular element 'to' configurations are:
*
* - opacity
* - x
* - y
* - color
* - height
* - width
*
* Popular sprite 'to' configurations are:
*
* - translation
* - path
* - scale
* - stroke
* - rotation
*
* The default duration for animations is 250 (which is a 1/4 of a second). Duration is denoted in
* milliseconds. Therefore 1 second is 1000, 1 minute would be 60000, and so on. The default easing curve
* used for all animations is 'ease'. Popular easing functions are included and can be found in {@link Ext.fx.Anim#easing Easing}.
*
* For example, a simple animation to fade out an element with a default easing and duration:
*
* var p1 = Ext.get('myElementId');
*
* p1.animate({
* to: {
* opacity: 0
* }
* });
*
* To make this animation fade out in a tenth of a second:
*
* var p1 = Ext.get('myElementId');
*
* p1.animate({
* duration: 100,
* to: {
* opacity: 0
* }
* });
*
* ## Animation Queues
*
* By default all animations are added to a queue which allows for animation via a chain-style API.
* For example, the following code will queue 4 animations which occur sequentially (one right after the other):
*
* p1.animate({
* to: {
* x: 500
* }
* }).animate({
* to: {
* y: 150
* }
* }).animate({
* to: {
* backgroundColor: '#f00' //red
* }
* }).animate({
* to: {
* opacity: 0
* }
* });
*
* You can change this behavior by calling the {@link Ext.util.Animate#syncFx syncFx} method and all
* subsequent animations for the specified target will be run concurrently (at the same time).
*
* p1.syncFx(); //this will make all animations run at the same time
*
* p1.animate({
* to: {
* x: 500
* }
* }).animate({
* to: {
* y: 150
* }
* }).animate({
* to: {
* backgroundColor: '#f00' //red
* }
* }).animate({
* to: {
* opacity: 0
* }
* });
*
* This works the same as:
*
* p1.animate({
* to: {
* x: 500,
* y: 150,
* backgroundColor: '#f00' //red
* opacity: 0
* }
* });
*
* The {@link Ext.util.Animate#stopAnimation stopAnimation} method can be used to stop any
* currently running animations and clear any queued animations.
*
* ## Animation Keyframes
*
* You can also set up complex animations with {@link Ext.fx.Anim#keyframes keyframes} which follow the
* CSS3 Animation configuration pattern. Note rotation, translation, and scaling can only be done for sprites.
* The previous example can be written with the following syntax:
*
* p1.animate({
* duration: 1000, //one second total
* keyframes: {
* 25: { //from 0 to 250ms (25%)
* x: 0
* },
* 50: { //from 250ms to 500ms (50%)
* y: 0
* },
* 75: { //from 500ms to 750ms (75%)
* backgroundColor: '#f00' //red
* },
* 100: { //from 750ms to 1sec
* opacity: 0
* }
* }
* });
*
* ## Animation Events
*
* Each animation you create has events for {@link Ext.fx.Anim#beforeanimate beforeanimate},
* {@link Ext.fx.Anim#afteranimate afteranimate}, and {@link Ext.fx.Anim#lastframe lastframe}.
* Keyframed animations adds an additional {@link Ext.fx.Animator#keyframe keyframe} event which
* fires for each keyframe in your animation.
*
* All animations support the {@link Ext.util.Observable#listeners listeners} configuration to attact functions to these events.
*
* startAnimate: function() {
* var p1 = Ext.get('myElementId');
* p1.animate({
* duration: 100,
* to: {
* opacity: 0
* },
* listeners: {
* beforeanimate: function() {
* // Execute my custom method before the animation
* this.myBeforeAnimateFn();
* },
* afteranimate: function() {
* // Execute my custom method after the animation
* this.myAfterAnimateFn();
* },
* scope: this
* });
* },
* myBeforeAnimateFn: function() {
* // My custom logic
* },
* myAfterAnimateFn: function() {
* // My custom logic
* }
*
* Due to the fact that animations run asynchronously, you can determine if an animation is currently
* running on any target by using the {@link Ext.util.Animate#getActiveAnimation getActiveAnimation}
* method. This method will return false if there are no active animations or return the currently
* running {@link Ext.fx.Anim} instance.
*
* In this example, we're going to wait for the current animation to finish, then stop any other
* queued animations before we fade our element's opacity to 0:
*
* var curAnim = p1.getActiveAnimation();
* if (curAnim) {
* curAnim.on('afteranimate', function() {
* p1.stopAnimation();
* p1.animate({
* to: {
* opacity: 0
* }
* });
* });
* }
*/
Ext.define('Ext.util.Animate', {
requires: ['Ext.Element', 'Ext.CompositeElementLite'],
uses: ['Ext.fx.Manager', 'Ext.fx.Anim'],
/**
* Performs custom animation on this object.
*
* This method is applicable to both the {@link Ext.Component Component} class and the {@link Ext.draw.Sprite Sprite}
* class. It performs animated transitions of certain properties of this object over a specified timeline.
*
* ### Animating a {@link Ext.Component Component}
*
* When animating a Component, the following properties may be specified in `from`, `to`, and `keyframe` objects:
*
* - `x` - The Component's page X position in pixels.
*
* - `y` - The Component's page Y position in pixels
*
* - `left` - The Component's `left` value in pixels.
*
* - `top` - The Component's `top` value in pixels.
*
* - `width` - The Component's `width` value in pixels.
*
* - `width` - The Component's `width` value in pixels.
*
* - `dynamic` - Specify as true to update the Component's layout (if it is a Container) at every frame of the animation.
* *Use sparingly as laying out on every intermediate size change is an expensive operation.*
*
* For example, to animate a Window to a new size, ensuring that its internal layout and any shadow is correct:
*
* myWindow = Ext.create('Ext.window.Window', {
* title: 'Test Component animation',
* width: 500,
* height: 300,
* layout: {
* type: 'hbox',
* align: 'stretch'
* },
* items: [{
* title: 'Left: 33%',
* margins: '5 0 5 5',
* flex: 1
* }, {
* title: 'Left: 66%',
* margins: '5 5 5 5',
* flex: 2
* }]
* });
* myWindow.show();
* myWindow.header.el.on('click', function() {
* myWindow.animate({
* to: {
* width: (myWindow.getWidth() == 500) ? 700 : 500,
* height: (myWindow.getHeight() == 300) ? 400 : 300
* }
* });
* });
*
* For performance reasons, by default, the internal layout is only updated when the Window reaches its final `"to"`
* size. If dynamic updating of the Window's child Components is required, then configure the animation with
* `dynamic: true` and the two child items will maintain their proportions during the animation.
*
* @param {Object} config Configuration for {@link Ext.fx.Anim}.
* Note that the {@link Ext.fx.Anim#to to} config is required.
* @return {Object} this
*/
animate: function(animObj) {
var me = this;
if (Ext.fx.Manager.hasFxBlock(me.id)) {
return me;
}
Ext.fx.Manager.queueFx(new Ext.fx.Anim(me.anim(animObj)));
return this;
},
// @private - process the passed fx configuration.
anim: function(config) {
if (!Ext.isObject(config)) {
return (config) ? {} : false;
}
var me = this;
if (config.stopAnimation) {
me.stopAnimation();
}
Ext.applyIf(config, Ext.fx.Manager.getFxDefaults(me.id));
return Ext.apply({
target: me,
paused: true
}, config);
},
/**
* Stops any running effects and clears this object's internal effects queue if it contains any additional effects
* that haven't started yet.
* @deprecated 4.0 Replaced by {@link #stopAnimation}
* @return {Ext.Element} The Element
* @method
*/
stopFx: Ext.Function.alias(Ext.util.Animate, 'stopAnimation'),
/**
* Stops any running effects and clears this object's internal effects queue if it contains any additional effects
* that haven't started yet.
* @return {Ext.Element} The Element
*/
stopAnimation: function() {
Ext.fx.Manager.stopAnimation(this.id);
return this;
},
/**
* Ensures that all effects queued after syncFx is called on this object are run concurrently. This is the opposite
* of {@link #sequenceFx}.
* @return {Object} this
*/
syncFx: function() {
Ext.fx.Manager.setFxDefaults(this.id, {
concurrent: true
});
return this;
},
/**
* Ensures that all effects queued after sequenceFx is called on this object are run in sequence. This is the
* opposite of {@link #syncFx}.
* @return {Object} this
*/
sequenceFx: function() {
Ext.fx.Manager.setFxDefaults(this.id, {
concurrent: false
});
return this;
},
/**
* @deprecated 4.0 Replaced by {@link #getActiveAnimation}
* @inheritdoc Ext.util.Animate#getActiveAnimation
* @method
*/
hasActiveFx: Ext.Function.alias(Ext.util.Animate, 'getActiveAnimation'),
/**
* Returns the current animation if this object has any effects actively running or queued, else returns false.
* @return {Ext.fx.Anim/Boolean} Anim if element has active effects, else false
*/
getActiveAnimation: function() {
return Ext.fx.Manager.getActiveAnimation(this.id);
}
}, function(){
// Apply Animate mixin manually until Element is defined in the proper 4.x way
Ext.applyIf(Ext.Element.prototype, this.prototype);
// We need to call this again so the animation methods get copied over to CE
Ext.CompositeElementLite.importElementMethods();
});
/**
* This mixin enables classes to declare relationships to child elements and provides the
* mechanics for acquiring the {@link Ext.Element elements} and storing them on an object
* instance as properties.
*
* This class is used by {@link Ext.Component components} and {@link Ext.layout.container.Container container layouts} to
* manage their child elements.
*
* A typical component that uses these features might look something like this:
*
* Ext.define('Ext.ux.SomeComponent', {
* extend: 'Ext.Component',
*
* childEls: [
* 'bodyEl'
* ],
*
* renderTpl: [
* ''
* ],
*
* // ...
* });
*
* The `childEls` array lists one or more relationships to child elements managed by the
* component. The items in this array can be either of the following types:
*
* - String: the id suffix and property name in one. For example, "bodyEl" in the above
* example means a "bodyEl" property will be added to the instance with the result of
* {@link Ext#get} given "componentId-bodyEl" where "componentId" is the component instance's
* id.
* - Object: with a `name` property that names the instance property for the element, and
* one of the following additional properties:
* - `id`: The full id of the child element.
* - `itemId`: The suffix part of the id to which "componentId-" is prepended.
* - `select`: A selector that will be passed to {@link Ext#select}.
* - `selectNode`: A selector that will be passed to {@link Ext.DomQuery#selectNode}.
*
* The example above could have used this instead to achieve the same result:
*
* childEls: [
* { name: 'bodyEl', itemId: 'bodyEl' }
* ]
*
* When using `select`, the property will be an instance of {@link Ext.CompositeElement}. In
* all other cases, the property will be an {@link Ext.Element} or `null` if not found.
*
* Care should be taken when using `select` or `selectNode` to find child elements. The
* following issues should be considered:
*
* - Performance: using selectors can be slower than id lookup by a factor 10x or more.
* - Over-selecting: selectors are applied after the DOM elements for all children have
* been rendered, so selectors can match elements from child components (including nested
* versions of the same component) accidentally.
*
* This above issues are most important when using `select` since it returns multiple
* elements.
*
* **IMPORTANT**
* Unlike a `renderTpl` where there is a single value for an instance, `childEls` are aggregated
* up the class hierarchy so that they are effectively inherited. In other words, if a
* class where to derive from `Ext.ux.SomeComponent` in the example above, it could also
* have a `childEls` property in the same way as `Ext.ux.SomeComponent`.
*
* Ext.define('Ext.ux.AnotherComponent', {
* extend: 'Ext.ux.SomeComponent',
*
* childEls: [
* // 'bodyEl' is inherited
* 'innerEl'
* ],
*
* renderTpl: [
* ''
* ''
* '
'
* ],
*
* // ...
* });
*
* The `renderTpl` contains both child elements and unites them in the desired markup, but
* the `childEls` only contains the new child element. The {@link #applyChildEls} method
* takes care of looking up all `childEls` for an instance and considers `childEls`
* properties on all the super classes and mixins.
*
* @private
*/
Ext.define('Ext.util.ElementContainer', {
childEls: [
// empty - this solves a couple problems:
// 1. It ensures that all classes have a childEls (avoid null ptr)
// 2. It prevents mixins from smashing on their own childEls (these are gathered
// specifically)
],
constructor: function () {
var me = this,
childEls;
// if we have configured childEls, we need to merge them with those from this
// class, its bases and the set of mixins...
if (me.hasOwnProperty('childEls')) {
childEls = me.childEls;
delete me.childEls;
me.addChildEls.apply(me, childEls);
}
},
destroy: function () {
var me = this,
childEls = me.getChildEls(),
child, childName, i, k;
for (i = childEls.length; i--; ) {
childName = childEls[i];
if (typeof childName != 'string') {
childName = childName.name;
}
child = me[childName];
if (child) {
me[childName] = null; // better than delete since that changes the "shape"
child.remove();
}
}
},
/**
* Adds each argument passed to this method to the {@link Ext.AbstractComponent#cfg-childEls childEls} array.
*/
addChildEls: function () {
var me = this,
args = arguments;
if (me.hasOwnProperty('childEls')) {
me.childEls.push.apply(me.childEls, args);
} else {
me.childEls = me.getChildEls().concat(Array.prototype.slice.call(args));
}
me.prune(me.childEls, false);
},
/**
* Sets references to elements inside the component.
* @private
*/
applyChildEls: function(el, id) {
var me = this,
childEls = me.getChildEls(),
baseId, childName, i, selector, value;
baseId = (id || me.id) + '-';
for (i = childEls.length; i--; ) {
childName = childEls[i];
if (typeof childName == 'string') {
// We don't use Ext.get because that is 3x (or more) slower on IE6-8. Since
// we know the el's are children of our el we use getById instead:
value = el.getById(baseId + childName);
} else {
if ((selector = childName.select)) {
value = Ext.select(selector, true, el.dom); // a CompositeElement
} else if ((selector = childName.selectNode)) {
value = Ext.get(Ext.DomQuery.selectNode(selector, el.dom));
} else {
// see above re:getById...
value = el.getById(childName.id || (baseId + childName.itemId));
}
childName = childName.name;
}
me[childName] = value;
}
},
getChildEls: function () {
var me = this,
self;
// If an instance has its own childEls, that is the complete set:
if (me.hasOwnProperty('childEls')) {
return me.childEls;
}
// Typically, however, the childEls is a class-level concept, so check to see if
// we have cached the complete set on the class:
self = me.self;
return self.$childEls || me.getClassChildEls(self);
},
getClassChildEls: function (cls) {
var me = this,
result = cls.$childEls,
childEls, i, length, forked, mixin, mixins, name, parts, proto, supr, superMixins;
if (!result) {
// We put the various childEls arrays into parts in the order of superclass,
// new mixins and finally from cls. These parts can be null or undefined and
// we will skip them later.
supr = cls.superclass;
if (supr) {
supr = supr.self;
parts = [supr.$childEls || me.getClassChildEls(supr)]; // super+mixins
superMixins = supr.prototype.mixins || {};
} else {
parts = [];
superMixins = {};
}
proto = cls.prototype;
mixins = proto.mixins; // since we are a mixin, there will be at least us
for (name in mixins) {
if (mixins.hasOwnProperty(name) && !superMixins.hasOwnProperty(name)) {
mixin = mixins[name].self;
parts.push(mixin.$childEls || me.getClassChildEls(mixin));
}
}
parts.push(proto.hasOwnProperty('childEls') && proto.childEls);
for (i = 0, length = parts.length; i < length; ++i) {
childEls = parts[i];
if (childEls && childEls.length) {
if (!result) {
result = childEls;
} else {
if (!forked) {
forked = true;
result = result.slice(0);
}
result.push.apply(result, childEls);
}
}
}
cls.$childEls = result = (result ? me.prune(result, !forked) : []);
}
return result;
},
prune: function (childEls, shared) {
var index = childEls.length,
map = {},
name;
while (index--) {
name = childEls[index];
if (typeof name != 'string') {
name = name.name;
}
if (!map[name]) {
map[name] = 1;
} else {
if (shared) {
shared = false;
childEls = childEls.slice(0);
}
Ext.Array.erase(childEls, index, 1);
}
}
return childEls;
},
/**
* Removes items in the childEls array based on the return value of a supplied test
* function. The function is called with a entry in childEls and if the test function
* return true, that entry is removed. If false, that entry is kept.
*
* @param {Function} testFn The test function.
*/
removeChildEls: function (testFn) {
var me = this,
old = me.getChildEls(),
keepers = (me.childEls = []),
n, i, cel;
for (i = 0, n = old.length; i < n; ++i) {
cel = old[i];
if (!testFn(cel)) {
keepers.push(cel);
}
}
}
});
/**
* Given a component hierarchy of this:
*
* {
* xtype: 'panel',
* id: 'ContainerA',
* layout: 'hbox',
* renderTo: Ext.getBody(),
* items: [
* {
* id: 'ContainerB',
* xtype: 'container',
* items: [
* { id: 'ComponentA' }
* ]
* }
* ]
* }
*
* The rendering of the above proceeds roughly like this:
*
* - ContainerA's initComponent calls #render passing the `renderTo` property as the
* container argument.
* - `render` calls the `getRenderTree` method to get a complete {@link Ext.DomHelper} spec.
* - `getRenderTree` fires the "beforerender" event and calls the #beforeRender
* method. Its result is obtained by calling #getElConfig.
* - The #getElConfig method uses the `renderTpl` and its render data as the content
* of the `autoEl` described element.
* - The result of `getRenderTree` is passed to {@link Ext.DomHelper#append}.
* - The `renderTpl` contains calls to render things like docked items, container items
* and raw markup (such as the `html` or `tpl` config properties). These calls are to
* methods added to the {@link Ext.XTemplate} instance by #setupRenderTpl.
* - The #setupRenderTpl method adds methods such as `renderItems`, `renderContent`, etc.
* to the template. These are directed to "doRenderItems", "doRenderContent" etc..
* - The #setupRenderTpl calls traverse from components to their {@link Ext.layout.Layout}
* object.
* - When a container is rendered, it also has a `renderTpl`. This is processed when the
* `renderContainer` method is called in the component's `renderTpl`. This call goes to
* Ext.layout.container.Container#doRenderContainer. This method repeats this
* process for all components in the container.
* - After the top-most component's markup is generated and placed in to the DOM, the next
* step is to link elements to their components and finish calling the component methods
* `onRender` and `afterRender` as well as fire the corresponding events.
* - The first step in this is to call #finishRender. This method descends the
* component hierarchy and calls `onRender` and fires the `render` event. These calls
* are delivered top-down to approximate the timing of these calls/events from previous
* versions.
* - During the pass, the component's `el` is set. Likewise, the `renderSelectors` and
* `childEls` are applied to capture references to the component's elements.
* - These calls are also made on the {@link Ext.layout.container.Container} layout to
* capture its elements. Both of these classes use {@link Ext.util.ElementContainer} to
* handle `childEls` processing.
* - Once this is complete, a similar pass is made by calling #finishAfterRender.
* This call also descends the component hierarchy, but this time the calls are made in
* a bottom-up order to `afterRender`.
*
* @private
*/
Ext.define('Ext.util.Renderable', {
requires: [
'Ext.dom.Element'
],
frameCls: Ext.baseCSSPrefix + 'frame',
frameIdRegex: /[\-]frame\d+[TMB][LCR]$/,
frameElementCls: {
tl: [],
tc: [],
tr: [],
ml: [],
mc: [],
mr: [],
bl: [],
bc: [],
br: []
},
frameElNames: ['TL','TC','TR','ML','MC','MR','BL','BC','BR'],
frameTpl: [
'{%this.renderDockedItems(out,values,0);%}',
' {parent.baseCls}-{parent.ui}-{.}-tl" style="background-position: {tl}; padding-left: {frameWidth}px" role="presentation">',
'
{parent.baseCls}-{parent.ui}-{.}-tr" style="background-position: {tr}; padding-right: {frameWidth}px" role="presentation">',
'
{parent.baseCls}-{parent.ui}-{.}-tc" style="background-position: {tc}; height: {frameWidth}px" role="presentation">
',
' {parent.baseCls}-{parent.ui}-{.}-ml" style="background-position: {ml}; padding-left: {frameWidth}px" role="presentation">',
'
{parent.baseCls}-{parent.ui}-{.}-mr" style="background-position: {mr}; padding-right: {frameWidth}px" role="presentation">',
'
{parent.baseCls}-{parent.ui}-{.}-mc" role="presentation">',
'{%this.applyRenderTpl(out, values)%}',
'
',
' {parent.baseCls}-{parent.ui}-{.}-bl" style="background-position: {bl}; padding-left: {frameWidth}px" role="presentation">',
'
{parent.baseCls}-{parent.ui}-{.}-br" style="background-position: {br}; padding-right: {frameWidth}px" role="presentation">',
'
{parent.baseCls}-{parent.ui}-{.}-bc" style="background-position: {bc}; height: {frameWidth}px" role="presentation">
',
'| {parent.baseCls}-{parent.ui}-{.}-tl" style="background-position: {tl}; padding-left:{frameWidth}px" role="presentation"> | {parent.baseCls}-{parent.ui}-{.}-tc" style="background-position: {tc}; height: {frameWidth}px" role="presentation"> | ', '{parent.baseCls}-{parent.ui}-{.}-tr" style="background-position: {tr}; padding-left: {frameWidth}px" role="presentation"> |
| {parent.baseCls}-{parent.ui}-{.}-ml" style="background-position: {ml}; padding-left: {frameWidth}px" role="presentation"> | {parent.baseCls}-{parent.ui}-{.}-mc" style="background-position: 0 0;" role="presentation">', '{%this.applyRenderTpl(out, values)%}', ' | ', '{parent.baseCls}-{parent.ui}-{.}-mr" style="background-position: {mr}; padding-left: {frameWidth}px" role="presentation"> |
| {parent.baseCls}-{parent.ui}-{.}-bl" style="background-position: {bl}; padding-left: {frameWidth}px" role="presentation"> | {parent.baseCls}-{parent.ui}-{.}-bc" style="background-position: {bc}; height: {frameWidth}px" role="presentation"> | ', '{parent.baseCls}-{parent.ui}-{.}-br" style="background-position: {br}; padding-left: {frameWidth}px" role="presentation"> |
Abstract base class for state provider implementations. The provider is responsible * for setting values and extracting values to/from the underlying storage source. The * storage source can vary and the details should be implemented in a subclass. For example * a provider could use a server side database or the browser localstorage where supported.
* *This class provides methods for encoding and decoding typed variables including * dates and defines the Provider interface. By default these methods put the value and the * type information into a delimited string that can be stored. These should be overridden in * a subclass if you want to change the format of the encoded value and subsequent decoding.
*/ Ext.define('Ext.state.Provider', { mixins: { observable: 'Ext.util.Observable' }, /** * @cfg {String} prefix A string to prefix to items stored in the underlying state store. * Defaults to 'ext-' */ prefix: 'ext-', constructor : function(config){ config = config || {}; var me = this; Ext.apply(me, config); /** * @event statechange * Fires when a state change occurs. * @param {Ext.state.Provider} this This state provider * @param {String} key The state key which was changed * @param {String} value The encoded value for the state */ me.addEvents("statechange"); me.state = {}; me.mixins.observable.constructor.call(me); }, /** * Returns the current value for a key * @param {String} name The key name * @param {Object} defaultValue A default value to return if the key's value is not found * @return {Object} The state data */ get : function(name, defaultValue){ return typeof this.state[name] == "undefined" ? defaultValue : this.state[name]; }, /** * Clears a value from the state * @param {String} name The key name */ clear : function(name){ var me = this; delete me.state[name]; me.fireEvent("statechange", me, name, null); }, /** * Sets the value for a key * @param {String} name The key name * @param {Object} value The value to set */ set : function(name, value){ var me = this; me.state[name] = value; me.fireEvent("statechange", me, name, value); }, /** * Decodes a string previously encoded with {@link #encodeValue}. * @param {String} value The value to decode * @return {Object} The decoded value */ decodeValue : function(value){ // a -> Array // n -> Number // d -> Date // b -> Boolean // s -> String // o -> Object // -> Empty (null) var me = this, re = /^(a|n|d|b|s|o|e)\:(.*)$/, matches = re.exec(unescape(value)), all, type, keyValue, values, vLen, v; if(!matches || !matches[1]){ return; // non state } type = matches[1]; value = matches[2]; switch (type) { case 'e': return null; case 'n': return parseFloat(value); case 'd': return new Date(Date.parse(value)); case 'b': return (value == '1'); case 'a': all = []; if(value != ''){ values = value.split('^'); vLen = values.length; for (v = 0; v < vLen; v++) { value = values[v]; all.push(me.decodeValue(value)); } } return all; case 'o': all = {}; if(value != ''){ values = value.split('^'); vLen = values.length; for (v = 0; v < vLen; v++) { value = values[v]; keyValue = value.split('='); all[keyValue[0]] = me.decodeValue(keyValue[1]); } } return all; default: return value; } }, /** * Encodes a value including type information. Decode with {@link #decodeValue}. * @param {Object} value The value to encode * @return {String} The encoded value */ encodeValue : function(value){ var flat = '', i = 0, enc, len, key; if (value == null) { return 'e:1'; } else if(typeof value == 'number') { enc = 'n:' + value; } else if(typeof value == 'boolean') { enc = 'b:' + (value ? '1' : '0'); } else if(Ext.isDate(value)) { enc = 'd:' + value.toGMTString(); } else if(Ext.isArray(value)) { for (len = value.length; i < len; i++) { flat += this.encodeValue(value[i]); if (i != len - 1) { flat += '^'; } } enc = 'a:' + flat; } else if (typeof value == 'object') { for (key in value) { if (typeof value[key] != 'function' && value[key] !== undefined) { flat += key + '=' + this.encodeValue(value[key]) + '^'; } } enc = 'o:' + flat.substring(0, flat.length-1); } else { enc = 's:' + value; } return escape(enc); } }); /** * @class Ext.state.Manager * This is the global state manager. By default all components that are "state aware" check this class * for state information if you don't pass them a custom state provider. In order for this class * to be useful, it must be initialized with a provider when your application initializes. Example usage:
// in your initialization function
init : function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
}
* * For state saving to work, the state manager's provider must have been * set to an implementation of {@link Ext.state.Provider} which overrides the * {@link Ext.state.Provider#set set} and {@link Ext.state.Provider#get get} * methods to save and recall name/value pairs. A built-in implementation, * {@link Ext.state.CookieProvider} is available. * * To set the state provider for the current page: * * Ext.state.Manager.setProvider(new Ext.state.CookieProvider({ * expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now * })); * * A stateful object attempts to save state when one of the events * listed in the {@link #stateEvents} configuration fires. * * To save state, a stateful object first serializes its state by * calling *{@link #getState}*. * * The Component base class implements {@link #getState} to save its width and height within the state * only if they were initially configured, and have changed from the configured value. * * The Panel class saves its collapsed state in addition to that. * * The Grid class saves its column state in addition to its superclass state. * * If there is more application state to be save, the developer must provide an implementation which * first calls the superclass method to inherit the above behaviour, and then injects new properties * into the returned object. * * The value yielded by getState is passed to {@link Ext.state.Manager#set} * which uses the configured {@link Ext.state.Provider} to save the object * keyed by the {@link #stateId}. * * During construction, a stateful object attempts to *restore* its state by calling * {@link Ext.state.Manager#get} passing the {@link #stateId} * * The resulting object is passed to {@link #applyState}*. The default implementation of * {@link #applyState} simply copies properties into the object, but a developer may * override this to support restoration of more complex application state. * * You can perform extra processing on state save and restore by attaching * handlers to the {@link #beforestaterestore}, {@link #staterestore}, * {@link #beforestatesave} and {@link #statesave} events. */ stateful: false, /** * @cfg {String} stateId * The unique id for this object to use for state management purposes. *
See {@link #stateful} for an explanation of saving and restoring state.
*/ /** * @cfg {String[]} stateEvents *An array of events that, when fired, should trigger this object to
* save its state. Defaults to none. stateEvents may be any type
* of event supported by this object, including browser or custom events
* (e.g., ['click', 'customerchange']).
See {@link #stateful} for an explanation of saving and
* restoring object state.
{title}
', * '{desc}
' * ], * renderData: { * title: "Error", * desc: "Something went wrong" * }, * renderSelectors: { * titleEl: 'h1.title', * descEl: 'p' * }, * listeners: { * afterrender: function(cmp){ * // After rendering the component will have a titleEl and descEl properties * cmp.titleEl.setStyle({color: "red"}); * } * } * }); * * For a faster, but less flexible, alternative that achieves the same end result (properties for child elements on the * Component after render), see {@link #cfg-childEls} and {@link #addChildEls}. */ /** * @cfg {Object[]} childEls * An array describing the child elements of the Component. Each member of the array * is an object with these properties: * * - `name` - The property name on the Component for the child element. * - `itemId` - The id to combine with the Component's id that is the id of the child element. * - `id` - The id of the child element. * * If the array member is a string, it is equivalent to `{ name: m, itemId: m }`. * * For example, a Component which renders a title and body text: * * Ext.create('Ext.Component', { * renderTo: Ext.getBody(), * renderTpl: [ * '{title}
', * '{msg}
', * ], * renderData: { * title: "Error", * msg: "Something went wrong" * }, * childEls: ["title"], * listeners: { * afterrender: function(cmp){ * // After rendering the component will have a title property * cmp.title.setStyle({color: "red"}); * } * } * }); * * A more flexible, but somewhat slower, approach is {@link #renderSelectors}. */ /** * @cfg {String/HTMLElement/Ext.Element} renderTo * Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. * * **Notes:** * * Do *not* use this option if the Component is to be a child item of a {@link Ext.container.Container Container}. * It is the responsibility of the {@link Ext.container.Container Container}'s * {@link Ext.container.Container#layout layout manager} to render and manage its child items. * * When using this config, a call to render() is not required. * * See also: {@link #method-render}. */ /** * @cfg {Boolean} frame * Specify as `true` to have the Component inject framing elements within the Component at render time to provide a * graphical rounded frame around the Component content. * * This is only necessary when running on outdated, or non standard-compliant browsers such as Microsoft's Internet * Explorer prior to version 9 which do not support rounded corners natively. * * The extra space taken up by this framing is available from the read only property {@link #frameSize}. */ /** * @property {Object} frameSize * @readonly * Indicates the width of any framing elements which were added within the encapsulating element * to provide graphical, rounded borders. See the {@link #frame} config. * * This is an object containing the frame width in pixels for all four sides of the Component containing the * following properties: * * @property {Number} [frameSize.top=0] The width of the top framing element in pixels. * @property {Number} [frameSize.right=0] The width of the right framing element in pixels. * @property {Number} [frameSize.bottom=0] The width of the bottom framing element in pixels. * @property {Number} [frameSize.left=0] The width of the left framing element in pixels. * @property {Number} [frameSize.width=0] The total width of the left and right framing elements in pixels. * @property {Number} [frameSize.height=0] The total height of the top and right bottom elements in pixels. */ frameSize: { left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0 }, /** * @cfg {String/Object} componentLayout * The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout * manager which sizes a Component's internal structure in response to the Component being sized. * * Generally, developers will not use this configuration as all provided Components which need their internal * elements sizing (Such as {@link Ext.form.field.Base input fields}) come with their own componentLayout managers. * * The {@link Ext.layout.container.Auto default layout manager} will be used on instances of the base Ext.Component * class which simply sizes the Component's encapsulating element to the height and width specified in the * {@link #setSize} method. */ /** * @cfg {Ext.XTemplate/Ext.Template/String/String[]} tpl * An {@link Ext.Template}, {@link Ext.XTemplate} or an array of strings to form an Ext.XTemplate. Used in * conjunction with the `{@link #data}` and `{@link #tplWriteMode}` configurations. */ /** * @cfg {Object} data * The initial set of data to apply to the `{@link #tpl}` to update the content area of the Component. */ /** * @cfg {String} xtype * This property provides a shorter alternative to creating objects than using a full * class name. Using `xtype` is the most common way to define component instances, * especially in a container. For example, the items in a form containing text fields * could be created explicitly like so: * * items: [ * Ext.create('Ext.form.field.Text', { * fieldLabel: 'Foo' * }), * Ext.create('Ext.form.field.Text', { * fieldLabel: 'Bar' * }), * Ext.create('Ext.form.field.Number', { * fieldLabel: 'Num' * }) * ] * * But by using `xtype`, the above becomes: * * items: [ * { * xtype: 'textfield', * fieldLabel: 'Foo' * }, * { * xtype: 'textfield', * fieldLabel: 'Bar' * }, * { * xtype: 'numberfield', * fieldLabel: 'Num' * } * ] * * When the `xtype` is common to many items, {@link Ext.container.AbstractContainer#defaultType} * is another way to specify the `xtype` for all items that don't have an explicit `xtype`: * * defaultType: 'textfield', * items: [ * { fieldLabel: 'Foo' }, * { fieldLabel: 'Bar' }, * { fieldLabel: 'Num', xtype: 'numberfield' } * ] * * Each member of the `items` array is now just a "configuration object". These objects * are used to create and configure component instances. A configuration object can be * manually used to instantiate a component using {@link Ext#widget}: * * var text1 = Ext.create('Ext.form.field.Text', { * fieldLabel: 'Foo' * }); * * // or alternatively: * * var text1 = Ext.widget({ * xtype: 'textfield', * fieldLabel: 'Foo' * }); * * This conversion of configuration objects into instantiated components is done when * a container is created as part of its {Ext.container.AbstractContainer#initComponent} * process. As part of the same process, the `items` array is converted from its raw * array form into a {@link Ext.util.MixedCollection} instance. * * You can define your own `xtype` on a custom {@link Ext.Component component} by specifying * the `xtype` property in {@link Ext#define}. For example: * * Ext.define('MyApp.PressMeButton', { * extend: 'Ext.button.Button', * xtype: 'pressmebutton', * text: 'Press Me' * }); * * Care should be taken when naming an `xtype` in a custom component because there is * a single, shared scope for all xtypes. Third part components should consider using * a prefix to avoid collisions. * * Ext.define('Foo.form.CoolButton', { * extend: 'Ext.button.Button', * xtype: 'ux-coolbutton', * text: 'Cool!' * }); */ /** * @cfg {String} tplWriteMode * The Ext.(X)Template method to use when updating the content area of the Component. * See `{@link Ext.XTemplate#overwrite}` for information on default mode. */ tplWriteMode: 'overwrite', /** * @cfg {String} [baseCls='x-component'] * The base CSS class to apply to this components's element. This will also be prepended to elements within this * component like Panel's body will get a class x-panel-body. This means that if you create a subclass of Panel, and * you want it to get all the Panels styling for the element and the body, you leave the baseCls x-panel and use * componentCls to add specific styling for this component. */ baseCls: Ext.baseCSSPrefix + 'component', /** * @cfg {String} componentCls * CSS Class to be added to a components root level element to give distinction to it via styling. */ /** * @cfg {String} [cls=''] * An optional extra CSS class that will be added to this component's Element. This can be useful * for adding customized styles to the component or any of its children using standard CSS rules. */ /** * @cfg {String} [overCls=''] * An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, * and removed when the mouse moves out. This can be useful for adding customized 'active' or 'hover' styles to the * component or any of its children using standard CSS rules. */ /** * @cfg {String} [disabledCls='x-item-disabled'] * CSS class to add when the Component is disabled. Defaults to 'x-item-disabled'. */ disabledCls: Ext.baseCSSPrefix + 'item-disabled', /** * @cfg {String} ui * A UI style for a component. */ ui: 'default', /** * @cfg {String[]} uiCls * An array of of classNames which are currently applied to this component * @private */ uiCls: [], /** * @cfg {String/Object} style * A custom style specification to be applied to this component's Element. Should be a valid argument to * {@link Ext.Element#applyStyles}. * * new Ext.panel.Panel({ * title: 'Some Title', * renderTo: Ext.getBody(), * width: 400, height: 300, * layout: 'form', * items: [{ * xtype: 'textarea', * style: { * width: '95%', * marginBottom: '10px' * } * }, * new Ext.button.Button({ * text: 'Send', * minWidth: '100', * style: { * marginBottom: '10px' * } * }) * ] * }); */ /** * @cfg {Number} width * The width of this component in pixels. */ /** * @cfg {Number} height * The height of this component in pixels. */ /** * @cfg {Number/String/Boolean} border * Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can * be a CSS style specification for each style, for example: '10 5 3 10'. * * For components that have no border by default, setting this won't make the border appear by itself. * You also need to specify border color and style: * * border: 5, * style: { * borderColor: 'red', * borderStyle: 'solid' * } * * To turn off the border, use `border: false`. */ /** * @cfg {Number/String} padding * Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or it * can be a CSS style specification for each style, for example: '10 5 3 10'. */ /** * @cfg {Number/String} margin * Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or it can * be a CSS style specification for each style, for example: '10 5 3 10'. */ /** * @cfg {Boolean} hidden * True to hide the component. */ hidden: false, /** * @cfg {Boolean} disabled * True to disable the component. */ disabled: false, /** * @cfg {Boolean} [draggable=false] * Allows the component to be dragged. */ /** * @property {Boolean} draggable * Indicates whether or not the component can be dragged. * @readonly */ draggable: false, /** * @cfg {Boolean} floating * Create the Component as a floating and use absolute positioning. * * The z-index of floating Components is handled by a ZIndexManager. If you simply render a floating Component into the DOM, it will be managed * by the global {@link Ext.WindowManager WindowManager}. * * If you include a floating Component as a child item of a Container, then upon render, ExtJS will seek an ancestor floating Component to house a new * ZIndexManager instance to manage its descendant floaters. If no floating ancestor can be found, the global WindowManager will be used. * * When a floating Component which has a ZindexManager managing descendant floaters is destroyed, those descendant floaters will also be destroyed. */ floating: false, /** * @cfg {String} hideMode * A String which specifies how this Component's encapsulating DOM element will be hidden. Values may be: * * - `'display'` : The Component will be hidden using the `display: none` style. * - `'visibility'` : The Component will be hidden using the `visibility: hidden` style. * - `'offsets'` : The Component will be hidden by absolutely positioning it out of the visible area of the document. * This is useful when a hidden Component must maintain measurable dimensions. Hiding using `display` results in a * Component having zero dimensions. */ hideMode: 'display', /** * @cfg {String} contentEl * Specify an existing HTML element, or the `id` of an existing HTML element to use as the content for this component. * * This config option is used to take an existing HTML element and place it in the layout element of a new component * (it simply moves the specified DOM element _after the Component is rendered_ to use as the content. * * **Notes:** * * The specified HTML element is appended to the layout element of the component _after any configured * {@link #html HTML} has been inserted_, and so the document will not contain this element at the time * the {@link #event-render} event is fired. * * The specified HTML element used will not participate in any **`{@link Ext.container.Container#layout layout}`** * scheme that the Component may use. It is just HTML. Layouts operate on child * **`{@link Ext.container.Container#cfg-items items}`**. * * Add either the `x-hidden` or the `x-hide-display` CSS class to prevent a brief flicker of the content before it * is rendered to the panel. */ /** * @cfg {String/Object} [html=''] * An HTML fragment, or a {@link Ext.DomHelper DomHelper} specification to use as the layout element content. * The HTML content is added after the component is rendered, so the document will not contain this HTML at the time * the {@link #event-render} event is fired. This content is inserted into the body _before_ any configured {@link #contentEl} * is appended. */ /** * @cfg {Boolean} styleHtmlContent * True to automatically style the html inside the content target of this component (body for panels). */ styleHtmlContent: false, /** * @cfg {String} [styleHtmlCls='x-html'] * The class that is added to the content target when you set styleHtmlContent to true. */ styleHtmlCls: Ext.baseCSSPrefix + 'html', /** * @cfg {Number} minHeight * The minimum value in pixels which this Component will set its height to. * * **Warning:** This will override any size management applied by layout managers. */ /** * @cfg {Number} minWidth * The minimum value in pixels which this Component will set its width to. * * **Warning:** This will override any size management applied by layout managers. */ /** * @cfg {Number} maxHeight * The maximum value in pixels which this Component will set its height to. * * **Warning:** This will override any size management applied by layout managers. */ /** * @cfg {Number} maxWidth * The maximum value in pixels which this Component will set its width to. * * **Warning:** This will override any size management applied by layout managers. */ /** * @cfg {Ext.ComponentLoader/Object} loader * A configuration object or an instance of a {@link Ext.ComponentLoader} to load remote content * for this Component. * * Ext.create('Ext.Component', { * loader: { * url: 'content.html', * autoLoad: true * }, * renderTo: Ext.getBody() * }); */ /** * @cfg {Ext.ComponentLoader/Object/String/Boolean} autoLoad * An alias for {@link #loader} config which also allows to specify just a string which will be * used as the url that's automatically loaded: * * Ext.create('Ext.Component', { * autoLoad: 'content.html', * renderTo: Ext.getBody() * }); * * The above is the same as: * * Ext.create('Ext.Component', { * loader: { * url: 'content.html', * autoLoad: true * }, * renderTo: Ext.getBody() * }); * * Don't use it together with {@link #loader} config. * * @deprecated 4.1.1 Use {@link #loader} config instead. */ /** * @cfg {Boolean} autoShow * True to automatically show the component upon creation. This config option may only be used for * {@link #floating} components or components that use {@link #autoRender}. Defaults to false. */ autoShow: false, /** * @cfg {Boolean/String/HTMLElement/Ext.Element} autoRender * This config is intended mainly for non-{@link #floating} Components which may or may not be shown. Instead of using * {@link #renderTo} in the configuration, and rendering upon construction, this allows a Component to render itself * upon first _{@link Ext.Component#method-show show}_. If {@link #floating} is true, the value of this config is omited as if it is `true`. * * Specify as `true` to have this Component render to the document body upon first show. * * Specify as an element, or the ID of an element to have this Component render to a specific element upon first * show. */ autoRender: false, // @private allowDomMove: true, /** * @cfg {Object/Object[]} plugins * An object or array of objects that will provide custom functionality for this component. The only requirement for * a valid plugin is that it contain an init method that accepts a reference of type Ext.Component. When a component * is created, if any plugins are available, the component will call the init method on each plugin, passing a * reference to itself. Each plugin can then call methods or respond to events on the component as needed to provide * its functionality. */ /** * @property {Boolean} rendered * Indicates whether or not the component has been rendered. * @readonly */ rendered: false, /** * @property {Number} componentLayoutCounter * @private * The number of component layout calls made on this object. */ componentLayoutCounter: 0, /** * @cfg {Boolean/Number} [shrinkWrap=2] * * If this property is a number, it is interpreted as follows: * * - 0: Neither width nor height depend on content. This is equivalent to `false`. * - 1: Width depends on content (shrink wraps), but height does not. * - 2: Height depends on content (shrink wraps), but width does not. The default. * - 3: Both width and height depend on content (shrink wrap). This is equivalent to `true`. * * In CSS terms, shrink-wrap width is analogous to an inline-block element as opposed * to a block-level element. Some container layouts always shrink-wrap their children, * effectively ignoring this property (e.g., {@link Ext.layout.container.HBox}, * {@link Ext.layout.container.VBox}, {@link Ext.layout.component.Dock}). */ shrinkWrap: 2, weight: 0, /** * @property {Boolean} maskOnDisable * This is an internal flag that you use when creating custom components. By default this is set to true which means * that every component gets a mask when it's disabled. Components like FieldContainer, FieldSet, Field, Button, Tab * override this property to false since they want to implement custom disable logic. */ maskOnDisable: true, /** * @property {Boolean} [_isLayoutRoot=false] * Setting this property to `true` causes the {@link #isLayoutRoot} method to return * `true` and stop the search for the top-most component for a layout. * @protected */ _isLayoutRoot: false, /** * Creates new Component. * @param {Object} config (optional) Config object. */ constructor : function(config) { var me = this, i, len, xhooks; if (config) { Ext.apply(me, config); xhooks = me.xhooks; if (xhooks) { delete me.xhooks; Ext.override(me, xhooks); } } else { config = {}; } me.initialConfig = config; me.mixins.elementCt.constructor.call(me); me.addEvents( /** * @event beforeactivate * Fires before a Component has been visually activated. Returning false from an event listener can prevent * the activate from occurring. * @param {Ext.Component} this */ 'beforeactivate', /** * @event activate * Fires after a Component has been visually activated. * @param {Ext.Component} this */ 'activate', /** * @event beforedeactivate * Fires before a Component has been visually deactivated. Returning false from an event listener can * prevent the deactivate from occurring. * @param {Ext.Component} this */ 'beforedeactivate', /** * @event deactivate * Fires after a Component has been visually deactivated. * @param {Ext.Component} this */ 'deactivate', /** * @event added * Fires after a Component had been added to a Container. * @param {Ext.Component} this * @param {Ext.container.Container} container Parent Container * @param {Number} pos position of Component */ 'added', /** * @event disable * Fires after the component is disabled. * @param {Ext.Component} this */ 'disable', /** * @event enable * Fires after the component is enabled. * @param {Ext.Component} this */ 'enable', /** * @event beforeshow * Fires before the component is shown when calling the {@link Ext.Component#method-show show} method. Return false from an event * handler to stop the show. * @param {Ext.Component} this */ 'beforeshow', /** * @event show * Fires after the component is shown when calling the {@link Ext.Component#method-show show} method. * @param {Ext.Component} this */ 'show', /** * @event beforehide * Fires before the component is hidden when calling the {@link Ext.Component#method-hide hide} method. Return false from an event * handler to stop the hide. * @param {Ext.Component} this */ 'beforehide', /** * @event hide * Fires after the component is hidden. Fires after the component is hidden when calling the {@link Ext.Component#method-hide hide} * method. * @param {Ext.Component} this */ 'hide', /** * @event removed * Fires when a component is removed from an Ext.container.Container * @param {Ext.Component} this * @param {Ext.container.Container} ownerCt Container which holds the component */ 'removed', /** * @event beforerender * Fires before the component is {@link #rendered}. Return false from an event handler to stop the * {@link #method-render}. * @param {Ext.Component} this */ 'beforerender', /** * @event render * Fires after the component markup is {@link #rendered}. * @param {Ext.Component} this */ 'render', /** * @event afterrender * Fires after the component rendering is finished. * * The afterrender event is fired after this Component has been {@link #rendered}, been postprocesed by any * afterRender method defined for the Component. * @param {Ext.Component} this */ 'afterrender', /** * @event boxready * Fires *one time* - after the component has been layed out for the first time at its initial size. * @param {Ext.Component} this * @param {Number} width The initial width * @param {Number} height The initial height */ 'boxready', /** * @event beforedestroy * Fires before the component is {@link #method-destroy}ed. Return false from an event handler to stop the * {@link #method-destroy}. * @param {Ext.Component} this */ 'beforedestroy', /** * @event destroy * Fires after the component is {@link #method-destroy}ed. * @param {Ext.Component} this */ 'destroy', /** * @event resize * Fires after the component is resized. Note that this does *not* fire when the component is first layed out at its initial * size. To hook that point in the lifecycle, use the {@link #boxready} event. * @param {Ext.Component} this * @param {Number} width The new width that was set * @param {Number} height The new height that was set * @param {Number} oldWidth The previous width * @param {Number} oldHeight The previous height */ 'resize', /** * @event move * Fires after the component is moved. * @param {Ext.Component} this * @param {Number} x The new x position * @param {Number} y The new y position */ 'move', /** * @event focus * Fires when this Component receives focus. * @param {Ext.Component} this * @param {Ext.EventObject} The focus event. */ 'focus', /** * @event blur * Fires when this Component loses focus. * @param {Ext.Component} this * @param {Ext.EventObject} The blur event. */ 'blur' ); me.getId(); me.setupProtoEl(); // initComponent, beforeRender, or event handlers may have set the style or cls property since the protoEl was set up // so we must apply styles and classes here too. if (me.cls) { me.initialCls = me.cls; me.protoEl.addCls(me.cls); } if (me.style) { me.initialStyle = me.style; me.protoEl.setStyle(me.style); } me.mons = []; me.renderData = me.renderData || {}; me.renderSelectors = me.renderSelectors || {}; if (me.plugins) { me.plugins = me.constructPlugins(); } // we need this before we call initComponent if (!me.hasListeners) { me.hasListeners = new me.HasListeners(); } me.initComponent(); // ititComponent gets a chance to change the id property before registering Ext.ComponentManager.register(me); // Dont pass the config so that it is not applied to 'this' again me.mixins.observable.constructor.call(me); me.mixins.state.constructor.call(me, config); // Save state on resize. this.addStateEvents('resize'); // Move this into Observable? if (me.plugins) { for (i = 0, len = me.plugins.length; i < len; i++) { me.plugins[i] = me.initPlugin(me.plugins[i]); } } me.loader = me.getLoader(); if (me.renderTo) { me.render(me.renderTo); // EXTJSIV-1935 - should be a way to do afterShow or something, but that // won't work. Likewise, rendering hidden and then showing (w/autoShow) has // implications to afterRender so we cannot do that. } // Auto show only works unilaterally on *uncontained* Components. // If contained, then it is the Container's responsibility to do the showing at next layout time. if (me.autoShow && !me.isContained) { me.show(); } if (Ext.isDefined(me.disabledClass)) { if (Ext.isDefined(Ext.global.console)) { Ext.global.console.warn('Ext.Component: disabledClass has been deprecated. Please use disabledCls.'); } me.disabledCls = me.disabledClass; delete me.disabledClass; } }, initComponent: function () { // This is called again here to allow derived classes to add plugin configs to the // plugins array before calling down to this, the base initComponent. this.plugins = this.constructPlugins(); // this will properly (ignore or) constrain the configured width/height to their // min/max values for consistency. this.setSize(this.width, this.height); }, /** * The supplied default state gathering method for the AbstractComponent class. * * This method returns dimension settings such as `flex`, `anchor`, `width` and `height` along with `collapsed` * state. * * Subclasses which implement more complex state should call the superclass's implementation, and apply their state * to the result if this basic state is to be saved. * * Note that Component state will only be saved if the Component has a {@link #stateId} and there as a StateProvider * configured for the document. * * @return {Object} */ getState: function() { var me = this, state = null, sizeModel = me.getSizeModel(); if (sizeModel.width.configured) { state = me.addPropertyToState(state, 'width'); } if (sizeModel.height.configured) { state = me.addPropertyToState(state, 'height'); } return state; }, /** * Save a property to the given state object if it is not its default or configured * value. * * @param {Object} state The state object * @param {String} propName The name of the property on this object to save. * @param {String} [value] The value of the state property (defaults to `this[propName]`). * @return {Boolean} The state object or a new object if state was null and the property * was saved. * @protected */ addPropertyToState: function (state, propName, value) { var me = this, len = arguments.length; // If the property is inherited, it is a default and we don't want to save it to // the state, however if we explicitly specify a value, always save it if (len == 3 || me.hasOwnProperty(propName)) { if (len < 3) { value = me[propName]; } // If the property has the same value as was initially configured, again, we // don't want to save it. if (value !== me.initialConfig[propName]) { (state || (state = {}))[propName] = value; } } return state; }, show: Ext.emptyFn, animate: function(animObj) { var me = this, hasToWidth, hasToHeight, toHeight, toWidth, to, clearWidth, clearHeight, curWidth, w, curHeight, h, needsResize; animObj = animObj || {}; to = animObj.to || {}; if (Ext.fx.Manager.hasFxBlock(me.id)) { return me; } hasToWidth = Ext.isDefined(to.width); if (hasToWidth) { toWidth = Ext.Number.constrain(to.width, me.minWidth, me.maxWidth); } hasToHeight = Ext.isDefined(to.height); if (hasToHeight) { toHeight = Ext.Number.constrain(to.height, me.minHeight, me.maxHeight); } // Special processing for animating Component dimensions. if (!animObj.dynamic && (hasToWidth || hasToHeight)) { curWidth = (animObj.from ? animObj.from.width : undefined) || me.getWidth(); w = curWidth; curHeight = (animObj.from ? animObj.from.height : undefined) || me.getHeight(); h = curHeight; needsResize = false; if (hasToHeight && toHeight > curHeight) { h = toHeight; needsResize = true; } if (hasToWidth && toWidth > curWidth) { w = toWidth; needsResize = true; } // If any dimensions are being increased, we must resize the internal structure // of the Component, but then clip it by sizing its encapsulating element back to original dimensions. // The animation will then progressively reveal the larger content. if (needsResize) { clearWidth = !Ext.isNumber(me.width); clearHeight = !Ext.isNumber(me.height); me.setSize(w, h); me.el.setSize(curWidth, curHeight); if (clearWidth) { delete me.width; } if (clearHeight) { delete me.height; } } if (hasToWidth) { to.width = toWidth; } if (hasToHeight) { to.height = toHeight; } } return me.mixins.animate.animate.apply(me, arguments); }, onHide: function() { this.updateLayout({ isRoot: false }); }, onShow : function() { this.updateLayout({ isRoot: false }); }, constructPlugin: function(plugin) { // If a config object with a ptype if (plugin.ptype && typeof plugin.init != 'function') { plugin.cmp = this; plugin = Ext.PluginManager.create(plugin); } // Just a ptype else if (typeof plugin == 'string') { plugin = Ext.PluginManager.create({ ptype: plugin, cmp: this }); } return plugin; }, /** * @private * Returns an array of fully constructed plugin instances. This converts any configs into their * appropriate instances. * * It does not mutate the plugins array. It creates a new array. * * This is borrowed by {@link Ext.grid.Lockable Lockable} which clones and distributes Plugins * to both child grids of a locking grid, so must keep to that contract. */ constructPlugins: function() { var me = this, plugins, result = [], i, len; if (me.plugins) { plugins = Ext.isArray(me.plugins) ? me.plugins : [ me.plugins ]; for (i = 0, len = plugins.length; i < len; i++) { // this just returns already-constructed plugin instances... result[i] = me.constructPlugin(plugins[i]); } return result; } }, // @private initPlugin : function(plugin) { plugin.init(this); return plugin; }, /** * @private * Injected as an override by Ext.Aria.initialize */ updateAria: Ext.emptyFn, /** * Called by Component#doAutoRender * * Register a Container configured `floating: true` with this Component's {@link Ext.ZIndexManager ZIndexManager}. * * Components added in ths way will not participate in any layout, but will be rendered * upon first show in the way that {@link Ext.window.Window Window}s are. */ registerFloatingItem: function(cmp) { var me = this; if (!me.floatingDescendants) { me.floatingDescendants = new Ext.ZIndexManager(me); } me.floatingDescendants.register(cmp); }, unregisterFloatingItem: function(cmp) { var me = this; if (me.floatingDescendants) { me.floatingDescendants.unregister(cmp); } }, layoutSuspendCount: 0, suspendLayouts: function () { var me = this; if (!me.rendered) { return; } if (++me.layoutSuspendCount == 1) { me.suspendLayout = true; } }, resumeLayouts: function (flushOptions) { var me = this; if (!me.rendered) { return; } if (! --me.layoutSuspendCount) { me.suspendLayout = false; if (flushOptions && !me.isLayoutSuspended()) { me.updateLayout(flushOptions); } } }, setupProtoEl: function() { var me = this, cls = [ me.baseCls, me.getComponentLayout().targetCls ]; if (Ext.isDefined(me.cmpCls)) { if (Ext.isDefined(Ext.global.console)) { Ext.global.console.warn('Ext.Component: cmpCls has been deprecated. Please use componentCls.'); } me.componentCls = me.cmpCls; delete me.cmpCls; } if (me.componentCls) { cls.push(me.componentCls); } else { me.componentCls = me.baseCls; } me.protoEl = new Ext.util.ProtoElement({ cls: cls.join(' ') // in case any of the parts have multiple classes }); }, /** * Sets the UI for the component. This will remove any existing UIs on the component. It will also loop through any * uiCls set on the component and rename them so they include the new UI * @param {String} ui The new UI for the component */ setUI: function(ui) { var me = this, oldUICls = Ext.Array.clone(me.uiCls), newUICls = [], classes = [], cls, i; //loop through all existing uiCls and update the ui in them for (i = 0; i < oldUICls.length; i++) { cls = oldUICls[i]; classes = classes.concat(me.removeClsWithUI(cls, true)); newUICls.push(cls); } if (classes.length) { me.removeCls(classes); } //remove the UI from the element me.removeUIFromElement(); //set the UI me.ui = ui; //add the new UI to the element me.addUIToElement(); //loop through all existing uiCls and update the ui in them classes = []; for (i = 0; i < newUICls.length; i++) { cls = newUICls[i]; classes = classes.concat(me.addClsWithUI(cls, true)); } if (classes.length) { me.addCls(classes); } // Changing the ui can lead to significant changes to a component's appearance, so the layout needs to be // updated. Internally most calls to setUI are pre-render. Buttons are a notable exception as setScale changes // the ui and often requires the layout to be updated. if (me.rendered) { me.updateLayout(); } }, /** * Adds a cls to the uiCls array, which will also call {@link #addUIClsToElement} and adds to all elements of this * component. * @param {String/String[]} classes A string or an array of strings to add to the uiCls * @param {Object} skip (Boolean) skip True to skip adding it to the class and do it later (via the return) */ addClsWithUI: function(classes, skip) { var me = this, clsArray = [], length, i = 0, cls; if (typeof classes === "string") { classes = (classes.indexOf(' ') < 0) ? [classes] : Ext.String.splitWords(classes); } length = classes.length; me.uiCls = Ext.Array.clone(me.uiCls); for (; i < length; i++) { cls = classes[i]; if (cls && !me.hasUICls(cls)) { me.uiCls.push(cls); clsArray = clsArray.concat(me.addUIClsToElement(cls)); } } if (skip !== true) { me.addCls(clsArray); } return clsArray; }, /** * Removes a cls to the uiCls array, which will also call {@link #removeUIClsFromElement} and removes it from all * elements of this component. * @param {String/String[]} cls A string or an array of strings to remove to the uiCls */ removeClsWithUI: function(classes, skip) { var me = this, clsArray = [], i = 0, length, cls; if (typeof classes === "string") { classes = (classes.indexOf(' ') < 0) ? [classes] : Ext.String.splitWords(classes); } length = classes.length; for (i = 0; i < length; i++) { cls = classes[i]; if (cls && me.hasUICls(cls)) { me.uiCls = Ext.Array.remove(me.uiCls, cls); clsArray = clsArray.concat(me.removeUIClsFromElement(cls)); } } if (skip !== true) { me.removeCls(clsArray); } return clsArray; }, /** * Checks if there is currently a specified uiCls * @param {String} cls The cls to check */ hasUICls: function(cls) { var me = this, uiCls = me.uiCls || []; return Ext.Array.contains(uiCls, cls); }, frameElementsArray: ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'], /** * Method which adds a specified UI + uiCls to the components element. Can be overridden to remove the UI from more * than just the components element. * @param {String} ui The UI to remove from the element */ addUIClsToElement: function(cls) { var me = this, baseClsUi = me.baseCls + '-' + me.ui + '-' + cls, result = [Ext.baseCSSPrefix + cls, me.baseCls + '-' + cls, baseClsUi], frameElementCls = me.frameElementCls, frameElementsArray, frameElementsLength, i, el, frameElement, c; if (me.frame && !Ext.supports.CSS3BorderRadius) { // define each element of the frame frameElementsArray = me.frameElementsArray; frameElementsLength = frameElementsArray.length; i = 0; // loop through each of them, and if they are defined add the ui for (; i < frameElementsLength; i++) { frameElement = frameElementsArray[i]; el = me['frame' + frameElement.toUpperCase()]; c = baseClsUi + '-' + frameElement; if (el && el.dom) { el.addCls(c); } else if (Ext.Array.indexOf(frameElementCls[frameElement], c) == -1) { frameElementCls[frameElement].push(c); } } } me.frameElementCls = frameElementCls; return result; }, /** * Method which removes a specified UI + uiCls from the components element. The cls which is added to the element * will be: `this.baseCls + '-' + ui` * @param {String} ui The UI to add to the element */ removeUIClsFromElement: function(cls) { var me = this, baseClsUi = me.baseCls + '-' + me.ui + '-' + cls, result = [Ext.baseCSSPrefix + cls, me.baseCls + '-' + cls, baseClsUi], frameElementCls = me.frameElementCls, frameElementsArray, frameElementsLength, i, el, frameElement, c; if (me.frame && !Ext.supports.CSS3BorderRadius) { // define each element of the frame frameElementsArray = me.frameElementsArray; frameElementsLength = frameElementsArray.length; i = 0; // loop through each of them, and if they are defined add the ui for (; i < frameElementsLength; i++) { frameElement = frameElementsArray[i]; el = me['frame' + frameElement.toUpperCase()]; c = baseClsUi + '-' + frameElement; if (el && el.dom) { el.addCls(c); } else { Ext.Array.remove(frameElementCls[frameElement], c); } } } me.frameElementCls = frameElementCls; return result; }, /** * Method which adds a specified UI to the components element. * @private */ addUIToElement: function() { var me = this, baseClsUI = me.baseCls + '-' + me.ui, frameElementCls = me.frameElementCls, frameElementsArray, frameElementsLength, i, el, frameElement, c; me.addCls(baseClsUI); if (me.frame && !Ext.supports.CSS3BorderRadius) { // define each element of the frame frameElementsArray = me.frameElementsArray; frameElementsLength = frameElementsArray.length; i = 0; // loop through each of them, and if they are defined add the ui for (; i < frameElementsLength; i++) { frameElement = frameElementsArray[i]; el = me['frame' + frameElement.toUpperCase()]; c = baseClsUI + '-' + frameElement; if (el) { el.addCls(c); } else { if (!Ext.Array.contains(frameElementCls[frameElement], c)) { frameElementCls[frameElement].push(c); } } } } }, /** * Method which removes a specified UI from the components element. * @private */ removeUIFromElement: function() { var me = this, baseClsUI = me.baseCls + '-' + me.ui, frameElementCls = me.frameElementCls, frameElementsArray, frameElementsLength, i, el, frameElement, c; me.removeCls(baseClsUI); if (me.frame && !Ext.supports.CSS3BorderRadius) { // define each element of the frame frameElementsArray = me.frameElementsArray; frameElementsLength = frameElementsArray.length; i = 0; for (; i < frameElementsLength; i++) { frameElement = frameElementsArray[i]; el = me['frame' + frameElement.toUpperCase()]; c = baseClsUI + '-' + frameElement; if (el) { el.removeCls(c); } else { Ext.Array.remove(frameElementCls[frameElement], c); } } } }, /** * @private */ getTpl: function(name) { return Ext.XTemplate.getTpl(this, name); }, /** * Converts style definitions to String. * @return {String} A CSS style string with style, padding, margin and border. * @private */ initStyles: function(targetEl) { var me = this, Element = Ext.Element, padding = me.padding, margin = me.margin, x = me.x, y = me.y, width, height; // Convert the padding, margin and border properties from a space separated string // into a proper style string if (padding !== undefined) { targetEl.setStyle('padding', Element.unitizeBox((padding === true) ? 5 : padding)); } if (margin !== undefined) { targetEl.setStyle('margin', Element.unitizeBox((margin === true) ? 5 : margin)); } if (me.border !== undefined) { me.setBorder(me.border, targetEl); } // initComponent, beforeRender, or event handlers may have set the style or cls property since the protoEl was set up // so we must apply styles and classes here too. if (me.cls && me.cls != me.initialCls) { targetEl.addCls(me.cls); delete me.cls; delete me.initialCls; } if (me.style && me.style != me.initialStyle) { targetEl.setStyle(me.style); delete me.style; delete me.initialStyle; } if (x !== undefined) { targetEl.setStyle('left', (typeof x == 'number') ? (x + 'px') : x); } if (y !== undefined) { targetEl.setStyle('top', (typeof y == 'number') ? (y + 'px') : y); } // Framed components need their width/height to apply to the frame, which is // best handled in layout at present. if (!me.getFrameInfo()) { width = me.width; height = me.height; // If we're using the content box model, we also cannot assign numeric initial sizes since we do not know the border widths to subtract if (width !== undefined) { if (typeof width === 'number') { if (Ext.isBorderBox) { targetEl.setStyle('width', width + 'px'); } } else { targetEl.setStyle('width', width); } } if (height !== undefined) { if (typeof height === 'number') { if (Ext.isBorderBox) { targetEl.setStyle('height', height + 'px'); } } else { targetEl.setStyle('height', height); } } } }, // @private initEvents : function() { var me = this, afterRenderEvents = me.afterRenderEvents, el, property, fn = function(listeners){ me.mon(el, listeners); }; if (afterRenderEvents) { for (property in afterRenderEvents) { if (afterRenderEvents.hasOwnProperty(property)) { el = me[property]; if (el && el.on) { Ext.each(afterRenderEvents[property], fn); } } } } // This will add focus/blur listeners to the getFocusEl() element if that is naturally focusable. // If *not* naturally focusable, then the FocusManager must be enabled to get it to listen for focus so that // the FocusManager can track and highlight focus. me.addFocusListener(); }, /** * @private *Sets up the focus listener on this Component's {@link #getFocusEl focusEl} if it has one.
*Form Components which must implicitly participate in tabbing order usually have a naturally focusable * element as their {@link #getFocusEl focusEl}, and it is the DOM event of that recieving focus which drives * the Component's onFocus handling, and the DOM event of it being blurred which drives the onBlur handling.
*If the {@link #getFocusEl focusEl} is not naturally focusable, then the listeners are only added * if the {@link Ext.FocusManager FocusManager} is enabled.
*/ addFocusListener: function() { var me = this, focusEl = me.getFocusEl(), needsTabIndex; // All Containers may be focusable, not only "form" type elements, but also // Panels, Toolbars, Windows etc. // Usually, the element they will return as their focusEl will not be able to recieve focus
// However, if the FocusManager is invoked, its non-default navigation handlers (invoked when
// tabbing/arrowing off of certain Components) may explicitly focus a Panel or Container or FieldSet etc.
// Add listeners to the focus and blur events on the focus element
// If this Component returns a focusEl, we might need to add a focus listener to it.
if (focusEl) {
// getFocusEl might return a Component if a Container wishes to delegate focus to a descendant.
// Window can do this via its defaultFocus configuration which can reference a Button.
if (focusEl.isComponent) {
return focusEl.addFocusListener();
}
// If the focusEl is naturally focusable, then we always need a focus listener to drive the Component's
// onFocus handling.
// If *not* naturally focusable, then we only need the focus listener if the FocusManager is enabled.
needsTabIndex = focusEl.needsTabIndex();
if (!me.focusListenerAdded && (!needsTabIndex || Ext.FocusManager.enabled)) {
if (needsTabIndex) {
focusEl.dom.tabIndex = -1;
}
focusEl.on({
focus: me.onFocus,
blur: me.onBlur,
scope: me
});
me.focusListenerAdded = true;
}
}
},
/**
* @private
*
',
maskOnDisable: true,
// private
initComponent : function(){
var me = this;
me.addEvents(
/**
* @event initialize
* Fires when the editor is fully initialized (including the iframe)
* @param {Ext.form.field.HtmlEditor} this
*/
'initialize',
/**
* @event activate
* Fires when the editor is first receives the focus. Any insertion must wait until after this event.
* @param {Ext.form.field.HtmlEditor} this
*/
'activate',
/**
* @event beforesync
* Fires before the textarea is updated with content from the editor iframe. Return false to cancel the
* sync.
* @param {Ext.form.field.HtmlEditor} this
* @param {String} html
*/
'beforesync',
/**
* @event beforepush
* Fires before the iframe editor is updated with content from the textarea. Return false to cancel the
* push.
* @param {Ext.form.field.HtmlEditor} this
* @param {String} html
*/
'beforepush',
/**
* @event sync
* Fires when the textarea is updated with content from the editor iframe.
* @param {Ext.form.field.HtmlEditor} this
* @param {String} html
*/
'sync',
/**
* @event push
* Fires when the iframe editor is updated with content from the textarea.
* @param {Ext.form.field.HtmlEditor} this
* @param {String} html
*/
'push',
/**
* @event editmodechange
* Fires when the editor switches edit modes
* @param {Ext.form.field.HtmlEditor} this
* @param {Boolean} sourceEdit True if source edit, false if standard editing.
*/
'editmodechange'
);
me.callParent(arguments);
me.createToolbar(me);
// Init mixins
me.initLabelable();
me.initField();
},
/**
* @private
* Must define this function to allow the Layout base class to collect all descendant layouts to be run.
*/
getRefItems: function() {
return [ this.toolbar ];
},
/*
* Called when the editor creates its toolbar. Override this method if you need to
* add custom toolbar buttons.
* @param {Ext.form.field.HtmlEditor} editor
* @protected
*/
createToolbar : function(editor){
var me = this,
items = [], i,
tipsEnabled = Ext.tip.QuickTipManager && Ext.tip.QuickTipManager.isEnabled(),
baseCSSPrefix = Ext.baseCSSPrefix,
fontSelectItem, toolbar, undef;
function btn(id, toggle, handler){
return {
itemId : id,
cls : baseCSSPrefix + 'btn-icon',
iconCls: baseCSSPrefix + 'edit-'+id,
enableToggle:toggle !== false,
scope: editor,
handler:handler||editor.relayBtnCmd,
clickEvent: 'mousedown',
tooltip: tipsEnabled ? editor.buttonTips[id] || undef : undef,
overflowText: editor.buttonTips[id].title || undef,
tabIndex: -1
};
}
if (me.enableFont && !Ext.isSafari2) {
fontSelectItem = Ext.widget('component', {
renderTpl: [
''
],
renderData: {
cls: baseCSSPrefix + 'font-select',
fonts: me.fontFamilies,
defaultFont: me.defaultFont
},
childEls: ['selectEl'],
afterRender: function() {
me.fontSelect = this.selectEl;
Ext.Component.prototype.afterRender.apply(this, arguments);
},
onDisable: function() {
var selectEl = this.selectEl;
if (selectEl) {
selectEl.dom.disabled = true;
}
Ext.Component.prototype.onDisable.apply(this, arguments);
},
onEnable: function() {
var selectEl = this.selectEl;
if (selectEl) {
selectEl.dom.disabled = false;
}
Ext.Component.prototype.onEnable.apply(this, arguments);
},
listeners: {
change: function() {
me.relayCmd('fontname', me.fontSelect.dom.value);
me.deferFocus();
},
element: 'selectEl'
}
});
items.push(
fontSelectItem,
'-'
);
}
if (me.enableFormat) {
items.push(
btn('bold'),
btn('italic'),
btn('underline')
);
}
if (me.enableFontSize) {
items.push(
'-',
btn('increasefontsize', false, me.adjustFont),
btn('decreasefontsize', false, me.adjustFont)
);
}
if (me.enableColors) {
items.push(
'-', {
itemId: 'forecolor',
cls: baseCSSPrefix + 'btn-icon',
iconCls: baseCSSPrefix + 'edit-forecolor',
overflowText: editor.buttonTips.forecolor.title,
tooltip: tipsEnabled ? editor.buttonTips.forecolor || undef : undef,
tabIndex:-1,
menu : Ext.widget('menu', {
plain: true,
items: [{
xtype: 'colorpicker',
allowReselect: true,
focus: Ext.emptyFn,
value: '000000',
plain: true,
clickEvent: 'mousedown',
handler: function(cp, color) {
me.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
me.deferFocus();
this.up('menu').hide();
}
}]
})
}, {
itemId: 'backcolor',
cls: baseCSSPrefix + 'btn-icon',
iconCls: baseCSSPrefix + 'edit-backcolor',
overflowText: editor.buttonTips.backcolor.title,
tooltip: tipsEnabled ? editor.buttonTips.backcolor || undef : undef,
tabIndex:-1,
menu : Ext.widget('menu', {
plain: true,
items: [{
xtype: 'colorpicker',
focus: Ext.emptyFn,
value: 'FFFFFF',
plain: true,
allowReselect: true,
clickEvent: 'mousedown',
handler: function(cp, color) {
if (Ext.isGecko) {
me.execCmd('useCSS', false);
me.execCmd('hilitecolor', color);
me.execCmd('useCSS', true);
me.deferFocus();
} else {
me.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
me.deferFocus();
}
this.up('menu').hide();
}
}]
})
}
);
}
if (me.enableAlignments) {
items.push(
'-',
btn('justifyleft'),
btn('justifycenter'),
btn('justifyright')
);
}
if (!Ext.isSafari2) {
if (me.enableLinks) {
items.push(
'-',
btn('createlink', false, me.createLink)
);
}
if (me.enableLists) {
items.push(
'-',
btn('insertorderedlist'),
btn('insertunorderedlist')
);
}
if (me.enableSourceEdit) {
items.push(
'-',
btn('sourceedit', true, function(btn){
me.toggleSourceEdit(!me.sourceEditMode);
})
);
}
}
// Everything starts disabled.
for (i = 0; i < items.length; i++) {
if (items[i].itemId !== 'sourceedit') {
items[i].disabled = true;
}
}
// build the toolbar
// Automatically rendered in AbstractComponent.afterRender's renderChildren call
toolbar = Ext.widget('toolbar', {
id: me.id + '-toolbar',
ownerCt: me,
cls: Ext.baseCSSPrefix + 'html-editor-tb',
enableOverflow: true,
items: items,
ownerLayout: me.getComponentLayout(),
// stop form submits
listeners: {
click: function(e){
e.preventDefault();
},
element: 'el'
}
});
me.toolbar = toolbar;
},
getMaskTarget: function(){
return this.bodyEl;
},
/**
* Sets the read only state of this field.
* @param {Boolean} readOnly Whether the field should be read only.
*/
setReadOnly: function(readOnly) {
var me = this,
textareaEl = me.textareaEl,
iframeEl = me.iframeEl,
body;
me.readOnly = readOnly;
if (textareaEl) {
textareaEl.dom.readOnly = readOnly;
}
if (me.initialized) {
body = me.getEditorBody();
if (Ext.isIE) {
// Hide the iframe while setting contentEditable so it doesn't grab focus
iframeEl.setDisplayed(false);
body.contentEditable = !readOnly;
iframeEl.setDisplayed(true);
} else {
me.setDesignMode(!readOnly);
}
if (body) {
body.style.cursor = readOnly ? 'default' : 'text';
}
me.disableItems(readOnly);
}
},
/**
* Called when the editor initializes the iframe with HTML contents. Override this method if you
* want to change the initialization markup of the iframe (e.g. to add stylesheets).
*
* **Note:** IE8-Standards has unwanted scroller behavior, so the default meta tag forces IE7 compatibility.
* Also note that forcing IE7 mode works when the page is loaded normally, but if you are using IE's Web
* Developer Tools to manually set the document mode, that will take precedence and override what this
* code sets by default. This can be confusing when developing, but is not a user-facing issue.
* @protected
*/
getDocMarkup: function() {
var me = this,
h = me.iframeEl.getHeight() - me.iframePad * 2;
return Ext.String.format('', me.iframePad, h);
},
// private
getEditorBody: function() {
var doc = this.getDoc();
return doc.body || doc.documentElement;
},
// private
getDoc: function() {
return (!Ext.isIE && this.iframeEl.dom.contentDocument) || this.getWin().document;
},
// private
getWin: function() {
return Ext.isIE ? this.iframeEl.dom.contentWindow : window.frames[this.iframeEl.dom.name];
},
// Do the job of a container layout at this point even though we are not a Container.
// TODO: Refactor as a Container.
finishRenderChildren: function () {
this.callParent();
this.toolbar.finishRender();
},
// private
onRender: function() {
var me = this;
me.callParent(arguments);
// The input element is interrogated by the layout to extract height when labelAlign is 'top'
// It must be set, and then switched between the iframe and the textarea
me.inputEl = me.iframeEl;
// Start polling for when the iframe document is ready to be manipulated
me.monitorTask = Ext.TaskManager.start({
run: me.checkDesignMode,
scope: me,
interval: 100
});
},
initRenderTpl: function() {
var me = this;
if (!me.hasOwnProperty('renderTpl')) {
me.renderTpl = me.getTpl('labelableRenderTpl');
}
return me.callParent();
},
initRenderData: function() {
this.beforeSubTpl = 'Returns the focus holder element associated with this Component. At the Component base class level, this function returns undefined.
Subclasses which use embedded focusable elements (such as Window, Field and Button) should override this for use by the {@link #focus} method.
*Containers which need to participate in the {@link Ext.FocusManager FocusManager}'s navigation and Container focusing scheme also * need to return a focusEl, although focus is only listened for in this case if the {@link Ext.FocusManager FocusManager} is {@link Ext.FocusManager#method-enable enable}d.
* @returns {undefined}undefined because raw Components cannot by default hold focus.
*/
getFocusEl: Ext.emptyFn,
isFocusable: function(c) {
var me = this,
focusEl;
if ((me.focusable !== false) && (focusEl = me.getFocusEl()) && me.rendered && !me.destroying && !me.isDestroyed && !me.disabled && me.isVisible(true)) {
// getFocusEl might return a Component if a Container wishes to delegate focus to a descendant.
// Window can do this via its defaultFocus configuration which can reference a Button.
if (focusEl.isComponent) {
return focusEl.isFocusable();
}
return focusEl && focusEl.dom && focusEl.isVisible();
}
},
// private
preFocus: Ext.emptyFn,
// private
onFocus: function(e) {
var me = this,
focusCls = me.focusCls,
focusEl = me.getFocusEl();
if (!me.disabled) {
me.preFocus(e);
if (focusCls && focusEl) {
focusEl.addCls(me.addClsWithUI(focusCls, true));
}
if (!me.hasFocus) {
me.hasFocus = true;
me.fireEvent('focus', me, e);
}
}
},
// private
beforeBlur : Ext.emptyFn,
// private
onBlur : function(e) {
var me = this,
focusCls = me.focusCls,
focusEl = me.getFocusEl();
if (me.destroying) {
return;
}
me.beforeBlur(e);
if (focusCls && focusEl) {
focusEl.removeCls(me.removeClsWithUI(focusCls, true));
}
if (me.validateOnBlur) {
me.validate();
}
me.hasFocus = false;
me.fireEvent('blur', me, e);
me.postBlur(e);
},
// private
postBlur : Ext.emptyFn,
/**
* Tests whether this Component matches the selector string.
* @param {String} selector The selector string to test against.
* @return {Boolean} True if this Component matches the selector.
*/
is: function(selector) {
return Ext.ComponentQuery.is(this, selector);
},
/**
* Walks up the `ownerCt` axis looking for an ancestor Container which matches the passed simple selector.
*
* Example:
*
* var owningTabPanel = grid.up('tabpanel');
*
* @param {String} [selector] The simple selector to test.
* @return {Ext.container.Container} The matching ancestor Container (or `undefined` if no match was found).
*/
up: function(selector) {
// Use bubble target to navigate upwards so that Components can implement their own hierarchy.
// For example Menus implement getBubbleTarget because they have a parentMenu or ownerButton as an
// upward link depending upon how they are owned and triggered.
var result = this.getBubbleTarget();
if (selector) {
for (; result; result = result.getBubbleTarget()) {
if (Ext.ComponentQuery.is(result, selector)) {
return result;
}
}
}
return result;
},
/**
* Returns the next sibling of this Component.
*
* Optionally selects the next sibling which matches the passed {@link Ext.ComponentQuery ComponentQuery} selector.
*
* May also be refered to as **`next()`**
*
* Note that this is limited to siblings, and if no siblings of the item match, `null` is returned. Contrast with
* {@link #nextNode}
* @param {String} [selector] A {@link Ext.ComponentQuery ComponentQuery} selector to filter the following items.
* @return {Ext.Component} The next sibling (or the next sibling which matches the selector).
* Returns null if there is no matching sibling.
*/
nextSibling: function(selector) {
var o = this.ownerCt, it, last, idx, c;
if (o) {
it = o.items;
idx = it.indexOf(this) + 1;
if (idx) {
if (selector) {
for (last = it.getCount(); idx < last; idx++) {
if ((c = it.getAt(idx)).is(selector)) {
return c;
}
}
} else {
if (idx < it.getCount()) {
return it.getAt(idx);
}
}
}
}
return null;
},
/**
* Returns the previous sibling of this Component.
*
* Optionally selects the previous sibling which matches the passed {@link Ext.ComponentQuery ComponentQuery}
* selector.
*
* May also be refered to as **`prev()`**
*
* Note that this is limited to siblings, and if no siblings of the item match, `null` is returned. Contrast with
* {@link #previousNode}
* @param {String} [selector] A {@link Ext.ComponentQuery ComponentQuery} selector to filter the preceding items.
* @return {Ext.Component} The previous sibling (or the previous sibling which matches the selector).
* Returns null if there is no matching sibling.
*/
previousSibling: function(selector) {
var o = this.ownerCt, it, idx, c;
if (o) {
it = o.items;
idx = it.indexOf(this);
if (idx != -1) {
if (selector) {
for (--idx; idx >= 0; idx--) {
if ((c = it.getAt(idx)).is(selector)) {
return c;
}
}
} else {
if (idx) {
return it.getAt(--idx);
}
}
}
}
return null;
},
/**
* Returns the previous node in the Component tree in tree traversal order.
*
* Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the
* tree in reverse order to attempt to find a match. Contrast with {@link #previousSibling}.
* @param {String} [selector] A {@link Ext.ComponentQuery ComponentQuery} selector to filter the preceding nodes.
* @return {Ext.Component} The previous node (or the previous node which matches the selector).
* Returns null if there is no matching node.
*/
previousNode: function(selector, /* private */ includeSelf) {
var node = this,
ownerCt = node.ownerCt,
result,
it, i, sib;
// If asked to include self, test me
if (includeSelf && node.is(selector)) {
return node;
}
if (ownerCt) {
for (it = ownerCt.items.items, i = Ext.Array.indexOf(it, node) - 1; i > -1; i--) {
sib = it[i];
if (sib.query) {
result = sib.query(selector);
result = result[result.length - 1];
if (result) {
return result;
}
}
if (sib.is(selector)) {
return sib;
}
}
return ownerCt.previousNode(selector, true);
}
return null;
},
/**
* Returns the next node in the Component tree in tree traversal order.
*
* Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the
* tree to attempt to find a match. Contrast with {@link #nextSibling}.
* @param {String} [selector] A {@link Ext.ComponentQuery ComponentQuery} selector to filter the following nodes.
* @return {Ext.Component} The next node (or the next node which matches the selector).
* Returns null if there is no matching node.
*/
nextNode: function(selector, /* private */ includeSelf) {
var node = this,
ownerCt = node.ownerCt,
result,
it, len, i, sib;
// If asked to include self, test me
if (includeSelf && node.is(selector)) {
return node;
}
if (ownerCt) {
for (it = ownerCt.items.items, i = Ext.Array.indexOf(it, node) + 1, len = it.length; i < len; i++) {
sib = it[i];
if (sib.is(selector)) {
return sib;
}
if (sib.down) {
result = sib.down(selector);
if (result) {
return result;
}
}
}
return ownerCt.nextNode(selector);
}
return null;
},
/**
* Retrieves the id of this component. Will autogenerate an id if one has not already been set.
* @return {String}
*/
getId : function() {
return this.id || (this.id = 'ext-comp-' + (this.getAutoId()));
},
/**
* Returns the value of {@link #itemId} assigned to this component, or when that
* is not set, returns the value of {@link #id}.
* @return {String}
*/
getItemId : function() {
return this.itemId || this.id;
},
/**
* Retrieves the top level element representing this component.
* @return {Ext.dom.Element}
*/
getEl : function() {
return this.el;
},
/**
* This is used to determine where to insert the 'html', 'contentEl' and 'items' in this component.
* @private
*/
getTargetEl: function() {
return this.frameBody || this.el;
},
/**
* @private
* Returns the CSS style object which will set the Component's scroll styles. This must be applied
* to the {@link #getTargetEl target element}.
*/
getOverflowStyle: function() {
var me = this,
result = null;
if (typeof me.autoScroll == 'boolean') {
result = {
overflow: me.autoScroll ? 'auto' : ''
};
} else if (me.overflowX !== undefined || me.overflowY !== undefined) {
result = {
'overflow-x': (me.overflowX||''),
'overflow-y': (me.overflowY||'')
};
}
// The scrollable container element must be non-statically positioned or IE6/7 will make
// positioned children stay in place rather than scrolling with the rest of the content
if (result && (Ext.isIE6 || Ext.isIE7)) {
result.position = 'relative';
}
return result;
},
/**
* Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
* from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
*
* **If using your own subclasses, be aware that a Component must register its own xtype to participate in
* determination of inherited xtypes.**
*
* For a list of all available xtypes, see the {@link Ext.Component} header.
*
* Example usage:
*
* var t = new Ext.form.field.Text();
* var isText = t.isXType('textfield'); // true
* var isBoxSubclass = t.isXType('field'); // true, descended from Ext.form.field.Base
* var isBoxInstance = t.isXType('field', true); // false, not a direct Ext.form.field.Base instance
*
* @param {String} xtype The xtype to check for this Component
* @param {Boolean} [shallow=false] True to check whether this Component is directly of the specified xtype, false to
* check whether this Component is descended from the xtype.
* @return {Boolean} True if this component descends from the specified xtype, false otherwise.
*/
isXType: function(xtype, shallow) {
if (shallow) {
return this.xtype === xtype;
}
else {
return this.xtypesMap[xtype];
}
},
/**
* Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the
* {@link Ext.Component} header.
*
* **If using your own subclasses, be aware that a Component must register its own xtype to participate in
* determination of inherited xtypes.**
*
* Example usage:
*
* var t = new Ext.form.field.Text();
* alert(t.getXTypes()); // alerts 'component/field/textfield'
*
* @return {String} The xtype hierarchy string
*/
getXTypes: function() {
var self = this.self,
xtypes, parentPrototype, parentXtypes;
if (!self.xtypes) {
xtypes = [];
parentPrototype = this;
while (parentPrototype) {
parentXtypes = parentPrototype.xtypes;
if (parentXtypes !== undefined) {
xtypes.unshift.apply(xtypes, parentXtypes);
}
parentPrototype = parentPrototype.superclass;
}
self.xtypeChain = xtypes;
self.xtypes = xtypes.join('/');
}
return self.xtypes;
},
/**
* Update the content area of a component.
* @param {String/Object} htmlOrData If this component has been configured with a template via the tpl config then
* it will use this argument as data to populate the template. If this component was not configured with a template,
* the components content area will be updated via Ext.Element update
* @param {Boolean} [loadScripts=false] Only legitimate when using the html configuration.
* @param {Function} [callback] Only legitimate when using the html configuration. Callback to execute when
* scripts have finished loading
*/
update : function(htmlOrData, loadScripts, cb) {
var me = this;
if (me.tpl && !Ext.isString(htmlOrData)) {
me.data = htmlOrData;
if (me.rendered) {
me.tpl[me.tplWriteMode](me.getTargetEl(), htmlOrData || {});
}
} else {
me.html = Ext.isObject(htmlOrData) ? Ext.DomHelper.markup(htmlOrData) : htmlOrData;
if (me.rendered) {
me.getTargetEl().update(me.html, loadScripts, cb);
}
}
if (me.rendered) {
me.updateLayout();
}
},
/**
* Convenience function to hide or show this component by boolean.
* @param {Boolean} visible True to show, false to hide
* @return {Ext.Component} this
*/
setVisible : function(visible) {
return this[visible ? 'show': 'hide']();
},
/**
* Returns true if this component is visible.
*
* @param {Boolean} [deep=false] Pass `true` to interrogate the visibility status of all parent Containers to
* determine whether this Component is truly visible to the user.
*
* Generally, to determine whether a Component is hidden, the no argument form is needed. For example when creating
* dynamically laid out UIs in a hidden Container before showing them.
*
* @return {Boolean} True if this component is visible, false otherwise.
*/
isVisible: function(deep) {
var me = this,
child = me,
visible = me.rendered && !me.hidden,
ancestor = me.ownerCt;
// Clear hiddenOwnerCt property
me.hiddenAncestor = false;
if (me.destroyed) {
return false;
}
if (deep && visible && ancestor) {
while (ancestor) {
// If any ancestor is hidden, then this is hidden.
// If an ancestor Panel (only Panels have a collapse method) is collapsed,
// then its layoutTarget (body) is hidden, so this is hidden unless its within a
// docked item; they are still visible when collapsed (Unless they themseves are hidden)
if (ancestor.hidden || (ancestor.collapsed &&
!(ancestor.getDockedItems && Ext.Array.contains(ancestor.getDockedItems(), child)))) {
// Store hiddenOwnerCt property if needed
me.hiddenAncestor = ancestor;
visible = false;
break;
}
child = ancestor;
ancestor = ancestor.ownerCt;
}
}
return visible;
},
onBoxReady: function(){
var me = this;
if (me.disableOnBoxReady) {
me.onDisable();
} else if (me.enableOnBoxReady) {
me.onEnable();
}
if (me.resizable) {
me.initResizable(me.resizable);
}
// Draggability must be initialized after resizability
// Because if we have to be wrapped, the resizer wrapper must be dragged as a pseudo-Component
if (me.draggable) {
me.initDraggable();
}
},
/**
* Enable the component
* @param {Boolean} [silent=false] Passing true will supress the 'enable' event from being fired.
*/
enable: function(silent) {
var me = this;
delete me.disableOnBoxReady;
me.removeCls(me.disabledCls);
if (me.rendered) {
me.onEnable();
} else {
me.enableOnBoxReady = true;
}
me.disabled = false;
delete me.resetDisable;
if (silent !== true) {
me.fireEvent('enable', me);
}
return me;
},
/**
* Disable the component.
* @param {Boolean} [silent=false] Passing true will supress the 'disable' event from being fired.
*/
disable: function(silent) {
var me = this;
delete me.enableOnBoxReady;
me.addCls(me.disabledCls);
if (me.rendered) {
me.onDisable();
} else {
me.disableOnBoxReady = true;
}
me.disabled = true;
if (silent !== true) {
delete me.resetDisable;
me.fireEvent('disable', me);
}
return me;
},
/**
* Allows addition of behavior to the enable operation.
* After calling the superclass’s onEnable, the Component will be enabled.
*
* @template
* @protected
*/
onEnable: function() {
if (this.maskOnDisable) {
this.el.dom.disabled = false;
this.unmask();
}
},
/**
* Allows addition of behavior to the disable operation.
* After calling the superclass’s onDisable, the Component will be disabled.
*
* @template
* @protected
*/
onDisable : function() {
var me = this,
focusCls = me.focusCls,
focusEl = me.getFocusEl();
if (focusCls && focusEl) {
focusEl.removeCls(me.removeClsWithUI(focusCls, true));
}
if (me.maskOnDisable) {
me.el.dom.disabled = true;
me.mask();
}
},
mask: function() {
var box = this.lastBox,
target = this.getMaskTarget(),
args = [];
// Pass it the height of our element if we know it.
if (box) {
args[2] = box.height;
}
target.mask.apply(target, args);
},
unmask: function() {
this.getMaskTarget().unmask();
},
getMaskTarget: function(){
return this.el;
},
/**
* Method to determine whether this Component is currently disabled.
* @return {Boolean} the disabled state of this Component.
*/
isDisabled : function() {
return this.disabled;
},
/**
* Enable or disable the component.
* @param {Boolean} disabled True to disable.
*/
setDisabled : function(disabled) {
return this[disabled ? 'disable': 'enable']();
},
/**
* Method to determine whether this Component is currently set to hidden.
* @return {Boolean} the hidden state of this Component.
*/
isHidden : function() {
return this.hidden;
},
/**
* Adds a CSS class to the top level element representing this component.
* @param {String/String[]} cls The CSS class name to add
* @return {Ext.Component} Returns the Component to allow method chaining.
*/
addCls : function(cls) {
var me = this,
el = me.rendered ? me.el : me.protoEl;
el.addCls.apply(el, arguments);
return me;
},
/**
* @inheritdoc Ext.AbstractComponent#addCls
* @deprecated 4.1 Use {@link #addCls} instead.
*/
addClass : function() {
return this.addCls.apply(this, arguments);
},
/**
* Checks if the specified CSS class exists on this element's DOM node.
* @param {String} className The CSS class to check for
* @return {Boolean} True if the class exists, else false
* @method
*/
hasCls: function (cls) {
var me = this,
el = me.rendered ? me.el : me.protoEl;
return el.hasCls.apply(el, arguments);
},
/**
* Removes a CSS class from the top level element representing this component.
* @param {String/String[]} cls The CSS class name to remove
* @returns {Ext.Component} Returns the Component to allow method chaining.
*/
removeCls : function(cls) {
var me = this,
el = me.rendered ? me.el : me.protoEl;
el.removeCls.apply(el, arguments);
return me;
},
removeClass : function() {
if (Ext.isDefined(Ext.global.console)) {
Ext.global.console.warn('Ext.Component: removeClass has been deprecated. Please use removeCls.');
}
return this.removeCls.apply(this, arguments);
},
addOverCls: function() {
var me = this;
if (!me.disabled) {
me.el.addCls(me.overCls);
}
},
removeOverCls: function() {
this.el.removeCls(this.overCls);
},
addListener : function(element, listeners, scope, options) {
var me = this,
fn,
option;
if (Ext.isString(element) && (Ext.isObject(listeners) || options && options.element)) {
if (options.element) {
fn = listeners;
listeners = {};
listeners[element] = fn;
element = options.element;
if (scope) {
listeners.scope = scope;
}
for (option in options) {
if (options.hasOwnProperty(option)) {
if (me.eventOptionsRe.test(option)) {
listeners[option] = options[option];
}
}
}
}
// At this point we have a variable called element,
// and a listeners object that can be passed to on
if (me[element] && me[element].on) {
me.mon(me[element], listeners);
} else {
me.afterRenderEvents = me.afterRenderEvents || {};
if (!me.afterRenderEvents[element]) {
me.afterRenderEvents[element] = [];
}
me.afterRenderEvents[element].push(listeners);
}
}
return me.mixins.observable.addListener.apply(me, arguments);
},
// inherit docs
removeManagedListenerItem: function(isClear, managedListener, item, ename, fn, scope){
var me = this,
element = managedListener.options ? managedListener.options.element : null;
if (element) {
element = me[element];
if (element && element.un) {
if (isClear || (managedListener.item === item && managedListener.ename === ename && (!fn || managedListener.fn === fn) && (!scope || managedListener.scope === scope))) {
element.un(managedListener.ename, managedListener.fn, managedListener.scope);
if (!isClear) {
Ext.Array.remove(me.managedListeners, managedListener);
}
}
}
} else {
return me.mixins.observable.removeManagedListenerItem.apply(me, arguments);
}
},
/**
* Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
* @return {Ext.container.Container} the Container which owns this Component.
*/
getBubbleTarget : function() {
return this.ownerCt;
},
/**
* Method to determine whether this Component is floating.
* @return {Boolean} the floating state of this component.
*/
isFloating : function() {
return this.floating;
},
/**
* Method to determine whether this Component is draggable.
* @return {Boolean} the draggable state of this component.
*/
isDraggable : function() {
return !!this.draggable;
},
/**
* Method to determine whether this Component is droppable.
* @return {Boolean} the droppable state of this component.
*/
isDroppable : function() {
return !!this.droppable;
},
/**
* Method to manage awareness of when components are added to their
* respective Container, firing an #added event. References are
* established at add time rather than at render time.
*
* Allows addition of behavior when a Component is added to a
* Container. At this stage, the Component is in the parent
* Container's collection of child items. After calling the
* superclass's onAdded, the ownerCt reference will be present,
* and if configured with a ref, the refOwner will be set.
*
* @param {Ext.container.Container} container Container which holds the component
* @param {Number} pos Position at which the component was added
*
* @template
* @protected
*/
onAdded : function(container, pos) {
var me = this;
me.ownerCt = container;
if (me.hasListeners.added) {
me.fireEvent('added', me, container, pos);
}
},
/**
* Method to manage awareness of when components are removed from their
* respective Container, firing a #removed event. References are properly
* cleaned up after removing a component from its owning container.
*
* Allows addition of behavior when a Component is removed from
* its parent Container. At this stage, the Component has been
* removed from its parent Container's collection of child items,
* but has not been destroyed (It will be destroyed if the parent
* Container's autoDestroy is true, or if the remove call was
* passed a truthy second parameter). After calling the
* superclass's onRemoved, the ownerCt and the refOwner will not
* be present.
* @param {Boolean} destroying Will be passed as true if the Container performing the remove operation will delete this
* Component upon remove.
*
* @template
* @protected
*/
onRemoved : function(destroying) {
var me = this;
if (me.hasListeners.removed) {
me.fireEvent('removed', me, me.ownerCt);
}
delete me.ownerCt;
delete me.ownerLayout;
},
/**
* Invoked before the Component is destroyed.
*
* @method
* @template
* @protected
*/
beforeDestroy : Ext.emptyFn,
/**
* Allows addition of behavior to the resize operation.
*
* Called when Ext.resizer.Resizer#drag event is fired.
*
* @method
* @template
* @protected
*/
onResize : Ext.emptyFn,
/**
* Sets the width and height of this Component. This method fires the {@link #resize} event. This method can accept
* either width and height as separate arguments, or you can pass a size object like `{width:10, height:20}`.
*
* @param {Number/String/Object} width The new width to set. This may be one of:
*
* - A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).
* - A String used to set the CSS width style.
* - A size object in the format `{width: widthValue, height: heightValue}`.
* - `undefined` to leave the width unchanged.
*
* @param {Number/String} height The new height to set (not required if a size object is passed as the first arg).
* This may be one of:
*
* - A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).
* - A String used to set the CSS height style. Animation may **not** be used.
* - `undefined` to leave the height unchanged.
*
* @return {Ext.Component} this
*/
setSize : function(width, height) {
var me = this;
// support for standard size objects
if (width && typeof width == 'object') {
height = width.height;
width = width.width;
}
// Constrain within configured maxima
if (typeof width == 'number') {
me.width = Ext.Number.constrain(width, me.minWidth, me.maxWidth);
} else if (width === null) {
delete me.width;
}
if (typeof height == 'number') {
me.height = Ext.Number.constrain(height, me.minHeight, me.maxHeight);
} else if (height === null) {
delete me.height;
}
// If not rendered, all we need to is set the properties.
// The initial layout will set the size
if (me.rendered && me.isVisible()) {
// If we are changing size, then we are not the root.
me.updateLayout({
isRoot: false
});
}
return me;
},
/**
* Determines whether this Component is the root of a layout. This returns `true` if
* this component can run its layout without assistance from or impact on its owner.
* If this component cannot run its layout given these restrictions, `false` is returned
* and its owner will be considered as the next candidate for the layout root.
*
* Setting the {@link #_isLayoutRoot} property to `true` causes this method to always
* return `true`. This may be useful when updating a layout of a Container which shrink
* wraps content, and you know that it will not change size, and so can safely be the
* topmost participant in the layout run.
* @protected
*/
isLayoutRoot: function() {
var me = this,
ownerLayout = me.ownerLayout;
// Return true if we have been explicitly flagged as the layout root, or if we are floating.
// Sometimes floating Components get an ownerCt ref injected into them which is *not* a true ownerCt, merely
// an upward link for reference purposes. For example a grid column menu is linked to the
// owning header via an ownerCt reference.
if (!ownerLayout || me._isLayoutRoot || me.floating) {
return true;
}
return ownerLayout.isItemLayoutRoot(me);
},
/**
* Returns true if layout is suspended for this component. This can come from direct
* suspension of this component's layout activity ({@link Ext.Container#suspendLayout}) or if one
* of this component's containers is suspended.
*
* @return {Boolean} True layout of this component is suspended.
*/
isLayoutSuspended: function () {
var comp = this,
ownerLayout;
while (comp) {
if (comp.layoutSuspendCount || comp.suspendLayout) {
return true;
}
ownerLayout = comp.ownerLayout;
if (!ownerLayout) {
break;
}
// TODO - what about suspending a Layout instance?
// this works better than ownerCt since ownerLayout means "is managed by" in
// the proper sense... some floating components have ownerCt but won't have an
// ownerLayout
comp = ownerLayout.owner;
}
return false;
},
/**
* Updates this component's layout. If this update effects this components {@link #ownerCt},
* that component's `updateLayout` method will be called to perform the layout instead.
* Otherwise, just this component (and its child items) will layout.
*
* @param {Object} options An object with layout options.
* @param {Boolean} options.defer True if this layout should be deferred.
* @param {Boolean} options.isRoot True if this layout should be the root of the layout.
*/
updateLayout: function (options) {
var me = this,
defer,
isRoot = options && options.isRoot;
if (!me.rendered || me.layoutSuspendCount || me.suspendLayout) {
return;
}
if (me.hidden) {
Ext.AbstractComponent.cancelLayout(me);
} else if (typeof isRoot != 'boolean') {
isRoot = me.isLayoutRoot();
}
// if we aren't the root, see if our ownerLayout will handle it...
if (isRoot || !me.ownerLayout || !me.ownerLayout.onContentChange(me)) {
// either we are the root or our ownerLayout doesn't care
if (!me.isLayoutSuspended()) {
// we aren't suspended (knew that), but neither is any of our ownerCt's...
defer = (options && options.hasOwnProperty('defer')) ? options.defer : me.deferLayouts;
Ext.AbstractComponent.updateLayout(me, defer);
}
}
},
/**
* Returns an object that describes how this component's width and height are managed.
* All of these objects are shared and should not be modified.
*
* @return {Object} The size model for this component.
* @return {Ext.layout.SizeModel} return.width The {@link Ext.layout.SizeModel size model}
* for the width.
* @return {Ext.layout.SizeModel} return.height The {@link Ext.layout.SizeModel size model}
* for the height.
*/
getSizeModel: function (ownerCtSizeModel) {
var me = this,
models = Ext.layout.SizeModel,
ownerContext = me.componentLayout.ownerContext,
width = me.width,
height = me.height,
typeofWidth, typeofHeight,
hasPixelWidth, hasPixelHeight,
heightModel, ownerLayout, policy, shrinkWrap, topLevel, widthModel;
if (ownerContext) {
// If we are in the middle of a running layout, always report the current,
// dynamic size model rather than recompute it. This is not (only) a time
// saving thing, but a correctness thing since we cannot get the right answer
// otherwise.
widthModel = ownerContext.widthModel;
heightModel = ownerContext.heightModel;
}
if (!widthModel || !heightModel) {
hasPixelWidth = ((typeofWidth = typeof width) == 'number');
hasPixelHeight = ((typeofHeight = typeof height) == 'number');
topLevel = me.floating || !(ownerLayout = me.ownerLayout);
// Floating or no owner layout, e.g. rendered using renderTo
if (topLevel) {
policy = Ext.layout.Layout.prototype.autoSizePolicy;
shrinkWrap = me.floating ? 3 : me.shrinkWrap;
if (hasPixelWidth) {
widthModel = models.configured;
}
if (hasPixelHeight) {
heightModel = models.configured;
}
} else {
policy = ownerLayout.getItemSizePolicy(me, ownerCtSizeModel);
shrinkWrap = ownerLayout.isItemShrinkWrap(me);
}
shrinkWrap = (shrinkWrap === true) ? 3 : (shrinkWrap || 0); // false->0, true->3
// Now that we have shrinkWrap as a 0-3 value, we need to turn off shrinkWrap
// bits for any dimension that has a configured size not in pixels. These must
// be read from the DOM.
//
if (topLevel && shrinkWrap) {
if (width && typeofWidth == 'string') {
shrinkWrap &= 2; // percentage, "30em" or whatever - not width shrinkWrap
}
if (height && typeofHeight == 'string') {
shrinkWrap &= 1; // percentage, "30em" or whatever - not height shrinkWrap
}
}
if (shrinkWrap !== 3) {
if (!ownerCtSizeModel) {
ownerCtSizeModel = me.ownerCt && me.ownerCt.getSizeModel();
}
if (ownerCtSizeModel) {
shrinkWrap |= (ownerCtSizeModel.width.shrinkWrap ? 1 : 0) | (ownerCtSizeModel.height.shrinkWrap ? 2 : 0);
}
}
if (!widthModel) {
if (!policy.setsWidth) {
if (hasPixelWidth) {
widthModel = models.configured;
} else {
widthModel = (shrinkWrap & 1) ? models.shrinkWrap : models.natural;
}
} else if (policy.readsWidth) {
if (hasPixelWidth) {
widthModel = models.calculatedFromConfigured;
} else {
widthModel = (shrinkWrap & 1) ? models.calculatedFromShrinkWrap :
models.calculatedFromNatural;
}
} else {
widthModel = models.calculated;
}
}
if (!heightModel) {
if (!policy.setsHeight) {
if (hasPixelHeight) {
heightModel = models.configured;
} else {
heightModel = (shrinkWrap & 2) ? models.shrinkWrap : models.natural;
}
} else if (policy.readsHeight) {
if (hasPixelHeight) {
heightModel = models.calculatedFromConfigured;
} else {
heightModel = (shrinkWrap & 2) ? models.calculatedFromShrinkWrap :
models.calculatedFromNatural;
}
} else {
heightModel = models.calculated;
}
}
}
// We return one of the cached objects with the proper "width" and "height" as the
// sizeModels we have determined.
return widthModel.pairsByHeightOrdinal[heightModel.ordinal];
},
isDescendant: function(ancestor) {
if (ancestor.isContainer) {
for (var c = this.ownerCt; c; c = c.ownerCt) {
if (c === ancestor) {
return true;
}
}
}
return false;
},
/**
* This method needs to be called whenever you change something on this component that requires the Component's
* layout to be recalculated.
* @return {Ext.container.Container} this
*/
doComponentLayout : function() {
this.updateLayout();
return this;
},
/**
* Forces this component to redo its componentLayout.
* @deprecated 4.1.0 Use {@link #updateLayout} instead.
*/
forceComponentLayout: function () {
this.updateLayout();
},
// @private
setComponentLayout : function(layout) {
var currentLayout = this.componentLayout;
if (currentLayout && currentLayout.isLayout && currentLayout != layout) {
currentLayout.setOwner(null);
}
this.componentLayout = layout;
layout.setOwner(this);
},
getComponentLayout : function() {
var me = this;
if (!me.componentLayout || !me.componentLayout.isLayout) {
me.setComponentLayout(Ext.layout.Layout.create(me.componentLayout, 'autocomponent'));
}
return me.componentLayout;
},
/**
* Called by the layout system after the Component has been layed out.
*
* @param {Number} width The width that was set
* @param {Number} height The height that was set
* @param {Number} oldWidth The old width. undefined if this was the initial layout.
* @param {Number} oldHeight The old height. undefined if this was the initial layout.
*
* @template
* @protected
*/
afterComponentLayout: function(width, height, oldWidth, oldHeight) {
var me = this,
floaters, len, i, floater;
if (++me.componentLayoutCounter === 1) {
me.afterFirstLayout(width, height);
}
// Contained autoShow items must be shown upon next layout of the Container
if (me.floatingItems) {
floaters = me.floatingItems.items;
len = floaters.length;
for (i = 0; i < len; i++) {
floater = floaters[i];
if (!floater.rendered && floater.autoShow) {
floater.show();
}
}
}
if (me.hasListeners.resize && (width !== oldWidth || height !== oldHeight)) {
me.fireEvent('resize', me, width, height, oldWidth, oldHeight);
}
},
/**
* Occurs before componentLayout is run. Returning false from this method will prevent the componentLayout from
* being executed.
*
* @param {Number} adjWidth The box-adjusted width that was set
* @param {Number} adjHeight The box-adjusted height that was set
*
* @template
* @protected
*/
beforeComponentLayout: function(width, height) {
return true;
},
/**
* Sets the left and top of the component. To set the page XY position instead, use {@link Ext.Component#setPagePosition setPagePosition}. This
* method fires the {@link #move} event.
* @param {Number} left The new left
* @param {Number} top The new top
* @param {Boolean/Object} [animate] If true, the Component is _animated_ into its new position. You may also pass an
* animation configuration.
* @return {Ext.Component} this
*/
setPosition : function(x, y, animate) {
var me = this,
pos = me.beforeSetPosition.apply(me, arguments);
if (pos && me.rendered) {
// Convert position WRT RTL
pos = me.convertPosition(pos);
// Proceed only if the new position is different from the current one.
if (pos.left !== me.el.getLeft() || pos.top !== me.el.getTop()) {
if (animate) {
me.stopAnimation();
me.animate(Ext.apply({
duration: 1000,
listeners: {
afteranimate: Ext.Function.bind(me.afterSetPosition, me, [pos.left, pos.top])
},
to: pos
}, animate));
} else {
// Must use Element's methods to set element position because, if it is a Layer (floater), it may need to sync a shadow
// We must also only set the properties which are defined because Element.setLeftTop autos any undefined coordinates
if (pos.left !== undefined && pos.top !== undefined) {
me.el.setLeftTop(pos.left, pos.top);
} else if (pos.left !== undefined) {
me.el.setLeft(pos.left);
} else if (pos.top !==undefined) {
me.el.setTop(pos.top);
}
me.afterSetPosition(pos.left, pos.top);
}
}
}
return me;
},
/**
* @private Template method called before a Component is positioned.
*/
beforeSetPosition: function (x, y, animate) {
var pos, x0;
// decode the position arguments:
if (!x || Ext.isNumber(x)) {
pos = { x: x, y : y, anim: animate };
} else if (Ext.isNumber(x0 = x[0])) { // an array of [x, y]
pos = { x : x0, y : x[1], anim: y };
} else {
pos = { x: x.x, y: x.y, anim: y }; // already an object w/ x & y properties
}
pos.hasX = Ext.isNumber(pos.x);
pos.hasY = Ext.isNumber(pos.y);
// store the position as specified:
this.x = pos.x;
this.y = pos.y;
return (pos.hasX || pos.hasY) ? pos : null;
},
/**
* Template method called after a Component has been positioned.
*
* @param {Number} x
* @param {Number} y
*
* @template
* @protected
*/
afterSetPosition: function(x, y) {
var me = this;
me.onPosition(x, y);
if (me.hasListeners.move) {
me.fireEvent('move', me, x, y);
}
},
/**
* This method converts an "{x: x, y: y}" object to a "{left: x+'px', top: y+'px'}" object.
* The returned object contains the styles to set to effect the position. This is
* overridden in RTL mode to be "{right: x, top: y}".
* @private
*/
convertPosition: function (pos, withUnits) {
var ret = {},
El = Ext.Element;
if (pos.hasX) {
ret.left = withUnits ? El.addUnits(pos.x) : pos.x;
}
if (pos.hasY) {
ret.top = withUnits ? El.addUnits(pos.y) : pos.y;
}
return ret;
},
/**
* Called after the component is moved, this method is empty by default but can be implemented by any
* subclass that needs to perform custom logic after a move occurs.
*
* @param {Number} x The new x position
* @param {Number} y The new y position
*
* @template
* @protected
*/
onPosition: Ext.emptyFn,
/**
* Sets the width of the component. This method fires the {@link #resize} event.
*
* @param {Number} width The new width to setThis may be one of:
*
* - A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).
* - A String used to set the CSS width style.
*
* @return {Ext.Component} this
*/
setWidth : function(width) {
return this.setSize(width);
},
/**
* Sets the height of the component. This method fires the {@link #resize} event.
*
* @param {Number} height The new height to set. This may be one of:
*
* - A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).
* - A String used to set the CSS height style.
* - _undefined_ to leave the height unchanged.
*
* @return {Ext.Component} this
*/
setHeight : function(height) {
return this.setSize(undefined, height);
},
/**
* Gets the current size of the component's underlying element.
* @return {Object} An object containing the element's size {width: (element width), height: (element height)}
*/
getSize : function() {
return this.el.getSize();
},
/**
* Gets the current width of the component's underlying element.
* @return {Number}
*/
getWidth : function() {
return this.el.getWidth();
},
/**
* Gets the current height of the component's underlying element.
* @return {Number}
*/
getHeight : function() {
return this.el.getHeight();
},
/**
* Gets the {@link Ext.ComponentLoader} for this Component.
* @return {Ext.ComponentLoader} The loader instance, null if it doesn't exist.
*/
getLoader: function(){
var me = this,
autoLoad = me.autoLoad ? (Ext.isObject(me.autoLoad) ? me.autoLoad : {url: me.autoLoad}) : null,
loader = me.loader || autoLoad;
if (loader) {
if (!loader.isLoader) {
me.loader = new Ext.ComponentLoader(Ext.apply({
target: me,
autoLoad: autoLoad
}, loader));
} else {
loader.setTarget(me);
}
return me.loader;
}
return null;
},
/**
* Sets the dock position of this component in its parent panel. Note that this only has effect if this item is part
* of the dockedItems collection of a parent that has a DockLayout (note that any Panel has a DockLayout by default)
* @param {Object} dock The dock position.
* @param {Boolean} [layoutParent=false] True to re-layout parent.
* @return {Ext.Component} this
*/
setDocked : function(dock, layoutParent) {
var me = this;
me.dock = dock;
if (layoutParent && me.ownerCt && me.rendered) {
me.ownerCt.updateLayout();
}
return me;
},
/**
*
* @param {String/Number} border The border, see {@link #border}. If a falsey value is passed
* the border will be removed.
*/
setBorder: function(border, /* private */ targetEl) {
var me = this,
initial = !!targetEl;
if (me.rendered || initial) {
if (!initial) {
targetEl = me.el;
}
if (!border) {
border = 0;
} else {
border = Ext.Element.unitizeBox((border === true) ? 1 : border);
}
targetEl.setStyle('border-width', border);
if (!initial) {
me.updateLayout();
}
}
me.border = border;
},
onDestroy : function() {
var me = this;
if (me.monitorResize && Ext.EventManager.resizeEvent) {
Ext.EventManager.resizeEvent.removeListener(me.setSize, me);
}
// Destroying the floatingItems ZIndexManager will also destroy descendant floating Components
Ext.destroy(
me.componentLayout,
me.loadMask,
me.floatingDescendants
);
},
/**
* Destroys the Component.
*/
destroy : function() {
var me = this,
selectors = me.renderSelectors,
selector,
el;
if (!me.isDestroyed) {
if (!me.hasListeners.beforedestroy || me.fireEvent('beforedestroy', me) !== false) {
me.destroying = true;
me.beforeDestroy();
if (me.floating) {
delete me.floatParent;
// A zIndexManager is stamped into a *floating* Component when it is added to a Container.
// If it has no zIndexManager at render time, it is assigned to the global Ext.WindowManager instance.
if (me.zIndexManager) {
me.zIndexManager.unregister(me);
}
} else if (me.ownerCt && me.ownerCt.remove) {
me.ownerCt.remove(me, false);
}
me.onDestroy();
// Attempt to destroy all plugins
Ext.destroy(me.plugins);
if (me.hasListeners.destroy) {
me.fireEvent('destroy', me);
}
Ext.ComponentManager.unregister(me);
me.mixins.state.destroy.call(me);
me.clearListeners();
// make sure we clean up the element references after removing all events
if (me.rendered) {
if (!me.preserveElOnDestroy) {
me.el.remove();
}
me.mixins.elementCt.destroy.call(me); // removes childEls
if (selectors) {
for (selector in selectors) {
if (selectors.hasOwnProperty(selector)) {
el = me[selector];
if (el) { // in case any other code may have already removed it
delete me[selector];
el.remove();
}
}
}
}
delete me.el;
delete me.frameBody;
delete me.rendered;
}
me.destroying = false;
me.isDestroyed = true;
}
}
},
/**
* Retrieves a plugin by its pluginId which has been bound to this component.
* @param {String} pluginId
* @return {Ext.AbstractPlugin} plugin instance.
*/
getPlugin: function(pluginId) {
var i = 0,
plugins = this.plugins,
ln = plugins.length;
for (; i < ln; i++) {
if (plugins[i].pluginId === pluginId) {
return plugins[i];
}
}
},
/**
* Determines whether this component is the descendant of a particular container.
* @param {Ext.Container} container
* @return {Boolean} True if it is.
*/
isDescendantOf: function(container) {
return !!this.findParentBy(function(p){
return p === container;
});
}
}, function() {
var AbstractComponent = this;
AbstractComponent.createAlias({
on: 'addListener',
prev: 'previousSibling',
next: 'nextSibling'
});
/**
* @inheritdoc Ext.AbstractComponent#resumeLayouts
* @member Ext
*/
Ext.resumeLayouts = function (flush) {
AbstractComponent.resumeLayouts(flush);
};
/**
* @inheritdoc Ext.AbstractComponent#suspendLayouts
* @member Ext
*/
Ext.suspendLayouts = function () {
AbstractComponent.suspendLayouts();
};
/**
* Utility wrapper that suspends layouts of all components for the duration of a given function.
* @param {Function} fn The function to execute.
* @param {Object} [scope] The scope (`this` reference) in which the specified function is executed.
* @member Ext
*/
Ext.batchLayouts = function(fn, scope) {
AbstractComponent.suspendLayouts();
// Invoke the function
fn.call(scope);
AbstractComponent.resumeLayouts(true);
};
});
/**
* The AbstractPlugin class is the base class from which user-implemented plugins should inherit.
*
* This class defines the essential API of plugins as used by Components by defining the following methods:
*
* - `init` : The plugin initialization method which the owning Component calls at Component initialization time.
*
* The Component passes itself as the sole parameter.
*
* Subclasses should set up bidirectional links between the plugin and its client Component here.
*
* - `destroy` : The plugin cleanup method which the owning Component calls at Component destruction time.
*
* Use this method to break links between the plugin and the Component and to free any allocated resources.
*
* - `enable` : The base implementation just sets the plugin's `disabled` flag to `false`
*
* - `disable` : The base implementation just sets the plugin's `disabled` flag to `true`
*/
Ext.define('Ext.AbstractPlugin', {
disabled: false,
constructor: function(config) {
this.initialConfig = config;
Ext.apply(this, config);
},
clone: function() {
return new this.self(this.initialConfig);
},
getCmp: function() {
return this.cmp;
},
/**
* @cfg {String} pluginId
* A name for the plugin that can be set at creation time to then retrieve the plugin
* through {@link Ext.AbstractComponent#getPlugin getPlugin} method. For example:
*
* var grid = Ext.create('Ext.grid.Panel', {
* plugins: [{
* ptype: 'cellediting',
* clicksToEdit: 2,
* pluginId: 'cellplugin'
* }]
* });
*
* // later on:
* var plugin = grid.getPlugin('cellplugin');
*/
/**
* @method
* The init method is invoked after initComponent method has been run for the client Component.
*
* The supplied implementation is empty. Subclasses should perform plugin initialization, and set up bidirectional
* links between the plugin and its client Component in their own implementation of this method.
* @param {Ext.Component} client The client Component which owns this plugin.
*/
init: Ext.emptyFn,
/**
* @method
* The destroy method is invoked by the owning Component at the time the Component is being destroyed.
*
* The supplied implementation is empty. Subclasses should perform plugin cleanup in their own implementation of
* this method.
*/
destroy: Ext.emptyFn,
/**
* The base implementation just sets the plugin's `disabled` flag to `false`
*
* Plugin subclasses which need more complex processing may implement an overriding implementation.
*/
enable: function() {
this.disabled = false;
},
/**
* The base implementation just sets the plugin's `disabled` flag to `true`
*
* Plugin subclasses which need more complex processing may implement an overriding implementation.
*/
disable: function() {
this.disabled = true;
}
});
/**
* An Action is a piece of reusable functionality that can be abstracted out of any particular component so that it
* can be usefully shared among multiple components. Actions let you share handlers, configuration options and UI
* updates across any components that support the Action interface (primarily {@link Ext.toolbar.Toolbar},
* {@link Ext.button.Button} and {@link Ext.menu.Menu} components).
*
* Use a single Action instance as the config object for any number of UI Components which share the same configuration. The
* Action not only supplies the configuration, but allows all Components based upon it to have a common set of methods
* called at once through a single call to the Action.
*
* Any Component that is to be configured with an Action must also support
* the following methods:
*
* - setText(string)
* - setIconCls(string)
* - setDisabled(boolean)
* - setVisible(boolean)
* - setHandler(function)
*
* This allows the Action to control its associated Components.
*
* Example usage:
*
* // Define the shared Action. Each Component below will have the same
* // display text and icon, and will display the same message on click.
* var action = new Ext.Action({
* {@link #text}: 'Do something',
* {@link #handler}: function(){
* Ext.Msg.alert('Click', 'You did something.');
* },
* {@link #iconCls}: 'do-something',
* {@link #itemId}: 'myAction'
* });
*
* var panel = new Ext.panel.Panel({
* title: 'Actions',
* width: 500,
* height: 300,
* tbar: [
* // Add the Action directly to a toolbar as a menu button
* action,
* {
* text: 'Action Menu',
* // Add the Action to a menu as a text item
* menu: [action]
* }
* ],
* items: [
* // Add the Action to the panel body as a standard button
* new Ext.button.Button(action)
* ],
* renderTo: Ext.getBody()
* });
*
* // Change the text for all components using the Action
* action.setText('Something else');
*
* // Reference an Action through a container using the itemId
* var btn = panel.getComponent('myAction');
* var aRef = btn.baseAction;
* aRef.setText('New text');
*/
Ext.define('Ext.Action', {
/* Begin Definitions */
/* End Definitions */
/**
* @cfg {String} [text='']
* The text to set for all components configured by this Action.
*/
/**
* @cfg {String} [iconCls='']
* The CSS class selector that specifies a background image to be used as the header icon for
* all components configured by this Action.
*
* An example of specifying a custom icon class would be something like:
*
* // specify the property in the config for the class:
* ...
* iconCls: 'do-something'
*
* // css class that specifies background image to be used as the icon image:
* .do-something { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
*/
/**
* @cfg {Boolean} [disabled=false]
* True to disable all components configured by this Action, false to enable them.
*/
/**
* @cfg {Boolean} [hidden=false]
* True to hide all components configured by this Action, false to show them.
*/
/**
* @cfg {Function} handler
* The function that will be invoked by each component tied to this Action
* when the component's primary event is triggered.
*/
/**
* @cfg {String} itemId
* See {@link Ext.Component}.{@link Ext.Component#itemId itemId}.
*/
/**
* @cfg {Object} scope
* The scope (this reference) in which the {@link #handler} is executed.
* Defaults to the browser window.
*/
/**
* Creates new Action.
* @param {Object} config Config object.
*/
constructor : function(config){
this.initialConfig = config;
this.itemId = config.itemId = (config.itemId || config.id || Ext.id());
this.items = [];
},
/*
* @property {Boolean} isAction
* `true` in this class to identify an object as an instantiated Action, or subclass thereof.
*/
isAction : true,
/**
* Sets the text to be displayed by all components configured by this Action.
* @param {String} text The text to display
*/
setText : function(text){
this.initialConfig.text = text;
this.callEach('setText', [text]);
},
/**
* Gets the text currently displayed by all components configured by this Action.
*/
getText : function(){
return this.initialConfig.text;
},
/**
* Sets the icon CSS class for all components configured by this Action. The class should supply
* a background image that will be used as the icon image.
* @param {String} cls The CSS class supplying the icon image
*/
setIconCls : function(cls){
this.initialConfig.iconCls = cls;
this.callEach('setIconCls', [cls]);
},
/**
* Gets the icon CSS class currently used by all components configured by this Action.
*/
getIconCls : function(){
return this.initialConfig.iconCls;
},
/**
* Sets the disabled state of all components configured by this Action. Shortcut method
* for {@link #enable} and {@link #disable}.
* @param {Boolean} disabled True to disable the component, false to enable it
*/
setDisabled : function(v){
this.initialConfig.disabled = v;
this.callEach('setDisabled', [v]);
},
/**
* Enables all components configured by this Action.
*/
enable : function(){
this.setDisabled(false);
},
/**
* Disables all components configured by this Action.
*/
disable : function(){
this.setDisabled(true);
},
/**
* Returns true if the components using this Action are currently disabled, else returns false.
*/
isDisabled : function(){
return this.initialConfig.disabled;
},
/**
* Sets the hidden state of all components configured by this Action. Shortcut method
* for `{@link #hide}` and `{@link #show}`.
* @param {Boolean} hidden True to hide the component, false to show it.
*/
setHidden : function(v){
this.initialConfig.hidden = v;
this.callEach('setVisible', [!v]);
},
/**
* Shows all components configured by this Action.
*/
show : function(){
this.setHidden(false);
},
/**
* Hides all components configured by this Action.
*/
hide : function(){
this.setHidden(true);
},
/**
* Returns true if the components configured by this Action are currently hidden, else returns false.
*/
isHidden : function(){
return this.initialConfig.hidden;
},
/**
* Sets the function that will be called by each Component using this action when its primary event is triggered.
* @param {Function} fn The function that will be invoked by the action's components. The function
* will be called with no arguments.
* @param {Object} scope The scope (this reference) in which the function is executed. Defaults to the Component
* firing the event.
*/
setHandler : function(fn, scope){
this.initialConfig.handler = fn;
this.initialConfig.scope = scope;
this.callEach('setHandler', [fn, scope]);
},
/**
* Executes the specified function once for each Component currently tied to this Action. The function passed
* in should accept a single argument that will be an object that supports the basic Action config/method interface.
* @param {Function} fn The function to execute for each component
* @param {Object} scope The scope (this reference) in which the function is executed.
* Defaults to the Component.
*/
each : function(fn, scope){
Ext.each(this.items, fn, scope);
},
// private
callEach : function(fnName, args){
var items = this.items,
i = 0,
len = items.length,
item;
Ext.suspendLayouts();
for(; i < len; i++){
item = items[i];
item[fnName].apply(item, args);
}
Ext.resumeLayouts(true);
},
// private
addComponent : function(comp){
this.items.push(comp);
comp.on('destroy', this.removeComponent, this);
},
// private
removeComponent : function(comp){
Ext.Array.remove(this.items, comp);
},
/**
* Executes this Action manually using the handler function specified in the original config object
* or the handler function set with {@link #setHandler}. Any arguments passed to this
* function will be passed on to the handler function.
* @param {Object...} args Variable number of arguments passed to the handler function
*/
execute : function(){
this.initialConfig.handler.apply(this.initialConfig.scope || Ext.global, arguments);
}
});
/**
* The Connection class encapsulates a connection to the page's originating domain, allowing requests to be made either
* to a configured URL, or to a URL specified at request time.
*
* Requests made by this class are asynchronous, and will return immediately. No data from the server will be available
* to the statement immediately following the {@link #request} call. To process returned data, use a success callback
* in the request options object, or an {@link #requestcomplete event listener}.
*
* # File Uploads
*
* File uploads are not performed using normal "Ajax" techniques, that is they are not performed using XMLHttpRequests.
* Instead the form is submitted in the standard manner with the DOM <form> element temporarily modified to have its
* target set to refer to a dynamically generated, hidden <iframe> which is inserted into the document but removed
* after the return data has been gathered.
*
* The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON to
* send the return object, then the Content-Type header must be set to "text/html" in order to tell the browser to
* insert the text unchanged into the document body.
*
* Characters which are significant to an HTML parser must be sent as HTML entities, so encode `<` as `<`, `&` as
* `&` etc.
*
* The response text is retrieved from the document, and a fake XMLHttpRequest object is created containing a
* responseText property in order to conform to the requirements of event handlers and callbacks.
*
* Be aware that file upload packets are sent with the content type multipart/form and some server technologies
* (notably JEE) may require some custom processing in order to retrieve parameter names and parameter values from the
* packet content.
*
* Also note that it's not possible to check the response code of the hidden iframe, so the success handler will ALWAYS fire.
*/
Ext.define('Ext.data.Connection', {
mixins: {
observable: 'Ext.util.Observable'
},
statics: {
requestId: 0
},
url: null,
async: true,
method: null,
username: '',
password: '',
/**
* @cfg {Boolean} disableCaching
* True to add a unique cache-buster param to GET requests.
*/
disableCaching: true,
/**
* @cfg {Boolean} withCredentials
* True to set `withCredentials = true` on the XHR object
*/
withCredentials: false,
/**
* @cfg {Boolean} cors
* True to enable CORS support on the XHR object. Currently the only effect of this option
* is to use the XDomainRequest object instead of XMLHttpRequest if the browser is IE8 or above.
*/
cors: false,
/**
* @cfg {String} disableCachingParam
* Change the parameter which is sent went disabling caching through a cache buster.
*/
disableCachingParam: '_dc',
/**
* @cfg {Number} timeout
* The timeout in milliseconds to be used for requests.
*/
timeout : 30000,
/**
* @cfg {Object} extraParams
* Any parameters to be appended to the request.
*/
/**
* @cfg {Boolean} [autoAbort=false]
* Whether this request should abort any pending requests.
*/
/**
* @cfg {String} method
* The default HTTP method to be used for requests.
*
* If not set, but {@link #request} params are present, POST will be used;
* otherwise, GET will be used.
*/
/**
* @cfg {Object} defaultHeaders
* An object containing request headers which are added to each request made by this object.
*/
useDefaultHeader : true,
defaultPostHeader : 'application/x-www-form-urlencoded; charset=UTF-8',
useDefaultXhrHeader : true,
defaultXhrHeader : 'XMLHttpRequest',
constructor : function(config) {
config = config || {};
Ext.apply(this, config);
/**
* @event beforerequest
* Fires before a network request is made to retrieve a data object.
* @param {Ext.data.Connection} conn This Connection object.
* @param {Object} options The options config object passed to the {@link #request} method.
*/
/**
* @event requestcomplete
* Fires if the request was successfully completed.
* @param {Ext.data.Connection} conn This Connection object.
* @param {Object} response The XHR object containing the response data.
* See [The XMLHttpRequest Object](http://www.w3.org/TR/XMLHttpRequest/) for details.
* @param {Object} options The options config object passed to the {@link #request} method.
*/
/**
* @event requestexception
* Fires if an error HTTP status was returned from the server.
* See [HTTP Status Code Definitions](http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html)
* for details of HTTP status codes.
* @param {Ext.data.Connection} conn This Connection object.
* @param {Object} response The XHR object containing the response data.
* See [The XMLHttpRequest Object](http://www.w3.org/TR/XMLHttpRequest/) for details.
* @param {Object} options The options config object passed to the {@link #request} method.
*/
this.requests = {};
this.mixins.observable.constructor.call(this);
},
/**
* Sends an HTTP request to a remote server.
*
* **Important:** Ajax server requests are asynchronous, and this call will
* return before the response has been received. Process any returned data
* in a callback function.
*
* Ext.Ajax.request({
* url: 'ajax_demo/sample.json',
* success: function(response, opts) {
* var obj = Ext.decode(response.responseText);
* console.dir(obj);
* },
* failure: function(response, opts) {
* console.log('server-side failure with status code ' + response.status);
* }
* });
*
* To execute a callback function in the correct scope, use the `scope` option.
*
* @param {Object} options An object which may contain the following properties:
*
* (The options object may also contain any other property which might be needed to perform
* postprocessing in a callback because it is passed to callback functions.)
*
* @param {String/Function} options.url The URL to which to send the request, or a function
* to call which returns a URL string. The scope of the function is specified by the `scope` option.
* Defaults to the configured `url`.
*
* @param {Object/String/Function} options.params An object containing properties which are
* used as parameters to the request, a url encoded string or a function to call to get either. The scope
* of the function is specified by the `scope` option.
*
* @param {String} options.method The HTTP method to use
* for the request. Defaults to the configured method, or if no method was configured,
* "GET" if no parameters are being sent, and "POST" if parameters are being sent. Note that
* the method name is case-sensitive and should be all caps.
*
* @param {Function} options.callback The function to be called upon receipt of the HTTP response.
* The callback is called regardless of success or failure and is passed the following parameters:
* @param {Object} options.callback.options The parameter to the request call.
* @param {Boolean} options.callback.success True if the request succeeded.
* @param {Object} options.callback.response The XMLHttpRequest object containing the response data.
* See [www.w3.org/TR/XMLHttpRequest/](http://www.w3.org/TR/XMLHttpRequest/) for details about
* accessing elements of the response.
*
* @param {Function} options.success The function to be called upon success of the request.
* The callback is passed the following parameters:
* @param {Object} options.success.response The XMLHttpRequest object containing the response data.
* @param {Object} options.success.options The parameter to the request call.
*
* @param {Function} options.failure The function to be called upon failure of the request.
* The callback is passed the following parameters:
* @param {Object} options.failure.response The XMLHttpRequest object containing the response data.
* @param {Object} options.failure.options The parameter to the request call.
*
* @param {Object} options.scope The scope in which to execute the callbacks: The "this" object for
* the callback function. If the `url`, or `params` options were specified as functions from which to
* draw values, then this also serves as the scope for those function calls. Defaults to the browser
* window.
*
* @param {Number} options.timeout The timeout in milliseconds to be used for this request.
* Defaults to 30 seconds.
*
* @param {Ext.Element/HTMLElement/String} options.form The `' + Ext.DomHelper.markup(this.toolbar.getRenderTree());
return Ext.applyIf(this.callParent(), this.getLabelableRenderData());
},
getSubTplData: function() {
return {
$comp : this,
cmpId : this.id,
id : this.getInputId(),
textareaCls : Ext.baseCSSPrefix + 'hidden',
value : this.value,
iframeName : Ext.id(),
iframeSrc : Ext.SSL_SECURE_URL,
size : 'height:100px;width:100%'
};
},
getSubTplMarkup: function() {
return this.getTpl('fieldSubTpl').apply(this.getSubTplData());
},
initFrameDoc: function() {
var me = this,
doc, task;
Ext.TaskManager.stop(me.monitorTask);
doc = me.getDoc();
me.win = me.getWin();
doc.open();
doc.write(me.getDocMarkup());
doc.close();
task = { // must defer to wait for browser to be ready
run: function() {
var doc = me.getDoc();
if (doc.body || doc.readyState === 'complete') {
Ext.TaskManager.stop(task);
me.setDesignMode(true);
Ext.defer(me.initEditor, 10, me);
}
},
interval : 10,
duration:10000,
scope: me
};
Ext.TaskManager.start(task);
},
checkDesignMode: function() {
var me = this,
doc = me.getDoc();
if (doc && (!doc.editorInitialized || me.getDesignMode() !== 'on')) {
me.initFrameDoc();
}
},
/**
* @private
* Sets current design mode. To enable, mode can be true or 'on', off otherwise
*/
setDesignMode: function(mode) {
var me = this,
doc = me.getDoc();
if (doc) {
if (me.readOnly) {
mode = false;
}
doc.designMode = (/on|true/i).test(String(mode).toLowerCase()) ?'on':'off';
}
},
// private
getDesignMode: function() {
var doc = this.getDoc();
return !doc ? '' : String(doc.designMode).toLowerCase();
},
disableItems: function(disabled) {
var items = this.getToolbar().items.items,
i,
iLen = items.length,
item;
for (i = 0; i < iLen; i++) {
item = items[i];
if (item.getItemId() !== 'sourceedit') {
item.setDisabled(disabled);
}
}
},
/**
* Toggles the editor between standard and source edit mode.
* @param {Boolean} [sourceEditMode] True for source edit, false for standard
*/
toggleSourceEdit: function(sourceEditMode) {
var me = this,
iframe = me.iframeEl,
textarea = me.textareaEl,
hiddenCls = Ext.baseCSSPrefix + 'hidden',
btn = me.getToolbar().getComponent('sourceedit');
if (!Ext.isBoolean(sourceEditMode)) {
sourceEditMode = !me.sourceEditMode;
}
me.sourceEditMode = sourceEditMode;
if (btn.pressed !== sourceEditMode) {
btn.toggle(sourceEditMode);
}
if (sourceEditMode) {
me.disableItems(true);
me.syncValue();
iframe.addCls(hiddenCls);
textarea.removeCls(hiddenCls);
textarea.dom.removeAttribute('tabIndex');
textarea.focus();
me.inputEl = textarea;
}
else {
if (me.initialized) {
me.disableItems(me.readOnly);
}
me.pushValue();
iframe.removeCls(hiddenCls);
textarea.addCls(hiddenCls);
textarea.dom.setAttribute('tabIndex', -1);
me.deferFocus();
me.inputEl = iframe;
}
me.fireEvent('editmodechange', me, sourceEditMode);
me.updateLayout();
},
// private used internally
createLink : function() {
var url = prompt(this.createLinkText, this.defaultLinkValue);
if (url && url !== 'http:/'+'/') {
this.relayCmd('createlink', url);
}
},
clearInvalid: Ext.emptyFn,
// docs inherit from Field
setValue: function(value) {
var me = this,
textarea = me.textareaEl;
me.mixins.field.setValue.call(me, value);
if (value === null || value === undefined) {
value = '';
}
if (textarea) {
textarea.dom.value = value;
}
me.pushValue();
return this;
},
/**
* If you need/want custom HTML cleanup, this is the method you should override.
* @param {String} html The HTML to be cleaned
* @return {String} The cleaned HTML
* @protected
*/
cleanHtml: function(html) {
html = String(html);
if (Ext.isWebKit) { // strip safari nonsense
html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
}
/*
* Neat little hack. Strips out all the non-digit characters from the default
* value and compares it to the character code of the first character in the string
* because it can cause encoding issues when posted to the server. We need the
* parseInt here because charCodeAt will return a number.
*/
if (html.charCodeAt(0) === parseInt(this.defaultValue.replace(/\D/g, ''), 10)) {
html = html.substring(1);
}
return html;
},
/**
* Syncs the contents of the editor iframe with the textarea.
* @protected
*/
syncValue : function(){
var me = this,
body, changed, html, bodyStyle, match;
if (me.initialized) {
body = me.getEditorBody();
html = body.innerHTML;
if (Ext.isWebKit) {
bodyStyle = body.getAttribute('style'); // Safari puts text-align styles on the body element!
match = bodyStyle.match(/text-align:(.*?);/i);
if (match && match[1]) {
html = '
'); range.collapse(false); range.select(); } } } } }; } if (Ext.isOpera) { return function(e){ var me = this; if (e.getKey() === e.TAB) { e.stopEvent(); if (!me.readOnly) { me.win.focus(); me.execCmd('InsertHTML',' '); me.deferFocus(); } } }; } if (Ext.isWebKit) { return function(e){ var me = this, k = e.getKey(), readOnly = me.readOnly; if (k === e.TAB) { e.stopEvent(); if (!readOnly) { me.execCmd('InsertText','\t'); me.deferFocus(); } } else if (k === e.ENTER) { e.stopEvent(); if (!readOnly) { me.execCmd('InsertHtml','
'); me.deferFocus(); } } }; } return null; // not needed, so null }()), /** * Returns the editor's toolbar. **This is only available after the editor has been rendered.** * @return {Ext.toolbar.Toolbar} */ getToolbar : function(){ return this.toolbar; }, //
/**
* @property {Object} buttonTips
* Object collection of toolbar tooltips for the buttons in the editor. The key is the command id associated with
* that button and the value is a valid QuickTips object. For example:
*
* {
* bold : {
* title: 'Bold (Ctrl+B)',
* text: 'Make the selected text bold.',
* cls: 'x-html-editor-tip'
* },
* italic : {
* title: 'Italic (Ctrl+I)',
* text: 'Make the selected text italic.',
* cls: 'x-html-editor-tip'
* },
* ...
*/
buttonTips : {
bold : {
title: 'Bold (Ctrl+B)',
text: 'Make the selected text bold.',
cls: Ext.baseCSSPrefix + 'html-editor-tip'
},
italic : {
title: 'Italic (Ctrl+I)',
text: 'Make the selected text italic.',
cls: Ext.baseCSSPrefix + 'html-editor-tip'
},
underline : {
title: 'Underline (Ctrl+U)',
text: 'Underline the selected text.',
cls: Ext.baseCSSPrefix + 'html-editor-tip'
},
increasefontsize : {
title: 'Grow Text',
text: 'Increase the font size.',
cls: Ext.baseCSSPrefix + 'html-editor-tip'
},
decreasefontsize : {
title: 'Shrink Text',
text: 'Decrease the font size.',
cls: Ext.baseCSSPrefix + 'html-editor-tip'
},
backcolor : {
title: 'Text Highlight Color',
text: 'Change the background color of the selected text.',
cls: Ext.baseCSSPrefix + 'html-editor-tip'
},
forecolor : {
title: 'Font Color',
text: 'Change the color of the selected text.',
cls: Ext.baseCSSPrefix + 'html-editor-tip'
},
justifyleft : {
title: 'Align Text Left',
text: 'Align text to the left.',
cls: Ext.baseCSSPrefix + 'html-editor-tip'
},
justifycenter : {
title: 'Center Text',
text: 'Center text in the editor.',
cls: Ext.baseCSSPrefix + 'html-editor-tip'
},
justifyright : {
title: 'Align Text Right',
text: 'Align text to the right.',
cls: Ext.baseCSSPrefix + 'html-editor-tip'
},
insertunorderedlist : {
title: 'Bullet List',
text: 'Start a bulleted list.',
cls: Ext.baseCSSPrefix + 'html-editor-tip'
},
insertorderedlist : {
title: 'Numbered List',
text: 'Start a numbered list.',
cls: Ext.baseCSSPrefix + 'html-editor-tip'
},
createlink : {
title: 'Hyperlink',
text: 'Make the selected text a hyperlink.',
cls: Ext.baseCSSPrefix + 'html-editor-tip'
},
sourceedit : {
title: 'Source Edit',
text: 'Switch to source editing mode.',
cls: Ext.baseCSSPrefix + 'html-editor-tip'
}
}
//
// hide stuff that is not compatible
/**
* @event blur
* @private
*/
/**
* @event focus
* @private
*/
/**
* @event specialkey
* @private
*/
/**
* @cfg {String} fieldCls
* @private
*/
/**
* @cfg {String} focusCls
* @private
*/
/**
* @cfg {String} autoCreate
* @private
*/
/**
* @cfg {String} inputType
* @private
*/
/**
* @cfg {String} invalidCls
* @private
*/
/**
* @cfg {String} invalidText
* @private
*/
/**
* @cfg {String} msgFx
* @private
*/
/**
* @cfg {Boolean} allowDomMove
* @private
*/
/**
* @cfg {String} applyTo
* @private
*/
/**
* @cfg {String} readOnly
* @private
*/
/**
* @cfg {String} tabIndex
* @private
*/
/**
* @method validate
* @private
*/
});
/**
* @docauthor Robert Dougan
*
* Single radio field. Similar to checkbox, but automatically handles making sure only one radio is checked
* at a time within a group of radios with the same name.
*
* # Labeling
*
* In addition to the {@link Ext.form.Labelable standard field labeling options}, radio buttons
* may be given an optional {@link #boxLabel} which will be displayed immediately to the right of the input. Also
* see {@link Ext.form.RadioGroup} for a convenient method of grouping related radio buttons.
*
* # Values
*
* The main value of a Radio field is a boolean, indicating whether or not the radio is checked.
*
* The following values will check the radio:
*
* - `true`
* - `'true'`
* - `'1'`
* - `'on'`
*
* Any other value will uncheck it.
*
* In addition to the main boolean value, you may also specify a separate {@link #inputValue}. This will be sent
* as the parameter value when the form is {@link Ext.form.Basic#submit submitted}. You will want to set this
* value if you have multiple radio buttons with the same {@link #name}, as is almost always the case.
*
* # Example usage
*
* @example
* Ext.create('Ext.form.Panel', {
* title : 'Order Form',
* width : 300,
* bodyPadding: 10,
* renderTo : Ext.getBody(),
* items: [
* {
* xtype : 'fieldcontainer',
* fieldLabel : 'Size',
* defaultType: 'radiofield',
* defaults: {
* flex: 1
* },
* layout: 'hbox',
* items: [
* {
* boxLabel : 'M',
* name : 'size',
* inputValue: 'm',
* id : 'radio1'
* }, {
* boxLabel : 'L',
* name : 'size',
* inputValue: 'l',
* id : 'radio2'
* }, {
* boxLabel : 'XL',
* name : 'size',
* inputValue: 'xl',
* id : 'radio3'
* }
* ]
* },
* {
* xtype : 'fieldcontainer',
* fieldLabel : 'Color',
* defaultType: 'radiofield',
* defaults: {
* flex: 1
* },
* layout: 'hbox',
* items: [
* {
* boxLabel : 'Blue',
* name : 'color',
* inputValue: 'blue',
* id : 'radio4'
* }, {
* boxLabel : 'Grey',
* name : 'color',
* inputValue: 'grey',
* id : 'radio5'
* }, {
* boxLabel : 'Black',
* name : 'color',
* inputValue: 'black',
* id : 'radio6'
* }
* ]
* }
* ],
* bbar: [
* {
* text: 'Smaller Size',
* handler: function() {
* var radio1 = Ext.getCmp('radio1'),
* radio2 = Ext.getCmp('radio2'),
* radio3 = Ext.getCmp('radio3');
*
* //if L is selected, change to M
* if (radio2.getValue()) {
* radio1.setValue(true);
* return;
* }
*
* //if XL is selected, change to L
* if (radio3.getValue()) {
* radio2.setValue(true);
* return;
* }
*
* //if nothing is set, set size to S
* radio1.setValue(true);
* }
* },
* {
* text: 'Larger Size',
* handler: function() {
* var radio1 = Ext.getCmp('radio1'),
* radio2 = Ext.getCmp('radio2'),
* radio3 = Ext.getCmp('radio3');
*
* //if M is selected, change to L
* if (radio1.getValue()) {
* radio2.setValue(true);
* return;
* }
*
* //if L is selected, change to XL
* if (radio2.getValue()) {
* radio3.setValue(true);
* return;
* }
*
* //if nothing is set, set size to XL
* radio3.setValue(true);
* }
* },
* '-',
* {
* text: 'Select color',
* menu: {
* indent: false,
* items: [
* {
* text: 'Blue',
* handler: function() {
* var radio = Ext.getCmp('radio4');
* radio.setValue(true);
* }
* },
* {
* text: 'Grey',
* handler: function() {
* var radio = Ext.getCmp('radio5');
* radio.setValue(true);
* }
* },
* {
* text: 'Black',
* handler: function() {
* var radio = Ext.getCmp('radio6');
* radio.setValue(true);
* }
* }
* ]
* }
* }
* ]
* });
*/
Ext.define('Ext.form.field.Radio', {
extend:'Ext.form.field.Checkbox',
alias: ['widget.radiofield', 'widget.radio'],
alternateClassName: 'Ext.form.Radio',
requires: ['Ext.form.RadioManager'],
/**
* @property {Boolean} isRadio
* `true` in this class to identify an object as an instantiated Radio, or subclass thereof.
*/
isRadio: true,
/**
* @cfg {String} uncheckedValue
* @private
*/
// private
inputType: 'radio',
ariaRole: 'radio',
formId: null,
/**
* If this radio is part of a group, it will return the selected value
* @return {String}
*/
getGroupValue: function() {
var selected = this.getManager().getChecked(this.name, this.getFormId());
return selected ? selected.inputValue : null;
},
/**
* @private Handle click on the radio button
*/
onBoxClick: function(e) {
var me = this;
if (!me.disabled && !me.readOnly) {
this.setValue(true);
}
},
onRemoved: function(){
this.callParent(arguments);
this.formId = null;
},
/**
* Sets either the checked/unchecked status of this Radio, or, if a string value is passed, checks a sibling Radio
* of the same name whose value is the value specified.
* @param {String/Boolean} value Checked value, or the value of the sibling radio button to check.
* @return {Ext.form.field.Radio} this
*/
setValue: function(v) {
var me = this,
active;
if (Ext.isBoolean(v)) {
me.callParent(arguments);
} else {
active = me.getManager().getWithValue(me.name, v, me.getFormId()).getAt(0);
if (active) {
active.setValue(true);
}
}
return me;
},
/**
* Returns the submit value for the checkbox which can be used when submitting forms.
* @return {Boolean/Object} True if checked, null if not.
*/
getSubmitValue: function() {
return this.checked ? this.inputValue : null;
},
getModelData: function() {
return this.getSubmitData();
},
// inherit docs
onChange: function(newVal, oldVal) {
var me = this,
r, rLen, radio, radios;
me.callParent(arguments);
if (newVal) {
radios = me.getManager().getByName(me.name, me.getFormId()).items;
rLen = radios.length;
for (r = 0; r < rLen; r++) {
radio = radios[r];
if (radio !== me) {
radio.setValue(false);
}
}
}
},
// inherit docs
getManager: function() {
return Ext.form.RadioManager;
}
});
/**
* A time picker which provides a list of times from which to choose. This is used by the Ext.form.field.Time
* class to allow browsing and selection of valid times, but could also be used with other components.
*
* By default, all times starting at midnight and incrementing every 15 minutes will be presented. This list of
* available times can be controlled using the {@link #minValue}, {@link #maxValue}, and {@link #increment}
* configuration properties. The format of the times presented in the list can be customized with the {@link #format}
* config.
*
* To handle when the user selects a time from the list, you can subscribe to the {@link #selectionchange} event.
*
* @example
* Ext.create('Ext.picker.Time', {
* width: 60,
* minValue: Ext.Date.parse('04:30:00 AM', 'h:i:s A'),
* maxValue: Ext.Date.parse('08:00:00 AM', 'h:i:s A'),
* renderTo: Ext.getBody()
* });
*/
Ext.define('Ext.picker.Time', {
extend: 'Ext.view.BoundList',
alias: 'widget.timepicker',
requires: ['Ext.data.Store', 'Ext.Date'],
/**
* @cfg {Date} minValue
* The minimum time to be shown in the list of times. This must be a Date object (only the time fields will be
* used); no parsing of String values will be done.
*/
/**
* @cfg {Date} maxValue
* The maximum time to be shown in the list of times. This must be a Date object (only the time fields will be
* used); no parsing of String values will be done.
*/
/**
* @cfg {Number} increment
* The number of minutes between each time value in the list.
*/
increment: 15,
//
/**
* @cfg {String} [format=undefined]
* The default time format string which can be overriden for localization support. The format must be valid
* according to {@link Ext.Date#parse}.
*
* Defaults to `'g:i A'`, e.g., `'3:15 PM'`. For 24-hour time format try `'H:i'` instead.
*/
format : "g:i A",
//
/**
* @private
* The field in the implicitly-generated Model objects that gets displayed in the list. This is
* an internal field name only and is not useful to change via config.
*/
displayField: 'disp',
/**
* @private
* Year, month, and day that all times will be normalized into internally.
*/
initDate: [2008,0,1],
componentCls: Ext.baseCSSPrefix + 'timepicker',
/**
* @cfg
* @private
*/
loadMask: false,
initComponent: function() {
var me = this,
dateUtil = Ext.Date,
clearTime = dateUtil.clearTime,
initDate = me.initDate;
// Set up absolute min and max for the entire day
me.absMin = clearTime(new Date(initDate[0], initDate[1], initDate[2]));
me.absMax = dateUtil.add(clearTime(new Date(initDate[0], initDate[1], initDate[2])), 'mi', (24 * 60) - 1);
me.store = me.createStore();
me.updateList();
me.callParent();
},
/**
* Set the {@link #minValue} and update the list of available times. This must be a Date object (only the time
* fields will be used); no parsing of String values will be done.
* @param {Date} value
*/
setMinValue: function(value) {
this.minValue = value;
this.updateList();
},
/**
* Set the {@link #maxValue} and update the list of available times. This must be a Date object (only the time
* fields will be used); no parsing of String values will be done.
* @param {Date} value
*/
setMaxValue: function(value) {
this.maxValue = value;
this.updateList();
},
/**
* @private
* Sets the year/month/day of the given Date object to the {@link #initDate}, so that only
* the time fields are significant. This makes values suitable for time comparison.
* @param {Date} date
*/
normalizeDate: function(date) {
var initDate = this.initDate;
date.setFullYear(initDate[0], initDate[1], initDate[2]);
return date;
},
/**
* Update the list of available times in the list to be constrained within the {@link #minValue}
* and {@link #maxValue}.
*/
updateList: function() {
var me = this,
min = me.normalizeDate(me.minValue || me.absMin),
max = me.normalizeDate(me.maxValue || me.absMax);
me.store.filterBy(function(record) {
var date = record.get('date');
return date >= min && date <= max;
});
},
/**
* @private
* Creates the internal {@link Ext.data.Store} that contains the available times. The store
* is loaded with all possible times, and it is later filtered to hide those times outside
* the minValue/maxValue.
*/
createStore: function() {
var me = this,
utilDate = Ext.Date,
times = [],
min = me.absMin,
max = me.absMax;
while(min <= max){
times.push({
disp: utilDate.dateFormat(min, me.format),
date: min
});
min = utilDate.add(min, 'mi', me.increment);
}
return new Ext.data.Store({
fields: ['disp', 'date'],
data: times
});
}
});
/**
* Provides a time input field with a time dropdown and automatic time validation.
*
* This field recognizes and uses JavaScript Date objects as its main {@link #value} type (only the time portion of the
* date is used; the month/day/year are ignored). In addition, it recognizes string values which are parsed according to
* the {@link #format} and/or {@link #altFormats} configs. These may be reconfigured to use time formats appropriate for
* the user's locale.
*
* The field may be limited to a certain range of times by using the {@link #minValue} and {@link #maxValue} configs,
* and the interval between time options in the dropdown can be changed with the {@link #increment} config.
*
* Example usage:
*
* @example
* Ext.create('Ext.form.Panel', {
* title: 'Time Card',
* width: 300,
* bodyPadding: 10,
* renderTo: Ext.getBody(),
* items: [{
* xtype: 'timefield',
* name: 'in',
* fieldLabel: 'Time In',
* minValue: '6:00 AM',
* maxValue: '8:00 PM',
* increment: 30,
* anchor: '100%'
* }, {
* xtype: 'timefield',
* name: 'out',
* fieldLabel: 'Time Out',
* minValue: '6:00 AM',
* maxValue: '8:00 PM',
* increment: 30,
* anchor: '100%'
* }]
* });
*/
Ext.define('Ext.form.field.Time', {
extend:'Ext.form.field.ComboBox',
alias: 'widget.timefield',
requires: ['Ext.form.field.Date', 'Ext.picker.Time', 'Ext.view.BoundListKeyNav', 'Ext.Date'],
alternateClassName: ['Ext.form.TimeField', 'Ext.form.Time'],
/**
* @cfg {String} [triggerCls='x-form-time-trigger']
* An additional CSS class used to style the trigger button. The trigger will always get the {@link #triggerBaseCls}
* by default and triggerCls will be **appended** if specified.
*/
triggerCls: Ext.baseCSSPrefix + 'form-time-trigger',
/**
* @cfg {Date/String} minValue
* The minimum allowed time. Can be either a Javascript date object with a valid time value or a string time in a
* valid format -- see {@link #format} and {@link #altFormats}.
*/
/**
* @cfg {Date/String} maxValue
* The maximum allowed time. Can be either a Javascript date object with a valid time value or a string time in a
* valid format -- see {@link #format} and {@link #altFormats}.
*/
//
/**
* @cfg {String} minText
* The error text to display when the entered time is before {@link #minValue}.
*/
minText : "The time in this field must be equal to or after {0}",
//
//
/**
* @cfg {String} maxText
* The error text to display when the entered time is after {@link #maxValue}.
*/
maxText : "The time in this field must be equal to or before {0}",
//
//
/**
* @cfg {String} invalidText
* The error text to display when the time in the field is invalid.
*/
invalidText : "{0} is not a valid time",
//
//
/**
* @cfg {String} [format=undefined]
* The default time format string which can be overriden for localization support. The format must be valid
* according to {@link Ext.Date#parse}.
*
* Defaults to `'g:i A'`, e.g., `'3:15 PM'`. For 24-hour time format try `'H:i'` instead.
*/
format : "g:i A",
//
//
/**
* @cfg {String} [submitFormat=undefined]
* The date format string which will be submitted to the server. The format must be valid according to
* {@link Ext.Date#parse}.
*
* Defaults to {@link #format}.
*/
//
//
/**
* @cfg {String} altFormats
* Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
* format.
*/
altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H|gi a|hi a|giA|hiA|gi A|hi A",
//
/**
* @cfg {Number} increment
* The number of minutes between each time value in the list.
*/
increment: 15,
/**
* @cfg {Number} pickerMaxHeight
* The maximum height of the {@link Ext.picker.Time} dropdown.
*/
pickerMaxHeight: 300,
/**
* @cfg {Boolean} selectOnTab
* Whether the Tab key should select the currently highlighted item.
*/
selectOnTab: true,
/**
* @cfg {Boolean} [snapToIncrement=false]
* Specify as `true` to enforce that only values on the {@link #increment} boundary are accepted.
*/
snapToIncrement: false,
/**
* @private
* This is the date to use when generating time values in the absence of either minValue
* or maxValue. Using the current date causes DST issues on DST boundary dates, so this is an
* arbitrary "safe" date that can be any date aside from DST boundary dates.
*/
initDate: '1/1/2008',
initDateFormat: 'j/n/Y',
ignoreSelection: 0,
queryMode: 'local',
displayField: 'disp',
valueField: 'date',
initComponent: function() {
var me = this,
min = me.minValue,
max = me.maxValue;
if (min) {
me.setMinValue(min);
}
if (max) {
me.setMaxValue(max);
}
me.displayTpl = new Ext.XTemplate(
'' +
'{[typeof values === "string" ? values : this.formatDate(values["' + me.displayField + '"])]}' +
'' + me.delimiter + ' ' +
' ', {
formatDate: Ext.Function.bind(me.formatDate, me)
});
this.callParent();
},
/**
* @private
*/
transformOriginalValue: function(value) {
if (Ext.isString(value)) {
return this.rawToValue(value);
}
return value;
},
/**
* @private
*/
isEqual: function(v1, v2) {
return Ext.Date.isEqual(v1, v2);
},
/**
* Replaces any existing {@link #minValue} with the new time and refreshes the picker's range.
* @param {Date/String} value The minimum time that can be selected
*/
setMinValue: function(value) {
var me = this,
picker = me.picker;
me.setLimit(value, true);
if (picker) {
picker.setMinValue(me.minValue);
}
},
/**
* Replaces any existing {@link #maxValue} with the new time and refreshes the picker's range.
* @param {Date/String} value The maximum time that can be selected
*/
setMaxValue: function(value) {
var me = this,
picker = me.picker;
me.setLimit(value, false);
if (picker) {
picker.setMaxValue(me.maxValue);
}
},
/**
* @private
* Updates either the min or max value. Converts the user's value into a Date object whose
* year/month/day is set to the {@link #initDate} so that only the time fields are significant.
*/
setLimit: function(value, isMin) {
var me = this,
d, val;
if (Ext.isString(value)) {
d = me.parseDate(value);
}
else if (Ext.isDate(value)) {
d = value;
}
if (d) {
val = Ext.Date.clearTime(new Date(me.initDate));
val.setHours(d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds());
}
// Invalid min/maxValue config should result in a null so that defaulting takes over
else {
val = null;
}
me[isMin ? 'minValue' : 'maxValue'] = val;
},
rawToValue: function(rawValue) {
return this.parseDate(rawValue) || rawValue || null;
},
valueToRaw: function(value) {
return this.formatDate(this.parseDate(value));
},
/**
* Runs all of Time's validations and returns an array of any errors. Note that this first runs Text's validations,
* so the returned array is an amalgamation of all field errors. The additional validation checks are testing that
* the time format is valid, that the chosen time is within the {@link #minValue} and {@link #maxValue} constraints
* set.
* @param {Object} [value] The value to get errors for (defaults to the current field value)
* @return {String[]} All validation errors for this field
*/
getErrors: function(value) {
var me = this,
format = Ext.String.format,
errors = me.callParent(arguments),
minValue = me.minValue,
maxValue = me.maxValue,
date;
value = me.formatDate(value || me.processRawValue(me.getRawValue()));
if (value === null || value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
return errors;
}
date = me.parseDate(value);
if (!date) {
errors.push(format(me.invalidText, value, Ext.Date.unescapeFormat(me.format)));
return errors;
}
if (minValue && date < minValue) {
errors.push(format(me.minText, me.formatDate(minValue)));
}
if (maxValue && date > maxValue) {
errors.push(format(me.maxText, me.formatDate(maxValue)));
}
return errors;
},
formatDate: function() {
return Ext.form.field.Date.prototype.formatDate.apply(this, arguments);
},
/**
* @private
* Parses an input value into a valid Date object.
* @param {String/Date} value
*/
parseDate: function(value) {
var me = this,
val = value,
altFormats = me.altFormats,
altFormatsArray = me.altFormatsArray,
i = 0,
len;
if (value && !Ext.isDate(value)) {
val = me.safeParse(value, me.format);
if (!val && altFormats) {
altFormatsArray = altFormatsArray || altFormats.split('|');
len = altFormatsArray.length;
for (; i < len && !val; ++i) {
val = me.safeParse(value, altFormatsArray[i]);
}
}
}
// If configured to snap, snap resulting parsed Date to the closest increment.
if (val && me.snapToIncrement) {
val = new Date(Ext.Number.snap(val.getTime(), me.increment * 60 * 1000));
}
return val;
},
safeParse: function(value, format){
var me = this,
utilDate = Ext.Date,
parsedDate,
result = null;
if (utilDate.formatContainsDateInfo(format)) {
// assume we've been given a full date
result = utilDate.parse(value, format);
} else {
// Use our initial safe date
parsedDate = utilDate.parse(me.initDate + ' ' + value, me.initDateFormat + ' ' + format);
if (parsedDate) {
result = parsedDate;
}
}
return result;
},
// @private
getSubmitValue: function() {
var me = this,
format = me.submitFormat || me.format,
value = me.getValue();
return value ? Ext.Date.format(value, format) : null;
},
/**
* @private
* Creates the {@link Ext.picker.Time}
*/
createPicker: function() {
var me = this,
picker;
me.listConfig = Ext.apply({
xtype: 'timepicker',
selModel: {
mode: 'SINGLE'
},
cls: undefined,
minValue: me.minValue,
maxValue: me.maxValue,
increment: me.increment,
format: me.format,
maxHeight: me.pickerMaxHeight
}, me.listConfig);
picker = me.callParent();
me.store = picker.store;
return picker;
},
onItemClick: function(picker, record){
// The selection change events won't fire when clicking on the selected element. Detect it here.
var me = this,
selected = picker.getSelectionModel().getSelection();
if (selected.length > 0) {
selected = selected[0];
if (selected && Ext.Date.isEqual(record.get('date'), selected.get('date'))) {
me.collapse();
}
}
},
/**
* @private
* Handles a time being selected from the Time picker.
*/
onListSelectionChange: function(list, recordArray) {
var me = this,
record = recordArray[0],
val = record ? record.get('date') : null;
if (!me.ignoreSelection) {
me.skipSync = true;
me.setValue(val);
me.skipSync = false;
me.fireEvent('select', me, val);
me.picker.clearHighlight();
me.collapse();
me.inputEl.focus();
}
},
/**
* @private
* Synchronizes the selection in the picker to match the current value
*/
syncSelection: function() {
var me = this,
picker = me.picker,
toSelect,
selModel,
value,
data, d, dLen, rec;
if (picker && !me.skipSync) {
picker.clearHighlight();
value = me.getValue();
selModel = picker.getSelectionModel();
// Update the selection to match
me.ignoreSelection++;
if (value === null) {
selModel.deselectAll();
} else if(Ext.isDate(value)) {
// find value, select it
data = picker.store.data.items;
dLen = data.length;
for (d = 0; d < dLen; d++) {
rec = data[d];
if (Ext.Date.isEqual(rec.get('date'), value)) {
toSelect = rec;
break;
}
}
selModel.select(toSelect);
}
me.ignoreSelection--;
}
},
postBlur: function() {
var me = this;
me.callParent(arguments);
me.setRawValue(me.formatDate(me.getValue()));
},
setValue: function() {
// Store MUST be created for parent setValue to function
this.getPicker();
this.callParent(arguments);
},
getValue: function() {
return this.parseDate(this.callParent(arguments));
}
});
/**
* Internal utility class that provides default configuration for cell editing.
* @private
*/
Ext.define('Ext.grid.CellEditor', {
extend: 'Ext.Editor',
constructor: function(config) {
config = Ext.apply({}, config);
if (config.field) {
config.field.monitorTab = false;
}
this.callParent([config]);
},
/**
* @private
* Hide the grid cell text when editor is shown.
*
* There are 2 reasons this needs to happen:
*
* 1. checkbox editor does not take up enough space to hide the underlying text.
*
* 2. When columnLines are turned off in browsers that don't support text-overflow:
* ellipsis (firefox 6 and below and IE quirks), the text extends to the last pixel
* in the cell, however the right border of the cell editor is always positioned 1px
* offset from the edge of the cell (to give it the appearance of being "inside" the
* cell. This results in 1px of the underlying cell text being visible to the right
* of the cell editor if the text is not hidden.
*
* We can't just hide the entire cell, because then treecolumn's icons would be hidden
* as well. We also can't just set "color: transparent" to hide the text because it is
* not supported by IE8 and below. The only remaining solution is to remove the text
* from the text node and then add it back when the editor is hidden.
*/
onShow: function() {
var me = this,
innerCell = me.boundEl.first(),
lastChild,
textNode;
if (innerCell) {
lastChild = innerCell.dom.lastChild;
if(lastChild && lastChild.nodeType === 3) {
// if the cell has a text node, save a reference to it
textNode = me.cellTextNode = innerCell.dom.lastChild;
// save the cell text so we can add it back when we're done editing
me.cellTextValue = textNode.nodeValue;
// The text node has to have at least one character in it, or the cell borders
// in IE quirks mode will not show correctly, so let's use a non-breaking space.
textNode.nodeValue = '\u00a0';
}
}
me.callParent(arguments);
},
/**
* @private
* Show the grid cell text when the editor is hidden by adding the text back to the text node
*/
onHide: function() {
var me = this,
innerCell = me.boundEl.first();
if (innerCell && me.cellTextNode) {
me.cellTextNode.nodeValue = me.cellTextValue;
delete me.cellTextNode;
delete me.cellTextValue;
}
me.callParent(arguments);
},
/**
* @private
* Fix checkbox blur when it is clicked.
*/
afterRender: function() {
var me = this,
field = me.field;
me.callParent(arguments);
if (field.isXType('checkboxfield')) {
field.mon(field.inputEl, {
mousedown: me.onCheckBoxMouseDown,
click: me.onCheckBoxClick,
scope: me
});
}
},
/**
* @private
* Because when checkbox is clicked it loses focus completeEdit is bypassed.
*/
onCheckBoxMouseDown: function() {
this.completeEdit = Ext.emptyFn;
},
/**
* @private
* Restore checkbox focus and completeEdit method.
*/
onCheckBoxClick: function() {
delete this.completeEdit;
this.field.focus(false, 10);
},
/**
* @private
* Realigns the Editor to the grid cell, or to the text node in the grid inner cell
* if the inner cell contains multiple child nodes.
*/
realign: function(autoSize) {
var me = this,
boundEl = me.boundEl,
innerCell = boundEl.first(),
children = innerCell.dom.childNodes,
childCount = children.length,
offsets = Ext.Array.clone(me.offsets),
inputEl = me.field.inputEl,
lastChild, leftBound, rightBound, width;
// If the inner cell has more than one child, or the first child node is not a text node,
// let's assume this cell contains additional elements before the text node.
// This is the case for tree cells, but could also be used to accomodate grid cells that
// have a custom renderer that render, say, an icon followed by some text for example
// For now however, this support will only be used for trees.
if(me.isForTree && (childCount > 1 || (childCount === 1 && children[0].nodeType !== 3))) {
// get the inner cell's last child
lastChild = innerCell.last();
// calculate the left bound of the text node
leftBound = lastChild.getOffsetsTo(innerCell)[0] + lastChild.getWidth();
// calculate the right bound of the text node (this is assumed to be the right edge of
// the inner cell, since we are assuming the text node is always the last node in the
// inner cell)
rightBound = innerCell.getWidth();
// difference between right and left bound is the text node's allowed "width",
// this will be used as the width for the editor.
width = rightBound - leftBound;
// adjust width for column lines - this ensures the editor will be the same width
// regardless of columLines config
if(!me.editingPlugin.grid.columnLines) {
width --;
}
// set the editor's x offset to the left bound position
offsets[0] += leftBound;
me.addCls(Ext.baseCSSPrefix + 'grid-editor-on-text-node');
} else {
width = boundEl.getWidth() - 1;
}
if (autoSize === true) {
me.field.setWidth(width);
}
me.alignTo(boundEl, me.alignment, offsets);
},
onEditorTab: function(e){
var field = this.field;
if (field.onEditorTab) {
field.onEditorTab(e);
}
},
alignment: "tl-tl",
hideEl : false,
cls: Ext.baseCSSPrefix + "small-editor " + Ext.baseCSSPrefix + "grid-editor",
shim: false,
shadow: false
});
/**
* Component layout for grid column headers which have a title element at the top followed by content.
* @private
*/
Ext.define('Ext.grid.ColumnComponentLayout', {
extend: 'Ext.layout.component.Auto',
alias: 'layout.columncomponent',
type: 'columncomponent',
setWidthInDom: true,
getContentHeight : function(ownerContext) {
// If we are a group header return container layout's contentHeight, else default to AutoComponent's answer
return this.owner.isGroupHeader ? ownerContext.getProp('contentHeight') : this.callParent(arguments);
},
calculateOwnerHeightFromContentHeight: function (ownerContext, contentHeight) {
var result = this.callParent(arguments);
if (this.owner.isGroupHeader) {
result += this.owner.titleEl.dom.offsetHeight;
}
return result;
},
getContentWidth : function(ownerContext) {
// If we are a group header return container layout's contentHeight, else default to AutoComponent's answer
return this.owner.isGroupHeader ? ownerContext.getProp('contentWidth') : this.callParent(arguments);
},
calculateOwnerWidthFromContentWidth: function (ownerContext, contentWidth) {
return contentWidth + ownerContext.getPaddingInfo().width;
}
});
/**
* @private
*
* This class is used only by the grid's HeaderContainer docked child.
*
* It adds the ability to shrink the vertical size of the inner container element back if a grouped
* column header has all its child columns dragged out, and the whole HeaderContainer needs to shrink back down.
*
* Also, after every layout, after all headers have attained their 'stretchmax' height, it goes through and calls
* `setPadding` on the columns so that they lay out correctly.
*/
Ext.define('Ext.grid.ColumnLayout', {
extend: 'Ext.layout.container.HBox',
alias: 'layout.gridcolumn',
type : 'gridcolumn',
reserveOffset: false,
firstHeaderCls: Ext.baseCSSPrefix + 'column-header-first',
lastHeaderCls: Ext.baseCSSPrefix + 'column-header-last',
initLayout: function() {
this.grid = this.owner.up('[scrollerOwner]');
this.callParent();
},
// Collect the height of the table of data upon layout begin
beginLayout: function (ownerContext) {
var me = this,
grid = me.grid,
view = grid.view,
i = 0,
items = me.getVisibleItems(),
len = items.length,
item;
ownerContext.gridContext = ownerContext.context.getCmp(me.grid);
// If we are one side of a locking grid, then if we are on the "normal" side, we have to grab the normal view
// for use in determining whether to subtract scrollbar width from available width.
// The locked side does not have scrollbars, so it should not look at the view.
if (grid.lockable) {
if (me.owner.up('tablepanel') === view.normalGrid) {
view = view.normalGrid.getView();
} else {
view = null;
}
}
me.callParent(arguments);
// Unstretch child items before the layout which stretches them.
for (; i < len; i++) {
item = items[i];
item.removeCls([me.firstHeaderCls, me.lastHeaderCls]);
item.el.setStyle({
height: 'auto'
});
item.titleEl.setStyle({
height: 'auto',
paddingTop: '' // reset back to default padding of the style
});
}
// Add special first/last classes
if (len > 0) {
items[0].addCls(me.firstHeaderCls);
items[len - 1].addCls(me.lastHeaderCls);
}
// If the owner is the grid's HeaderContainer, and the UI displays old fashioned scrollbars and there is a rendered View with data in it,
// AND we are scrolling vertically:
// collect the View context to interrogate it for overflow, and possibly invalidate it if there is overflow
if (!me.owner.isHeader && Ext.getScrollbarSize().width && !grid.collapsed && view &&
view.table.dom && (view.autoScroll || view.overflowY)) {
ownerContext.viewContext = ownerContext.context.getCmp(view);
}
},
roundFlex: function(width) {
return Math.floor(width);
},
calculate: function(ownerContext) {
var me = this,
viewContext = ownerContext.viewContext,
tableHeight,
viewHeight;
me.callParent(arguments);
if (ownerContext.state.parallelDone) {
ownerContext.setProp('columnWidthsDone', true);
}
// If we have a viewContext (Only created if there is an existing within the view, AND we are scolling vertically AND scrollbars take up space)
// we are not already in the second pass, and we are not shrinkWrapping...
// Then we have to see if we know enough to determine whether there is vertical opverflow so that we can
// invalidate and loop back for the second pass with a narrower target width.
if (viewContext && !ownerContext.state.overflowAdjust.width && !ownerContext.gridContext.heightModel.shrinkWrap) {
tableHeight = viewContext.tableContext.getProp('height');
viewHeight = viewContext.getProp('height');
// Heights of both view and its table content have not both been published; we cannot complete
if (isNaN(tableHeight + viewHeight)) {
me.done = false;
}
// Heights have been published, and there is vertical overflow; invalidate with a width adjustment to allow for the scrollbar
else if (tableHeight >= viewHeight) {
ownerContext.gridContext.invalidate({
after: function() {
ownerContext.state.overflowAdjust = {
width: Ext.getScrollbarSize().width,
height: 0
};
}
});
}
}
},
completeLayout: function(ownerContext) {
var me = this,
owner = me.owner,
state = ownerContext.state,
needsInvalidate = false,
calculated = me.sizeModels.calculated,
childItems, len, i, childContext, item;
me.callParent(arguments);
// If we have not been through this already, and the owning Container is configured
// forceFit, is not a group column and and there is a valid width, then convert
// widths to flexes, and loop back.
if (!state.flexesCalculated && owner.forceFit && !owner.isHeader) {
childItems = ownerContext.childItems;
len = childItems.length;
for (i = 0; i < len; i++) {
childContext = childItems[i];
item = childContext.target;
// For forceFit, just use allocated width as the flex value, and the proportions
// will end up the same whatever HeaderContainer width they are being forced into.
if (item.width) {
item.flex = ownerContext.childItems[i].flex = item.width;
delete item.width;
childContext.widthModel = calculated;
needsInvalidate = true;
}
}
// Recalculate based upon all columns now being flexed instead of sized.
// Set flag, so that we do not do this infinitely
if (needsInvalidate) {
me.cacheFlexes(ownerContext);
ownerContext.invalidate({
state: {
flexesCalculated: true
}
});
}
}
},
finalizeLayout: function() {
var me = this,
i = 0,
items,
len,
itemsHeight,
owner = me.owner,
titleEl = owner.titleEl;
// Set up padding in items
items = me.getVisibleItems();
len = items.length;
// header container's items take up the whole height
itemsHeight = owner.el.getViewSize().height;
if (titleEl) {
// if owner is a grouped column with children, we need to subtract the titleEl's height
// to determine the remaining available height for the child items
itemsHeight -= titleEl.getHeight();
}
for (; i < len; i++) {
items[i].setPadding(itemsHeight);
}
},
// FIX: when flexing we actually don't have enough space as we would
// typically because of the scrollOffset on the GridView, must reserve this
publishInnerCtSize: function(ownerContext) {
var me = this,
size = ownerContext.state.boxPlan.targetSize,
cw = ownerContext.peek('contentWidth'),
view;
// InnerCt MUST stretch to accommodate all columns so that left/right scrolling is enabled in the header container.
if ((cw != null) && !me.owner.isHeader) {
size.width = cw;
// innerCt must also encompass any vertical scrollbar width if there may be one
view = me.owner.ownerCt.view;
if (view.autoScroll || view.overflowY) {
size.width += Ext.getScrollbarSize().width;
}
}
return me.callParent(arguments);
}
});
/**
* This class is used internally to provide a single interface when using
* a locking grid. Internally, the locking grid creates two separate grids,
* so this class is used to map calls appropriately.
* @private
*/
Ext.define('Ext.grid.LockingView', {
mixins: {
observable: 'Ext.util.Observable'
},
eventRelayRe: /^(beforeitem|beforecontainer|item|container|cell)/,
constructor: function(config){
var me = this,
eventNames = [],
eventRe = me.eventRelayRe,
locked = config.locked.getView(),
normal = config.normal.getView(),
events,
event;
Ext.apply(me, {
lockedView: locked,
normalView: normal,
lockedGrid: config.locked,
normalGrid: config.normal,
panel: config.panel
});
me.mixins.observable.constructor.call(me, config);
// relay events
events = locked.events;
for (event in events) {
if (events.hasOwnProperty(event) && eventRe.test(event)) {
eventNames.push(event);
}
}
me.relayEvents(locked, eventNames);
me.relayEvents(normal, eventNames);
normal.on({
scope: me,
itemmouseleave: me.onItemMouseLeave,
itemmouseenter: me.onItemMouseEnter
});
locked.on({
scope: me,
itemmouseleave: me.onItemMouseLeave,
itemmouseenter: me.onItemMouseEnter
});
},
getGridColumns: function() {
var cols = this.lockedGrid.headerCt.getGridColumns();
return cols.concat(this.normalGrid.headerCt.getGridColumns());
},
getEl: function(column){
return this.getViewForColumn(column).getEl();
},
getViewForColumn: function(column) {
var view = this.lockedView,
inLocked;
view.headerCt.cascade(function(col){
if (col === column) {
inLocked = true;
return false;
}
});
return inLocked ? view : this.normalView;
},
onItemMouseEnter: function(view, record){
var me = this,
locked = me.lockedView,
other = me.normalView,
item;
if (view.trackOver) {
if (view !== locked) {
other = locked;
}
item = other.getNode(record);
other.highlightItem(item);
}
},
onItemMouseLeave: function(view, record){
var me = this,
locked = me.lockedView,
other = me.normalView;
if (view.trackOver) {
if (view !== locked) {
other = locked;
}
other.clearHighlight();
}
},
relayFn: function(name, args){
args = args || [];
var view = this.lockedView;
view[name].apply(view, args || []);
view = this.normalView;
view[name].apply(view, args || []);
},
getSelectionModel: function(){
return this.panel.getSelectionModel();
},
getStore: function(){
return this.panel.store;
},
getNode: function(nodeInfo){
// default to the normal view
return this.normalView.getNode(nodeInfo);
},
getCell: function(record, column){
var view = this.getViewForColumn(column),
row;
row = view.getNode(record);
return Ext.fly(row).down(column.getCellSelector());
},
getRecord: function(node){
var result = this.lockedView.getRecord(node);
if (!node) {
result = this.normalView.getRecord(node);
}
return result;
},
addElListener: function(eventName, fn, scope){
this.relayFn('addElListener', arguments);
},
refreshNode: function(){
this.relayFn('refreshNode', arguments);
},
refresh: function(){
this.relayFn('refresh', arguments);
},
bindStore: function(){
this.relayFn('bindStore', arguments);
},
addRowCls: function(){
this.relayFn('addRowCls', arguments);
},
removeRowCls: function(){
this.relayFn('removeRowCls', arguments);
}
});
/**
* Component layout for {@link Ext.view.Table}
* @private
*
*/
Ext.define('Ext.view.TableLayout', {
extend: 'Ext.layout.component.Auto',
alias: ['layout.tableview'],
type: 'tableview',
beginLayout: function(ownerContext) {
var me = this;
me.callParent(arguments);
// Grab ContextItem for the driving HeaderContainer and the table only if their is a table to size
if (me.owner.table.dom) {
ownerContext.tableContext = ownerContext.getEl(me.owner.table);
// Grab a ContextItem for the header container
ownerContext.headerContext = ownerContext.context.getCmp(me.headerCt);
}
},
calculate: function(ownerContext) {
var me = this;
me.callParent(arguments);
if (ownerContext.tableContext) {
if (ownerContext.state.columnWidthsSynced) {
if (ownerContext.hasProp('columnWidthsFlushed')) {
ownerContext.tableContext.setHeight(ownerContext.tableContext.el.dom.offsetHeight, false);
} else {
me.done = false;
}
} else {
if (ownerContext.headerContext.hasProp('columnWidthsDone')) {
ownerContext.context.queueFlush(me);
ownerContext.state.columnWidthsSynced = true;
}
// Either our base class (Auto) needs to measureContentHeight
// if we are shrinkWrapHeight OR we need to measure the table
// element height if we are not shrinkWrapHeight
me.done = false;
}
}
},
measureContentHeight: function(ownerContext) {
// Only able to produce a valid contentHeight if we have flushed all column widths to the table (or there's no table at all).
if (!ownerContext.headerContext || ownerContext.hasProp('columnWidthsFlushed')) {
return this.callParent(arguments);
}
},
flush: function() {
var me = this,
context = me.ownerContext.context,
columns = me.headerCt.getGridColumns(),
i = 0, len = columns.length,
el = me.owner.el,
tableWidth = 0,
colWidth;
// So that the setProp can trigger this layout.
context.currentLayout = me;
// Set column width corresponding to each header
for (i = 0; i < len; i++) {
colWidth = columns[i].hidden ? 0 : context.getCmp(columns[i]).props.width;
tableWidth += colWidth;
// Grab the col and set the width.
// CSS class is generated in TableChunker.
// Select composites because there may be several chunks.
el.select(me.getColumnSelector(columns[i])).setWidth(colWidth);
}
el.select('table.' + Ext.baseCSSPrefix + 'grid-table-resizer').setWidth(tableWidth);
// Now we can measure contentHeight if necessary (if we are height shrinkwrapped)
me.ownerContext.setProp('columnWidthsFlushed', true);
},
finishedLayout: function(){
var me = this,
first;
me.callParent(arguments);
// In FF, in some cases during a resize or column hide/show, the
' + html + '
';
}
}
html = me.cleanHtml(html);
if (me.fireEvent('beforesync', me, html) !== false) {
if (me.textareaEl.dom.value != html) {
me.textareaEl.dom.value = html;
changed = true;
}
me.fireEvent('sync', me, html);
if (changed) {
// we have to guard this to avoid infinite recursion because getValue
// calls this method...
me.checkChange();
}
}
}
},
//docs inherit from Field
getValue : function() {
var me = this,
value;
if (!me.sourceEditMode) {
me.syncValue();
}
value = me.rendered ? me.textareaEl.dom.value : me.value;
me.value = value;
return value;
},
/**
* Pushes the value of the textarea into the iframe editor.
* @protected
*/
pushValue: function() {
var me = this,
v;
if(me.initialized){
v = me.textareaEl.dom.value || '';
if (!me.activated && v.length < 1) {
v = me.defaultValue;
}
if (me.fireEvent('beforepush', me, v) !== false) {
me.getEditorBody().innerHTML = v;
if (Ext.isGecko) {
// Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8
me.setDesignMode(false); //toggle off first
me.setDesignMode(true);
}
me.fireEvent('push', me, v);
}
}
},
// private
deferFocus : function(){
this.focus(false, true);
},
getFocusEl: function() {
var me = this,
win = me.win;
return win && !me.sourceEditMode ? win : me.textareaEl;
},
// private
initEditor : function(){
//Destroying the component during/before initEditor can cause issues.
try {
var me = this,
dbody = me.getEditorBody(),
ss = me.textareaEl.getStyles('font-size', 'font-family', 'background-image', 'background-repeat', 'background-color', 'color'),
doc,
fn;
ss['background-attachment'] = 'fixed'; // w3c
dbody.bgProperties = 'fixed'; // ie
Ext.DomHelper.applyStyles(dbody, ss);
doc = me.getDoc();
if (doc) {
try {
Ext.EventManager.removeAll(doc);
} catch(e) {}
}
/*
* We need to use createDelegate here, because when using buffer, the delayed task is added
* as a property to the function. When the listener is removed, the task is deleted from the function.
* Since onEditorEvent is shared on the prototype, if we have multiple html editors, the first time one of the editors
* is destroyed, it causes the fn to be deleted from the prototype, which causes errors. Essentially, we're just anonymizing the function.
*/
fn = Ext.Function.bind(me.onEditorEvent, me);
Ext.EventManager.on(doc, {
mousedown: fn,
dblclick: fn,
click: fn,
keyup: fn,
buffer:100
});
// These events need to be relayed from the inner document (where they stop
// bubbling) up to the outer document. This has to be done at the DOM level so
// the event reaches listeners on elements like the document body. The effected
// mechanisms that depend on this bubbling behavior are listed to the right
// of the event.
fn = me.onRelayedEvent;
Ext.EventManager.on(doc, {
mousedown: fn, // menu dismisal (MenuManager) and Window onMouseDown (toFront)
mousemove: fn, // window resize drag detection
mouseup: fn, // window resize termination
click: fn, // not sure, but just to be safe
dblclick: fn, // not sure again
scope: me
});
if (Ext.isGecko) {
Ext.EventManager.on(doc, 'keypress', me.applyCommand, me);
}
if (me.fixKeys) {
Ext.EventManager.on(doc, 'keydown', me.fixKeys, me);
}
// We need to be sure we remove all our events from the iframe on unload or we're going to LEAK!
Ext.EventManager.on(window, 'unload', me.beforeDestroy, me);
doc.editorInitialized = true;
me.initialized = true;
me.pushValue();
me.setReadOnly(me.readOnly);
me.fireEvent('initialize', me);
} catch(ex) {
// ignore (why?)
}
},
// private
beforeDestroy : function(){
var me = this,
monitorTask = me.monitorTask,
doc, prop;
if (monitorTask) {
Ext.TaskManager.stop(monitorTask);
}
if (me.rendered) {
try {
doc = me.getDoc();
if (doc) {
// removeAll() doesn't currently know how to handle iframe document,
// so for now we have to wrap it in an Ext.Element using Ext.fly,
// or else IE6/7 will leak big time when the page is refreshed.
// TODO: this may not be needed once we find a more permanent fix.
// see EXTJSIV-5891.
Ext.EventManager.removeAll(Ext.fly(doc));
for (prop in doc) {
if (doc.hasOwnProperty && doc.hasOwnProperty(prop)) {
delete doc[prop];
}
}
}
} catch(e) {
// ignore (why?)
}
Ext.destroyMembers(me, 'toolbar', 'iframeEl', 'textareaEl');
}
me.callParent();
},
// private
onRelayedEvent: function (event) {
// relay event from the iframe's document to the document that owns the iframe...
var iframeEl = this.iframeEl,
iframeXY = iframeEl.getXY(),
eventXY = event.getXY();
// the event from the inner document has XY relative to that document's origin,
// so adjust it to use the origin of the iframe in the outer document:
event.xy = [iframeXY[0] + eventXY[0], iframeXY[1] + eventXY[1]];
event.injectEvent(iframeEl); // blame the iframe for the event...
event.xy = eventXY; // restore the original XY (just for safety)
},
// private
onFirstFocus : function(){
var me = this,
selection, range;
me.activated = true;
me.disableItems(me.readOnly);
if (Ext.isGecko) { // prevent silly gecko errors
me.win.focus();
selection = me.win.getSelection();
if (!selection.focusNode || selection.focusNode.nodeType !== 3) {
range = selection.getRangeAt(0);
range.selectNodeContents(me.getEditorBody());
range.collapse(true);
me.deferFocus();
}
try {
me.execCmd('useCSS', true);
me.execCmd('styleWithCSS', false);
} catch(e) {
// ignore (why?)
}
}
me.fireEvent('activate', me);
},
// private
adjustFont: function(btn) {
var adjust = btn.getItemId() === 'increasefontsize' ? 1 : -1,
size = this.getDoc().queryCommandValue('FontSize') || '2',
isPxSize = Ext.isString(size) && size.indexOf('px') !== -1,
isSafari;
size = parseInt(size, 10);
if (isPxSize) {
// Safari 3 values
// 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px
if (size <= 10) {
size = 1 + adjust;
}
else if (size <= 13) {
size = 2 + adjust;
}
else if (size <= 16) {
size = 3 + adjust;
}
else if (size <= 18) {
size = 4 + adjust;
}
else if (size <= 24) {
size = 5 + adjust;
}
else {
size = 6 + adjust;
}
size = Ext.Number.constrain(size, 1, 6);
} else {
isSafari = Ext.isSafari;
if (isSafari) { // safari
adjust *= 2;
}
size = Math.max(1, size + adjust) + (isSafari ? 'px' : 0);
}
this.execCmd('FontSize', size);
},
// private
onEditorEvent: function(e) {
this.updateToolbar();
},
/**
* Triggers a toolbar update by reading the markup state of the current selection in the editor.
* @protected
*/
updateToolbar: function() {
var me = this,
btns, doc, name, fontSelect;
if (me.readOnly) {
return;
}
if (!me.activated) {
me.onFirstFocus();
return;
}
btns = me.getToolbar().items.map;
doc = me.getDoc();
if (me.enableFont && !Ext.isSafari2) {
name = (doc.queryCommandValue('FontName') || me.defaultFont).toLowerCase();
fontSelect = me.fontSelect.dom;
if (name !== fontSelect.value) {
fontSelect.value = name;
}
}
function updateButtons() {
for (var i = 0, l = arguments.length, name; i < l; i++) {
name = arguments[i];
btns[name].toggle(doc.queryCommandState(name));
}
}
if(me.enableFormat){
updateButtons('bold', 'italic', 'underline');
}
if(me.enableAlignments){
updateButtons('justifyleft', 'justifycenter', 'justifyright');
}
if(!Ext.isSafari2 && me.enableLists){
updateButtons('insertorderedlist', 'insertunorderedlist');
}
Ext.menu.Manager.hideAll();
me.syncValue();
},
// private
relayBtnCmd: function(btn) {
this.relayCmd(btn.getItemId());
},
/**
* Executes a Midas editor command on the editor document and performs necessary focus and toolbar updates.
* **This should only be called after the editor is initialized.**
* @param {String} cmd The Midas command
* @param {String/Boolean} [value=null] The value to pass to the command
*/
relayCmd: function(cmd, value) {
Ext.defer(function() {
var me = this;
me.focus();
me.execCmd(cmd, value);
me.updateToolbar();
}, 10, this);
},
/**
* Executes a Midas editor command directly on the editor document. For visual commands, you should use
* {@link #relayCmd} instead. **This should only be called after the editor is initialized.**
* @param {String} cmd The Midas command
* @param {String/Boolean} [value=null] The value to pass to the command
*/
execCmd : function(cmd, value){
var me = this,
doc = me.getDoc(),
undef;
doc.execCommand(cmd, false, value === undef ? null : value);
me.syncValue();
},
// private
applyCommand : function(e){
if (e.ctrlKey) {
var me = this,
c = e.getCharCode(), cmd;
if (c > 0) {
c = String.fromCharCode(c);
switch (c) {
case 'b':
cmd = 'bold';
break;
case 'i':
cmd = 'italic';
break;
case 'u':
cmd = 'underline';
break;
}
if (cmd) {
me.win.focus();
me.execCmd(cmd);
me.deferFocus();
e.preventDefault();
}
}
}
},
/**
* Inserts the passed text at the current cursor position.
* Note: the editor must be initialized and activated to insert text.
* @param {String} text
*/
insertAtCursor : function(text){
var me = this,
range;
if (me.activated) {
me.win.focus();
if (Ext.isIE) {
range = me.getDoc().selection.createRange();
if (range) {
range.pasteHTML(text);
me.syncValue();
me.deferFocus();
}
}else{
me.execCmd('InsertHTML', text);
me.deferFocus();
}
}
},
// private
fixKeys: (function() { // load time branching for fastest keydown performance
if (Ext.isIE) {
return function(e){
var me = this,
k = e.getKey(),
doc = me.getDoc(),
readOnly = me.readOnly,
range, target;
if (k === e.TAB) {
e.stopEvent();
if (!readOnly) {
range = doc.selection.createRange();
if(range){
range.collapse(true);
range.pasteHTML(' ');
me.deferFocus();
}
}
}
else if (k === e.ENTER) {
if (!readOnly) {
range = doc.selection.createRange();
if (range) {
target = range.parentElement();
if(!target || target.tagName.toLowerCase() !== 'li'){
e.stopEvent();
range.pasteHTML(''); range.collapse(false); range.select(); } } } } }; } if (Ext.isOpera) { return function(e){ var me = this; if (e.getKey() === e.TAB) { e.stopEvent(); if (!me.readOnly) { me.win.focus(); me.execCmd('InsertHTML',' '); me.deferFocus(); } } }; } if (Ext.isWebKit) { return function(e){ var me = this, k = e.getKey(), readOnly = me.readOnly; if (k === e.TAB) { e.stopEvent(); if (!readOnly) { me.execCmd('InsertText','\t'); me.deferFocus(); } } else if (k === e.ENTER) { e.stopEvent(); if (!readOnly) { me.execCmd('InsertHtml','
'); me.deferFocus(); } } }; } return null; // not needed, so null }()), /** * Returns the editor's toolbar. **This is only available after the editor has been rendered.** * @return {Ext.toolbar.Toolbar} */ getToolbar : function(){ return this.toolbar; }, //
| cells in // the grid won't respond to the new width set in the | at the top. So we
// force a reflow of the table which seems to correct it. Related to EXTJSIV-6410
if (Ext.isGecko) {
first = me.headerCt.getGridColumns()[0];
if (first) {
first = me.owner.el.down(me.getColumnSelector(first));
if (first) {
first.setStyle('display', 'none');
first.dom.scrollWidth;
first.setStyle('display', '');
}
}
}
},
getColumnSelector: function(column) {
return 'th.' + Ext.baseCSSPrefix + 'grid-col-resizer-' + column.id;
}
});
/**
* This class encapsulates the user interface for a tabular data set.
* It acts as a centralized manager for controlling the various interface
* elements of the view. This includes handling events, such as row and cell
* level based DOM events. It also reacts to events from the underlying {@link Ext.selection.Model}
* to provide visual feedback to the user.
*
* This class does not provide ways to manipulate the underlying data of the configured
* {@link Ext.data.Store}.
*
* This is the base class for both {@link Ext.grid.View} and {@link Ext.tree.View} and is not
* to be used directly.
*/
Ext.define('Ext.view.Table', {
extend: 'Ext.view.View',
alias: 'widget.tableview',
uses: [
'Ext.view.TableLayout',
'Ext.view.TableChunker',
'Ext.util.DelayedTask',
'Ext.util.MixedCollection'
],
componentLayout: 'tableview',
baseCls: Ext.baseCSSPrefix + 'grid-view',
// row
itemSelector: 'tr.' + Ext.baseCSSPrefix + 'grid-row',
// cell
cellSelector: 'td.' + Ext.baseCSSPrefix + 'grid-cell',
// keep a separate rowSelector, since we may need to select the actual row elements
rowSelector: 'tr.' + Ext.baseCSSPrefix + 'grid-row',
/**
* @cfg {String} [firstCls='x-grid-cell-first']
* A CSS class to add to the *first* cell in every row to enable special styling for the first column.
* If no styling is needed on the first column, this may be configured as `null`.
*/
firstCls: Ext.baseCSSPrefix + 'grid-cell-first',
/**
* @cfg {String} [lastCls='x-grid-cell-last']
* A CSS class to add to the *last* cell in every row to enable special styling for the last column.
* If no styling is needed on the last column, this may be configured as `null`.
*/
lastCls: Ext.baseCSSPrefix + 'grid-cell-last',
headerRowSelector: 'tr.' + Ext.baseCSSPrefix + 'grid-header-row',
selectedItemCls: Ext.baseCSSPrefix + 'grid-row-selected',
selectedCellCls: Ext.baseCSSPrefix + 'grid-cell-selected',
focusedItemCls: Ext.baseCSSPrefix + 'grid-row-focused',
overItemCls: Ext.baseCSSPrefix + 'grid-row-over',
altRowCls: Ext.baseCSSPrefix + 'grid-row-alt',
rowClsRe: new RegExp('(?:^|\\s*)' + Ext.baseCSSPrefix + 'grid-row-(first|last|alt)(?:\\s+|$)', 'g'),
cellRe: new RegExp(Ext.baseCSSPrefix + 'grid-cell-([^\\s]+) ', ''),
// cfg docs inherited
trackOver: true,
/**
* Override this function to apply custom CSS classes to rows during rendering. This function should return the
* CSS class name (or empty string '' for none) that will be added to the row's wrapping div. To apply multiple
* class names, simply return them space-delimited within the string (e.g. 'my-class another-class').
* Example usage:
*
* viewConfig: {
* getRowClass: function(record, rowIndex, rowParams, store){
* return record.get("valid") ? "row-valid" : "row-error";
* }
* }
*
* @param {Ext.data.Model} record The record corresponding to the current row.
* @param {Number} index The row index.
* @param {Object} rowParams **DEPRECATED.** For row body use the
* {@link Ext.grid.feature.RowBody#getAdditionalData getAdditionalData} method of the rowbody feature.
* @param {Ext.data.Store} store The store this grid is bound to
* @return {String} a CSS class name to add to the row.
* @method
*/
getRowClass: null,
/**
* @cfg {Boolean} stripeRows
* True to stripe the rows.
*
* This causes the CSS class **`x-grid-row-alt`** to be added to alternate rows of
* the grid. A default CSS rule is provided which sets a background color, but you can override this
* with a rule which either overrides the **background-color** style using the `!important`
* modifier, or which uses a CSS selector of higher specificity.
*/
stripeRows: true,
/**
* @cfg {Boolean} markDirty
* True to show the dirty cell indicator when a cell has been modified.
*/
markDirty : true,
/**
* @cfg {Boolean} enableTextSelection
* True to enable text selections.
*/
/**
* @private
* Simple initial tpl for TableView just to satisfy the validation within AbstractView.initComponent.
*/
initialTpl: '',
initComponent: function() {
var me = this,
scroll = me.scroll;
/**
* @private
* @property {Ext.dom.AbstractElement.Fly} table
* A flyweight Ext.Element which encapsulates a reference to the transient `
Welcome to the Wizard!Step 1 of 3 ' * },{ * id: 'card-1', * html: 'Step 2 of 3 ' * },{ * id: 'card-2', * html: 'Congratulations!Step 3 of 3 - Complete ' * }], * renderTo: Ext.getBody() * }); */ Ext.define('Ext.layout.container.Card', { /* Begin Definitions */ extend: 'Ext.layout.container.Fit', alternateClassName: 'Ext.layout.CardLayout', alias: 'layout.card', /* End Definitions */ type: 'card', hideInactive: true, /** * @cfg {Boolean} deferredRender * True to render each contained item at the time it becomes active, false to render all contained items * as soon as the layout is rendered (defaults to false). If there is a significant amount of content or * a lot of heavy controls being rendered into panels that are not displayed by default, setting this to * true might improve performance. */ deferredRender : false, getRenderTree: function () { var me = this, activeItem = me.getActiveItem(); if (activeItem) { // If they veto the activate, we have no active item if (activeItem.hasListeners.beforeactivate && activeItem.fireEvent('beforeactivate', activeItem) === false) { // We must null our activeItem reference, AND the one in our owning Container. // Because upon layout invalidation, renderChildren will use this.getActiveItem which // uses this.activeItem || this.owner.activeItem activeItem = me.activeItem = me.owner.activeItem = null; } // Item is to be the active one. Fire event after it is first layed out else if (activeItem.hasListeners.activate) { activeItem.on({ boxready: function() { activeItem.fireEvent('activate', activeItem); }, single: true }); } if (me.deferredRender) { if (activeItem) { return me.getItemsRenderTree([activeItem]); } } else { return me.callParent(arguments); } } }, renderChildren: function () { var me = this, active = me.getActiveItem(); if (!me.deferredRender) { me.callParent(); } else if (active) { // ensure the active item is configured for the layout me.renderItems([active], me.getRenderTarget()); } }, isValidParent : function(item, target, position) { // Note: Card layout does not care about order within the target because only one is ever visible. // We only care whether the item is a direct child of the target. var itemEl = item.el ? item.el.dom : Ext.getDom(item); return (itemEl && itemEl.parentNode === (target.dom || target)) || false; }, /** * Return the active (visible) component in the layout. * @returns {Ext.Component} */ getActiveItem: function() { var me = this, // Ensure the calculated result references a Component result = me.parseActiveItem(me.activeItem || (me.owner && me.owner.activeItem)); // Sanitize the result in case the active item is no longer there. if (result && me.owner.items.indexOf(result) != -1) { me.activeItem = result; } else { me.activeItem = null; } return me.activeItem; }, // @private parseActiveItem: function(item) { if (item && item.isComponent) { return item; } else if (typeof item == 'number' || item === undefined) { return this.getLayoutItems()[item || 0]; } else { return this.owner.getComponent(item); } }, // @private. Called before both dynamic render, and bulk render. // Ensure that the active item starts visible, and inactive ones start invisible configureItem: function(item) { if (item === this.getActiveItem()) { item.hidden = false; } else { item.hidden = true; } this.callParent(arguments); }, onRemove: function(component) { var me = this; if (component === me.activeItem) { me.activeItem = null; } }, // @private getAnimation: function(newCard, owner) { var newAnim = (newCard || {}).cardSwitchAnimation; if (newAnim === false) { return false; } return newAnim || owner.cardSwitchAnimation; }, /** * Return the active (visible) component in the layout to the next card * @returns {Ext.Component} The next component or false. */ getNext: function() { //NOTE: Removed the JSDoc for this function's arguments because it is not actually supported in 4.0. This //should come back in 4.1 var wrap = arguments[0], items = this.getLayoutItems(), index = Ext.Array.indexOf(items, this.activeItem); return items[index + 1] || (wrap ? items[0] : false); }, /** * Sets the active (visible) component in the layout to the next card * @return {Ext.Component} the activated component or false when nothing activated. */ next: function() { //NOTE: Removed the JSDoc for this function's arguments because it is not actually supported in 4.0. This //should come back in 4.1 var anim = arguments[0], wrap = arguments[1]; return this.setActiveItem(this.getNext(wrap), anim); }, /** * Return the active (visible) component in the layout to the previous card * @returns {Ext.Component} The previous component or false. */ getPrev: function() { //NOTE: Removed the JSDoc for this function's arguments because it is not actually supported in 4.0. This //should come back in 4.1 var wrap = arguments[0], items = this.getLayoutItems(), index = Ext.Array.indexOf(items, this.activeItem); return items[index - 1] || (wrap ? items[items.length - 1] : false); }, /** * Sets the active (visible) component in the layout to the previous card * @return {Ext.Component} the activated component or false when nothing activated. */ prev: function() { //NOTE: Removed the JSDoc for this function's arguments because it is not actually supported in 4.0. This //should come back in 4.1 var anim = arguments[0], wrap = arguments[1]; return this.setActiveItem(this.getPrev(wrap), anim); }, /** * Makes the given card active. * * var card1 = Ext.create('Ext.panel.Panel', {itemId: 'card-1'}); * var card2 = Ext.create('Ext.panel.Panel', {itemId: 'card-2'}); * var panel = Ext.create('Ext.panel.Panel', { * layout: 'card', * activeItem: 0, * items: [card1, card2] * }); * // These are all equivalent * panel.getLayout().setActiveItem(card2); * panel.getLayout().setActiveItem('card-2'); * panel.getLayout().setActiveItem(1); * * @param {Ext.Component/Number/String} newCard The component, component {@link Ext.Component#id id}, * {@link Ext.Component#itemId itemId}, or index of component. * @return {Ext.Component} the activated component or false when nothing activated. * False is returned also when trying to activate an already active card. */ setActiveItem: function(newCard) { var me = this, owner = me.owner, oldCard = me.activeItem, rendered = owner.rendered, newIndex; newCard = me.parseActiveItem(newCard); newIndex = owner.items.indexOf(newCard); // If the card is not a child of the owner, then add it. // Without doing a layout! if (newIndex == -1) { newIndex = owner.items.items.length; Ext.suspendLayouts(); newCard = owner.add(newCard); Ext.resumeLayouts(); } // Is this a valid, different card? if (newCard && oldCard != newCard) { // Fire the beforeactivate and beforedeactivate events on the cards if (newCard.fireEvent('beforeactivate', newCard, oldCard) === false) { return false; } if (oldCard && oldCard.fireEvent('beforedeactivate', oldCard, newCard) === false) { return false; } if (rendered) { Ext.suspendLayouts(); // If the card has not been rendered yet, now is the time to do so. if (!newCard.rendered) { me.renderItem(newCard, me.getRenderTarget(), owner.items.length); } if (oldCard) { if (me.hideInactive) { oldCard.hide(); oldCard.hiddenByLayout = true; } oldCard.fireEvent('deactivate', oldCard, newCard); } // Make sure the new card is shown if (newCard.hidden) { newCard.show(); } // Layout needs activeItem to be correct, so set it if the show has not been vetoed if (!newCard.hidden) { me.activeItem = newCard; } Ext.resumeLayouts(true); } else { me.activeItem = newCard; } newCard.fireEvent('activate', newCard, oldCard); return me.activeItem; } return false; } }); /** * This is the layout style of choice for creating structural layouts in a multi-column format where the width of each * column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content. This * class is intended to be extended or created via the layout:'column' {@link Ext.container.Container#layout} config, * and should generally not need to be created directly via the new keyword. * * ColumnLayout does not have any direct config options (other than inherited ones), but it does support a specific * config property of `columnWidth` that can be included in the config of any panel added to it. The layout will use * the columnWidth (if present) or width of each panel during layout to determine how to size each panel. If width or * columnWidth is not specified for a given panel, its width will default to the panel's width (or auto). * * The width property is always evaluated as pixels, and must be a number greater than or equal to 1. The columnWidth * property is always evaluated as a percentage, and must be a decimal value greater than 0 and less than 1 (e.g., .25). * * The basic rules for specifying column widths are pretty simple. The logic makes two passes through the set of * contained panels. During the first layout pass, all panels that either have a fixed width or none specified (auto) * are skipped, but their widths are subtracted from the overall container width. * * During the second pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages * based on the total **remaining** container width. In other words, percentage width panels are designed to fill * the space left over by all the fixed-width and/or auto-width panels. Because of this, while you can specify any * number of columns with different percentages, the columnWidths must always add up to 1 (or 100%) when added * together, otherwise your layout may not render as expected. * * @example * // All columns are percentages -- they must add up to 1 * Ext.create('Ext.panel.Panel', { * title: 'Column Layout - Percentage Only', * width: 350, * height: 250, * layout:'column', * items: [{ * title: 'Column 1', * columnWidth: 0.25 * },{ * title: 'Column 2', * columnWidth: 0.55 * },{ * title: 'Column 3', * columnWidth: 0.20 * }], * renderTo: Ext.getBody() * }); * * // Mix of width and columnWidth -- all columnWidth values must add up * // to 1. The first column will take up exactly 120px, and the last two * // columns will fill the remaining container width. * * Ext.create('Ext.Panel', { * title: 'Column Layout - Mixed', * width: 350, * height: 250, * layout:'column', * items: [{ * title: 'Column 1', * width: 120 * },{ * title: 'Column 2', * columnWidth: 0.7 * },{ * title: 'Column 3', * columnWidth: 0.3 * }], * renderTo: Ext.getBody() * }); */ Ext.define('Ext.layout.container.Column', { extend: 'Ext.layout.container.Container', alias: ['layout.column'], alternateClassName: 'Ext.layout.ColumnLayout', type: 'column', itemCls: Ext.baseCSSPrefix + 'column', targetCls: Ext.baseCSSPrefix + 'column-layout-ct', // Columns with a columnWidth have their width managed. columnWidthSizePolicy: { setsWidth: 1, setsHeight: 0 }, childEls: [ 'innerCt' ], manageOverflow: 2, renderTpl: [ '',
'{%this.renderBody(out,values)%}',
'',
' ',
'{%this.renderPadder(out,values)%}'
],
getItemSizePolicy: function (item) {
if (item.columnWidth) {
return this.columnWidthSizePolicy;
}
return this.autoSizePolicy;
},
beginLayout: function() {
this.callParent(arguments);
this.innerCt.dom.style.width = '';
},
calculate: function (ownerContext) {
var me = this,
containerSize = me.getContainerSize(ownerContext),
state = ownerContext.state;
if (state.calculatedColumns || (state.calculatedColumns = me.calculateColumns(ownerContext))) {
if (me.calculateHeights(ownerContext)) {
me.calculateOverflow(ownerContext, containerSize);
return;
}
}
me.done = false;
},
calculateColumns: function (ownerContext) {
var me = this,
containerSize = me.getContainerSize(ownerContext),
innerCtContext = ownerContext.getEl('innerCt', me),
items = ownerContext.childItems,
len = items.length,
contentWidth = 0,
blocked, availableWidth, i, itemContext, itemMarginWidth, itemWidth;
// Can never decide upon necessity of vertical scrollbar (and therefore, narrower
// content width) until the component layout has published a height for the target
// element.
if (!ownerContext.heightModel.shrinkWrap && !ownerContext.targetContext.hasProp('height')) {
return false;
}
// No parallel measurement, cannot lay out boxes.
if (!containerSize.gotWidth) { //\\ TODO: Deal with target padding width
ownerContext.targetContext.block(me, 'width');
blocked = true;
} else {
availableWidth = containerSize.width;
innerCtContext.setWidth(availableWidth);
}
// we need the widths of the columns we don't manage to proceed so we block on them
// if they are not ready...
for (i = 0; i < len; ++i) {
itemContext = items[i];
// this is needed below for non-calculated columns, but is also needed in the
// next loop for calculated columns... this way we only call getMarginInfo in
// this loop and use the marginInfo property in the next...
itemMarginWidth = itemContext.getMarginInfo().width;
if (!itemContext.widthModel.calculated) {
itemWidth = itemContext.getProp('width');
if (typeof itemWidth != 'number') {
itemContext.block(me, 'width');
blocked = true;
}
contentWidth += itemWidth + itemMarginWidth;
}
}
if (!blocked) {
availableWidth = (availableWidth < contentWidth) ? 0 : availableWidth - contentWidth;
for (i = 0; i < len; ++i) {
itemContext = items[i];
if (itemContext.widthModel.calculated) {
itemMarginWidth = itemContext.marginInfo.width; // always set by above loop
itemWidth = itemContext.target.columnWidth;
itemWidth = Math.floor(itemWidth * availableWidth) - itemMarginWidth;
itemWidth = itemContext.setWidth(itemWidth); // constrains to min/maxWidth
contentWidth += itemWidth + itemMarginWidth;
}
}
ownerContext.setContentWidth(contentWidth);
}
// we registered all the values that block this calculation, so abort now if blocked...
return !blocked;
},
calculateHeights: function (ownerContext) {
var me = this,
items = ownerContext.childItems,
len = items.length,
blocked, i, itemContext;
// in order for innerCt to have the proper height, all the items must have height
// correct in the DOM...
blocked = false;
for (i = 0; i < len; ++i) {
itemContext = items[i];
if (!itemContext.hasDomProp('height')) {
itemContext.domBlock(me, 'height');
blocked = true;
}
}
if (!blocked) {
ownerContext.setContentHeight(me.innerCt.getHeight() + ownerContext.targetContext.getPaddingInfo().height);
}
return !blocked;
},
finishedLayout: function (ownerContext) {
var bc = ownerContext.bodyContext;
// Owner may not have a body - this seems to only be needed for Panels.
if (bc && (Ext.isIE6 || Ext.isIE7 || Ext.isIEQuirks)) {
// Fix for https://sencha.jira.com/browse/EXTJSIV-4979
bc.el.repaint();
}
this.callParent(arguments);
},
getRenderTarget : function() {
return this.innerCt;
}
});
/**
* This is a layout that will render form Fields, one under the other all stretched to the Container width.
*
* @example
* Ext.create('Ext.Panel', {
* width: 500,
* height: 300,
* title: "FormLayout Panel",
* layout: 'form',
* renderTo: Ext.getBody(),
* bodyPadding: 5,
* defaultType: 'textfield',
* items: [{
* fieldLabel: 'First Name',
* name: 'first',
* allowBlank:false
* },{
* fieldLabel: 'Last Name',
* name: 'last'
* },{
* fieldLabel: 'Company',
* name: 'company'
* }, {
* fieldLabel: 'Email',
* name: 'email',
* vtype:'email'
* }, {
* fieldLabel: 'DOB',
* name: 'dob',
* xtype: 'datefield'
* }, {
* fieldLabel: 'Age',
* name: 'age',
* xtype: 'numberfield',
* minValue: 0,
* maxValue: 100
* }, {
* xtype: 'timefield',
* fieldLabel: 'Time',
* name: 'time',
* minValue: '8:00am',
* maxValue: '6:00pm'
* }]
* });
*
* Note that any configured {@link Ext.Component#padding padding} will be ignored on items within a Form layout.
*/
Ext.define('Ext.layout.container.Form', {
/* Begin Definitions */
alias: 'layout.form',
extend: 'Ext.layout.container.Auto',
alternateClassName: 'Ext.layout.FormLayout',
/* End Definitions */
tableCls: Ext.baseCSSPrefix + 'form-layout-table',
type: 'form',
manageOverflow: 2,
childEls: ['formTable'],
padRow: ' close
* - minimize
* - maximize
* - restore
* - toggle
* - gear
* - prev
* - next
* - pin
* - unpin
* - right
* - left
* - down
* - up
* - refresh
* - plus
* - minus
* - search
* - save
* - help
* - print
* - expand
* - collapse
*/
/**
* @cfg {String/Object} tooltip
* The tooltip for the tool - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config
* object
*/
/**
* @cfg {String} tooltipType
* The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.
*/
tooltipType: 'qtip',
/**
* @cfg {Boolean} stopEvent
* Specify as false to allow click event to propagate.
*/
stopEvent: true,
height: 15,
width: 15,
_toolTypes: {
close:1,
collapse:1,
down:1,
expand:1,
gear:1,
help:1,
left:1,
maximize:1,
minimize:1,
minus:1,
//move:1,
next:1,
pin:1,
plus:1,
prev:1,
print:1,
refresh:1,
//resize:1,
restore:1,
right:1,
save:1,
search:1,
toggle:1,
unpin:1,
up:1
},
initComponent: function() {
var me = this;
me.addEvents(
/**
* @event click
* Fires when the tool is clicked
* @param {Ext.panel.Tool} this
* @param {Ext.EventObject} e The event object
*/
'click'
);
if (me.id && me._toolTypes[me.id] && Ext.global.console) {
Ext.global.console.warn('When specifying a tool you should use the type option, the id can conflict now that tool is a Component');
}
me.type = me.type || me.id;
Ext.applyIf(me.renderData, {
baseCls: me.baseCls,
blank: Ext.BLANK_IMAGE_URL,
type: me.type
});
// alias qtip, should use tooltip since it's what we have in the docs
me.tooltip = me.tooltip || me.qtip;
me.callParent();
me.on({
element: 'toolEl',
click: me.onClick,
mousedown: me.onMouseDown,
mouseover: me.onMouseOver,
mouseout: me.onMouseOut,
scope: me
});
},
// inherit docs
afterRender: function() {
var me = this,
attr;
me.callParent(arguments);
if (me.tooltip) {
if (Ext.isObject(me.tooltip)) {
Ext.tip.QuickTipManager.register(Ext.apply({
target: me.id
}, me.tooltip));
}
else {
attr = me.tooltipType == 'qtip' ? 'data-qtip' : 'title';
me.toolEl.dom.setAttribute(attr, me.tooltip);
}
}
},
getFocusEl: function() {
return this.el;
},
/**
* Sets the type of the tool. Allows the icon to be changed.
* @param {String} type The new type. See the {@link #type} config.
* @return {Ext.panel.Tool} this
*/
setType: function(type) {
var me = this;
me.type = type;
if (me.rendered) {
me.toolEl.dom.className = me.baseCls + '-' + type;
}
return me;
},
/**
* Binds this tool to a component.
* @private
* @param {Ext.Component} component The component
*/
bindTo: function(component) {
this.owner = component;
},
/**
* Called when the tool element is clicked
* @private
* @param {Ext.EventObject} e
* @param {HTMLElement} target The target element
*/
onClick: function(e, target) {
var me = this,
owner;
if (me.disabled) {
return false;
}
owner = me.owner || me.ownerCt;
//remove the pressed + over class
me.el.removeCls(me.toolPressedCls);
me.el.removeCls(me.toolOverCls);
if (me.stopEvent !== false) {
e.stopEvent();
}
Ext.callback(me.handler, me.scope || me, [e, target, owner, me]);
me.fireEvent('click', me, e);
return true;
},
// inherit docs
onDestroy: function(){
if (Ext.isObject(this.tooltip)) {
Ext.tip.QuickTipManager.unregister(this.id);
}
this.callParent();
},
/**
* Called when the user presses their mouse button down on a tool
* Adds the press class ({@link #toolPressedCls})
* @private
*/
onMouseDown: function() {
if (this.disabled) {
return false;
}
this.el.addCls(this.toolPressedCls);
},
/**
* Called when the user rolls over a tool
* Adds the over class ({@link #toolOverCls})
* @private
*/
onMouseOver: function() {
if (this.disabled) {
return false;
}
this.el.addCls(this.toolOverCls);
},
/**
* Called when the user rolls out from a tool.
* Removes the over class ({@link #toolOverCls})
* @private
*/
onMouseOut: function() {
this.el.removeCls(this.toolOverCls);
}
});
/**
* Private utility class for Ext.Splitter.
* @private
*/
Ext.define('Ext.resizer.SplitterTracker', {
extend: 'Ext.dd.DragTracker',
requires: ['Ext.util.Region'],
enabled: true,
overlayCls: Ext.baseCSSPrefix + 'resizable-overlay',
createDragOverlay: function () {
var overlay;
overlay = this.overlay = Ext.getBody().createChild({
cls: this.overlayCls,
html: ' '
});
overlay.unselectable();
overlay.setSize(Ext.Element.getViewWidth(true), Ext.Element.getViewHeight(true));
overlay.show();
},
getPrevCmp: function() {
var splitter = this.getSplitter();
return splitter.previousSibling();
},
getNextCmp: function() {
var splitter = this.getSplitter();
return splitter.nextSibling();
},
// ensure the tracker is enabled, store boxes of previous and next
// components and calculate the constrain region
onBeforeStart: function(e) {
var me = this,
prevCmp = me.getPrevCmp(),
nextCmp = me.getNextCmp(),
collapseEl = me.getSplitter().collapseEl,
target = e.getTarget(),
box;
if (collapseEl && target === me.getSplitter().collapseEl.dom) {
return false;
}
// SplitterTracker is disabled if any of its adjacents are collapsed.
if (nextCmp.collapsed || prevCmp.collapsed) {
return false;
}
// store boxes of previous and next
me.prevBox = prevCmp.getEl().getBox();
me.nextBox = nextCmp.getEl().getBox();
me.constrainTo = box = me.calculateConstrainRegion();
if (!box) {
return false;
}
me.createDragOverlay();
return box;
},
// We move the splitter el. Add the proxy class.
onStart: function(e) {
var splitter = this.getSplitter();
splitter.addCls(splitter.baseCls + '-active');
},
// calculate the constrain Region in which the splitter el may be moved.
calculateConstrainRegion: function() {
var me = this,
splitter = me.getSplitter(),
splitWidth = splitter.getWidth(),
defaultMin = splitter.defaultSplitMin,
orient = splitter.orientation,
prevBox = me.prevBox,
prevCmp = me.getPrevCmp(),
nextBox = me.nextBox,
nextCmp = me.getNextCmp(),
// prev and nextConstrainRegions are the maximumBoxes minus the
// minimumBoxes. The result is always the intersection
// of these two boxes.
prevConstrainRegion, nextConstrainRegion;
// vertical splitters, so resizing left to right
if (orient === 'vertical') {
// Region constructor accepts (top, right, bottom, left)
// anchored/calculated from the left
prevConstrainRegion = new Ext.util.Region(
prevBox.y,
// Right boundary is x + maxWidth if there IS a maxWidth.
// Otherwise it is calculated based upon the minWidth of the next Component
(prevCmp.maxWidth ? prevBox.x + prevCmp.maxWidth : nextBox.right - (nextCmp.minWidth || defaultMin)) + splitWidth,
prevBox.bottom,
prevBox.x + (prevCmp.minWidth || defaultMin)
);
// anchored/calculated from the right
nextConstrainRegion = new Ext.util.Region(
nextBox.y,
nextBox.right - (nextCmp.minWidth || defaultMin),
nextBox.bottom,
// Left boundary is right - maxWidth if there IS a maxWidth.
// Otherwise it is calculated based upon the minWidth of the previous Component
(nextCmp.maxWidth ? nextBox.right - nextCmp.maxWidth : prevBox.x + (prevBox.minWidth || defaultMin)) - splitWidth
);
} else {
// anchored/calculated from the top
prevConstrainRegion = new Ext.util.Region(
prevBox.y + (prevCmp.minHeight || defaultMin),
prevBox.right,
// Bottom boundary is y + maxHeight if there IS a maxHeight.
// Otherwise it is calculated based upon the minWidth of the next Component
(prevCmp.maxHeight ? prevBox.y + prevCmp.maxHeight : nextBox.bottom - (nextCmp.minHeight || defaultMin)) + splitWidth,
prevBox.x
);
// anchored/calculated from the bottom
nextConstrainRegion = new Ext.util.Region(
// Top boundary is bottom - maxHeight if there IS a maxHeight.
// Otherwise it is calculated based upon the minHeight of the previous Component
(nextCmp.maxHeight ? nextBox.bottom - nextCmp.maxHeight : prevBox.y + (prevCmp.minHeight || defaultMin)) - splitWidth,
nextBox.right,
nextBox.bottom - (nextCmp.minHeight || defaultMin),
nextBox.x
);
}
// intersection of the two regions to provide region draggable
return prevConstrainRegion.intersect(nextConstrainRegion);
},
// Performs the actual resizing of the previous and next components
performResize: function(e, offset) {
var me = this,
splitter = me.getSplitter(),
orient = splitter.orientation,
prevCmp = me.getPrevCmp(),
nextCmp = me.getNextCmp(),
owner = splitter.ownerCt,
flexedSiblings = owner.query('>[flex]'),
len = flexedSiblings.length,
i = 0,
dimension,
size,
totalFlex = 0;
// Convert flexes to pixel values proportional to the total pixel width of all flexes.
for (; i < len; i++) {
size = flexedSiblings[i].getWidth();
totalFlex += size;
flexedSiblings[i].flex = size;
}
offset = offset || me.getOffset('dragTarget');
if (orient === 'vertical') {
offset = offset[0];
dimension = 'width';
} else {
dimension = 'height';
offset = offset[1];
}
if (prevCmp) {
size = me.prevBox[dimension] + offset;
if (prevCmp.flex) {
prevCmp.flex = size;
} else {
prevCmp[dimension] = size;
}
}
if (nextCmp) {
size = me.nextBox[dimension] - offset;
if (nextCmp.flex) {
nextCmp.flex = size;
} else {
nextCmp[dimension] = size;
}
}
owner.updateLayout();
},
// Cleans up the overlay (if we have one) and calls the base. This cannot be done in
// onEnd, because onEnd is only called if a drag is detected but the overlay is created
// regardless (by onBeforeStart).
endDrag: function () {
var me = this;
if (me.overlay) {
me.overlay.remove();
delete me.overlay;
}
me.callParent(arguments); // this calls onEnd
},
// perform the resize and remove the proxy class from the splitter el
onEnd: function(e) {
var me = this,
splitter = me.getSplitter();
splitter.removeCls(splitter.baseCls + '-active');
me.performResize(e, me.getOffset('dragTarget'));
},
// Track the proxy and set the proper XY coordinates
// while constraining the drag
onDrag: function(e) {
var me = this,
offset = me.getOffset('dragTarget'),
splitter = me.getSplitter(),
splitEl = splitter.getEl(),
orient = splitter.orientation;
if (orient === "vertical") {
splitEl.setX(me.startRegion.left + offset[0]);
} else {
splitEl.setY(me.startRegion.top + offset[1]);
}
},
getSplitter: function() {
return this.splitter;
}
});
/**
* Private utility class for Ext.BorderSplitter.
* @private
*/
Ext.define('Ext.resizer.BorderSplitterTracker', {
extend: 'Ext.resizer.SplitterTracker',
requires: ['Ext.util.Region'],
getPrevCmp: null,
getNextCmp: null,
// calculate the constrain Region in which the splitter el may be moved.
calculateConstrainRegion: function() {
var me = this,
splitter = me.splitter,
collapseTarget = splitter.collapseTarget,
defaultSplitMin = splitter.defaultSplitMin,
sizePropCap = splitter.vertical ? 'Width' : 'Height',
minSizeProp = 'min' + sizePropCap,
maxSizeProp = 'max' + sizePropCap,
getSizeMethod = 'get' + sizePropCap,
neighbors = splitter.neighbors,
length = neighbors.length,
box = collapseTarget.el.getBox(),
left = box.x,
top = box.y,
right = box.right,
bottom = box.bottom,
size = splitter.vertical ? (right - left) : (bottom - top),
//neighborSizes = [],
i, neighbor, minRange, maxRange, maxGrowth, maxShrink, targetSize;
// if size=100 and minSize=80, we can reduce by 20 so minRange = minSize-size = -20
minRange = (collapseTarget[minSizeProp] || Math.min(size,defaultSplitMin)) - size;
// if maxSize=150, maxRange = maxSize - size = 50
maxRange = collapseTarget[maxSizeProp];
if (!maxRange) {
maxRange = 1e9;
} else {
maxRange -= size;
}
targetSize = size;
for (i = 0; i < length; ++i) {
neighbor = neighbors[i];
size = neighbor[getSizeMethod]();
//neighborSizes.push(size);
maxGrowth = size - neighbor[maxSizeProp]; // NaN if no maxSize or negative
maxShrink = size - (neighbor[minSizeProp] || Math.min(size,defaultSplitMin));
if (!isNaN(maxGrowth)) {
// if neighbor can only grow by 10 (maxGrowth = -10), minRange cannot be
// -20 anymore, but now only -10:
if (minRange < maxGrowth) {
minRange = maxGrowth;
}
}
// if neighbor can shrink by 20 (maxShrink=20), maxRange cannot be 50 anymore,
// but now only 20:
if (maxRange > maxShrink) {
maxRange = maxShrink;
}
}
if (maxRange - minRange < 2) {
return null;
}
box = new Ext.util.Region(top, right, bottom, left);
me.constraintAdjusters[splitter.collapseDirection](box, minRange, maxRange, splitter);
me.dragInfo = {
minRange: minRange,
maxRange: maxRange,
//neighborSizes: neighborSizes,
targetSize: targetSize
};
return box;
},
constraintAdjusters: {
// splitter is to the right of the box
left: function (box, minRange, maxRange, splitter) {
box[0] = box.x = box.left = box.right + minRange;
box.right += maxRange + splitter.getWidth();
},
// splitter is below the box
top: function (box, minRange, maxRange, splitter) {
box[1] = box.y = box.top = box.bottom + minRange;
box.bottom += maxRange + splitter.getHeight();
},
// splitter is above the box
bottom: function (box, minRange, maxRange, splitter) {
box.bottom = box.top - minRange;
box.top -= maxRange + splitter.getHeight();
},
// splitter is to the left of the box
right: function (box, minRange, maxRange, splitter) {
box.right = box.left - minRange;
box.left -= maxRange + splitter.getWidth();
}
},
onBeforeStart: function(e) {
var me = this,
splitter = me.splitter,
collapseTarget = splitter.collapseTarget,
neighbors = splitter.neighbors,
collapseEl = me.getSplitter().collapseEl,
target = e.getTarget(),
length = neighbors.length,
i, neighbor;
if (collapseEl && target === splitter.collapseEl.dom) {
return false;
}
if (collapseTarget.collapsed) {
return false;
}
// disabled if any neighbors are collapsed in parallel direction.
for (i = 0; i < length; ++i) {
neighbor = neighbors[i];
if (neighbor.collapsed && neighbor.isHorz === collapseTarget.isHorz) {
return false;
}
}
if (!(me.constrainTo = me.calculateConstrainRegion())) {
return false;
}
me.createDragOverlay();
return true;
},
performResize: function(e, offset) {
var me = this,
splitter = me.splitter,
collapseDirection = splitter.collapseDirection,
collapseTarget = splitter.collapseTarget,
// a vertical splitter adjusts horizontal dimensions
adjusters = me.splitAdjusters[splitter.vertical ? 'horz' : 'vert'],
delta = offset[adjusters.index],
dragInfo = me.dragInfo,
//neighbors = splitter.neighbors,
//length = neighbors.length,
//neighborSizes = dragInfo.neighborSizes,
//isVert = collapseTarget.isVert,
//i, neighbor,
owner;
if (collapseDirection == 'right' || collapseDirection == 'bottom') {
// these splitters grow by moving left/up, so flip the sign of delta...
delta = -delta;
}
// now constrain delta to our computed range:
delta = Math.min(Math.max(dragInfo.minRange, delta), dragInfo.maxRange);
if (delta) {
(owner = splitter.ownerCt).suspendLayouts();
adjusters.adjustTarget(collapseTarget, dragInfo.targetSize, delta);
//for (i = 0; i < length; ++i) {
// neighbor = neighbors[i];
// if (!neighbor.isCenter && !neighbor.maintainFlex && neighbor.isVert == isVert) {
// delete neighbor.flex;
// adjusters.adjustNeighbor(neighbor, neighborSizes[i], delta);
// }
//}
owner.resumeLayouts(true);
}
},
splitAdjusters: {
horz: {
index: 0,
//adjustNeighbor: function (neighbor, size, delta) {
// neighbor.setSize(size - delta);
//},
adjustTarget: function (target, size, delta) {
target.flex = null;
target.setSize(size + delta);
}
},
vert: {
index: 1,
//adjustNeighbor: function (neighbor, size, delta) {
// neighbor.setSize(undefined, size - delta);
//},
adjustTarget: function (target, targetSize, delta) {
target.flex = null;
target.setSize(undefined, targetSize + delta);
}
}
}
});
/**
* Provides a handle for 9-point resizing of Elements or Components.
*/
Ext.define('Ext.resizer.Handle', {
extend: 'Ext.Component',
handleCls: '',
baseHandleCls: Ext.baseCSSPrefix + 'resizable-handle',
// Ext.resizer.Resizer.prototype.possiblePositions define the regions
// which will be passed in as a region configuration.
region: '',
beforeRender: function() {
var me = this;
me.callParent();
me.addCls(
me.baseHandleCls,
me.baseHandleCls + '-' + me.region,
me.handleCls
);
},
onRender: function() {
this.callParent(arguments);
this.el.unselectable();
}
});
/**
* Private utility class for Ext.resizer.Resizer.
* @private
*/
Ext.define('Ext.resizer.ResizeTracker', {
extend: 'Ext.dd.DragTracker',
dynamic: true,
preserveRatio: false,
// Default to no constraint
constrainTo: null,
proxyCls: Ext.baseCSSPrefix + 'resizable-proxy',
constructor: function(config) {
var me = this,
widthRatio, heightRatio,
throttledResizeFn;
if (!config.el) {
if (config.target.isComponent) {
me.el = config.target.getEl();
} else {
me.el = config.target;
}
}
this.callParent(arguments);
// Ensure that if we are preserving aspect ratio, the largest minimum is honoured
if (me.preserveRatio && me.minWidth && me.minHeight) {
widthRatio = me.minWidth / me.el.getWidth();
heightRatio = me.minHeight / me.el.getHeight();
// largest ratio of minimum:size must be preserved.
// So if a 400x200 pixel image has
// minWidth: 50, maxWidth: 50, the maxWidth will be 400 * (50/200)... that is 100
if (heightRatio > widthRatio) {
me.minWidth = me.el.getWidth() * heightRatio;
} else {
me.minHeight = me.el.getHeight() * widthRatio;
}
}
// If configured as throttled, create an instance version of resize which calls
// a throttled function to perform the resize operation.
if (me.throttle) {
throttledResizeFn = Ext.Function.createThrottled(function() {
Ext.resizer.ResizeTracker.prototype.resize.apply(me, arguments);
}, me.throttle);
me.resize = function(box, direction, atEnd) {
if (atEnd) {
Ext.resizer.ResizeTracker.prototype.resize.apply(me, arguments);
} else {
throttledResizeFn.apply(null, arguments);
}
};
}
},
onBeforeStart: function(e) {
// record the startBox
this.startBox = this.el.getBox();
},
/**
* @private
* Returns the object that will be resized on every mousemove event.
* If dynamic is false, this will be a proxy, otherwise it will be our actual target.
*/
getDynamicTarget: function() {
var me = this,
target = me.target;
if (me.dynamic) {
return target;
} else if (!me.proxy) {
me.proxy = me.createProxy(target);
}
me.proxy.show();
return me.proxy;
},
/**
* Create a proxy for this resizer
* @param {Ext.Component/Ext.Element} target The target
* @return {Ext.Element} A proxy element
*/
createProxy: function(target){
var proxy,
cls = this.proxyCls,
renderTo;
if (target.isComponent) {
proxy = target.getProxy().addCls(cls);
} else {
renderTo = Ext.getBody();
if (Ext.scopeResetCSS) {
renderTo = Ext.getBody().createChild({
cls: Ext.resetCls
});
}
proxy = target.createProxy({
tag: 'div',
cls: cls,
id: target.id + '-rzproxy'
}, renderTo);
}
proxy.removeCls(Ext.baseCSSPrefix + 'proxy-el');
return proxy;
},
onStart: function(e) {
// returns the Ext.ResizeHandle that the user started dragging
this.activeResizeHandle = Ext.get(this.getDragTarget().id);
// If we are using a proxy, ensure it is sized.
if (!this.dynamic) {
this.resize(this.startBox, {
horizontal: 'none',
vertical: 'none'
});
}
},
onDrag: function(e) {
// dynamic resizing, update dimensions during resize
if (this.dynamic || this.proxy) {
this.updateDimensions(e);
}
},
updateDimensions: function(e, atEnd) {
var me = this,
region = me.activeResizeHandle.region,
offset = me.getOffset(me.constrainTo ? 'dragTarget' : null),
box = me.startBox,
ratio,
widthAdjust = 0,
heightAdjust = 0,
snappedWidth,
snappedHeight,
adjustX = 0,
adjustY = 0,
dragRatio,
horizDir = offset[0] < 0 ? 'right' : 'left',
vertDir = offset[1] < 0 ? 'down' : 'up',
oppositeCorner,
axis, // 1 = x, 2 = y, 3 = x and y.
newBox,
newHeight, newWidth;
switch (region) {
case 'south':
heightAdjust = offset[1];
axis = 2;
break;
case 'north':
heightAdjust = -offset[1];
adjustY = -heightAdjust;
axis = 2;
break;
case 'east':
widthAdjust = offset[0];
axis = 1;
break;
case 'west':
widthAdjust = -offset[0];
adjustX = -widthAdjust;
axis = 1;
break;
case 'northeast':
heightAdjust = -offset[1];
adjustY = -heightAdjust;
widthAdjust = offset[0];
oppositeCorner = [box.x, box.y + box.height];
axis = 3;
break;
case 'southeast':
heightAdjust = offset[1];
widthAdjust = offset[0];
oppositeCorner = [box.x, box.y];
axis = 3;
break;
case 'southwest':
widthAdjust = -offset[0];
adjustX = -widthAdjust;
heightAdjust = offset[1];
oppositeCorner = [box.x + box.width, box.y];
axis = 3;
break;
case 'northwest':
heightAdjust = -offset[1];
adjustY = -heightAdjust;
widthAdjust = -offset[0];
adjustX = -widthAdjust;
oppositeCorner = [box.x + box.width, box.y + box.height];
axis = 3;
break;
}
newBox = {
width: box.width + widthAdjust,
height: box.height + heightAdjust,
x: box.x + adjustX,
y: box.y + adjustY
};
// Snap value between stops according to configured increments
snappedWidth = Ext.Number.snap(newBox.width, me.widthIncrement);
snappedHeight = Ext.Number.snap(newBox.height, me.heightIncrement);
if (snappedWidth != newBox.width || snappedHeight != newBox.height){
switch (region) {
case 'northeast':
newBox.y -= snappedHeight - newBox.height;
break;
case 'north':
newBox.y -= snappedHeight - newBox.height;
break;
case 'southwest':
newBox.x -= snappedWidth - newBox.width;
break;
case 'west':
newBox.x -= snappedWidth - newBox.width;
break;
case 'northwest':
newBox.x -= snappedWidth - newBox.width;
newBox.y -= snappedHeight - newBox.height;
}
newBox.width = snappedWidth;
newBox.height = snappedHeight;
}
// out of bounds
if (newBox.width < me.minWidth || newBox.width > me.maxWidth) {
newBox.width = Ext.Number.constrain(newBox.width, me.minWidth, me.maxWidth);
// Re-adjust the X position if we were dragging the west side
if (adjustX) {
newBox.x = box.x + (box.width - newBox.width);
}
} else {
me.lastX = newBox.x;
}
if (newBox.height < me.minHeight || newBox.height > me.maxHeight) {
newBox.height = Ext.Number.constrain(newBox.height, me.minHeight, me.maxHeight);
// Re-adjust the Y position if we were dragging the north side
if (adjustY) {
newBox.y = box.y + (box.height - newBox.height);
}
} else {
me.lastY = newBox.y;
}
// If this is configured to preserve the aspect ratio, or they are dragging using the shift key
if (me.preserveRatio || e.shiftKey) {
ratio = me.startBox.width / me.startBox.height;
// Calculate aspect ratio constrained values.
newHeight = Math.min(Math.max(me.minHeight, newBox.width / ratio), me.maxHeight);
newWidth = Math.min(Math.max(me.minWidth, newBox.height * ratio), me.maxWidth);
// X axis: width-only change, height must obey
if (axis == 1) {
newBox.height = newHeight;
}
// Y axis: height-only change, width must obey
else if (axis == 2) {
newBox.width = newWidth;
}
// Corner drag.
else {
// Drag ratio is the ratio of the mouse point from the opposite corner.
// Basically what edge we are dragging, a horizontal edge or a vertical edge.
dragRatio = Math.abs(oppositeCorner[0] - this.lastXY[0]) / Math.abs(oppositeCorner[1] - this.lastXY[1]);
// If drag ratio > aspect ratio then width is dominant and height must obey
if (dragRatio > ratio) {
newBox.height = newHeight;
} else {
newBox.width = newWidth;
}
// Handle dragging start coordinates
if (region == 'northeast') {
newBox.y = box.y - (newBox.height - box.height);
} else if (region == 'northwest') {
newBox.y = box.y - (newBox.height - box.height);
newBox.x = box.x - (newBox.width - box.width);
} else if (region == 'southwest') {
newBox.x = box.x - (newBox.width - box.width);
}
}
}
if (heightAdjust === 0) {
vertDir = 'none';
}
if (widthAdjust === 0) {
horizDir = 'none';
}
me.resize(newBox, {
horizontal: horizDir,
vertical: vertDir
}, atEnd);
},
getResizeTarget: function(atEnd) {
return atEnd ? this.target : this.getDynamicTarget();
},
resize: function(box, direction, atEnd) {
var target = this.getResizeTarget(atEnd);
if (target.isComponent) {
target.setSize(box.width, box.height);
if (target.floating) {
target.setPagePosition(box.x, box.y);
}
} else {
target.setBox(box);
}
// update the originalTarget if it was wrapped, and the target passed in was the wrap el.
target = this.originalTarget;
if (target && (this.dynamic || atEnd)) {
if (target.isComponent) {
target.setSize(box.width, box.height);
if (target.floating) {
target.setPagePosition(box.x, box.y);
}
} else {
target.setBox(box);
}
}
},
onEnd: function(e) {
this.updateDimensions(e, true);
if (this.proxy) {
this.proxy.hide();
}
}
});
/**
* Applies drag handles to an element or component to make it resizable. The drag handles are inserted into the element
* (or component's element) and positioned absolute.
*
* Textarea and img elements will be wrapped with an additional div because these elements do not support child nodes.
* The original element can be accessed through the originalTarget property.
*
* Here is the list of valid resize handles:
*
* Value Description
* ------ -------------------
* 'n' north
* 's' south
* 'e' east
* 'w' west
* 'nw' northwest
* 'sw' southwest
* 'se' southeast
* 'ne' northeast
* 'all' all
*
* {@img Ext.resizer.Resizer/Ext.resizer.Resizer.png Ext.resizer.Resizer component}
*
* Here's an example showing the creation of a typical Resizer:
*
* Ext.create('Ext.resizer.Resizer', {
* el: 'elToResize',
* handles: 'all',
* minWidth: 200,
* minHeight: 100,
* maxWidth: 500,
* maxHeight: 400,
* pinned: true
* });
*/
Ext.define('Ext.resizer.Resizer', {
mixins: {
observable: 'Ext.util.Observable'
},
uses: ['Ext.resizer.ResizeTracker', 'Ext.Component'],
alternateClassName: 'Ext.Resizable',
handleCls: Ext.baseCSSPrefix + 'resizable-handle',
pinnedCls: Ext.baseCSSPrefix + 'resizable-pinned',
overCls: Ext.baseCSSPrefix + 'resizable-over',
wrapCls: Ext.baseCSSPrefix + 'resizable-wrap',
/**
* @cfg {Boolean} dynamic
* Specify as true to update the {@link #target} (Element or {@link Ext.Component Component}) dynamically during
* dragging. This is `true` by default, but the {@link Ext.Component Component} class passes `false` when it is
* configured as {@link Ext.Component#resizable}.
*
* If specified as `false`, a proxy element is displayed during the resize operation, and the {@link #target} is
* updated on mouseup.
*/
dynamic: true,
/**
* @cfg {String} handles
* String consisting of the resize handles to display. Defaults to 's e se' for Elements and fixed position
* Components. Defaults to 8 point resizing for floating Components (such as Windows). Specify either `'all'` or any
* of `'n s e w ne nw se sw'`.
*/
handles: 's e se',
/**
* @cfg {Number} height
* Optional. The height to set target to in pixels
*/
height : null,
/**
* @cfg {Number} width
* Optional. The width to set the target to in pixels
*/
width : null,
/**
* @cfg {Number} heightIncrement
* The increment to snap the height resize in pixels.
*/
heightIncrement : 0,
/**
* @cfg {Number} widthIncrement
* The increment to snap the width resize in pixels.
*/
widthIncrement : 0,
/**
* @cfg {Number} minHeight
* The minimum height for the element
*/
minHeight : 20,
/**
* @cfg {Number} minWidth
* The minimum width for the element
*/
minWidth : 20,
/**
* @cfg {Number} maxHeight
* The maximum height for the element
*/
maxHeight : 10000,
/**
* @cfg {Number} maxWidth
* The maximum width for the element
*/
maxWidth : 10000,
/**
* @cfg {Boolean} pinned
* True to ensure that the resize handles are always visible, false indicates resizing by cursor changes only
*/
pinned: false,
/**
* @cfg {Boolean} preserveRatio
* True to preserve the original ratio between height and width during resize
*/
preserveRatio: false,
/**
* @cfg {Boolean} transparent
* True for transparent handles. This is only applied at config time.
*/
transparent: false,
/**
* @cfg {Ext.Element/Ext.util.Region} constrainTo
* An element, or a {@link Ext.util.Region Region} into which the resize operation must be constrained.
*/
possiblePositions: {
n: 'north',
s: 'south',
e: 'east',
w: 'west',
se: 'southeast',
sw: 'southwest',
nw: 'northwest',
ne: 'northeast'
},
/**
* @cfg {Ext.Element/Ext.Component} target
* The Element or Component to resize.
*/
/**
* @property {Ext.Element} el
* Outer element for resizing behavior.
*/
constructor: function(config) {
var me = this,
target,
targetEl,
tag,
handles = me.handles,
handleCls,
possibles,
len,
i = 0,
pos,
handleEls = [],
eastWestStyle, style,
box;
me.addEvents(
/**
* @event beforeresize
* Fired before resize is allowed. Return false to cancel resize.
* @param {Ext.resizer.Resizer} this
* @param {Number} width The start width
* @param {Number} height The start height
* @param {Ext.EventObject} e The mousedown event
*/
'beforeresize',
/**
* @event resizedrag
* Fires during resizing. Return false to cancel resize.
* @param {Ext.resizer.Resizer} this
* @param {Number} width The new width
* @param {Number} height The new height
* @param {Ext.EventObject} e The mousedown event
*/
'resizedrag',
/**
* @event resize
* Fired after a resize.
* @param {Ext.resizer.Resizer} this
* @param {Number} width The new width
* @param {Number} height The new height
* @param {Ext.EventObject} e The mouseup event
*/
'resize'
);
if (Ext.isString(config) || Ext.isElement(config) || config.dom) {
target = config;
config = arguments[1] || {};
config.target = target;
}
// will apply config to this
me.mixins.observable.constructor.call(me, config);
// If target is a Component, ensure that we pull the element out.
// Resizer must examine the underlying Element.
target = me.target;
if (target) {
if (target.isComponent) {
me.el = target.getEl();
if (target.minWidth) {
me.minWidth = target.minWidth;
}
if (target.minHeight) {
me.minHeight = target.minHeight;
}
if (target.maxWidth) {
me.maxWidth = target.maxWidth;
}
if (target.maxHeight) {
me.maxHeight = target.maxHeight;
}
if (target.floating) {
if (!me.hasOwnProperty('handles')) {
me.handles = 'n ne e se s sw w nw';
}
}
} else {
me.el = me.target = Ext.get(target);
}
}
// Backwards compatibility with Ext3.x's Resizable which used el as a config.
else {
me.target = me.el = Ext.get(me.el);
}
// Tags like textarea and img cannot
// have children and therefore must
// be wrapped
tag = me.el.dom.tagName.toUpperCase();
if (tag == 'TEXTAREA' || tag == 'IMG' || tag == 'TABLE') {
/**
* @property {Ext.Element/Ext.Component} originalTarget
* Reference to the original resize target if the element of the original resize target was a
* {@link Ext.form.field.Field Field}, or an IMG or a TEXTAREA which must be wrapped in a DIV.
*/
me.originalTarget = me.target;
targetEl = me.el;
box = targetEl.getBox();
me.target = me.el = me.el.wrap({
cls: me.wrapCls,
id: me.el.id + '-rzwrap',
style: targetEl.getStyles('margin-top', 'margin-bottom')
});
// Transfer originalTarget's positioning+sizing+margins
me.el.setPositioning(targetEl.getPositioning());
targetEl.clearPositioning();
me.el.setBox(box);
// Position the wrapped element absolute so that it does not stretch the wrapper
targetEl.setStyle('position', 'absolute');
}
// Position the element, this enables us to absolute position
// the handles within this.el
me.el.position();
if (me.pinned) {
me.el.addCls(me.pinnedCls);
}
/**
* @property {Ext.resizer.ResizeTracker} resizeTracker
*/
me.resizeTracker = new Ext.resizer.ResizeTracker({
disabled: me.disabled,
target: me.target,
constrainTo: me.constrainTo,
overCls: me.overCls,
throttle: me.throttle,
originalTarget: me.originalTarget,
delegate: '.' + me.handleCls,
dynamic: me.dynamic,
preserveRatio: me.preserveRatio,
heightIncrement: me.heightIncrement,
widthIncrement: me.widthIncrement,
minHeight: me.minHeight,
maxHeight: me.maxHeight,
minWidth: me.minWidth,
maxWidth: me.maxWidth
});
// Relay the ResizeTracker's superclass events as our own resize events
me.resizeTracker.on({
mousedown: me.onBeforeResize,
drag: me.onResize,
dragend: me.onResizeEnd,
scope: me
});
if (me.handles == 'all') {
me.handles = 'n s e w ne nw se sw';
}
handles = me.handles = me.handles.split(/ |\s*?[,;]\s*?/);
possibles = me.possiblePositions;
len = handles.length;
handleCls = me.handleCls + ' ' + (me.target.isComponent ? (me.target.baseCls + '-handle ') : '') + me.handleCls + '-';
// Needs heighting on IE6!
eastWestStyle = Ext.isIE6 ? ' style="height:' + me.el.getHeight() + 'px"' : '';
for (; i < len; i++){
// if specified and possible, create
if (handles[i] && possibles[handles[i]]) {
pos = possibles[handles[i]];
if (pos === 'east' || pos === 'west') {
style = eastWestStyle;
} else {
style = '';
}
handleEls.push('');
}
}
Ext.DomHelper.append(me.el, handleEls.join(''));
// store a reference to each handle elelemtn in this.east, this.west, etc
for (i = 0; i < len; i++){
// if specified and possible, create
if (handles[i] && possibles[handles[i]]) {
pos = possibles[handles[i]];
me[pos] = me.el.getById(me.el.id + '-' + pos + '-handle');
me[pos].region = pos;
me[pos].unselectable();
if (me.transparent) {
me[pos].setOpacity(0);
}
}
}
// Constrain within configured maxima
if (Ext.isNumber(me.width)) {
me.width = Ext.Number.constrain(me.width, me.minWidth, me.maxWidth);
}
if (Ext.isNumber(me.height)) {
me.height = Ext.Number.constrain(me.height, me.minHeight, me.maxHeight);
}
// Size the target (and originalTarget)
if (me.width !== null || me.height !== null) {
if (me.originalTarget) {
me.originalTarget.setWidth(me.width);
me.originalTarget.setHeight(me.height);
}
me.resizeTo(me.width, me.height);
}
me.forceHandlesHeight();
},
disable: function() {
this.resizeTracker.disable();
},
enable: function() {
this.resizeTracker.enable();
},
/**
* @private Relay the Tracker's mousedown event as beforeresize
* @param tracker The Resizer
* @param e The Event
*/
onBeforeResize: function(tracker, e) {
var box = this.el.getBox();
return this.fireEvent('beforeresize', this, box.width, box.height, e);
},
/**
* @private Relay the Tracker's drag event as resizedrag
* @param tracker The Resizer
* @param e The Event
*/
onResize: function(tracker, e) {
var me = this,
box = me.el.getBox();
me.forceHandlesHeight();
return me.fireEvent('resizedrag', me, box.width, box.height, e);
},
/**
* @private Relay the Tracker's dragend event as resize
* @param tracker The Resizer
* @param e The Event
*/
onResizeEnd: function(tracker, e) {
var me = this,
box = me.el.getBox();
me.forceHandlesHeight();
return me.fireEvent('resize', me, box.width, box.height, e);
},
/**
* Perform a manual resize and fires the 'resize' event.
* @param {Number} width
* @param {Number} height
*/
resizeTo : function(width, height) {
var me = this;
me.target.setSize(width, height);
me.fireEvent('resize', me, width, height, null);
},
/**
* Returns the element that was configured with the el or target config property. If a component was configured with
* the target property then this will return the element of this component.
*
* Textarea and img elements will be wrapped with an additional div because these elements do not support child
* nodes. The original element can be accessed through the originalTarget property.
* @return {Ext.Element} element
*/
getEl : function() {
return this.el;
},
/**
* Returns the element or component that was configured with the target config property.
*
* Textarea and img elements will be wrapped with an additional div because these elements do not support child
* nodes. The original element can be accessed through the originalTarget property.
* @return {Ext.Element/Ext.Component}
*/
getTarget: function() {
return this.target;
},
destroy: function() {
var i = 0,
handles = this.handles,
len = handles.length,
positions = this.possiblePositions;
for (; i < len; i++) {
this[positions[handles[i]]].remove();
}
},
/**
* @private
* Fix IE6 handle height issue.
*/
forceHandlesHeight : function() {
var me = this,
handle;
if (Ext.isIE6) {
handle = me.east;
if (handle) {
handle.setHeight(me.el.getHeight());
}
handle = me.west;
if (handle) {
handle.setHeight(me.el.getHeight());
}
me.el.repaint();
}
}
});
/**
*
*/
Ext.define('Ext.selection.CellModel', {
extend: 'Ext.selection.Model',
alias: 'selection.cellmodel',
requires: ['Ext.util.KeyNav'],
isCellModel: true,
/**
* @cfg {Boolean} enableKeyNav
* Turns on/off keyboard navigation within the grid.
*/
enableKeyNav: true,
/**
* @cfg {Boolean} preventWrap
* Set this configuration to true to prevent wrapping around of selection as
* a user navigates to the first or last column.
*/
preventWrap: false,
// private property to use when firing a deselect when no old selection exists.
noSelection: {
row: -1,
column: -1
},
constructor: function() {
this.addEvents(
/**
* @event deselect
* Fired after a cell is deselected
* @param {Ext.selection.CellModel} this
* @param {Ext.data.Model} record The record of the deselected cell
* @param {Number} row The row index deselected
* @param {Number} column The column index deselected
*/
'deselect',
/**
* @event select
* Fired after a cell is selected
* @param {Ext.selection.CellModel} this
* @param {Ext.data.Model} record The record of the selected cell
* @param {Number} row The row index selected
* @param {Number} column The column index selected
*/
'select'
);
this.callParent(arguments);
},
bindComponent: function(view) {
var me = this,
grid = view.ownerCt;
me.primaryView = view;
me.views = me.views || [];
me.views.push(view);
me.bindStore(view.getStore(), true);
view.on({
cellmousedown: me.onMouseDown,
refresh: me.onViewRefresh,
scope: me
});
if (grid.optimizedColumnMove !== false) {
grid.on('columnmove', me.onColumnMove, me);
}
if (me.enableKeyNav) {
me.initKeyNav(view);
}
},
initKeyNav: function(view) {
var me = this;
if (!view.rendered) {
view.on('render', Ext.Function.bind(me.initKeyNav, me, [view], 0), me, {single: true});
return;
}
view.el.set({
tabIndex: -1
});
// view.el has tabIndex -1 to allow for
// keyboard events to be passed to it.
me.keyNav = new Ext.util.KeyNav({
target: view.el,
ignoreInputFields: true,
up: me.onKeyUp,
down: me.onKeyDown,
right: me.onKeyRight,
left: me.onKeyLeft,
tab: me.onKeyTab,
scope: me
});
},
getHeaderCt: function() {
var selection = this.getCurrentPosition(),
view = selection ? selection.view : this.primaryView;
return view.headerCt;
},
onKeyUp: function(e, t) {
this.keyNavigation = true;
this.move('up', e);
this.keyNavigation = false;
},
onKeyDown: function(e, t) {
this.keyNavigation = true;
this.move('down', e);
this.keyNavigation = false;
},
onKeyLeft: function(e, t) {
this.keyNavigation = true;
this.move('left', e);
this.keyNavigation = false;
},
onKeyRight: function(e, t) {
this.keyNavigation = true;
this.move('right', e);
this.keyNavigation = false;
},
move: function(dir, e) {
var me = this,
pos = me.getCurrentPosition(),
// Calculate the new row and column position
newPos = pos.view.walkCells(pos, dir, e, me.preventWrap);
// If walk was successful, select new Position
if (newPos) {
newPos.view = pos.view;
return me.setCurrentPosition(newPos);
}
// Enforce code correctness in unbuilt source.
return null;
},
/**
* Returns the current position in the format {row: row, column: column}
*/
getCurrentPosition: function() {
return this.selection;
},
/**
* Sets the current position
* @param {Object} position The position to set.
*/
setCurrentPosition: function(pos) {
var me = this;
// onSelectChange uses lastSelection and nextSelection
me.lastSelection = me.selection;
if (me.selection) {
me.onCellDeselect(me.selection);
}
if (pos) {
me.nextSelection = new me.Selection(me);
me.nextSelection.setPosition(pos);
me.onCellSelect(me.nextSelection);
// Deselect triggered by new selection will kill the selection property, so restore it here.
return me.selection = me.nextSelection;
}
// Enforce code correctness in unbuilt source.
return null;
},
// Keep selection model in consistent state upon record deletion.
onStoreRemove: function(store, record, index) {
var me = this,
pos = me.getCurrentPosition();
me.callParent(arguments);
if (pos) {
// Deleting the row containing the selection.
// Attempt to reselect the same cell which has moved up if there is one
if (pos.row == index) {
if (index < store.getCount() - 1) {
pos.setPosition(index, pos.column);
me.setCurrentPosition(pos);
} else {
delete me.selection;
}
}
// Deleting a row before the selection.
// Move the selection up by one row
else if (index < pos.row) {
pos.setPosition(pos.row - 1, pos.column);
me.setCurrentPosition(pos);
}
}
},
/**
* Set the current position based on where the user clicks.
* @private
*/
onMouseDown: function(view, cell, cellIndex, record, row, rowIndex, e) {
this.setCurrentPosition({
view: view,
row: rowIndex,
column: cellIndex
});
},
// notify the view that the cell has been selected to update the ui
// appropriately and bring the cell into focus
onCellSelect: function(position, supressEvent) {
if (position && position.row !== undefined && position.row > -1) {
this.doSelect(position.view.getStore().getAt(position.row), /*keepExisting*/false, supressEvent);
}
},
// notify view that the cell has been deselected to update the ui
// appropriately
onCellDeselect: function(position, supressEvent) {
if (position && position.row !== undefined) {
this.doDeselect(position.view.getStore().getAt(position.row), supressEvent);
}
},
onSelectChange: function(record, isSelected, suppressEvent, commitFn) {
var me = this,
pos,
eventName,
view;
if (isSelected) {
pos = me.nextSelection;
eventName = 'select';
} else {
pos = me.lastSelection || me.noSelection;
eventName = 'deselect';
}
// CellModel may be shared between two sides of a Lockable.
// The position must include a reference to the view in which the selection is current.
// Ensure we use the view specifiied by the position.
view = pos.view || me.primaryView;
if ((suppressEvent || me.fireEvent('before' + eventName, me, record, pos.row, pos.column)) !== false &&
commitFn() !== false) {
if (isSelected) {
view.onCellSelect(pos);
view.onCellFocus(pos);
} else {
view.onCellDeselect(pos);
delete me.selection;
}
if (!suppressEvent) {
me.fireEvent(eventName, me, record, pos.row, pos.column);
}
}
},
// Tab key from the View's KeyNav, *not* from an editor.
onKeyTab: function(e, t) {
var me = this,
editingPlugin = me.getCurrentPosition().view.editingPlugin;
// If we were in editing mode, but just focused on a non-editable cell, behave as if we tabbed off an editable field
if (editingPlugin && me.wasEditing) {
me.onEditorTab(editingPlugin, e)
} else {
me.move(e.shiftKey ? 'left' : 'right', e);
}
},
onEditorTab: function(editingPlugin, e) {
var me = this,
direction = e.shiftKey ? 'left' : 'right',
position = me.move(direction, e);
// Navigation had somewhere to go.... not hit the buffers.
if (position) {
// If we were able to begin editing clear the wasEditing flag. It gets set during navigation off an active edit.
if (editingPlugin.startEditByPosition(position)) {
me.wasEditing = false;
}
// If we could not continue editing...
// Set a flag that we should go back into editing mode upon next onKeyTab call
else {
me.wasEditing = true;
if (!position.columnHeader.dataIndex) {
me.onEditorTab(editingPlugin, e);
}
}
}
},
refresh: function() {
var pos = this.getCurrentPosition(),
selRowIdx;
// Synchronize the current position's row with the row of the last selected record.
if (pos && (selRowIdx = this.store.indexOf(this.selected.last())) !== -1) {
pos.row = selRowIdx;
}
},
/**
* @private
* When grid uses {@link Ext.panel.Table#optimizedColumnMove optimizedColumnMove} (the default), this is added as a
* {@link Ext.panel.Table#columnmove columnmove} handler to correctly maintain the
* selected column using the same column header.
*
* If optimizedColumnMove === false, (which some grid Features set) then the view is refreshed,
* so this is not added as a handler because the selected column.
*/
onColumnMove: function(headerCt, header, fromIdx, toIdx) {
var grid = headerCt.up('tablepanel');
if (grid) {
this.onViewRefresh(grid.view);
}
},
onViewRefresh: function(view) {
var me = this,
pos = me.getCurrentPosition(),
headerCt = view.headerCt,
record, columnHeader;
// Re-establish selection of the same cell coordinate.
// DO NOT fire events because the selected
if (pos && pos.view === view) {
record = pos.record;
columnHeader = pos.columnHeader;
// After a refresh, recreate the selection using the same record and grid column as before
if (!columnHeader.isDescendantOf(headerCt)) {
// column header is not a child of the header container
// this happens when the grid is reconfigured with new columns
// make a best effor to select something by matching on id, then text, then dataIndex
columnHeader = headerCt.queryById(columnHeader.id) ||
headerCt.down('[text="' + columnHeader.text + '"]') ||
headerCt.down('[dataIndex="' + columnHeader.dataIndex + '"]');
}
// If we have a columnHeader (either the column header that already exists in
// the headerCt, or a suitable match that was found after reconfiguration)
// AND the record still exists in the store (or a record matching the id of
// the previously selected record) We are ok to go ahead and set the selection
if (columnHeader && (view.store.indexOfId(record.getId()) !== -1)) {
me.setCurrentPosition({
row: record,
column: columnHeader,
view: view
});
}
}
},
selectByPosition: function(position) {
this.setCurrentPosition(position);
}
}, function() {
// Encapsulate a single selection position.
// Maintains { row: n, column: n, record: r, columnHeader: c}
var Selection = this.prototype.Selection = function(model) {
this.model = model;
};
// Selection row/record & column/columnHeader
Selection.prototype.setPosition = function(row, col) {
var me = this,
view;
// We were passed {row: 1, column: 2, view: myView}
if (arguments.length === 1) {
// SelectionModel is shared between both sides of a locking grid.
// It can be positioned on either view.
if (row.view) {
me.view = view = row.view;
}
col = row.column;
row = row.row;
}
// If setting the position without specifying a view, and the position is already without a view
// use the owning Model's primary view
if (!view) {
me.view = view = me.model.primaryView;
}
// Row index passed
if (typeof row === 'number') {
me.row = row;
me.record = view.store.getAt(row);
}
// row is a Record
else if (row.isModel) {
me.record = row;
me.row = view.indexOf(row);
}
// row is a grid row
else if (row.tagName) {
me.record = view.getRecord(row);
me.row = view.indexOf(me.record);
}
// column index passed
if (typeof col === 'number') {
me.column = col;
me.columnHeader = view.getHeaderAtIndex(col);
}
// col is a column Header
else {
me.columnHeader = col;
me.column = col.getIndex();
}
return me;
}
});
/**
* Implements row based navigation via keyboard.
*
* Must synchronize across grid sections.
*/
Ext.define('Ext.selection.RowModel', {
extend: 'Ext.selection.Model',
alias: 'selection.rowmodel',
requires: ['Ext.util.KeyNav'],
/**
* @private
* Number of pixels to scroll to the left/right when pressing
* left/right keys.
*/
deltaScroll: 5,
/**
* @cfg {Boolean} enableKeyNav
*
* Turns on/off keyboard navigation within the grid.
*/
enableKeyNav: true,
/**
* @cfg {Boolean} [ignoreRightMouseSelection=false]
* True to ignore selections that are made when using the right mouse button if there are
* records that are already selected. If no records are selected, selection will continue
* as normal
*/
ignoreRightMouseSelection: false,
constructor: function() {
this.addEvents(
/**
* @event beforedeselect
* Fired before a record is deselected. If any listener returns false, the
* deselection is cancelled.
* @param {Ext.selection.RowModel} this
* @param {Ext.data.Model} record The deselected record
* @param {Number} index The row index deselected
*/
'beforedeselect',
/**
* @event beforeselect
* Fired before a record is selected. If any listener returns false, the
* selection is cancelled.
* @param {Ext.selection.RowModel} this
* @param {Ext.data.Model} record The selected record
* @param {Number} index The row index selected
*/
'beforeselect',
/**
* @event deselect
* Fired after a record is deselected
* @param {Ext.selection.RowModel} this
* @param {Ext.data.Model} record The deselected record
* @param {Number} index The row index deselected
*/
'deselect',
/**
* @event select
* Fired after a record is selected
* @param {Ext.selection.RowModel} this
* @param {Ext.data.Model} record The selected record
* @param {Number} index The row index selected
*/
'select'
);
this.views = [];
this.callParent(arguments);
},
bindComponent: function(view) {
var me = this;
me.views = me.views || [];
me.views.push(view);
me.bindStore(view.getStore(), true);
view.on({
itemmousedown: me.onRowMouseDown,
scope: me
});
if (me.enableKeyNav) {
me.initKeyNav(view);
}
},
initKeyNav: function(view) {
var me = this;
if (!view.rendered) {
view.on('render', Ext.Function.bind(me.initKeyNav, me, [view], 0), me, {single: true});
return;
}
// view.el has tabIndex -1 to allow for
// keyboard events to be passed to it.
view.el.set({
tabIndex: -1
});
// Drive the KeyNav off the View's itemkeydown event so that beforeitemkeydown listeners may veto
me.keyNav = new Ext.util.KeyNav({
target: view,
ignoreInputFields: true,
eventName: 'itemkeydown',
processEvent: function(view, record, node, index, event) {
event.record = record;
event.recordIndex = index;
return event;
},
up: me.onKeyUp,
down: me.onKeyDown,
right: me.onKeyRight,
left: me.onKeyLeft,
pageDown: me.onKeyPageDown,
pageUp: me.onKeyPageUp,
home: me.onKeyHome,
end: me.onKeyEnd,
space: me.onKeySpace,
enter: me.onKeyEnter,
scope: me
});
},
// Returns the number of rows currently visible on the screen or
// false if there were no rows. This assumes that all rows are
// of the same height and the first view is accurate.
getRowsVisible: function() {
var rowsVisible = false,
view = this.views[0],
row = view.getNode(0),
rowHeight, gridViewHeight;
if (row) {
rowHeight = Ext.fly(row).getHeight();
gridViewHeight = view.el.getHeight();
rowsVisible = Math.floor(gridViewHeight / rowHeight);
}
return rowsVisible;
},
// go to last visible record in grid.
onKeyEnd: function(e) {
var me = this,
last = me.store.getAt(me.store.getCount() - 1);
if (last) {
if (e.shiftKey) {
me.selectRange(last, me.lastFocused || 0);
me.setLastFocused(last);
} else if (e.ctrlKey) {
me.setLastFocused(last);
} else {
me.doSelect(last);
}
}
},
// go to first visible record in grid.
onKeyHome: function(e) {
var me = this,
first = me.store.getAt(0);
if (first) {
if (e.shiftKey) {
me.selectRange(first, me.lastFocused || 0);
me.setLastFocused(first);
} else if (e.ctrlKey) {
me.setLastFocused(first);
} else {
me.doSelect(first, false);
}
}
},
// Go one page up from the lastFocused record in the grid.
onKeyPageUp: function(e) {
var me = this,
rowsVisible = me.getRowsVisible(),
selIdx,
prevIdx,
prevRecord;
if (rowsVisible) {
selIdx = e.recordIndex;
prevIdx = selIdx - rowsVisible;
if (prevIdx < 0) {
prevIdx = 0;
}
prevRecord = me.store.getAt(prevIdx);
if (e.shiftKey) {
me.selectRange(prevRecord, e.record, e.ctrlKey, 'up');
me.setLastFocused(prevRecord);
} else if (e.ctrlKey) {
e.preventDefault();
me.setLastFocused(prevRecord);
} else {
me.doSelect(prevRecord);
}
}
},
// Go one page down from the lastFocused record in the grid.
onKeyPageDown: function(e) {
var me = this,
rowsVisible = me.getRowsVisible(),
selIdx,
nextIdx,
nextRecord;
if (rowsVisible) {
selIdx = e.recordIndex;
nextIdx = selIdx + rowsVisible;
if (nextIdx >= me.store.getCount()) {
nextIdx = me.store.getCount() - 1;
}
nextRecord = me.store.getAt(nextIdx);
if (e.shiftKey) {
me.selectRange(nextRecord, e.record, e.ctrlKey, 'down');
me.setLastFocused(nextRecord);
} else if (e.ctrlKey) {
// some browsers, this means go thru browser tabs
// attempt to stop.
e.preventDefault();
me.setLastFocused(nextRecord);
} else {
me.doSelect(nextRecord);
}
}
},
// Select/Deselect based on pressing Spacebar.
// Assumes a SIMPLE selectionmode style
onKeySpace: function(e) {
var me = this,
record = me.lastFocused;
if (record) {
if (me.isSelected(record)) {
me.doDeselect(record, false);
} else {
me.doSelect(record, true);
}
}
},
onKeyEnter: Ext.emptyFn,
// Navigate one record up. This could be a selection or
// could be simply focusing a record for discontiguous
// selection. Provides bounds checking.
onKeyUp: function(e) {
var me = this,
idx = me.store.indexOf(me.lastFocused),
record;
if (idx > 0) {
// needs to be the filtered count as thats what
// will be visible.
record = me.store.getAt(idx - 1);
if (e.shiftKey && me.lastFocused) {
if (me.isSelected(me.lastFocused) && me.isSelected(record)) {
me.doDeselect(me.lastFocused, true);
me.setLastFocused(record);
} else if (!me.isSelected(me.lastFocused)) {
me.doSelect(me.lastFocused, true);
me.doSelect(record, true);
} else {
me.doSelect(record, true);
}
} else if (e.ctrlKey) {
me.setLastFocused(record);
} else {
me.doSelect(record);
//view.focusRow(idx - 1);
}
}
// There was no lastFocused record, and the user has pressed up
// Ignore??
//else if (this.selected.getCount() == 0) {
//
// this.doSelect(record);
// //view.focusRow(idx - 1);
//}
},
// Navigate one record down. This could be a selection or
// could be simply focusing a record for discontiguous
// selection. Provides bounds checking.
onKeyDown: function(e) {
var me = this,
idx = me.store.indexOf(me.lastFocused),
record;
// needs to be the filtered count as thats what
// will be visible.
if (idx + 1 < me.store.getCount()) {
record = me.store.getAt(idx + 1);
if (me.selected.getCount() === 0) {
if (!e.ctrlKey) {
me.doSelect(record);
} else {
me.setLastFocused(record);
}
//view.focusRow(idx + 1);
} else if (e.shiftKey && me.lastFocused) {
if (me.isSelected(me.lastFocused) && me.isSelected(record)) {
me.doDeselect(me.lastFocused, true);
me.setLastFocused(record);
} else if (!me.isSelected(me.lastFocused)) {
me.doSelect(me.lastFocused, true);
me.doSelect(record, true);
} else {
me.doSelect(record, true);
}
} else if (e.ctrlKey) {
me.setLastFocused(record);
} else {
me.doSelect(record);
//view.focusRow(idx + 1);
}
}
},
scrollByDeltaX: function(delta) {
var view = this.views[0],
section = view.up(),
hScroll = section.horizontalScroller;
if (hScroll) {
hScroll.scrollByDeltaX(delta);
}
},
onKeyLeft: function(e) {
this.scrollByDeltaX(-this.deltaScroll);
},
onKeyRight: function(e) {
this.scrollByDeltaX(this.deltaScroll);
},
// Select the record with the event included so that
// we can take into account ctrlKey, shiftKey, etc
onRowMouseDown: function(view, record, item, index, e) {
if (!this.allowRightMouseSelection(e)) {
return;
}
if (e.button === 0 || !this.isSelected(record)) {
this.selectWithEvent(record, e);
}
},
/**
* Checks whether a selection should proceed based on the ignoreRightMouseSelection
* option.
* @private
* @param {Ext.EventObject} e The event
* @return {Boolean} False if the selection should not proceed
*/
allowRightMouseSelection: function(e) {
var disallow = this.ignoreRightMouseSelection && e.button !== 0;
if (disallow) {
disallow = this.hasSelection();
}
return !disallow;
},
// Allow the GridView to update the UI by
// adding/removing a CSS class from the row.
onSelectChange: function(record, isSelected, suppressEvent, commitFn) {
var me = this,
views = me.views,
viewsLn = views.length,
store = me.store,
rowIdx = store.indexOf(record),
eventName = isSelected ? 'select' : 'deselect',
i = 0;
if ((suppressEvent || me.fireEvent('before' + eventName, me, record, rowIdx)) !== false &&
commitFn() !== false) {
for (; i < viewsLn; i++) {
if (isSelected) {
views[i].onRowSelect(rowIdx, suppressEvent);
} else {
views[i].onRowDeselect(rowIdx, suppressEvent);
}
}
if (!suppressEvent) {
me.fireEvent(eventName, me, record, rowIdx);
}
}
},
// Provide indication of what row was last focused via
// the gridview.
onLastFocusChanged: function(oldFocused, newFocused, supressFocus) {
var views = this.views,
viewsLn = views.length,
store = this.store,
rowIdx,
i = 0;
if (oldFocused) {
rowIdx = store.indexOf(oldFocused);
if (rowIdx != -1) {
for (; i < viewsLn; i++) {
views[i].onRowFocus(rowIdx, false);
}
}
}
if (newFocused) {
rowIdx = store.indexOf(newFocused);
if (rowIdx != -1) {
for (i = 0; i < viewsLn; i++) {
views[i].onRowFocus(rowIdx, true, supressFocus);
}
}
}
this.callParent();
},
onEditorTab: function(editingPlugin, e) {
var me = this,
view = me.views[0],
record = editingPlugin.getActiveRecord(),
header = editingPlugin.getActiveColumn(),
position = view.getPosition(record, header),
direction = e.shiftKey ? 'left' : 'right';
do {
position = view.walkCells(position, direction, e, me.preventWrap);
} while(position && !view.headerCt.getHeaderAtIndex(position.column).getEditor());
if (position) {
editingPlugin.startEditByPosition(position);
}
},
/**
* Returns position of the first selected cell in the selection in the format {row: row, column: column}
*/
getCurrentPosition: function() {
var firstSelection = this.selected.items[0];
if (firstSelection) {
return {
row: this.store.indexOf(firstSelection),
column: 0
};
}
},
selectByPosition: function(position) {
var record = this.store.getAt(position.row);
this.select(record);
},
/**
* Selects the record immediately following the currently selected record.
* @param {Boolean} [keepExisting] True to retain existing selections
* @param {Boolean} [suppressEvent] Set to false to not fire a select event
* @return {Boolean} `true` if there is a next record, else `false`
*/
selectNext: function(keepExisting, suppressEvent) {
var me = this,
store = me.store,
selection = me.getSelection(),
record = selection[selection.length - 1],
index = store.indexOf(record) + 1,
success;
if(index === store.getCount() || index === 0) {
success = false;
} else {
me.doSelect(index, keepExisting, suppressEvent);
success = true;
}
return success;
},
/**
* Selects the record that precedes the currently selected record.
* @param {Boolean} [keepExisting] True to retain existing selections
* @param {Boolean} [suppressEvent] Set to false to not fire a select event
* @return {Boolean} `true` if there is a previous record, else `false`
*/
selectPrevious: function(keepExisting, suppressEvent) {
var me = this,
selection = me.getSelection(),
record = selection[0],
index = me.store.indexOf(record) - 1,
success;
if (index < 0) {
success = false;
} else {
me.doSelect(index, keepExisting, suppressEvent);
success = true;
}
return success;
}
});
/**
* A selection model that renders a column of checkboxes that can be toggled to
* select or deselect rows. The default mode for this selection model is MULTI.
*
* The selection model will inject a header for the checkboxes in the first view
* and according to the 'injectCheckbox' configuration.
*/
Ext.define('Ext.selection.CheckboxModel', {
alias: 'selection.checkboxmodel',
extend: 'Ext.selection.RowModel',
/**
* @cfg {String} mode
* Modes of selection.
* Valid values are SINGLE, SIMPLE, and MULTI.
*/
mode: 'MULTI',
/**
* @cfg {Number/String} [injectCheckbox=0]
* The index at which to insert the checkbox column.
* Supported values are a numeric index, and the strings 'first' and 'last'.
*/
injectCheckbox: 0,
/**
* @cfg {Boolean} checkOnly
* True if rows can only be selected by clicking on the checkbox column.
*/
checkOnly: false,
/**
* @cfg {Boolean} showHeaderCheckbox
* Configure as `false` to not display the header checkbox at the top of the column.
*/
showHeaderCheckbox: true,
headerWidth: 24,
// private
checkerOnCls: Ext.baseCSSPrefix + 'grid-hd-checker-on',
// private
refreshOnRemove: true,
beforeViewRender: function(view) {
var me = this;
me.callParent(arguments);
// if we have a locked header, only hook up to the first
if (!me.hasLockedHeader() || view.headerCt.lockedCt) {
if (me.showHeaderCheckbox !== false) {
view.headerCt.on('headerclick', me.onHeaderClick, me);
}
me.addCheckbox(view, true);
me.mon(view.ownerCt, 'reconfigure', me.onReconfigure, me);
}
},
bindComponent: function(view) {
var me = this;
me.sortable = false;
me.callParent(arguments);
},
hasLockedHeader: function(){
var views = this.views,
vLen = views.length,
v;
for (v = 0; v < vLen; v++) {
if (views[v].headerCt.lockedCt) {
return true;
}
}
return false;
},
/**
* Add the header checkbox to the header row
* @private
* @param {Boolean} initial True if we're binding for the first time.
*/
addCheckbox: function(view, initial){
var me = this,
checkbox = me.injectCheckbox,
headerCt = view.headerCt;
// Preserve behaviour of false, but not clear why that would ever be done.
if (checkbox !== false) {
if (checkbox == 'first') {
checkbox = 0;
} else if (checkbox == 'last') {
checkbox = headerCt.getColumnCount();
}
Ext.suspendLayouts();
headerCt.add(checkbox, me.getHeaderConfig());
Ext.resumeLayouts();
}
if (initial !== true) {
view.refresh();
}
},
/**
* Handles the grid's reconfigure event. Adds the checkbox header if the columns have been reconfigured.
* @private
* @param {Ext.panel.Table} grid
* @param {Ext.data.Store} store
* @param {Object[]} columns
*/
onReconfigure: function(grid, store, columns) {
if(columns) {
this.addCheckbox(this.views[0]);
}
},
/**
* Toggle the ui header between checked and unchecked state.
* @param {Boolean} isChecked
* @private
*/
toggleUiHeader: function(isChecked) {
var view = this.views[0],
headerCt = view.headerCt,
checkHd = headerCt.child('gridcolumn[isCheckerHd]');
if (checkHd) {
if (isChecked) {
checkHd.el.addCls(this.checkerOnCls);
} else {
checkHd.el.removeCls(this.checkerOnCls);
}
}
},
/**
* Toggle between selecting all and deselecting all when clicking on
* a checkbox header.
*/
onHeaderClick: function(headerCt, header, e) {
if (header.isCheckerHd) {
e.stopEvent();
var me = this,
isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
// Prevent focus changes on the view, since we're selecting/deselecting all records
me.preventFocus = true;
if (isChecked) {
me.deselectAll();
} else {
me.selectAll();
}
delete me.preventFocus;
}
},
/**
* Retrieve a configuration to be used in a HeaderContainer.
* This should be used when injectCheckbox is set to false.
*/
getHeaderConfig: function() {
var me = this,
showCheck = me.showHeaderCheckbox !== false;
return {
isCheckerHd: showCheck,
text : ' ',
width: me.headerWidth,
sortable: false,
draggable: false,
resizable: false,
hideable: false,
menuDisabled: true,
dataIndex: '',
cls: showCheck ? Ext.baseCSSPrefix + 'column-header-checkbox ' : '',
renderer: Ext.Function.bind(me.renderer, me),
editRenderer: me.editRenderer || me.renderEmpty,
locked: me.hasLockedHeader()
};
},
renderEmpty: function(){
return ' ';
},
/**
* Generates the HTML to be rendered in the injected checkbox column for each row.
* Creates the standard checkbox markup by default; can be overridden to provide custom rendering.
* See {@link Ext.grid.column.Column#renderer} for description of allowed parameters.
*/
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var baseCSSPrefix = Ext.baseCSSPrefix;
metaData.tdCls = baseCSSPrefix + 'grid-cell-special ' + baseCSSPrefix + 'grid-cell-row-checker';
return ' {baseCls}-body-{ui} ',
' {baseCls}-strip-{ui} '
],
/**
* @cfg {Number} minTabWidth
* The minimum width for a tab in this tab Bar. Defaults to the tab Panel's {@link Ext.tab.Panel#minTabWidth minTabWidth} value.
* @deprecated This config is deprecated. It is much easier to use the {@link Ext.tab.Panel#minTabWidth minTabWidth} config on the TabPanel.
*/
/**
* @cfg {Number} maxTabWidth
* The maximum width for a tab in this tab Bar. Defaults to the tab Panel's {@link Ext.tab.Panel#maxTabWidth maxTabWidth} value.
* @deprecated This config is deprecated. It is much easier to use the {@link Ext.tab.Panel#maxTabWidth maxTabWidth} config on the TabPanel.
*/
// @private
initComponent: function() {
var me = this;
if (me.plain) {
me.setUI(me.ui + '-plain');
}
me.addClsWithUI(me.dock);
me.addEvents(
/**
* @event change
* Fired when the currently-active tab has changed
* @param {Ext.tab.Bar} tabBar The TabBar
* @param {Ext.tab.Tab} tab The new Tab
* @param {Ext.Component} card The card that was just shown in the TabPanel
*/
'change'
);
// Element onClick listener added by Header base class
me.callParent(arguments);
// TabBar must override the Header's align setting.
me.layout.align = (me.orientation == 'vertical') ? 'left' : 'top';
me.layout.overflowHandler = new Ext.layout.container.boxOverflow.Scroller(me.layout);
me.remove(me.titleCmp);
delete me.titleCmp;
Ext.apply(me.renderData, {
bodyCls: me.bodyCls
});
},
getLayout: function() {
var me = this;
me.layout.type = (me.dock === 'top' || me.dock === 'bottom') ? 'hbox' : 'vbox';
return me.callParent(arguments);
},
// @private
onAdd: function(tab) {
tab.position = this.dock;
this.callParent(arguments);
},
onRemove: function(tab) {
var me = this;
if (tab === me.previousTab) {
me.previousTab = null;
}
me.callParent(arguments);
},
afterComponentLayout : function(width) {
this.callParent(arguments);
this.strip.setWidth(width);
},
// @private
onClick: function(e, target) {
// The target might not be a valid tab el.
var me = this,
tabEl = e.getTarget('.' + Ext.tab.Tab.prototype.baseCls),
tab = tabEl && Ext.getCmp(tabEl.id),
tabPanel = me.tabPanel,
isCloseClick = tab && tab.closeEl && (target === tab.closeEl.dom);
if (isCloseClick) {
e.preventDefault();
}
if (tab && tab.isDisabled && !tab.isDisabled()) {
if (tab.closable && isCloseClick) {
tab.onCloseClick();
} else {
if (tabPanel) {
// TabPanel will card setActiveTab of the TabBar
tabPanel.setActiveTab(tab.card);
} else {
me.setActiveTab(tab);
}
tab.focus();
}
}
},
/**
* @private
* Closes the given tab by removing it from the TabBar and removing the corresponding card from the TabPanel
* @param {Ext.tab.Tab} toClose The tab to close
*/
closeTab: function(toClose) {
var me = this,
card = toClose.card,
tabPanel = me.tabPanel,
toActivate;
if (card && card.fireEvent('beforeclose', card) === false) {
return false;
}
// If we are closing the active tab, revert to the previously active tab (or the previous or next enabled sibling if
// there *is* no previously active tab, or the previously active tab is the one that's being closed or the previously
// active tab has since been disabled)
toActivate = me.findNextActivatable(toClose);
// We are going to remove the associated card, and then, if that was sucessful, remove the Tab,
// And then potentially activate another Tab. We should not layout for each of these operations.
Ext.suspendLayouts();
if (tabPanel && card) {
// Remove the ownerCt so the tab doesn't get destroyed if the remove is successful
// We need this so we can have the tab fire it's own close event.
delete toClose.ownerCt;
// we must fire 'close' before removing the card from panel, otherwise
// the event will no loger have any listener
card.fireEvent('close', card);
tabPanel.remove(card);
// Remove succeeded
if (!tabPanel.getComponent(card)) {
/*
* Force the close event to fire. By the time this function returns,
* the tab is already destroyed and all listeners have been purged
* so the tab can't fire itself.
*/
toClose.fireClose();
me.remove(toClose);
} else {
// Restore the ownerCt from above
toClose.ownerCt = me;
Ext.resumeLayouts(true);
return false;
}
}
// If we are closing the active tab, revert to the previously active tab (or the previous sibling or the nnext sibling)
if (toActivate) {
// Our owning TabPanel calls our setActiveTab method, so only call that if this Bar is being used
// in some other context (unlikely)
if (tabPanel) {
tabPanel.setActiveTab(toActivate.card);
} else {
me.setActiveTab(toActivate);
}
toActivate.focus();
}
Ext.resumeLayouts(true);
},
// private - used by TabPanel too.
// Works out the next tab to activate when one tab is closed.
findNextActivatable: function(toClose) {
var me = this;
if (toClose.active && me.items.getCount() > 1) {
return (me.previousTab && me.previousTab !== toClose && !me.previousTab.disabled) ? me.previousTab : (toClose.next('tab[disabled=false]') || toClose.prev('tab[disabled=false]'));
}
},
/**
* @private
* Marks the given tab as active
* @param {Ext.tab.Tab} tab The tab to mark active
*/
setActiveTab: function(tab) {
var me = this;
if (!tab.disabled && tab !== me.activeTab) {
if (me.activeTab) {
if (me.activeTab.isDestroyed) {
me.previousTab = null;
} else {
me.previousTab = me.activeTab;
me.activeTab.deactivate();
}
}
tab.activate();
me.activeTab = tab;
me.fireEvent('change', me, tab, tab.card);
// Ensure that after the currently in progress layout, the active tab is scrolled into view
me.on({
afterlayout: me.afterTabActivate,
scope: me,
single: true
});
me.updateLayout();
}
},
afterTabActivate: function() {
this.layout.overflowHandler.scrollToItem(this.activeTab);
}
});
/**
* @author Ed Spencer, Tommy Maintz, Brian Moeskau
*
* A basic tab container. TabPanels can be used exactly like a standard {@link Ext.panel.Panel} for
* layout purposes, but also have special support for containing child Components
* (`{@link Ext.container.Container#cfg-items items}`) that are managed using a
* {@link Ext.layout.container.Card CardLayout layout manager}, and displayed as separate tabs.
*
* **Note:** By default, a tab's close tool _destroys_ the child tab Component and all its descendants.
* This makes the child tab Component, and all its descendants **unusable**. To enable re-use of a tab,
* configure the TabPanel with `{@link #autoDestroy autoDestroy: false}`.
*
* ## TabPanel's layout
*
* TabPanels use a Dock layout to position the {@link Ext.tab.Bar TabBar} at the top of the widget.
* Panels added to the TabPanel will have their header hidden by default because the Tab will
* automatically take the Panel's configured title and icon.
*
* TabPanels use their {@link Ext.panel.Header header} or {@link Ext.panel.Panel#fbar footer}
* element (depending on the {@link #tabPosition} configuration) to accommodate the tab selector buttons.
* This means that a TabPanel will not display any configured title, and will not display any configured
* header {@link Ext.panel.Panel#tools tools}.
*
* To display a header, embed the TabPanel in a {@link Ext.panel.Panel Panel} which uses
* `{@link Ext.container.Container#layout layout: 'fit'}`.
*
* ## Controlling tabs
*
* Configuration options for the {@link Ext.tab.Tab} that represents the component can be passed in
* by specifying the tabConfig option:
*
* @example
* Ext.create('Ext.tab.Panel', {
* width: 400,
* height: 400,
* renderTo: document.body,
* items: [{
* title: 'Foo'
* }, {
* title: 'Bar',
* tabConfig: {
* title: 'Custom Title',
* tooltip: 'A button tooltip'
* }
* }]
* });
*
* # Examples
*
* Here is a basic TabPanel rendered to the body. This also shows the useful configuration {@link #activeTab},
* which allows you to set the active tab on render. If you do not set an {@link #activeTab}, no tabs will be
* active by default.
*
* @example
* Ext.create('Ext.tab.Panel', {
* width: 300,
* height: 200,
* activeTab: 0,
* items: [
* {
* title: 'Tab 1',
* bodyPadding: 10,
* html : 'A simple tab'
* },
* {
* title: 'Tab 2',
* html : 'Another one'
* }
* ],
* renderTo : Ext.getBody()
* });
*
* It is easy to control the visibility of items in the tab bar. Specify hidden: true to have the
* tab button hidden initially. Items can be subsequently hidden and show by accessing the
* tab property on the child item.
*
* @example
* var tabs = Ext.create('Ext.tab.Panel', {
* width: 400,
* height: 400,
* renderTo: document.body,
* items: [{
* title: 'Home',
* html: 'Home',
* itemId: 'home'
* }, {
* title: 'Users',
* html: 'Users',
* itemId: 'users',
* hidden: true
* }, {
* title: 'Tickets',
* html: 'Tickets',
* itemId: 'tickets'
* }]
* });
*
* setTimeout(function(){
* tabs.child('#home').tab.hide();
* var users = tabs.child('#users');
* users.tab.show();
* tabs.setActiveTab(users);
* }, 1000);
*
* You can remove the background of the TabBar by setting the {@link #plain} property to `true`.
*
* @example
* Ext.create('Ext.tab.Panel', {
* width: 300,
* height: 200,
* activeTab: 0,
* plain: true,
* items: [
* {
* title: 'Tab 1',
* bodyPadding: 10,
* html : 'A simple tab'
* },
* {
* title: 'Tab 2',
* html : 'Another one'
* }
* ],
* renderTo : Ext.getBody()
* });
*
* Another useful configuration of TabPanel is {@link #tabPosition}. This allows you to change the
* position where the tabs are displayed. The available options for this are `'top'` (default) and
* `'bottom'`.
*
* @example
* Ext.create('Ext.tab.Panel', {
* width: 300,
* height: 200,
* activeTab: 0,
* bodyPadding: 10,
* tabPosition: 'bottom',
* items: [
* {
* title: 'Tab 1',
* html : 'A simple tab'
* },
* {
* title: 'Tab 2',
* html : 'Another one'
* }
* ],
* renderTo : Ext.getBody()
* });
*
* The {@link #setActiveTab} is a very useful method in TabPanel which will allow you to change the
* current active tab. You can either give it an index or an instance of a tab. For example:
*
* @example
* var tabs = Ext.create('Ext.tab.Panel', {
* items: [
* {
* id : 'my-tab',
* title: 'Tab 1',
* html : 'A simple tab'
* },
* {
* title: 'Tab 2',
* html : 'Another one'
* }
* ],
* renderTo : Ext.getBody()
* });
*
* var tab = Ext.getCmp('my-tab');
*
* Ext.create('Ext.button.Button', {
* renderTo: Ext.getBody(),
* text : 'Select the first tab',
* scope : this,
* handler : function() {
* tabs.setActiveTab(tab);
* }
* });
*
* Ext.create('Ext.button.Button', {
* text : 'Select the second tab',
* scope : this,
* handler : function() {
* tabs.setActiveTab(1);
* },
* renderTo : Ext.getBody()
* });
*
* The {@link #getActiveTab} is a another useful method in TabPanel which will return the current active tab.
*
* @example
* var tabs = Ext.create('Ext.tab.Panel', {
* items: [
* {
* title: 'Tab 1',
* html : 'A simple tab'
* },
* {
* title: 'Tab 2',
* html : 'Another one'
* }
* ],
* renderTo : Ext.getBody()
* });
*
* Ext.create('Ext.button.Button', {
* text : 'Get active tab',
* scope : this,
* handler : function() {
* var tab = tabs.getActiveTab();
* alert('Current tab: ' + tab.title);
* },
* renderTo : Ext.getBody()
* });
*
* Adding a new tab is very simple with a TabPanel. You simple call the {@link #method-add} method with an config
* object for a panel.
*
* @example
* var tabs = Ext.create('Ext.tab.Panel', {
* items: [
* {
* title: 'Tab 1',
* html : 'A simple tab'
* },
* {
* title: 'Tab 2',
* html : 'Another one'
* }
* ],
* renderTo : Ext.getBody()
* });
*
* Ext.create('Ext.button.Button', {
* text : 'New tab',
* scope : this,
* handler : function() {
* var tab = tabs.add({
* // we use the tabs.items property to get the length of current items/tabs
* title: 'Tab ' + (tabs.items.length + 1),
* html : 'Another one'
* });
*
* tabs.setActiveTab(tab);
* },
* renderTo : Ext.getBody()
* });
*
* Additionally, removing a tab is very also simple with a TabPanel. You simple call the {@link #method-remove} method
* with an config object for a panel.
*
* @example
* var tabs = Ext.create('Ext.tab.Panel', {
* items: [
* {
* title: 'Tab 1',
* html : 'A simple tab'
* },
* {
* id : 'remove-this-tab',
* title: 'Tab 2',
* html : 'Another one'
* }
* ],
* renderTo : Ext.getBody()
* });
*
* Ext.create('Ext.button.Button', {
* text : 'Remove tab',
* scope : this,
* handler : function() {
* var tab = Ext.getCmp('remove-this-tab');
* tabs.remove(tab);
* },
* renderTo : Ext.getBody()
* });
*/
Ext.define('Ext.tab.Panel', {
extend: 'Ext.panel.Panel',
alias: 'widget.tabpanel',
alternateClassName: ['Ext.TabPanel'],
requires: ['Ext.layout.container.Card', 'Ext.tab.Bar'],
/**
* @cfg {String} tabPosition
* The position where the tab strip should be rendered. Can be `top` or `bottom`.
*/
tabPosition : 'top',
/**
* @cfg {String/Number} activeItem
* Doesn't apply for {@link Ext.tab.Panel TabPanel}, use {@link #activeTab} instead.
*/
/**
* @cfg {String/Number/Ext.Component} activeTab
* The tab to activate initially. Either an ID, index or the tab component itself.
*/
/**
* @cfg {Object} tabBar
* Optional configuration object for the internal {@link Ext.tab.Bar}.
* If present, this is passed straight through to the TabBar's constructor
*/
/**
* @cfg {Object} layout
* Optional configuration object for the internal {@link Ext.layout.container.Card card layout}.
* If present, this is passed straight through to the layout's constructor
*/
/**
* @cfg {Boolean} removePanelHeader
* True to instruct each Panel added to the TabContainer to not render its header element.
* This is to ensure that the title of the panel does not appear twice.
*/
removePanelHeader: true,
/**
* @cfg {Boolean} plain
* True to not show the full background on the TabBar.
*/
plain: false,
/**
* @cfg {String} [itemCls='x-tabpanel-child']
* The class added to each child item of this TabPanel.
*/
itemCls: Ext.baseCSSPrefix + 'tabpanel-child',
/**
* @cfg {Number} minTabWidth
* The minimum width for a tab in the {@link #cfg-tabBar}.
*/
minTabWidth: undefined,
/**
* @cfg {Number} maxTabWidth The maximum width for each tab.
*/
maxTabWidth: undefined,
/**
* @cfg {Boolean} deferredRender
*
* True by default to defer the rendering of child {@link Ext.container.Container#cfg-items items} to the browsers DOM
* until a tab is activated. False will render all contained {@link Ext.container.Container#cfg-items items} as soon as
* the {@link Ext.layout.container.Card layout} is rendered. If there is a significant amount of content or a lot of
* heavy controls being rendered into panels that are not displayed by default, setting this to true might improve
* performance.
*
* The deferredRender property is internally passed to the layout manager for TabPanels ({@link
* Ext.layout.container.Card}) as its {@link Ext.layout.container.Card#deferredRender} configuration value.
*
* **Note**: leaving deferredRender as true means that the content within an unactivated tab will not be available
*/
deferredRender : true,
//inherit docs
initComponent: function() {
var me = this,
dockedItems = [].concat(me.dockedItems || []),
activeTab = me.activeTab || (me.activeTab = 0);
// Configure the layout with our deferredRender, and with our activeTeb
me.layout = new Ext.layout.container.Card(Ext.apply({
owner: me,
deferredRender: me.deferredRender,
itemCls: me.itemCls,
activeItem: me.activeTab
}, me.layout));
/**
* @property {Ext.tab.Bar} tabBar Internal reference to the docked TabBar
*/
me.tabBar = new Ext.tab.Bar(Ext.apply({
dock: me.tabPosition,
plain: me.plain,
border: me.border,
cardLayout: me.layout,
tabPanel: me
}, me.tabBar));
dockedItems.push(me.tabBar);
me.dockedItems = dockedItems;
me.addEvents(
/**
* @event
* Fires before a tab change (activated by {@link #setActiveTab}). Return false in any listener to cancel
* the tabchange
* @param {Ext.tab.Panel} tabPanel The TabPanel
* @param {Ext.Component} newCard The card that is about to be activated
* @param {Ext.Component} oldCard The card that is currently active
*/
'beforetabchange',
/**
* @event
* Fires when a new tab has been activated (activated by {@link #setActiveTab}).
* @param {Ext.tab.Panel} tabPanel The TabPanel
* @param {Ext.Component} newCard The newly activated item
* @param {Ext.Component} oldCard The previously active item
*/
'tabchange'
);
me.callParent(arguments);
// We have to convert the numeric index/string ID config into its component reference
me.activeTab = me.getComponent(activeTab);
// Ensure that the active child's tab is rendered in the active UI state
if (me.activeTab) {
me.activeTab.tab.activate(true);
// So that it knows what to deactivate in subsequent tab changes
me.tabBar.activeTab = me.activeTab.tab;
}
},
/**
* Makes the given card active. Makes it the visible card in the TabPanel's CardLayout and highlights the Tab.
* @param {String/Number/Ext.Component} card The card to make active. Either an ID, index or the component itself.
* @return {Ext.Component} The resulting active child Component. The call may have been vetoed, or otherwise
* modified by an event listener.
*/
setActiveTab: function(card) {
var me = this,
previous;
card = me.getComponent(card);
if (card) {
previous = me.getActiveTab();
if (previous !== card && me.fireEvent('beforetabchange', me, card, previous) === false) {
return false;
}
// We may be passed a config object, so add it.
// Without doing a layout!
if (!card.isComponent) {
Ext.suspendLayouts();
card = me.add(card);
Ext.resumeLayouts();
}
// MUST set the activeTab first so that the machinery which listens for show doesn't
// think that the show is "driving" the activation and attempt to recurse into here.
me.activeTab = card;
// Attempt to switch to the requested card. Suspend layouts because if that was successful
// we have to also update the active tab in the tab bar which is another layout operation
// and we must coalesce them.
Ext.suspendLayouts();
me.layout.setActiveItem(card);
// Read the result of the card layout. Events dear boy, events!
card = me.activeTab = me.layout.getActiveItem();
// Card switch was not vetoed by an event listener
if (card && card !== previous) {
// Update the active tab in the tab bar and resume layouts.
me.tabBar.setActiveTab(card.tab);
Ext.resumeLayouts(true);
// previous will be undefined or this.activeTab at instantiation
if (previous !== card) {
me.fireEvent('tabchange', me, card, previous);
}
}
// Card switch was vetoed by an event listener. Resume layouts (Nothing should have changed on a veto).
else {
Ext.resumeLayouts(true);
}
return card;
}
},
/**
* Returns the item that is currently active inside this TabPanel.
* @return {Ext.Component} The currently active item.
*/
getActiveTab: function() {
var me = this,
// Ensure the calculated result references a Component
result = me.getComponent(me.activeTab);
// Sanitize the result in case the active tab is no longer there.
if (result && me.items.indexOf(result) != -1) {
me.activeTab = result;
} else {
me.activeTab = null;
}
return me.activeTab;
},
/**
* Returns the {@link Ext.tab.Bar} currently used in this TabPanel
* @return {Ext.tab.Bar} The TabBar
*/
getTabBar: function() {
return this.tabBar;
},
/**
* @protected
* Makes sure we have a Tab for each item added to the TabPanel
*/
onAdd: function(item, index) {
var me = this,
cfg = item.tabConfig || {},
defaultConfig = {
xtype: 'tab',
card: item,
disabled: item.disabled,
closable: item.closable,
hidden: item.hidden && !item.hiddenByLayout, // only hide if it wasn't hidden by the layout itself
tooltip: item.tooltip,
tabBar: me.tabBar,
closeText: item.closeText
};
cfg = Ext.applyIf(cfg, defaultConfig);
// Create the correspondiong tab in the tab bar
item.tab = me.tabBar.insert(index, cfg);
item.on({
scope : me,
enable: me.onItemEnable,
disable: me.onItemDisable,
beforeshow: me.onItemBeforeShow,
iconchange: me.onItemIconChange,
iconclschange: me.onItemIconClsChange,
titlechange: me.onItemTitleChange
});
if (item.isPanel) {
if (me.removePanelHeader) {
if (item.rendered) {
if (item.header) {
item.header.hide();
}
} else {
item.header = false;
}
}
if (item.isPanel && me.border) {
item.setBorder(false);
}
}
},
/**
* @private
* Enable corresponding tab when item is enabled.
*/
onItemEnable: function(item){
item.tab.enable();
},
/**
* @private
* Disable corresponding tab when item is enabled.
*/
onItemDisable: function(item){
item.tab.disable();
},
/**
* @private
* Sets activeTab before item is shown.
*/
onItemBeforeShow: function(item) {
if (item !== this.activeTab) {
this.setActiveTab(item);
return false;
}
},
/**
* @private
* Update the tab icon when panel icon has been set or changed.
*/
onItemIconChange: function(item, newIcon) {
item.tab.setIcon(newIcon);
},
/**
* @private
* Update the tab iconCls when panel iconCls has been set or changed.
*/
onItemIconClsChange: function(item, newIconCls) {
item.tab.setIconCls(newIconCls);
},
/**
* @private
* Update the tab title when panel title has been set or changed.
*/
onItemTitleChange: function(item, newTitle) {
item.tab.setText(newTitle);
},
/**
* @private
* Unlink the removed child item from its (@link Ext.tab.Tab Tab}.
*
* If we're removing the currently active tab, activate the nearest one. The item is removed when we call super,
* so we can do preprocessing before then to find the card's index
*/
doRemove: function(item, autoDestroy) {
var me = this,
toActivate;
// Destroying, or removing the last item, nothing to activate
if (me.destroying || me.items.getCount() == 1) {
me.activeTab = null;
}
// Ask the TabBar which tab to activate next.
// Set the active child panel using the index of that tab
else if ((toActivate = me.tabBar.items.indexOf(me.tabBar.findNextActivatable(item.tab))) !== -1) {
me.setActiveTab(toActivate);
}
this.callParent(arguments);
// Remove the two references
delete item.tab.card;
delete item.tab;
},
/**
* @private
* Makes sure we remove the corresponding Tab when an item is removed
*/
onRemove: function(item, destroying) {
var me = this;
item.un({
scope : me,
enable: me.onItemEnable,
disable: me.onItemDisable,
beforeshow: me.onItemBeforeShow
});
if (!me.destroying && item.tab.ownerCt === me.tabBar) {
me.tabBar.remove(item.tab);
}
}
});
/**
* A simple element that adds extra horizontal space between items in a toolbar.
* By default a 2px wide space is added via CSS specification:
*
* .x-toolbar .x-toolbar-spacer {
* width: 2px;
* }
*
* Example:
*
* @example
* Ext.create('Ext.panel.Panel', {
* title: 'Toolbar Spacer Example',
* width: 300,
* height: 200,
* tbar : [
* 'Item 1',
* { xtype: 'tbspacer' }, // or ' '
* 'Item 2',
* // space width is also configurable via javascript
* { xtype: 'tbspacer', width: 50 }, // add a 50px space
* 'Item 3'
* ],
* renderTo: Ext.getBody()
* });
*/
Ext.define('Ext.toolbar.Spacer', {
extend: 'Ext.Component',
alias: 'widget.tbspacer',
alternateClassName: 'Ext.Toolbar.Spacer',
baseCls: Ext.baseCSSPrefix + 'toolbar-spacer',
focusable: false
});
/**
* Provides indentation and folder structure markup for a Tree taking into account
* depth and position within the tree hierarchy.
*
* @private
*/
Ext.define('Ext.tree.Column', {
extend: 'Ext.grid.column.Column',
alias: 'widget.treecolumn',
tdCls: Ext.baseCSSPrefix + 'grid-cell-treecolumn',
treePrefix: Ext.baseCSSPrefix + 'tree-',
elbowPrefix: Ext.baseCSSPrefix + 'tree-elbow-',
expanderCls: Ext.baseCSSPrefix + 'tree-expander',
imgText: '',
' | '
].join('')
}, 'after');
return {
record: record,
node: node,
el: tmpEl,
expanding: false,
collapsing: false,
animating: false,
animateEl: tmpEl.down('div'),
targetEl: tmpEl.down('tbody')
};
},
/**
* @private
* Returns the animation wrapper element for the specified parent node, used to wrap the child nodes as
* they slide up or down during expand/collapse.
*
* @param parent The parent node to be expanded or collapsed
*
* @param [bubble=true] If the passed parent node does not already have a wrap element created, by default
* this function will bubble up to each parent node looking for a valid wrap element to reuse, returning
* the first one it finds. This is the appropriate behavior, e.g., for the collapse direction, so that the
* entire expanded set of branch nodes can collapse as a single unit.
*
* However for expanding each parent node should instead always create its own animation wrap if one
* doesn't exist, so that its children can expand independently of any other nodes -- this is crucial
* when executing the "expand all" behavior. If multiple nodes attempt to reuse the same ancestor wrap
* element concurrently during expansion it will lead to problems as the first animation to complete will
* delete the wrap el out from under other running animations. For that reason, when expanding you should
* always pass `bubble: false` to be on the safe side.
*
* If the passed parent has no wrap (or there is no valid ancestor wrap after bubbling), this function
* will return null and the calling code should then call {@link #createAnimWrap} if needed.
*
* @return {Ext.Element} The wrapping element as created in {@link #createAnimWrap}, or null
*/
getAnimWrap: function(parent, bubble) {
if (!this.animate) {
return null;
}
var wraps = this.animWraps,
wrap = wraps[parent.internalId];
if (bubble !== false) {
while (!wrap && parent) {
parent = parent.parentNode;
if (parent) {
wrap = wraps[parent.internalId];
}
}
}
return wrap;
},
doAdd: function(nodes, records, index) {
// If we are adding records which have a parent that is currently expanding
// lets add them to the animation wrap
var me = this,
record = records[0],
parent = record.parentNode,
a = me.all.elements,
relativeIndex = 0,
animWrap = me.getAnimWrap(parent),
targetEl, children, len;
if (!animWrap || !animWrap.expanding) {
return me.callParent(arguments);
}
// We need the parent that has the animWrap, not the nodes parent
parent = animWrap.record;
// If there is an anim wrap we do our special magic logic
targetEl = animWrap.targetEl;
children = targetEl.dom.childNodes;
// We subtract 1 from the childrens length because we have a tr in there with the th'es
len = children.length - 1;
// The relative index is the index in the full flat collection minus the index of the wraps parent
relativeIndex = index - me.indexOf(parent) - 1;
// If we are adding records to the wrap that have a higher relative index then there are currently children
// it means we have to append the nodes to the wrap
if (!len || relativeIndex >= len) {
targetEl.appendChild(nodes);
}
// If there are already more children then the relative index it means we are adding child nodes of
// some expanded node in the anim wrap. In this case we have to insert the nodes in the right location
else {
// +1 because of the tr with th'es that is already there
Ext.fly(children[relativeIndex + 1]).insertSibling(nodes, 'before', true);
}
// We also have to update the CompositeElementLite collection of the DataView
Ext.Array.insert(a, index, nodes);
// If we were in an animation we need to now change the animation
// because the targetEl just got higher.
if (animWrap.isAnimating) {
me.onExpand(parent);
}
},
beginBulkUpdate: function(){
this.bulkUpdate = true;
},
endBulkUpdate: function(){
this.bulkUpdate = false;
},
onRemove : function(ds, record, index) {
var me = this,
bulk = me.bulkUpdate;
if (me.viewReady) {
me.doRemove(record, index);
if (!bulk) {
me.updateIndexes(index);
}
if (me.store.getCount() === 0){
me.refresh();
}
if (!bulk) {
me.fireEvent('itemremove', record, index);
}
}
},
doRemove: function(record, index) {
// If we are adding records which have a parent that is currently expanding
// lets add them to the animation wrap
var me = this,
all = me.all,
animWrap = me.getAnimWrap(record),
item = all.item(index),
node = item ? item.dom : null;
if (!node || !animWrap || !animWrap.collapsing) {
return me.callParent(arguments);
}
animWrap.targetEl.appendChild(node);
all.removeElement(index);
},
onBeforeExpand: function(parent, records, index) {
var me = this,
animWrap;
if (!me.rendered || !me.animate) {
return;
}
if (me.getNode(parent)) {
animWrap = me.getAnimWrap(parent, false);
if (!animWrap) {
animWrap = me.animWraps[parent.internalId] = me.createAnimWrap(parent);
animWrap.animateEl.setHeight(0);
}
else if (animWrap.collapsing) {
// If we expand this node while it is still expanding then we
// have to remove the nodes from the animWrap.
animWrap.targetEl.select(me.itemSelector).remove();
}
animWrap.expanding = true;
animWrap.collapsing = false;
}
},
onExpand: function(parent) {
var me = this,
queue = me.animQueue,
id = parent.getId(),
node = me.getNode(parent),
index = node ? me.indexOf(node) : -1,
animWrap,
animateEl,
targetEl;
if (me.singleExpand) {
me.ensureSingleExpand(parent);
}
// The item is not visible yet
if (index === -1) {
return;
}
animWrap = me.getAnimWrap(parent, false);
if (!animWrap) {
me.isExpandingOrCollapsing = false;
me.fireEvent('afteritemexpand', parent, index, node);
return;
}
animateEl = animWrap.animateEl;
targetEl = animWrap.targetEl;
animateEl.stopAnimation();
// @TODO: we are setting it to 1 because quirks mode on IE seems to have issues with 0
queue[id] = true;
animateEl.slideIn('t', {
duration: me.expandDuration,
listeners: {
scope: me,
lastframe: function() {
// Move all the nodes out of the anim wrap to their proper location
animWrap.el.insertSibling(targetEl.query(me.itemSelector), 'before');
animWrap.el.remove();
me.refreshSize();
delete me.animWraps[animWrap.record.internalId];
delete queue[id];
}
},
callback: function() {
me.isExpandingOrCollapsing = false;
me.fireEvent('afteritemexpand', parent, index, node);
}
});
animWrap.isAnimating = true;
},
onBeforeCollapse: function(parent, records, index) {
var me = this,
animWrap;
if (!me.rendered || !me.animate) {
return;
}
if (me.getNode(parent)) {
animWrap = me.getAnimWrap(parent);
if (!animWrap) {
animWrap = me.animWraps[parent.internalId] = me.createAnimWrap(parent, index);
}
else if (animWrap.expanding) {
// If we collapse this node while it is still expanding then we
// have to remove the nodes from the animWrap.
animWrap.targetEl.select(this.itemSelector).remove();
}
animWrap.expanding = false;
animWrap.collapsing = true;
}
},
onCollapse: function(parent) {
var me = this,
queue = me.animQueue,
id = parent.getId(),
node = me.getNode(parent),
index = node ? me.indexOf(node) : -1,
animWrap = me.getAnimWrap(parent),
animateEl, targetEl;
// The item has already been removed by a parent node
if (index === -1) {
return;
}
if (!animWrap) {
me.isExpandingOrCollapsing = false;
me.fireEvent('afteritemcollapse', parent, index, node);
return;
}
animateEl = animWrap.animateEl;
targetEl = animWrap.targetEl;
queue[id] = true;
// @TODO: we are setting it to 1 because quirks mode on IE seems to have issues with 0
animateEl.stopAnimation();
animateEl.slideOut('t', {
duration: me.collapseDuration,
listeners: {
scope: me,
lastframe: function() {
animWrap.el.remove();
me.refreshSize();
delete me.animWraps[animWrap.record.internalId];
delete queue[id];
}
},
callback: function() {
me.isExpandingOrCollapsing = false;
me.fireEvent('afteritemcollapse', parent, index, node);
}
});
animWrap.isAnimating = true;
},
/**
* Checks if a node is currently undergoing animation
* @private
* @param {Ext.data.Model} node The node
* @return {Boolean} True if the node is animating
*/
isAnimating: function(node) {
return !!this.animQueue[node.getId()];
},
collectData: function(records) {
var data = this.callParent(arguments),
rows = data.rows,
len = rows.length,
i = 0,
row, record;
for (; i < len; i++) {
row = rows[i];
record = records[i];
if (record.get('qtip')) {
row.rowAttr = 'data-qtip="' + record.get('qtip') + '"';
if (record.get('qtitle')) {
row.rowAttr += ' ' + 'data-qtitle="' + record.get('qtitle') + '"';
}
}
if (record.isExpanded()) {
row.rowCls = (row.rowCls || '') + ' ' + this.expandedCls;
}
if (record.isLeaf()) {
row.rowCls = (row.rowCls || '') + ' ' + this.leafCls;
}
if (record.isLoading()) {
row.rowCls = (row.rowCls || '') + ' ' + this.loadingCls;
}
}
return data;
},
/**
* Expands a record that is loaded in the view.
* @param {Ext.data.Model} record The record to expand
* @param {Boolean} [deep] True to expand nodes all the way down the tree hierarchy.
* @param {Function} [callback] The function to run after the expand is completed
* @param {Object} [scope] The scope of the callback function.
*/
expand: function(record, deep, callback, scope) {
return record.expand(deep, callback, scope);
},
/**
* Collapses a record that is loaded in the view.
* @param {Ext.data.Model} record The record to collapse
* @param {Boolean} [deep] True to collapse nodes all the way up the tree hierarchy.
* @param {Function} [callback] The function to run after the collapse is completed
* @param {Object} [scope] The scope of the callback function.
*/
collapse: function(record, deep, callback, scope) {
return record.collapse(deep, callback, scope);
},
/**
* Toggles a record between expanded and collapsed.
* @param {Ext.data.Model} record
* @param {Boolean} [deep] True to collapse nodes all the way up the tree hierarchy.
* @param {Function} [callback] The function to run after the expand/collapse is completed
* @param {Object} [scope] The scope of the callback function.
*/
toggle: function(record, deep, callback, scope) {
var me = this,
doAnimate = !!this.animate;
// Block toggling if we are already animating an expand or collapse operation.
if (!doAnimate || !this.isExpandingOrCollapsing) {
if (!record.isLeaf()) {
this.isExpandingOrCollapsing = doAnimate;
}
if (record.isExpanded()) {
me.collapse(record, deep, callback, scope);
} else {
me.expand(record, deep, callback, scope);
}
}
},
onItemDblClick: function(record, item, index) {
var me = this,
editingPlugin = me.editingPlugin;
me.callParent(arguments);
if (me.toggleOnDblClick && record.isExpandable() && !(editingPlugin && editingPlugin.clicksToEdit === 2)) {
me.toggle(record);
}
},
onBeforeItemMouseDown: function(record, item, index, e) {
if (e.getTarget(this.expanderSelector, item)) {
return false;
}
return this.callParent(arguments);
},
onItemClick: function(record, item, index, e) {
if (e.getTarget(this.expanderSelector, item) && record.isExpandable()) {
this.toggle(record, e.ctrlKey);
return false;
}
return this.callParent(arguments);
},
onExpanderMouseOver: function(e, t) {
e.getTarget(this.cellSelector, 10, true).addCls(this.expanderIconOverCls);
},
onExpanderMouseOut: function(e, t) {
e.getTarget(this.cellSelector, 10, true).removeCls(this.expanderIconOverCls);
},
/**
* Gets the base TreeStore from the bound TreePanel.
*/
getTreeStore: function() {
return this.panel.store;
},
ensureSingleExpand: function(node) {
var parent = node.parentNode;
if (parent) {
parent.eachChild(function(child) {
if (child !== node && child.isExpanded()) {
child.collapse();
}
});
}
},
shouldUpdateCell: function(column, changedFieldNames){
if (changedFieldNames) {
var i = 0,
len = changedFieldNames.length;
for (; i < len; ++i) {
if (Ext.Array.contains(this.uiFields, changedFieldNames[i])) {
return true;
}
}
}
return this.callParent(arguments);
},
/**
* Re-fires the NodeStore's "write" event as a TreeStore event
* @private
* @param {Ext.data.NodeStore} store
* @param {Ext.data.Operation} operation
*/
onStoreWrite: function(store, operation) {
var treeStore = this.panel.store;
treeStore.fireEvent('write', treeStore, operation);
},
/**
* Re-fires the NodeStore's "datachanged" event as a TreeStore event
* @private
* @param {Ext.data.NodeStore} store
* @param {Ext.data.Operation} operation
*/
onStoreDataChanged: function(store, operation) {
var treeStore = this.panel.store;
treeStore.fireEvent('datachanged', treeStore);
}
});
/**
* The TreePanel provides tree-structured UI representation of tree-structured data.
* A TreePanel must be bound to a {@link Ext.data.TreeStore}. TreePanel's support
* multiple columns through the {@link #columns} configuration.
*
* Simple TreePanel using inline data:
*
* @example
* var store = Ext.create('Ext.data.TreeStore', {
* root: {
* expanded: true,
* children: [
* { text: "detention", leaf: true },
* { text: "homework", expanded: true, children: [
* { text: "book report", leaf: true },
* { text: "alegrbra", leaf: true}
* ] },
* { text: "buy lottery tickets", leaf: true }
* ]
* }
* });
*
* Ext.create('Ext.tree.Panel', {
* title: 'Simple Tree',
* width: 200,
* height: 150,
* store: store,
* rootVisible: false,
* renderTo: Ext.getBody()
* });
*
* For the tree node config options (like `text`, `leaf`, `expanded`), see the documentation of
* {@link Ext.data.NodeInterface NodeInterface} config options.
*/
Ext.define('Ext.tree.Panel', {
extend: 'Ext.panel.Table',
alias: 'widget.treepanel',
alternateClassName: ['Ext.tree.TreePanel', 'Ext.TreePanel'],
requires: ['Ext.tree.View', 'Ext.selection.TreeModel', 'Ext.tree.Column', 'Ext.data.TreeStore'],
viewType: 'treeview',
selType: 'treemodel',
treeCls: Ext.baseCSSPrefix + 'tree-panel',
deferRowRender: false,
/**
* @cfg {Boolean} rowLines
* False so that rows are not separated by lines.
*/
rowLines: false,
/**
* @cfg {Boolean} lines
* False to disable tree lines.
*/
lines: true,
/**
* @cfg {Boolean} useArrows
* True to use Vista-style arrows in the tree.
*/
useArrows: false,
/**
* @cfg {Boolean} singleExpand
* True if only 1 node per branch may be expanded.
*/
singleExpand: false,
ddConfig: {
enableDrag: true,
enableDrop: true
},
/**
* @cfg {Boolean} animate
* True to enable animated expand/collapse. Defaults to the value of {@link Ext#enableFx}.
*/
/**
* @cfg {Boolean} rootVisible
* False to hide the root node.
*/
rootVisible: true,
/**
* @cfg {String} displayField
* The field inside the model that will be used as the node's text.
*/
displayField: 'text',
/**
* @cfg {Ext.data.Model/Ext.data.NodeInterface/Object} root
* Allows you to not specify a store on this TreePanel. This is useful for creating a simple tree with preloaded
* data without having to specify a TreeStore and Model. A store and model will be created and root will be passed
* to that store. For example:
*
* Ext.create('Ext.tree.Panel', {
* title: 'Simple Tree',
* root: {
* text: "Root node",
* expanded: true,
* children: [
* { text: "Child 1", leaf: true },
* { text: "Child 2", leaf: true }
* ]
* },
* renderTo: Ext.getBody()
* });
*/
root: null,
// Required for the Lockable Mixin. These are the configurations which will be copied to the
// normal and locked sub tablepanels
normalCfgCopy: ['displayField', 'root', 'singleExpand', 'useArrows', 'lines', 'rootVisible', 'scroll'],
lockedCfgCopy: ['displayField', 'root', 'singleExpand', 'useArrows', 'lines', 'rootVisible'],
isTree: true,
/**
* @cfg {Boolean} hideHeaders
* True to hide the headers.
*/
/**
* @cfg {Boolean} folderSort
* True to automatically prepend a leaf sorter to the store.
*/
/**
* @cfg {Ext.data.TreeStore} store (required)
* The {@link Ext.data.TreeStore Store} the tree should use as its data source.
*/
constructor: function(config) {
config = config || {};
if (config.animate === undefined) {
config.animate = Ext.isDefined(this.animate) ? this.animate : Ext.enableFx;
}
this.enableAnimations = config.animate;
delete config.animate;
this.callParent([config]);
},
initComponent: function() {
var me = this,
cls = [me.treeCls],
view;
if (me.useArrows) {
cls.push(Ext.baseCSSPrefix + 'tree-arrows');
me.lines = false;
}
if (me.lines) {
cls.push(Ext.baseCSSPrefix + 'tree-lines');
} else if (!me.useArrows) {
cls.push(Ext.baseCSSPrefix + 'tree-no-lines');
}
if (Ext.isString(me.store)) {
me.store = Ext.StoreMgr.lookup(me.store);
} else if (!me.store || Ext.isObject(me.store) && !me.store.isStore) {
me.store = new Ext.data.TreeStore(Ext.apply({}, me.store || {}, {
root: me.root,
fields: me.fields,
model: me.model,
folderSort: me.folderSort
}));
} else if (me.root) {
me.store = Ext.data.StoreManager.lookup(me.store);
me.store.setRootNode(me.root);
if (me.folderSort !== undefined) {
me.store.folderSort = me.folderSort;
me.store.sort();
}
}
// I'm not sure if we want to this. It might be confusing
// if (me.initialConfig.rootVisible === undefined && !me.getRootNode()) {
// me.rootVisible = false;
// }
me.viewConfig = Ext.apply({}, me.viewConfig);
me.viewConfig = Ext.applyIf(me.viewConfig, {
rootVisible: me.rootVisible,
animate: me.enableAnimations,
singleExpand: me.singleExpand,
node: me.store.getRootNode(),
hideHeaders: me.hideHeaders
});
me.mon(me.store, {
scope: me,
rootchange: me.onRootChange,
clear: me.onClear
});
me.relayEvents(me.store, [
/**
* @event beforeload
* @inheritdoc Ext.data.TreeStore#beforeload
*/
'beforeload',
/**
* @event load
* @inheritdoc Ext.data.TreeStore#load
*/
'load'
]);
me.mon(me.store, {
/**
* @event itemappend
* @inheritdoc Ext.data.TreeStore#append
*/
append: me.createRelayer('itemappend'),
/**
* @event itemremove
* @inheritdoc Ext.data.TreeStore#remove
*/
remove: me.createRelayer('itemremove'),
/**
* @event itemmove
* @inheritdoc Ext.data.TreeStore#move
*/
move: me.createRelayer('itemmove', [0, 4]),
/**
* @event iteminsert
* @inheritdoc Ext.data.TreeStore#insert
*/
insert: me.createRelayer('iteminsert'),
/**
* @event beforeitemappend
* @inheritdoc Ext.data.TreeStore#beforeappend
*/
beforeappend: me.createRelayer('beforeitemappend'),
/**
* @event beforeitemremove
* @inheritdoc Ext.data.TreeStore#beforeremove
*/
beforeremove: me.createRelayer('beforeitemremove'),
/**
* @event beforeitemmove
* @inheritdoc Ext.data.TreeStore#beforemove
*/
beforemove: me.createRelayer('beforeitemmove'),
/**
* @event beforeiteminsert
* @inheritdoc Ext.data.TreeStore#beforeinsert
*/
beforeinsert: me.createRelayer('beforeiteminsert'),
/**
* @event itemexpand
* @inheritdoc Ext.data.TreeStore#expand
*/
expand: me.createRelayer('itemexpand', [0, 1]),
/**
* @event itemcollapse
* @inheritdoc Ext.data.TreeStore#collapse
*/
collapse: me.createRelayer('itemcollapse', [0, 1]),
/**
* @event beforeitemexpand
* @inheritdoc Ext.data.TreeStore#beforeexpand
*/
beforeexpand: me.createRelayer('beforeitemexpand', [0, 1]),
/**
* @event beforeitemcollapse
* @inheritdoc Ext.data.TreeStore#beforecollapse
*/
beforecollapse: me.createRelayer('beforeitemcollapse', [0, 1])
});
// If the user specifies the headers collection manually then dont inject our own
if (!me.columns) {
if (me.initialConfig.hideHeaders === undefined) {
me.hideHeaders = true;
}
me.addCls(Ext.baseCSSPrefix + 'autowidth-table');
me.columns = [{
xtype : 'treecolumn',
text : 'Name',
width : Ext.isIE6 ? null : 10000,
dataIndex: me.displayField
}];
}
if (me.cls) {
cls.push(me.cls);
}
me.cls = cls.join(' ');
me.callParent();
view = me.getView();
me.relayEvents(view, [
/**
* @event checkchange
* Fires when a node with a checkbox's checked property changes
* @param {Ext.data.NodeInterface} node The node who's checked property was changed
* @param {Boolean} checked The node's new checked state
*/
'checkchange',
/**
* @event afteritemexpand
* @inheritdoc Ext.tree.View#afteritemexpand
*/
'afteritemexpand',
/**
* @event afteritemcollapse
* @inheritdoc Ext.tree.View#afteritemcollapse
*/
'afteritemcollapse'
]);
// If the root is not visible and there is no rootnode defined, then just lets load the store
if (!view.rootVisible && !me.getRootNode()) {
me.setRootNode({
expanded: true
});
}
},
onClear: function(){
this.view.onClear();
},
/**
* Sets root node of this tree.
* @param {Ext.data.Model/Ext.data.NodeInterface/Object} root
* @return {Ext.data.NodeInterface} The new root
*/
setRootNode: function() {
return this.store.setRootNode.apply(this.store, arguments);
},
/**
* Returns the root node for this tree.
* @return {Ext.data.NodeInterface}
*/
getRootNode: function() {
return this.store.getRootNode();
},
onRootChange: function(root) {
this.view.setRootNode(root);
},
/**
* Retrieve an array of checked records.
* @return {Ext.data.NodeInterface[]} An array containing the checked records
*/
getChecked: function() {
return this.getView().getChecked();
},
isItemChecked: function(rec) {
return rec.get('checked');
},
/**
* Expands a record that is loaded in the tree.
* @param {Ext.data.Model} record The record to expand
* @param {Boolean} [deep] True to expand nodes all the way down the tree hierarchy.
* @param {Function} [callback] The function to run after the expand is completed
* @param {Object} [scope] The scope of the callback function.
*/
expandNode: function(record, deep, callback, scope) {
return this.getView().expand(record, deep, callback, scope || this);
},
/**
* Collapses a record that is loaded in the tree.
* @param {Ext.data.Model} record The record to collapse
* @param {Boolean} [deep] True to collapse nodes all the way up the tree hierarchy.
* @param {Function} [callback] The function to run after the collapse is completed
* @param {Object} [scope] The scope of the callback function.
*/
collapseNode: function(record, deep, callback, scope) {
return this.getView().collapse(record, deep, callback, scope || this);
},
/**
* Expand all nodes
* @param {Function} [callback] A function to execute when the expand finishes.
* @param {Object} [scope] The scope of the callback function
*/
expandAll : function(callback, scope) {
var me = this,
root = me.getRootNode(),
animate = me.enableAnimations,
view = me.getView();
if (root) {
if (!animate) {
view.beginBulkUpdate();
}
root.expand(true, callback, scope || me);
if (!animate) {
view.endBulkUpdate();
}
}
},
/**
* Collapse all nodes
* @param {Function} [callback] A function to execute when the collapse finishes.
* @param {Object} [scope] The scope of the callback function
*/
collapseAll : function(callback, scope) {
var me = this,
root = me.getRootNode(),
animate = me.enableAnimations,
view = me.getView();
if (root) {
if (!animate) {
view.beginBulkUpdate();
}
scope = scope || me;
if (view.rootVisible) {
root.collapse(true, callback, scope);
} else {
root.collapseChildren(true, callback, scope);
}
if (!animate) {
view.endBulkUpdate();
}
}
},
/**
* Expand the tree to the path of a particular node.
* @param {String} path The path to expand. The path should include a leading separator.
* @param {String} [field] The field to get the data from. Defaults to the model idProperty.
* @param {String} [separator='/'] A separator to use.
* @param {Function} [callback] A function to execute when the expand finishes. The callback will be called with
* (success, lastNode) where success is if the expand was successful and lastNode is the last node that was expanded.
* @param {Object} [scope] The scope of the callback function
*/
expandPath: function(path, field, separator, callback, scope) {
var me = this,
current = me.getRootNode(),
index = 1,
view = me.getView(),
keys,
expander;
field = field || me.getRootNode().idProperty;
separator = separator || '/';
if (Ext.isEmpty(path)) {
Ext.callback(callback, scope || me, [false, null]);
return;
}
keys = path.split(separator);
if (current.get(field) != keys[1]) {
// invalid root
Ext.callback(callback, scope || me, [false, current]);
return;
}
expander = function(){
if (++index === keys.length) {
Ext.callback(callback, scope || me, [true, current]);
return;
}
var node = current.findChild(field, keys[index]);
if (!node) {
Ext.callback(callback, scope || me, [false, current]);
return;
}
current = node;
current.expand(false, expander);
};
current.expand(false, expander);
},
/**
* Expand the tree to the path of a particular node, then select it.
* @param {String} path The path to select. The path should include a leading separator.
* @param {String} [field] The field to get the data from. Defaults to the model idProperty.
* @param {String} [separator='/'] A separator to use.
* @param {Function} [callback] A function to execute when the select finishes. The callback will be called with
* (bSuccess, oLastNode) where bSuccess is if the select was successful and oLastNode is the last node that was expanded.
* @param {Object} [scope] The scope of the callback function
*/
selectPath: function(path, field, separator, callback, scope) {
var me = this,
root,
keys,
last;
field = field || me.getRootNode().idProperty;
separator = separator || '/';
keys = path.split(separator);
last = keys.pop();
if (keys.length > 1) {
me.expandPath(keys.join(separator), field, separator, function(success, node){
var lastNode = node;
if (success && node) {
node = node.findChild(field, last);
if (node) {
me.getSelectionModel().select(node);
Ext.callback(callback, scope || me, [true, node]);
return;
}
}
Ext.callback(callback, scope || me, [false, lastNode]);
}, me);
} else {
root = me.getRootNode();
if (root.getId() === last) {
me.getSelectionModel().select(root);
Ext.callback(callback, scope || me, [true, root]);
} else {
Ext.callback(callback, scope || me, [false, null]);
}
}
}
});
/**
* @private
*/
Ext.define('Ext.view.DragZone', {
extend: 'Ext.dd.DragZone',
containerScroll: false,
constructor: function(config) {
var me = this,
view,
ownerCt,
el;
Ext.apply(me, config);
// Create a ddGroup unless one has been configured.
// User configuration of ddGroups allows users to specify which
// DD instances can interact with each other. Using one
// based on the id of the View would isolate it and mean it can only
// interact with a DropZone on the same View also using a generated ID.
if (!me.ddGroup) {
me.ddGroup = 'view-dd-zone-' + me.view.id;
}
// Ext.dd.DragDrop instances are keyed by the ID of their encapsulating element.
// So a View's DragZone cannot use the View's main element because the DropZone must use that
// because the DropZone may need to scroll on hover at a scrolling boundary, and it is the View's
// main element which handles scrolling.
// We use the View's parent element to drag from. Ideally, we would use the internal structure, but that
// is transient; DataView's recreate the internal structure dynamically as data changes.
// TODO: Ext 5.0 DragDrop must allow multiple DD objects to share the same element.
view = me.view;
ownerCt = view.ownerCt;
// We don't just grab the parent el, since the parent el may be
// some el injected by the layout
if (ownerCt) {
el = ownerCt.getTargetEl().dom;
} else {
el = view.el.dom.parentNode;
}
me.callParent([el]);
me.ddel = Ext.get(document.createElement('div'));
me.ddel.addCls(Ext.baseCSSPrefix + 'grid-dd-wrap');
},
init: function(id, sGroup, config) {
this.initTarget(id, sGroup, config);
this.view.mon(this.view, {
itemmousedown: this.onItemMouseDown,
scope: this
});
},
onValidDrop: function(target, e, id) {
this.callParent();
// focus the view that the node was dropped onto so that keynav will be enabled.
target.el.focus();
},
onItemMouseDown: function(view, record, item, index, e) {
if (!this.isPreventDrag(e, record, item, index)) {
// Since handleMouseDown prevents the default behavior of the event, which
// is to focus the view, we focus the view now. This ensures that the view
// remains focused if the drag is cancelled, or if no drag occurs.
this.view.focus();
this.handleMouseDown(e);
// If we want to allow dragging of multi-selections, then veto the following handlers (which, in the absence of ctrlKey, would deselect)
// if the mousedowned record is selected
if (view.getSelectionModel().selectionMode == 'MULTI' && !e.ctrlKey && view.getSelectionModel().isSelected(record)) {
return false;
}
}
},
// private template method
isPreventDrag: function(e) {
return false;
},
getDragData: function(e) {
var view = this.view,
item = e.getTarget(view.getItemSelector());
if (item) {
return {
copy: view.copy || (view.allowCopy && e.ctrlKey),
event: new Ext.EventObjectImpl(e),
view: view,
ddel: this.ddel,
item: item,
records: view.getSelectionModel().getSelection(),
fromPosition: Ext.fly(item).getXY()
};
}
},
onInitDrag: function(x, y) {
var me = this,
data = me.dragData,
view = data.view,
selectionModel = view.getSelectionModel(),
record = view.getRecord(data.item),
e = data.event;
// Update the selection to match what would have been selected if the user had
// done a full click on the target node rather than starting a drag from it
if (!selectionModel.isSelected(record)) {
selectionModel.select(record, true);
}
data.records = selectionModel.getSelection();
me.ddel.update(me.getDragText());
me.proxy.update(me.ddel.dom);
me.onStartDrag(x, y);
return true;
},
getDragText: function() {
var count = this.dragData.records.length;
return Ext.String.format(this.dragText, count, count == 1 ? '' : 's');
},
getRepairXY : function(e, data){
return data ? data.fromPosition : false;
}
});
/**
* @private
*/
Ext.define('Ext.tree.ViewDragZone', {
extend: 'Ext.view.DragZone',
isPreventDrag: function(e, record) {
return (record.get('allowDrag') === false) || !!e.getTarget(this.view.expanderSelector);
},
afterRepair: function() {
var me = this,
view = me.view,
selectedRowCls = view.selectedItemCls,
records = me.dragData.records,
r,
rLen = records.length,
fly = Ext.fly,
item;
if (Ext.enableFx && me.repairHighlight) {
// Roll through all records and highlight all the ones we attempted to drag.
for (r = 0; r < rLen; r++) {
// anonymous fns below, don't hoist up unless below is wrapped in
// a self-executing function passing in item.
item = view.getNode(records[r]);
// We must remove the selected row class before animating, because
// the selected row class declares !important on its background-color.
fly(item.firstChild).highlight(me.repairHighlightColor, {
listeners: {
beforeanimate: function() {
if (view.isSelected(item)) {
fly(item).removeCls(selectedRowCls);
}
},
afteranimate: function() {
if (view.isSelected(item)) {
fly(item).addCls(selectedRowCls);
}
}
}
});
}
}
me.dragging = false;
}
});
/**
* @private
*/
Ext.define('Ext.tree.ViewDropZone', {
extend: 'Ext.view.DropZone',
/**
* @cfg {Boolean} allowParentInsert
* Allow inserting a dragged node between an expanded parent node and its first child that will become a
* sibling of the parent when dropped.
*/
allowParentInserts: false,
/**
* @cfg {String} allowContainerDrop
* True if drops on the tree container (outside of a specific tree node) are allowed.
*/
allowContainerDrops: false,
/**
* @cfg {String} appendOnly
* True if the tree should only allow append drops (use for trees which are sorted).
*/
appendOnly: false,
/**
* @cfg {String} expandDelay
* The delay in milliseconds to wait before expanding a target tree node while dragging a droppable node
* over the target.
*/
expandDelay : 500,
indicatorCls: Ext.baseCSSPrefix + 'tree-ddindicator',
// private
expandNode : function(node) {
var view = this.view;
if (!node.isLeaf() && !node.isExpanded()) {
view.expand(node);
this.expandProcId = false;
}
},
// private
queueExpand : function(node) {
this.expandProcId = Ext.Function.defer(this.expandNode, this.expandDelay, this, [node]);
},
// private
cancelExpand : function() {
if (this.expandProcId) {
clearTimeout(this.expandProcId);
this.expandProcId = false;
}
},
getPosition: function(e, node) {
var view = this.view,
record = view.getRecord(node),
y = e.getPageY(),
noAppend = record.isLeaf(),
noBelow = false,
region = Ext.fly(node).getRegion(),
fragment;
// If we are dragging on top of the root node of the tree, we always want to append.
if (record.isRoot()) {
return 'append';
}
// Return 'append' if the node we are dragging on top of is not a leaf else return false.
if (this.appendOnly) {
return noAppend ? false : 'append';
}
if (!this.allowParentInsert) {
noBelow = record.hasChildNodes() && record.isExpanded();
}
fragment = (region.bottom - region.top) / (noAppend ? 2 : 3);
if (y >= region.top && y < (region.top + fragment)) {
return 'before';
}
else if (!noBelow && (noAppend || (y >= (region.bottom - fragment) && y <= region.bottom))) {
return 'after';
}
else {
return 'append';
}
},
isValidDropPoint : function(node, position, dragZone, e, data) {
if (!node || !data.item) {
return false;
}
var view = this.view,
targetNode = view.getRecord(node),
draggedRecords = data.records,
dataLength = draggedRecords.length,
ln = draggedRecords.length,
i, record;
// No drop position, or dragged records: invalid drop point
if (!(targetNode && position && dataLength)) {
return false;
}
// If the targetNode is within the folder we are dragging
for (i = 0; i < ln; i++) {
record = draggedRecords[i];
if (record.isNode && record.contains(targetNode)) {
return false;
}
}
// Respect the allowDrop field on Tree nodes
if (position === 'append' && targetNode.get('allowDrop') === false) {
return false;
}
else if (position != 'append' && targetNode.parentNode.get('allowDrop') === false) {
return false;
}
// If the target record is in the dragged dataset, then invalid drop
if (Ext.Array.contains(draggedRecords, targetNode)) {
return false;
}
// @TODO: fire some event to notify that there is a valid drop possible for the node you're dragging
// Yes: this.fireViewEvent(blah....) fires an event through the owning View.
return true;
},
onNodeOver : function(node, dragZone, e, data) {
var position = this.getPosition(e, node),
returnCls = this.dropNotAllowed,
view = this.view,
targetNode = view.getRecord(node),
indicator = this.getIndicator(),
indicatorX = 0,
indicatorY = 0;
// auto node expand check
this.cancelExpand();
if (position == 'append' && !this.expandProcId && !Ext.Array.contains(data.records, targetNode) && !targetNode.isLeaf() && !targetNode.isExpanded()) {
this.queueExpand(targetNode);
}
if (this.isValidDropPoint(node, position, dragZone, e, data)) {
this.valid = true;
this.currentPosition = position;
this.overRecord = targetNode;
indicator.setWidth(Ext.fly(node).getWidth());
indicatorY = Ext.fly(node).getY() - Ext.fly(view.el).getY() - 1;
/*
* In the code below we show the proxy again. The reason for doing this is showing the indicator will
* call toFront, causing it to get a new z-index which can sometimes push the proxy behind it. We always
* want the proxy to be above, so calling show on the proxy will call toFront and bring it forward.
*/
if (position == 'before') {
returnCls = targetNode.isFirst() ? Ext.baseCSSPrefix + 'tree-drop-ok-above' : Ext.baseCSSPrefix + 'tree-drop-ok-between';
indicator.showAt(0, indicatorY);
dragZone.proxy.show();
} else if (position == 'after') {
returnCls = targetNode.isLast() ? Ext.baseCSSPrefix + 'tree-drop-ok-below' : Ext.baseCSSPrefix + 'tree-drop-ok-between';
indicatorY += Ext.fly(node).getHeight();
indicator.showAt(0, indicatorY);
dragZone.proxy.show();
} else {
returnCls = Ext.baseCSSPrefix + 'tree-drop-ok-append';
// @TODO: set a class on the parent folder node to be able to style it
indicator.hide();
}
} else {
this.valid = false;
}
this.currentCls = returnCls;
return returnCls;
},
onContainerOver : function(dd, e, data) {
return e.getTarget('.' + this.indicatorCls) ? this.currentCls : this.dropNotAllowed;
},
notifyOut: function() {
this.callParent(arguments);
this.cancelExpand();
},
handleNodeDrop : function(data, targetNode, position) {
var me = this,
view = me.view,
parentNode = targetNode.parentNode,
store = view.getStore(),
recordDomNodes = [],
records, i, len,
insertionMethod, argList,
needTargetExpand,
transferData,
processDrop;
// If the copy flag is set, create a copy of the Models with the same IDs
if (data.copy) {
records = data.records;
data.records = [];
for (i = 0, len = records.length; i < len; i++) {
data.records.push(Ext.apply({}, records[i].data));
}
}
// Cancel any pending expand operation
me.cancelExpand();
// Grab a reference to the correct node insertion method.
// Create an arg list array intended for the apply method of the
// chosen node insertion method.
// Ensure the target object for the method is referenced by 'targetNode'
if (position == 'before') {
insertionMethod = parentNode.insertBefore;
argList = [null, targetNode];
targetNode = parentNode;
}
else if (position == 'after') {
if (targetNode.nextSibling) {
insertionMethod = parentNode.insertBefore;
argList = [null, targetNode.nextSibling];
}
else {
insertionMethod = parentNode.appendChild;
argList = [null];
}
targetNode = parentNode;
}
else {
if (!targetNode.isExpanded()) {
needTargetExpand = true;
}
insertionMethod = targetNode.appendChild;
argList = [null];
}
// A function to transfer the data into the destination tree
transferData = function() {
var node,
r, rLen, color, n;
for (i = 0, len = data.records.length; i < len; i++) {
argList[0] = data.records[i];
node = insertionMethod.apply(targetNode, argList);
if (Ext.enableFx && me.dropHighlight) {
recordDomNodes.push(view.getNode(node));
}
}
// Kick off highlights after everything's been inserted, so they are
// more in sync without insertion/render overhead.
if (Ext.enableFx && me.dropHighlight) {
//FIXME: the check for n.firstChild is not a great solution here. Ideally the line should simply read
//Ext.fly(n.firstChild) but this yields errors in IE6 and 7. See ticket EXTJSIV-1705 for more details
rLen = recordDomNodes.length;
color = me.dropHighlightColor;
for (r = 0; r < rLen; r++) {
n = recordDomNodes[r];
if (n) {
Ext.fly(n.firstChild ? n.firstChild : n).highlight(color);
}
}
}
};
// If dropping right on an unexpanded node, transfer the data after it is expanded.
if (needTargetExpand) {
targetNode.expand(false, transferData);
}
// Otherwise, call the data transfer function immediately
else {
transferData();
}
}
});
/**
* This plugin provides drag and/or drop functionality for a TreeView.
*
* It creates a specialized instance of {@link Ext.dd.DragZone DragZone} which knows how to drag out of a
* {@link Ext.tree.View TreeView} and loads the data object which is passed to a cooperating
* {@link Ext.dd.DragZone DragZone}'s methods with the following properties:
*
* - copy : Boolean
*
* The value of the TreeView's `copy` property, or `true` if the TreeView was configured with `allowCopy: true` *and*
* the control key was pressed when the drag operation was begun.
*
* - view : TreeView
*
* The source TreeView from which the drag originated.
*
* - ddel : HtmlElement
*
* The drag proxy element which moves with the mouse
*
* - item : HtmlElement
*
* The TreeView node upon which the mousedown event was registered.
*
* - records : Array
*
* An Array of {@link Ext.data.Model Models} representing the selected data being dragged from the source TreeView.
*
* It also creates a specialized instance of {@link Ext.dd.DropZone} which cooperates with other DropZones which are
* members of the same ddGroup which processes such data objects.
*
* Adding this plugin to a view means that two new events may be fired from the client TreeView, {@link #beforedrop} and
* {@link #drop}.
*
* Note that the plugin must be added to the tree view, not to the tree panel. For example using viewConfig:
*
* viewConfig: {
* plugins: { ptype: 'treeviewdragdrop' }
* }
*/
Ext.define('Ext.tree.plugin.TreeViewDragDrop', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.treeviewdragdrop',
uses: [
'Ext.tree.ViewDragZone',
'Ext.tree.ViewDropZone'
],
/**
* @event beforedrop
*
* **This event is fired through the TreeView. Add listeners to the TreeView object**
*
* Fired when a drop gesture has been triggered by a mouseup event in a valid drop position in the TreeView.
*
* @param {HTMLElement} node The TreeView node **if any** over which the mouse was positioned.
*
* Returning `false` to this event signals that the drop gesture was invalid, and if the drag proxy will animate
* back to the point from which the drag began.
*
* Returning `0` To this event signals that the data transfer operation should not take place, but that the gesture
* was valid, and that the repair operation should not take place.
*
* Any other return value continues with the data transfer operation.
*
* @param {Object} data The data object gathered at mousedown time by the cooperating
* {@link Ext.dd.DragZone DragZone}'s {@link Ext.dd.DragZone#getDragData getDragData} method it contains the following
* properties:
* @param {Boolean} data.copy The value of the TreeView's `copy` property, or `true` if the TreeView was configured with
* `allowCopy: true` and the control key was pressed when the drag operation was begun
* @param {Ext.tree.View} data.view The source TreeView from which the drag originated.
* @param {HTMLElement} data.ddel The drag proxy element which moves with the mouse
* @param {HTMLElement} data.item The TreeView node upon which the mousedown event was registered.
* @param {Ext.data.Model[]} data.records An Array of {@link Ext.data.Model Model}s representing the selected data being
* dragged from the source TreeView.
*
* @param {Ext.data.Model} overModel The Model over which the drop gesture took place.
*
* @param {String} dropPosition `"before"`, `"after"` or `"append"` depending on whether the mouse is above or below
* the midline of the node, or the node is a branch node which accepts new child nodes.
*
* @param {Object} dropHandler An object containing methods to complete/cancel the data transfer operation and either
* move or copy Model instances from the source View's Store to the destination View's Store.
*
* This is useful when you want to perform some kind of asynchronous processing before confirming/cancelling
* the drop, such as an {@link Ext.window.MessageBox#confirm confirm} call, or an Ajax request.
*
* Set dropHandler.wait = true in this event handler to delay processing. When you want to complete the event, call
* dropHandler.processDrop(). To cancel the drop, call dropHandler.cancelDrop.
*/
/**
* @event drop
*
* **This event is fired through the TreeView. Add listeners to the TreeView object** Fired when a drop operation
* has been completed and the data has been moved or copied.
*
* @param {HTMLElement} node The TreeView node **if any** over which the mouse was positioned.
*
* @param {Object} data The data object gathered at mousedown time by the cooperating
* {@link Ext.dd.DragZone DragZone}'s {@link Ext.dd.DragZone#getDragData getDragData} method it contains the following
* properties:
* @param {Boolean} data.copy The value of the TreeView's `copy` property, or `true` if the TreeView was configured with
* `allowCopy: true` and the control key was pressed when the drag operation was begun
* @param {Ext.tree.View} data.view The source TreeView from which the drag originated.
* @param {HTMLElement} data.ddel The drag proxy element which moves with the mouse
* @param {HTMLElement} data.item The TreeView node upon which the mousedown event was registered.
* @param {Ext.data.Model[]} data.records An Array of {@link Ext.data.Model Model}s representing the selected data being
* dragged from the source TreeView.
*
* @param {Ext.data.Model} overModel The Model over which the drop gesture took place.
*
* @param {String} dropPosition `"before"`, `"after"` or `"append"` depending on whether the mouse is above or below
* the midline of the node, or the node is a branch node which accepts new child nodes.
*/
//',
' ',
'' +
Ext.util.Format.htmlEncode(token) +
' ',
doc;
try {
doc = this.iframe.contentWindow.document;
doc.open();
doc.write(html);
doc.close();
return true;
} catch (e) {
return false;
}
},
checkIFrame: function () {
var me = this,
contentWindow = me.iframe.contentWindow,
doc, elem, oldToken, oldHash;
if (!contentWindow || !contentWindow.document) {
Ext.Function.defer(this.checkIFrame, 10, this);
return;
}
doc = contentWindow.document;
elem = doc.getElementById("state");
oldToken = elem ? elem.innerText : null;
oldHash = me.getHash();
Ext.TaskManager.start({
run: function () {
var doc = contentWindow.document,
elem = doc.getElementById("state"),
newToken = elem ? elem.innerText : null,
newHash = me.getHash();
if (newToken !== oldToken) {
oldToken = newToken;
me.handleStateChange(newToken);
me.setHash(newToken);
oldHash = newToken;
me.doSave();
} else if (newHash !== oldHash) {
oldHash = newHash;
me.updateIFrame(newHash);
}
},
interval: 50,
scope: me
});
me.ready = true;
me.fireEvent('ready', me);
},
startUp: function () {
var me = this,
hash;
me.currentToken = me.hiddenField.value || this.getHash();
if (me.oldIEMode) {
me.checkIFrame();
} else {
hash = me.getHash();
Ext.TaskManager.start({
run: function () {
var newHash = me.getHash();
if (newHash !== hash) {
hash = newHash;
me.handleStateChange(hash);
me.doSave();
}
},
interval: 50,
scope: me
});
me.ready = true;
me.fireEvent('ready', me);
}
},
/**
* Initializes the global History instance.
* @param {Function} [onReady] A callback function that will be called once the history
* component is fully initialized.
* @param {Object} [scope] The scope (`this` reference) in which the callback is executed.
* Defaults to the browser window.
*/
init: function (onReady, scope) {
var me = this,
DomHelper = Ext.DomHelper;
if (me.ready) {
Ext.callback(onReady, scope, [me]);
return;
}
if (!Ext.isReady) {
Ext.onReady(function() {
me.init(onReady, scope);
});
return;
}
/*
*/
me.hiddenField = Ext.getDom(me.fieldId);
if (!me.hiddenField) {
me.hiddenField = Ext.getBody().createChild({
id: Ext.id(),
tag: 'form',
cls: Ext.baseCSSPrefix + 'hide-display',
children: [{
tag: 'input',
type: 'hidden',
id: me.fieldId
}]
}, false, true).firstChild;
}
if (me.oldIEMode) {
me.iframe = Ext.getDom(me.iframeId);
if (!me.iframe) {
me.iframe = DomHelper.append(me.hiddenField.parentNode, {
tag: 'iframe',
id: me.iframeId,
src: Ext.SSL_SECURE_URL
});
}
}
me.addEvents(
/**
* @event ready
* Fires when the Ext.util.History singleton has been initialized and is ready for use.
* @param {Ext.util.History} The Ext.util.History singleton.
*/
'ready',
/**
* @event change
* Fires when navigation back or forwards within the local page's history occurs.
* @param {String} token An identifier associated with the page state at that point in its history.
*/
'change'
);
if (onReady) {
me.on('ready', onReady, scope, {single: true});
}
me.startUp();
},
/**
* Add a new token to the history stack. This can be any arbitrary value, although it would
* commonly be the concatenation of a component id and another id marking the specific history
* state of that component. Example usage:
*
* // Handle tab changes on a TabPanel
* tabPanel.on('tabchange', function(tabPanel, tab){
* Ext.History.add(tabPanel.id + ':' + tab.id);
* });
*
* @param {String} token The value that defines a particular application-specific history state
* @param {Boolean} [preventDuplicates=true] When true, if the passed token matches the current token
* it will not save a new history step. Set to false if the same state can be saved more than once
* at the same history stack location.
*/
add: function (token, preventDup) {
var me = this;
if (preventDup !== false) {
if (me.getToken() === token) {
return true;
}
}
if (me.oldIEMode) {
return me.updateIFrame(token);
} else {
me.setHash(token);
return true;
}
},
/**
* Programmatically steps back one step in browser history (equivalent to the user pressing the Back button).
*/
back: function() {
window.history.go(-1);
},
/**
* Programmatically steps forward one step in browser history (equivalent to the user pressing the Forward button).
*/
forward: function(){
window.history.go(1);
},
/**
* Retrieves the currently-active history token.
* @return {String} The token
*/
getToken: function() {
return this.ready ? this.currentToken : this.getHash();
}
});
/**
* Represents a 2D point with x and y properties, useful for comparison and instantiation
* from an event:
*
* var point = Ext.util.Point.fromEvent(e);
*
*/
Ext.define('Ext.util.Point', {
/* Begin Definitions */
extend: 'Ext.util.Region',
statics: {
/**
* Returns a new instance of Ext.util.Point base on the pageX / pageY values of the given event
* @static
* @param {Event} e The event
* @return {Ext.util.Point}
*/
fromEvent: function(e) {
e = (e.changedTouches && e.changedTouches.length > 0) ? e.changedTouches[0] : e;
return new this(e.pageX, e.pageY);
}
},
/* End Definitions */
/**
* Creates a point from two coordinates.
* @param {Number} x X coordinate.
* @param {Number} y Y coordinate.
*/
constructor: function(x, y) {
this.callParent([y, x, y, x]);
},
/**
* Returns a human-eye-friendly string that represents this point,
* useful for debugging
* @return {String}
*/
toString: function() {
return "Point[" + this.x + "," + this.y + "]";
},
/**
* Compare this point and another point
* @param {Ext.util.Point/Object} The point to compare with, either an instance
* of Ext.util.Point or an object with left and top properties
* @return {Boolean} Returns whether they are equivalent
*/
equals: function(p) {
return (this.x == p.x && this.y == p.y);
},
/**
* Whether the given point is not away from this point within the given threshold amount.
* @param {Ext.util.Point/Object} p The point to check with, either an instance
* of Ext.util.Point or an object with left and top properties
* @param {Object/Number} threshold Can be either an object with x and y properties or a number
* @return {Boolean}
*/
isWithin: function(p, threshold) {
if (!Ext.isObject(threshold)) {
threshold = {
x: threshold,
y: threshold
};
}
return (this.x <= p.x + threshold.x && this.x >= p.x - threshold.x &&
this.y <= p.y + threshold.y && this.y >= p.y - threshold.y);
},
/**
* Compare this point with another point when the x and y values of both points are rounded. E.g:
* [100.3,199.8] will equals to [100, 200]
* @param {Ext.util.Point/Object} p The point to compare with, either an instance
* of Ext.util.Point or an object with x and y properties
* @return {Boolean}
*/
roundedEquals: function(p) {
return (Math.round(this.x) == Math.round(p.x) && Math.round(this.y) == Math.round(p.y));
}
}, function() {
/**
* @method
* Alias for {@link #translateBy}
* @inheritdoc Ext.util.Region#translateBy
*/
this.prototype.translate = Ext.util.Region.prototype.translateBy;
});
/**
* Produces optimized XTemplates for chunks of tables to be
* used in grids, trees and other table based widgets.
*/
Ext.define('Ext.view.TableChunker', {
singleton: true,
requires: ['Ext.XTemplate'],
metaTableTpl: [
'{%if (this.openTableWrap)out.push(this.openTableWrap())%}',
'
',
' | ',
'{{id}} ',
' |
|---|---|---|