+ * var version = new Ext.Version('1.0.2beta');
+ * console.log(version.match(1)); // True
+ * console.log(version.match(1.0)); // True
+ * console.log(version.match('1.0.2')); // True
+ * console.log(version.match('1.0.2RC')); // False
+ *
+ // alternate sort directions
+ sort = Ext.String.toggle(sort, 'ASC', 'DESC');
+
+ // instead of conditional logic:
+ sort = (sort == 'ASC' ? 'DESC' : 'ASC');
+
+var s = Ext.String.leftPad('123', 5, '0');
+// s now contains the string: '00123'
+
+var cls = 'my-class', text = 'Some text';
+var s = Ext.String.format('<div class="{0}">{1}</div>', cls, text);
+// s now contains the string: '<div class="my-class">Some text</div>'
+ +Format Description Example returned values +------ ----------------------------------------------------------------------- ----------------------- + d Day of the month, 2 digits with leading zeros 01 to 31 + D A short textual representation of the day of the week Mon to Sun + j Day of the month without leading zeros 1 to 31 + l A full textual representation of the day of the week Sunday to Saturday + N ISO-8601 numeric representation of the day of the week 1 (for Monday) through 7 (for Sunday) + S English ordinal suffix for the day of the month, 2 characters st, nd, rd or th. Works well with j + w Numeric representation of the day of the week 0 (for Sunday) to 6 (for Saturday) + z The day of the year (starting from 0) 0 to 364 (365 in leap years) + W ISO-8601 week number of year, weeks starting on Monday 01 to 53 + F A full textual representation of a month, such as January or March January to December + m Numeric representation of a month, with leading zeros 01 to 12 + M A short textual representation of a month Jan to Dec + n Numeric representation of a month, without leading zeros 1 to 12 + t Number of days in the given month 28 to 31 + L Whether it's a leap year 1 if it is a leap year, 0 otherwise. + o ISO-8601 year number (identical to (Y), but if the ISO week number (W) Examples: 1998 or 2004 + belongs to the previous or next year, that year is used instead) + Y A full numeric representation of a year, 4 digits Examples: 1999 or 2003 + y A two digit representation of a year Examples: 99 or 03 + a Lowercase Ante meridiem and Post meridiem am or pm + A Uppercase Ante meridiem and Post meridiem AM or PM + g 12-hour format of an hour without leading zeros 1 to 12 + G 24-hour format of an hour without leading zeros 0 to 23 + h 12-hour format of an hour with leading zeros 01 to 12 + H 24-hour format of an hour with leading zeros 00 to 23 + i Minutes, with leading zeros 00 to 59 + s Seconds, with leading zeros 00 to 59 + u Decimal fraction of a second Examples: + (minimum 1 digit, arbitrary number of digits allowed) 001 (i.e. 0.001s) or + 100 (i.e. 0.100s) or + 999 (i.e. 0.999s) or + 999876543210 (i.e. 0.999876543210s) + O Difference to Greenwich time (GMT) in hours and minutes Example: +1030 + P Difference to Greenwich time (GMT) with colon between hours and minutes Example: -08:00 + T Timezone abbreviation of the machine running the code Examples: EST, MDT, PDT ... + Z Timezone offset in seconds (negative if west of UTC, positive if east) -43200 to 50400 + c ISO 8601 date + Notes: Examples: + 1) If unspecified, the month / day defaults to the current month / day, 1991 or + the time defaults to midnight, while the timezone defaults to the 1992-10 or + browser's timezone. If a time is specified, it must include both hours 1993-09-20 or + and minutes. The "T" delimiter, seconds, milliseconds and timezone 1994-08-19T16:20+01:00 or + are optional. 1995-07-18T17:21:28-02:00 or + 2) The decimal fraction of a second, if specified, must contain at 1996-06-17T18:22:29.98765+03:00 or + least 1 digit (there is no limit to the maximum number 1997-05-16T19:23:30,12345-0400 or + of digits allowed), and may be delimited by either a '.' or a ',' 1998-04-15T20:24:31.2468Z or + Refer to the examples on the right for the various levels of 1999-03-14T20:24:32Z or + date-time granularity which are supported, or see 2000-02-13T21:25:33 + http://www.w3.org/TR/NOTE-datetime for more info. 2001-01-12 22:26:34 + U Seconds since the Unix Epoch (January 1 1970 00:00:00 GMT) 1193432466 or -2138434463 + MS Microsoft AJAX serialized dates \/Date(1238606590509)\/ (i.e. UTC milliseconds since epoch) or + \/Date(1238606590509+0800)\/ ++ * + * Example usage (note that you must escape format specifiers with '\\' to render them as character literals): + *
+// Sample date:
+// 'Wed Jan 10 2007 15:05:01 GMT-0600 (Central Standard Time)'
+
+var dt = new Date('1/10/2007 03:05:01 PM GMT-0600');
+console.log(Ext.Date.format(dt, 'Y-m-d')); // 2007-01-10
+console.log(Ext.Date.format(dt, 'F j, Y, g:i a')); // January 10, 2007, 3:05 pm
+console.log(Ext.Date.format(dt, 'l, \\t\\he jS \\of F Y h:i:s A')); // Wednesday, the 10th of January 2007 03:05:01 PM
+
+Ext.Date.patterns = {
+ ISO8601Long:"Y-m-d H:i:s",
+ ISO8601Short:"Y-m-d",
+ ShortDate: "n/j/Y",
+ LongDate: "l, F d, Y",
+ FullDateTime: "l, F d, Y g:i:s A",
+ MonthDay: "F d",
+ ShortTime: "g:i A",
+ LongTime: "g:i:s A",
+ SortableDateTime: "Y-m-d\\TH:i:s",
+ UniversalSortableDateTime: "Y-m-d H:i:sO",
+ YearMonth: "F, Y"
+};
+
+var dt = new Date();
+console.log(Ext.Date.format(dt, Ext.Date.patterns.ShortDate));
+Developer-written, custom formats may be used by supplying both a formatting and a parsing function + * which perform to specialized requirements. The functions are stored in {@link #parseFunctions} and {@link #formatFunctions}.
+ * @singleton + */ + +/* + * Most of the date-formatting functions below are the excellent work of Baron Schwartz. + * (see http://www.xaprb.com/blog/2005/12/12/javascript-closures-for-runtime-efficiency/) + * They generate precompiled functions from format patterns instead of parsing and + * processing each pattern every time a date is formatted. These functions are available + * on every Date object. + */ + +(function() { + +// create private copy of Ext's Ext.util.Format.format() method +// - to remove unnecessary dependency +// - to resolve namespace conflict with MS-Ajax's implementation +function xf(format) { + var args = Array.prototype.slice.call(arguments, 1); + return format.replace(/\{(\d+)\}/g, function(m, i) { + return args[i]; + }); +} + +Ext.Date = { + /** + * Returns the current timestamp + * @return {Date} The current timestamp + * @method + */ + now: Date.now || function() { + return +new Date(); + }, + + /** + * @private + * Private for now + */ + toString: function(date) { + var pad = Ext.String.leftPad; + + return date.getFullYear() + "-" + + pad(date.getMonth() + 1, 2, '0') + "-" + + pad(date.getDate(), 2, '0') + "T" + + pad(date.getHours(), 2, '0') + ":" + + pad(date.getMinutes(), 2, '0') + ":" + + pad(date.getSeconds(), 2, '0'); + }, + + /** + * Returns the number of milliseconds between two dates + * @param {Date} dateA The first date + * @param {Date} dateB (optional) The second date, defaults to now + * @return {Number} The difference in milliseconds + */ + getElapsed: function(dateA, dateB) { + return Math.abs(dateA - (dateB || new Date())); + }, + + /** + * Global flag which determines if strict date parsing should be used. + * Strict date parsing will not roll-over invalid dates, which is the + * default behaviour of javascript Date objects. + * (see {@link #parse} for more information) + * Defaults to false. + * @type Boolean + */ + useStrict: false, + + // private + formatCodeToRegex: function(character, currentGroup) { + // Note: currentGroup - position in regex result array (see notes for Ext.Date.parseCodes below) + var p = utilDate.parseCodes[character]; + + if (p) { + p = typeof p == 'function'? p() : p; + utilDate.parseCodes[character] = p; // reassign function result to prevent repeated execution + } + + return p ? Ext.applyIf({ + c: p.c ? xf(p.c, currentGroup || "{0}") : p.c + }, p) : { + g: 0, + c: null, + s: Ext.String.escapeRegex(character) // treat unrecognised characters as literals + }; + }, + + /** + *An object hash in which each property is a date parsing function. The property name is the + * format string which that function parses.
+ *This object is automatically populated with date parsing functions as + * date formats are requested for Ext standard formatting strings.
+ *Custom parsing functions may be inserted into this object, keyed by a name which from then on + * may be used as a format string to {@link #parse}.
+ *
Example:
+Ext.Date.parseFunctions['x-date-format'] = myDateParser;
+A parsing function should return a Date object, and is passed the following parameters:
date : Stringstrict : BooleanTo enable Dates to also be formatted according to that format, a corresponding + * formatting function must be placed into the {@link #formatFunctions} property. + * @property parseFunctions + * @type Object + */ + parseFunctions: { + "MS": function(input, strict) { + // note: the timezone offset is ignored since the MS Ajax server sends + // a UTC milliseconds-since-Unix-epoch value (negative values are allowed) + var re = new RegExp('\\/Date\\(([-+])?(\\d+)(?:[+-]\\d{4})?\\)\\/'); + var r = (input || '').match(re); + return r? new Date(((r[1] || '') + r[2]) * 1) : null; + } + }, + parseRegexes: [], + + /** + *
An object hash in which each property is a date formatting function. The property name is the + * format string which corresponds to the produced formatted date string.
+ *This object is automatically populated with date formatting functions as + * date formats are requested for Ext standard formatting strings.
+ *Custom formatting functions may be inserted into this object, keyed by a name which from then on + * may be used as a format string to {@link #format}. Example:
+Ext.Date.formatFunctions['x-date-format'] = myDateFormatter;
+A formatting function should return a string representation of the passed Date object, and is passed the following parameters:
date : DateTo enable date strings to also be parsed according to that format, a corresponding + * parsing function must be placed into the {@link #parseFunctions} property. + * @property formatFunctions + * @type Object + */ + formatFunctions: { + "MS": function() { + // UTC milliseconds since Unix epoch (MS-AJAX serialized date format (MRSF)) + return '\\/Date(' + this.getTime() + ')\\/'; + } + }, + + y2kYear : 50, + + /** + * Date interval constant + * @type String + */ + MILLI : "ms", + + /** + * Date interval constant + * @type String + */ + SECOND : "s", + + /** + * Date interval constant + * @type String + */ + MINUTE : "mi", + + /** Date interval constant + * @type String + */ + HOUR : "h", + + /** + * Date interval constant + * @type String + */ + DAY : "d", + + /** + * Date interval constant + * @type String + */ + MONTH : "mo", + + /** + * Date interval constant + * @type String + */ + YEAR : "y", + + /** + *
An object hash containing default date values used during date parsing.
+ *The following properties are available:
y : Numberm : Numberd : Numberh : Numberi : Numbers : Numberms : NumberOverride these properties to customize the default date values used by the {@link #parse} method.
+ *Note: In countries which experience Daylight Saving Time (i.e. DST), the h, i, s + * and ms properties may coincide with the exact time in which DST takes effect. + * It is the responsiblity of the developer to account for this.
+ * Example Usage: + *
+// set default day value to the first day of the month
+Ext.Date.defaults.d = 1;
+
+// parse a February date string containing only year and month values.
+// setting the default day value to 1 prevents weird date rollover issues
+// when attempting to parse the following date string on, for example, March 31st 2009.
+Ext.Date.parse('2009-02', 'Y-m'); // returns a Date object representing February 1st 2009
+
+Ext.Date.dayNames = [
+ 'SundayInYourLang',
+ 'MondayInYourLang',
+ ...
+];
+
+Ext.Date.monthNames = [
+ 'JanInYourLang',
+ 'FebInYourLang',
+ ...
+];
+
+Ext.Date.monthNumbers = {
+ 'ShortJanNameInYourLang':0,
+ 'ShortFebNameInYourLang':1,
+ ...
+};
+The date format string that the {@link Ext.util.Format#dateRenderer} + * and {@link Ext.util.Format#date} functions use. See {@link Ext.Date} for details.
+ *This may be overridden in a locale file.
+ */ + defaultFormat : "m/d/Y", + /** + * Get the short month name for the given month number. + * Override this function for international dates. + * @param {Number} month A zero-based javascript month number. + * @return {String} The short month name. + */ + getShortMonthName : function(month) { + return utilDate.monthNames[month].substring(0, 3); + }, + + /** + * Get the short day name for the given day number. + * Override this function for international dates. + * @param {Number} day A zero-based javascript day number. + * @return {String} The short day name. + */ + getShortDayName : function(day) { + return utilDate.dayNames[day].substring(0, 3); + }, + + /** + * Get the zero-based javascript month number for the given short/full month name. + * Override this function for international dates. + * @param {String} name The short/full month name. + * @return {Number} The zero-based javascript month number. + */ + getMonthNumber : function(name) { + // handle camel casing for english month names (since the keys for the Ext.Date.monthNumbers hash are case sensitive) + return utilDate.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()]; + }, + + /** + * Checks if the specified format contains hour information + * @param {String} format The format to check + * @return {Boolean} True if the format contains hour information + * @method + */ + formatContainsHourInfo : (function(){ + var stripEscapeRe = /(\\.)/g, + hourInfoRe = /([gGhHisucUOPZ]|MS)/; + return function(format){ + return hourInfoRe.test(format.replace(stripEscapeRe, '')); + }; + })(), + + /** + * Checks if the specified format contains information about + * anything other than the time. + * @param {String} format The format to check + * @return {Boolean} True if the format contains information about + * date/day information. + * @method + */ + formatContainsDateInfo : (function(){ + var stripEscapeRe = /(\\.)/g, + dateInfoRe = /([djzmnYycU]|MS)/; + + return function(format){ + return dateInfoRe.test(format.replace(stripEscapeRe, '')); + }; + })(), + + /** + * The base format-code to formatting-function hashmap used by the {@link #format} method. + * Formatting functions are strings (or functions which return strings) which + * will return the appropriate value when evaluated in the context of the Date object + * from which the {@link #format} method is called. + * Add to / override these mappings for custom date formatting. + * Note: Ext.Date.format() treats characters as literals if an appropriate mapping cannot be found. + * Example: + *
+Ext.Date.formatCodes.x = "Ext.util.Format.leftPad(this.getDate(), 2, '0')";
+console.log(Ext.Date.format(new Date(), 'X'); // returns the current day of the month
+Example:
+//dt = Fri May 25 2007 (current date)
+var dt = new Date();
+
+//dt = Thu May 25 2006 (today's month/day in 2006)
+dt = Ext.Date.parse("2006", "Y");
+
+//dt = Sun Jan 15 2006 (all date parts specified)
+dt = Ext.Date.parse("2006-01-15", "Y-m-d");
+
+//dt = Sun Jan 15 2006 15:20:01
+dt = Ext.Date.parse("2006-01-15 3:20:01 PM", "Y-m-d g:i:s A");
+
+// attempt to parse Sun Feb 29 2006 03:20:01 in strict mode
+dt = Ext.Date.parse("2006-02-29 03:20:01", "Y-m-d H:i:s", true); // returns null
+
+var dt = new Date('1/10/2007'),
+ firstDay = Ext.Date.getFirstDayOfMonth(dt);
+console.log(Ext.Date.dayNames[firstDay]); //output: 'Monday'
+ *
+var dt = new Date('1/10/2007'),
+ lastDay = Ext.Date.getLastDayOfMonth(dt);
+console.log(Ext.Date.dayNames[lastDay]); //output: 'Wednesday'
+ *
+//wrong way:
+var orig = new Date('10/1/2006');
+var copy = orig;
+copy.setDate(5);
+console.log(orig); //returns 'Thu Oct 05 2006'!
+
+//correct way:
+var orig = new Date('10/1/2006'),
+ copy = Ext.Date.clone(orig);
+copy.setDate(5);
+console.log(orig); //returns 'Thu Oct 01 2006'
+ *
+// Basic usage:
+var dt = Ext.Date.add(new Date('10/29/2006'), Ext.Date.DAY, 5);
+console.log(dt); //returns 'Fri Nov 03 2006 00:00:00'
+
+// Negative values will be subtracted:
+var dt2 = Ext.Date.add(new Date('10/1/2006'), Ext.Date.DAY, -5);
+console.log(dt2); //returns 'Tue Sep 26 2006 00:00:00'
+
+ * Encodes a Date. This returns the actual string which is inserted into the JSON string as the literal expression. + * The returned value includes enclosing double quotation marks.
+ *The default return format is "yyyy-mm-ddThh:mm:ss".
+ *To override this:
+Ext.JSON.encodeDate = function(d) {
+ return Ext.Date.format(d, '"Y-m-d"');
+};
+
+// gets dom node based on id
+var elDom = Ext.getDom('elId');
+// gets dom node based on the dom node
+var elDom1 = Ext.getDom(elDom);
+
+// If we don't know if we are working with an
+// Ext.Element or a dom node use Ext.getDom
+function(el){
+ var dom = Ext.getDom(el);
+ // do something with the dom node
+}
+ * Removes this element from the document, removes all DOM event listeners, and deletes the cache reference.
+ * All DOM event listeners are removed from this element. If {@link Ext#enableNestedListenerRemoval Ext.enableNestedListenerRemoval} is
+ * true, then DOM event listeners are also removed from all child nodes. The body node
+ * will be ignored if passed in.
Utility method for returning a default value if the passed value is empty.
+ *The value is deemed to be empty if it is
+Ext.addBehaviors({
+ // add a listener for click on all anchors in element with id foo
+ '#foo a@click' : function(e, t){
+ // do something
+ },
+
+ // add the same listener to multiple selectors (separated by comma BEFORE the @)
+ '#foo a, #bar span.some-class@mouseover' : function(){
+ // do something
+ }
+});
+ *
+// Example 1:
+Ext.partition([true, false, true, true, false]); // [[true, true, true], [false, false]]
+
+// Example 2:
+Ext.partition(
+ Ext.query("p"),
+ function(val){
+ return val.className == "class1"
+ }
+);
+// true are those paragraph elements with a className of "class1",
+// false set are those that do not have that className.
+ *
+// Example:
+Ext.invoke(Ext.query("p"), "getAttribute", "id");
+// [el1.getAttribute("id"), el2.getAttribute("id"), ..., elN.getAttribute("id")]
+ * Zips N sets together.
+ *
+// Example 1:
+Ext.zip([1,2,3],[4,5,6]); // [[1,4],[2,5],[3,6]]
+// Example 2:
+Ext.zip(
+ [ "+", "-", "+"],
+ [ 12, 10, 22],
+ [ 43, 15, 96],
+ function(a, b, c){
+ return "$" + a + "" + b + "." + c
+ }
+); // ["$+12.43", "$-10.15", "$+22.96"]
+ * The character that the {@link #number} function uses as a thousand separator.
+ *This may be overridden in a locale file.
+ */ + thousandSeparator: ',', + + /** + * @property {String} decimalSeparator + *The character that the {@link #number} function uses as a decimal point.
+ *This may be overridden in a locale file.
+ */ + decimalSeparator: '.', + + /** + * @property {Number} currencyPrecision + *The number of decimal places that the {@link #currency} function displays.
+ *This may be overridden in a locale file.
+ */ + currencyPrecision: 2, + + /** + * @property {String} currencySign + *The currency sign that the {@link #currency} function displays.
+ *This may be overridden in a locale file.
+ */ + currencySign: '$', + + /** + * @property {Boolean} currencyAtEnd + *This may be set to 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, + + /** + * Checks a reference and converts it to empty string if it is undefined + * @param {Object} value Reference to check + * @return {Object} Empty string if converted, otherwise the original value + */ + undef : function(value) { + return value !== undefined ? value : ""; + }, + + /** + * Checks a reference and converts it to the default value if it's empty + * @param {Object} value Reference to check + * @param {String} defaultValue The value to insert of it's undefined (defaults to "") + * @return {String} + */ + defaultValue : function(value, defaultValue) { + return value !== undefined && value !== '' ? value : defaultValue; + }, + + /** + * Returns a substring from within an original string + * @param {String} value The original text + * @param {Number} start The start index of the substring + * @param {Number} length The length of the substring + * @return {String} The substring + */ + substr : function(value, start, length) { + return String(value).substr(start, length); + }, + + /** + * Converts a string to all lower case letters + * @param {String} value The text to convert + * @return {String} The converted text + */ + lowercase : function(value) { + return String(value).toLowerCase(); + }, + + /** + * Converts a string to all upper case letters + * @param {String} value The text to convert + * @return {String} The converted text + */ + uppercase : function(value) { + return String(value).toUpperCase(); + }, + + /** + * Format a number as US currency + * @param {Number/String} value The numeric value to format + * @return {String} The formatted currency string + */ + usMoney : function(v) { + return UtilFormat.currency(v, '$', 2); + }, + + /** + * Format a number as a currency + * @param {Number/String} value The numeric value to format + * @param {String} sign The currency sign to use (defaults to {@link #currencySign}) + * @param {Number} decimals The number of decimals to use for the currency (defaults to {@link #currencyPrecision}) + * @param {Boolean} end True if the currency sign should be at the end of the string (defaults to {@link #currencyAtEnd}) + * @return {String} The formatted currency string + */ + currency: function(v, currencySign, decimals, end) { + var negativeSign = '', + format = ",0", + i = 0; + v = v - 0; + if (v < 0) { + v = -v; + negativeSign = '-'; + } + decimals = decimals || UtilFormat.currencyPrecision; + format += format + (decimals > 0 ? '.' : ''); + for (; i < decimals; i++) { + format += '0'; + } + v = UtilFormat.number(v, format); + if ((end || UtilFormat.currencyAtEnd) === true) { + return Ext.String.format("{0}{1}{2}", negativeSign, v, currencySign || UtilFormat.currencySign); + } else { + return Ext.String.format("{0}{1}{2}", negativeSign, currencySign || UtilFormat.currencySign, v); + } + }, + + /** + * Formats the passed date using the specified format pattern. + * @param {String/Date} value The value to format. If a string is passed, it is converted to a Date by the Javascript + * Date object's parse() method. + * @param {String} format (Optional) Any valid date format string. Defaults to {@link Ext.Date#defaultFormat}. + * @return {String} The formatted date string. + */ + date: function(v, format) { + if (!v) { + return ""; + } + if (!Ext.isDate(v)) { + v = new Date(Date.parse(v)); + } + return Ext.Date.dateFormat(v, format || Ext.Date.defaultFormat); + }, + + /** + * Returns a date rendering function that can be reused to apply a date format multiple times efficiently + * @param {String} format Any valid date format string. Defaults to {@link Ext.Date#defaultFormat}. + * @return {Function} The date formatting function + */ + dateRenderer : function(format) { + return function(v) { + return UtilFormat.date(v, format); + }; + }, + + /** + * Strips all HTML tags + * @param {Object} value The text from which to strip tags + * @return {String} The stripped text + */ + stripTags : function(v) { + return !v ? v : String(v).replace(stripTagsRE, ""); + }, + + /** + * Strips all script tags + * @param {Object} value The text from which to strip script tags + * @return {String} The stripped text + */ + stripScripts : function(v) { + return !v ? v : String(v).replace(stripScriptsRe, ""); + }, + + /** + * Simple format for a file size (xxx bytes, xxx KB, xxx MB) + * @param {Number/String} size The numeric value to format + * @return {String} The formatted file size + */ + fileSize : function(size) { + if (size < 1024) { + return size + " bytes"; + } else if (size < 1048576) { + return (Math.round(((size*10) / 1024))/10) + " KB"; + } else { + return (Math.round(((size*10) / 1048576))/10) + " MB"; + } + }, + + /** + * It does simple math for use in a template, for example:
+ * var tpl = new Ext.Template('{value} * 10 = {value:math("* 10")}');
+ * Formats the passed number according to the passed format string.
+ *The number of digits after the decimal separator character specifies the number of + * decimal places in the resulting string. The local-specific decimal character is used in the result.
+ *The presence of a thousand separator character in the format string specifies that + * the locale-specific thousand separator (if any) is inserted separating thousand groups.
+ *By default, "," is expected as the thousand separator, and "." is expected as the decimal separator.
+ *New to Ext JS 4
+ *Locale-specific characters are always used in the formatted output when inserting + * thousand and decimal separators.
+ *The format string must specify separator characters according to US/UK conventions ("," as the + * thousand separator, and "." as the decimal separator)
+ *To allow specification of format strings according to local conventions for separator characters, add
+ * the string /i to the end of the format string.
+// Start a simple clock task that updates a div once per second
+var updateClock = function(){
+ Ext.fly('clock').update(new Date().format('g:i:s A'));
+}
+var task = {
+ run: updateClock,
+ interval: 1000 //1 second
+}
+var runner = new Ext.util.TaskRunner();
+runner.start(task);
+
+// equivalent using TaskManager
+Ext.TaskManager.start({
+ run: updateClock,
+ interval: 1000
+});
+
+ * See the {@link #start} method for details about how to configure a task object.
+ * Also see {@link Ext.util.DelayedTask}. + * + * @constructor + * @param {Number} [interval=10] The minimum precision in milliseconds supported by this TaskRunner instance + */ +Ext.ns('Ext.util'); + +Ext.util.TaskRunner = function(interval) { + interval = interval || 10; + var tasks = [], + removeQueue = [], + id = 0, + running = false, + + // private + stopThread = function() { + running = false; + clearInterval(id); + id = 0; + }, + + // private + startThread = function() { + if (!running) { + running = true; + id = setInterval(runTasks, interval); + } + }, + + // private + removeTask = function(t) { + removeQueue.push(t); + if (t.onStop) { + t.onStop.apply(t.scope || t); + } + }, + + // private + runTasks = function() { + var rqLen = removeQueue.length, + now = new Date().getTime(), + i; + + if (rqLen > 0) { + for (i = 0; i < rqLen; i++) { + Ext.Array.remove(tasks, removeQueue[i]); + } + removeQueue = []; + if (tasks.length < 1) { + stopThread(); + return; + } + } + i = 0; + var t, + itime, + rt, + len = tasks.length; + for (; i < len; ++i) { + t = tasks[i]; + itime = now - t.taskRunTime; + if (t.interval <= itime) { + rt = t.run.apply(t.scope || t, t.args || [++t.taskRunCount]); + t.taskRunTime = now; + if (rt === false || t.taskRunCount === t.repeat) { + removeTask(t); + return; + } + } + if (t.duration && t.duration <= (now - t.taskStartTime)) { + removeTask(t); + } + } + }; + + /** + * Starts a new task. + * @method start + * @param {Object} taskA config object that supports the following properties:
run : FunctionThe function to execute each time the task is invoked. The
+ * function will be called at each interval and passed the args argument if specified, and the
+ * current invocation count if not.
If a particular scope (this reference) is required, be sure to specify it using the scope argument.
Return false from this function to terminate the task.
interval : Numberargs : Arrayrun. If not specified, the current invocation count is passed.scope : Objectrun function. Defaults to the task config object.duration : Numberrepeat : NumberBefore each invocation, Ext injects the property taskRunCount into the task object so
+ * that calculations based on the repeat count can be performed.
+// Start a simple clock task that updates a div once per second
+var task = {
+ run: function(){
+ Ext.fly('clock').update(new Date().format('g:i:s A'));
+ },
+ interval: 1000 //1 second
+}
+Ext.TaskManager.start(task);
+See the {@link #start} method for details about how to configure a task object.
+ * @singleton + */ +Ext.TaskManager = Ext.create('Ext.util.TaskRunner'); +/** + * @class Ext.is + * + * Determines information about the current platform the application is running on. + * + * @singleton + */ +Ext.is = { + init : function(navigator) { + var platforms = this.platforms, + ln = platforms.length, + i, platform; + + navigator = navigator || window.navigator; + + for (i = 0; i < ln; i++) { + platform = platforms[i]; + this[platform.identity] = platform.regex.test(navigator[platform.property]); + } + + /** + * @property Desktop True if the browser is running on a desktop machine + * @type {Boolean} + */ + this.Desktop = this.Mac || this.Windows || (this.Linux && !this.Android); + /** + * @property Tablet True if the browser is running on a tablet (iPad) + */ + this.Tablet = this.iPad; + /** + * @property Phone True if the browser is running on a phone. + * @type {Boolean} + */ + this.Phone = !this.Desktop && !this.Tablet; + /** + * @property iOS True if the browser is running on iOS + * @type {Boolean} + */ + this.iOS = this.iPhone || this.iPad || this.iPod; + + /** + * @property Standalone Detects when application has been saved to homescreen. + * @type {Boolean} + */ + this.Standalone = !!window.navigator.standalone; + }, + + /** + * @property iPhone True when the browser is running on a iPhone + * @type {Boolean} + */ + platforms: [{ + property: 'platform', + regex: /iPhone/i, + identity: 'iPhone' + }, + + /** + * @property iPod True when the browser is running on a iPod + * @type {Boolean} + */ + { + property: 'platform', + regex: /iPod/i, + identity: 'iPod' + }, + + /** + * @property iPad True when the browser is running on a iPad + * @type {Boolean} + */ + { + property: 'userAgent', + regex: /iPad/i, + identity: 'iPad' + }, + + /** + * @property Blackberry True when the browser is running on a Blackberry + * @type {Boolean} + */ + { + property: 'userAgent', + regex: /Blackberry/i, + identity: 'Blackberry' + }, + + /** + * @property Android True when the browser is running on an Android device + * @type {Boolean} + */ + { + property: 'userAgent', + regex: /Android/i, + identity: 'Android' + }, + + /** + * @property Mac True when the browser is running on a Mac + * @type {Boolean} + */ + { + property: 'platform', + regex: /Mac/i, + identity: 'Mac' + }, + + /** + * @property Windows True when the browser is running on Windows + * @type {Boolean} + */ + { + property: 'platform', + regex: /Win/i, + identity: 'Windows' + }, + + /** + * @property Linux True when the browser is running on Linux + * @type {Boolean} + */ + { + property: 'platform', + regex: /Linux/i, + identity: 'Linux' + }] +}; + +Ext.is.init(); + +/** + * @class Ext.supports + * + * Determines information about features are supported in the current environment + * + * @singleton + */ +Ext.supports = { + init : function() { + var doc = document, + div = doc.createElement('div'), + tests = this.tests, + ln = tests.length, + i, test; + + div.innerHTML = [ + 'The DomHelper class provides a layer of abstraction from DOM and transparently supports creating + * elements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates + * from your DOM building code.
+ * + *DomHelper element specification object
+ *A specification object is used when creating elements. Attributes of this object + * are assumed to be element attributes, except for 4 special attributes: + *
NOTE: For other arbitrary attributes, the value will currently not be automatically + * HTML-escaped prior to building the element's HTML string. This means that if your attribute value + * contains special characters that would not normally be allowed in a double-quoted attribute value, + * you must manually HTML-encode it beforehand (see {@link Ext.String#htmlEncode}) or risk + * malformed HTML being created. This behavior may change in a future release.
+ * + *Insertion methods
+ *Commonly used insertion methods: + *
Example
+ *This is an example, where an unordered list with 3 children items is appended to an existing
+ * element with id 'my-div':
+
+var dh = Ext.DomHelper; // create shorthand alias
+// specification object
+var spec = {
+ id: 'my-ul',
+ tag: 'ul',
+ cls: 'my-list',
+ // append children after creating
+ children: [ // may also specify 'cn' instead of 'children'
+ {tag: 'li', id: 'item0', html: 'List Item 0'},
+ {tag: 'li', id: 'item1', html: 'List Item 1'},
+ {tag: 'li', id: 'item2', html: 'List Item 2'}
+ ]
+};
+var list = dh.append(
+ 'my-div', // the context element 'my-div' can either be the id or the actual node
+ spec // the specification object
+);
+ Element creation specification parameters in this class may also be passed as an Array of + * specification objects. This can be used to insert multiple sibling nodes into an existing + * container very efficiently. For example, to add more list items to the example above:
+dh.append('my-ul', [
+ {tag: 'li', id: 'item3', html: 'List Item 3'},
+ {tag: 'li', id: 'item4', html: 'List Item 4'}
+]);
+ * Templating
+ *The real power is in the built-in templating. Instead of creating or appending any elements, + * {@link #createTemplate} returns a Template object which can be used over and over to + * insert new elements. Revisiting the example above, we could utilize templating this time: + *
+// create the node
+var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
+// get template
+var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});
+
+for(var i = 0; i < 5, i++){
+ tpl.append(list, [i]); // use template to append to the actual node
+}
+ * An example using a template:
+var html = '{2}';
+
+var tpl = new Ext.DomHelper.createTemplate(html);
+tpl.append('blog-roll', ['link1', 'http://www.edspencer.net/', "Ed's Site"]);
+tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin's Site"]);
+ * The same example using named parameters:
+var html = '{text}';
+
+var tpl = new Ext.DomHelper.createTemplate(html);
+tpl.append('blog-roll', {
+ id: 'link1',
+ url: 'http://www.edspencer.net/',
+ text: "Ed's Site"
+});
+tpl.append('blog-roll', {
+ id: 'link2',
+ url: 'http://www.dustindiaz.com/',
+ text: "Dustin's Site"
+});
+ * Compiling Templates
+ *Templates are applied using regular expressions. The performance is great, but if + * you are adding a bunch of DOM elements using the same template, you can increase + * performance even further by {@link Ext.Template#compile "compiling"} the template. + * The way "{@link Ext.Template#compile compile()}" works is the template is parsed and + * broken up at the different variable points and a dynamic function is created and eval'ed. + * The generated function performs string concatenation of these parts and the passed + * variables instead of using regular expressions. + *
+var html = '{text}';
+
+var tpl = new Ext.DomHelper.createTemplate(html);
+tpl.compile();
+
+//... use template like normal
+ * Performance Boost
+ *DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead + * of DOM can significantly boost performance.
+ *Element creation specification parameters may also be strings. If {@link #useDom} is false, + * then the string is used as innerHTML. If {@link #useDom} is true, a string specification + * results in the creation of a text node. Usage:
+ *
+Ext.DomHelper.useDom = true; // force it to use DOM; reduces performance
+ * +DomQuery supports most of the CSS3 selectors spec, along with some custom selectors and basic XPath.
+ ++All selectors, attribute filters and pseudos below can be combined infinitely in any order. For example "div.foo:nth-child(odd)[@foo=bar].bar:first" would be a perfectly valid selector. Node filters are processed in the order in which they appear, which allows you to optimize your queries for your document structure. +
+The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.
+paragraph one
+ *paragraph two
+ *paragraph three
+ *
+// change the height to 200px and animate with default configuration
+Ext.fly('elementId').setHeight(200, true);
+
+// change the height to 150px and animate with a custom configuration
+Ext.fly('elId').setHeight(150, {
+ duration : .5, // animation will have a duration of .5 seconds
+ // will change the content to "finished"
+ callback: function(){ this.{@link #update}("finished"); }
+});
+ * Wraps the specified element with a special 9 element markup/CSS block that renders by default as + * a gray container with a gradient background, rounded corners and a 4-way shadow.
+ *This special markup is used throughout Ext when box wrapping elements ({@link Ext.button.Button}, + * {@link Ext.panel.Panel} when {@link Ext.panel.Panel#frame frame=true}, {@link Ext.window.Window}). The markup + * is of this form:
+ *
+ Ext.Element.boxMarkup =
+ '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
+ <div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
+ <div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
+ * Example usage:
+ *
+ // Basic box wrap
+ Ext.get("foo").boxWrap();
+
+ // You can also add a custom class and use CSS inheritance rules to customize the box look.
+ // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
+ // for how to create a custom box wrap style.
+ Ext.get("foo").boxWrap().addCls("x-box-blue");
+ * {width: widthValue, height: heightValue}.Returns the dimensions of the element available to lay content out in.
+ *
If the element (or any ancestor element) has CSS style display : none, the dimensions will be zero.
+ var vpSize = Ext.getBody().getViewSize();
+
+ // all Windows created afterwards will have a default value of 90% height and 95% width
+ Ext.Window.override({
+ width: vpSize.width * 0.9,
+ height: vpSize.height * 0.95
+ });
+ // To handle window resizing you would have to hook onto onWindowResize.
+ * 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. + */ + + getStyleSize : function(){ + var me = this, + doc = document, + d = this.dom, + isDoc = (d == doc || d == doc.body), + s = d.style, + w, h; + + // If the body, use static methods + if (isDoc) { + return { + width : ELEMENT.getViewWidth(), + height : ELEMENT.getViewHeight() + }; + } + // 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)}; + }, + + /** + * Returns the size of the element. + * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding + * @return {Object} An object containing the element's size {width: (element width), height: (element height)} + */ + getSize : function(contentSize){ + return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)}; + }, + + /** + * Forces the browser to repaint this element + * @return {Ext.Element} this + */ + repaint : function(){ + var dom = this.dom; + this.addCls(Ext.baseCSSPrefix + 'repaint'); + setTimeout(function(){ + Ext.fly(dom).removeCls(Ext.baseCSSPrefix + 'repaint'); + }, 1); + return this; + }, + + /** + * 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.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; + }, + + /** + * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed, + * then it returns the calculated width of the sides (see getPadding) + * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides + * @return {Object/Number} + */ + getMargin : function(side){ + var me = this, + hash = {t:"top", l:"left", r:"right", b: "bottom"}, + o = {}, + key; + + if (!side) { + for (key in me.margins){ + o[hash[key]] = parseFloat(me.getStyle(me.margins[key])) || 0; + } + return o; + } else { + return me.addStyles.call(me, side, me.margins); + } + } + }); +})(); +/** + * @class Ext.Element + */ +/** + * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element + * @static + * @type Number + */ +Ext.Element.VISIBILITY = 1; +/** + * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element + * @static + * @type Number + */ +Ext.Element.DISPLAY = 2; + +/** + * Visibility mode constant for use with {@link #setVisibilityMode}. Use offsets (x and y positioning offscreen) + * to hide element. + * @static + * @type Number + */ +Ext.Element.OFFSETS = 3; + + +Ext.Element.ASCLASS = 4; + +/** + * Defaults to 'x-hide-nosize' + * @static + * @type String + */ +Ext.Element.visibilityCls = Ext.baseCSSPrefix + 'hide-nosize'; + +Ext.Element.addMethods(function(){ + var El = Ext.Element, + OPACITY = "opacity", + VISIBILITY = "visibility", + DISPLAY = "display", + HIDDEN = "hidden", + OFFSETS = "offsets", + ASCLASS = "asclass", + NONE = "none", + NOSIZE = 'nosize', + ORIGINALDISPLAY = 'originalDisplay', + VISMODE = 'visibilityMode', + ISVISIBLE = 'isVisible', + data = El.data, + getDisplay = function(dom){ + var d = data(dom, ORIGINALDISPLAY); + if(d === undefined){ + data(dom, ORIGINALDISPLAY, d = ''); + } + return d; + }, + getVisMode = function(dom){ + var m = data(dom, VISMODE); + if(m === undefined){ + data(dom, VISMODE, m = 1); + } + return m; + }; + + return { + /** + * @property {String} originalDisplay + * The element's default display mode + */ + originalDisplay : "", + visibilityMode : 1, + + /** + * Sets the element's visibility mode. When setVisible() is called it + * will use this to determine whether to set the visibility or the display property. + * @param {Number} visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY + * @return {Ext.Element} this + */ + setVisibilityMode : function(visMode){ + data(this.dom, VISMODE, visMode); + return this; + }, + + /** + * Checks whether the element is currently visible using both visibility and display properties. + * @return {Boolean} True if the element is currently visible, else false + */ + isVisible : function() { + var me = this, + dom = me.dom, + visible = data(dom, ISVISIBLE); + + if(typeof visible == 'boolean'){ //return the cached value if registered + return visible; + } + //Determine the current state based on display states + visible = !me.isStyle(VISIBILITY, HIDDEN) && + !me.isStyle(DISPLAY, NONE) && + !((getVisMode(dom) == El.ASCLASS) && me.hasCls(me.visibilityCls || El.visibilityCls)); + + data(dom, ISVISIBLE, visible); + return visible; + }, + + /** + * 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, isDisplay, isVisibility, isOffsets, isNosize, + dom = me.dom, + visMode = getVisMode(dom); + + + // hideMode string override + if (typeof animate == 'string'){ + switch (animate) { + case DISPLAY: + visMode = El.DISPLAY; + break; + case VISIBILITY: + visMode = El.VISIBILITY; + break; + case OFFSETS: + visMode = El.OFFSETS; + break; + case NOSIZE: + case ASCLASS: + visMode = El.ASCLASS; + break; + } + me.setVisibilityMode(visMode); + animate = false; + } + + if (!animate || !me.anim) { + if(visMode == El.ASCLASS ){ + + me[visible?'removeCls':'addCls'](me.visibilityCls || El.visibilityCls); + + } else if (visMode == El.DISPLAY){ + + return me.setDisplayed(visible); + + } else if (visMode == El.OFFSETS){ + + if (!visible){ + // Remember position for restoring, if we are not already hidden by offsets. + if (!me.hideModeStyles) { + me.hideModeStyles = { + position: me.getStyle('position'), + top: me.getStyle('top'), + left: me.getStyle('left') + }; + } + me.applyStyles({position: 'absolute', top: '-10000px', left: '-10000px'}); + } + + // Only "restore" as position if we have actually been hidden using offsets. + // Calling setVisible(true) on a positioned element should not reposition it. + else if (me.hideModeStyles) { + me.applyStyles(me.hideModeStyles || {position: '', top: '', left: ''}); + delete me.hideModeStyles; + } + + }else{ + me.fixDisplay(); + // Show by clearing visibility style. Explicitly setting to "visible" overrides parent visibility setting. + dom.style.visibility = visible ? '' : HIDDEN; + } + }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() { + visible || me.setVisible(false).setOpacity(1); + }, + to: { + opacity: (visible) ? 1 : 0 + } + }, animate)); + } + data(dom, ISVISIBLE, visible); //set logical visibility state + return me; + }, + + + /** + * @private + * Determine if the Element has a relevant height and width available based + * upon current logical visibility state + */ + hasMetrics : function(){ + var dom = this.dom; + return this.isVisible() || (getVisMode(dom) == El.OFFSETS) || (getVisMode(dom) == El.VISIBILITY); + }, + + /** + * Toggles the element's visibility or display, depending on visibility mode. + * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object + * @return {Ext.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.Element} this + */ + setDisplayed : function(value) { + if(typeof value == "boolean"){ + value = value ? getDisplay(this.dom) : 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(this.dom)); // 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 (optional) true for the default animation or a standard Element animation config object + * @return {Ext.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 (optional) true for the default animation or a standard Element animation config object + * @return {Ext.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; + } + }; +}()); +/** + * @class Ext.Element + */ +Ext.applyIf(Ext.Element.prototype, { + // @private override base Ext.util.Animate mixin for animate for backwards compatibility + animate: function(config) { + var me = this; + if (!me.id) { + me = Ext.get(me.dom); + } + if (Ext.fx.Manager.hasFxBlock(me.id)) { + return me; + } + Ext.fx.Manager.queueFx(Ext.create('Ext.fx.Anim', me.anim(config))); + return this; + }, + + // @private override base Ext.util.Animate mixin for animate for backwards compatibility + 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 = { + target: me, + 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='t'] One of the valid Fx anchor positions + * @param {Object} [options] Object literal with any of the Fx config options + * @return {Ext.Element} The Element + */ + slideIn: function(anchor, obj, slideOut) { + var me = this, + elStyle = me.dom.style, + beforeAnim, wrapAnim; + + anchor = anchor || "t"; + obj = obj || {}; + + beforeAnim = function() { + var animScope = this, + listeners = obj.listeners, + box, position, restoreSize, wrap, anim; + + 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; + } + + position = me.getPositioning(); + me.setSize(box.width, box.height); + + wrap = me.wrap({ + style: { + visibility: slideOut ? 'visible' : 'hidden' + } + }); + wrap.setPositioning(position); + if (wrap.isStyle('position', 'static')) { + wrap.position('relative'); + } + me.clearPositioning('auto'); + wrap.clip(); + + // 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: { + 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; + 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: { + 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; + } + + wrap.show(); + wrapAnim = Ext.apply({}, obj); + delete wrapAnim.listeners; + wrapAnim = Ext.create('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() { + if (slideOut) { + me.setPositioning(position); + if (obj.useDisplay) { + me.setDisplayed(false); + } else { + me.hide(); + } + } + else { + me.clearPositioning(); + me.setPositioning(position); + } + if (wrap.dom) { + wrap.dom.parentNode.insertBefore(me.dom, wrap.dom); + wrap.remove(); + } + me.setSize(box.width, box.height); + animScope.end(); + }); + // Add configured listeners after + if (listeners) { + wrapAnim.on(listeners); + } + }; + + me.animate({ + duration: obj.duration ? obj.duration * 2 : 1000, + listeners: { + beforeanimate: { + fn: beforeAnim + }, + afteranimate: { + fn: function() { + if (wrapAnim && wrapAnim.running) { + wrapAnim.end(); + } + } + } + } + }); + 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='t'] One of the valid Fx anchor positions + * @param {Object} [options] Object literal with any of the Fx config options + * @return {Ext.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.Element} The Element + */ + puff: function(obj) { + var me = this, + beforeAnim; + obj = Ext.applyIf(obj || {}, { + easing: 'ease-out', + duration: 500, + useDisplay: false + }); + + beforeAnim = function() { + me.clearOpacity(); + me.show(); + + var box = me.getBox(), + fontSize = me.getStyle('fontSize'), + position = me.getPositioning(); + 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.clearOpacity(); + me.setPositioning(position); + me.setStyle({fontSize: fontSize}); + } + }); + }; + + 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.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 = Ext.create('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); + animScope.end(); + }); + }; + me.animate({ + duration: (obj.duration * 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: 3 }); + * + * // common config options shown with default values + * el.frame("#C3DAF9", 1, { + * duration: 1 //duration of each individual ripple. + * // Note: Easing is not configurable and will be ignored if included + * }); + * + * @param {String} [color='C3DAF9'] The color of the border. Should be a 6 char hex color without the leading # + * (defaults to light blue). + * @param {Number} [count=1] The number of ripples to display + * @param {Object} [options] Object literal with any of the Fx config options + * @return {Ext.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({ + style: { + position : 'absolute', + 'pointer-events': 'none', + 'z-index': 35000, + border : '0px solid ' + color + } + }), + proxyAnim; + proxyAnim = Ext.create('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(); + animScope.end(); + }); + }; + + me.animate({ + duration: (obj.duration * 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='b'] One of the valid Fx anchor positions + * @param {Object} [options] Object literal with any of the Fx config options + * @return {Ext.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='ffff9c'] The highlight color. Should be a 6 char hex color without the leading # + * @param {Object} [options] Object literal with any of the Fx config options + * @return {Ext.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; + }, + + /** + * @deprecated 4.0 + * 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); + * + * @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) { + this.animate(Ext.apply({}, o, { + opacity: 1 + })); + 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) { + this.animate(Ext.apply({}, o, { + opacity: 0 + })); + return this; + }, + + /** + * @deprecated 4.0 + * 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: .35 + * } + * ); + * + * @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; + }, + + /** + * @deprecated 4.0 + * 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: .35 + * }); + * + * @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; + } +}); + +/** + * @class Ext.Element + */ +Ext.applyIf(Ext.Element, { + unitRe: /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i, + camelRe: /(-[a-z])/gi, + opacityRe: /alpha\(opacity=(.*)\)/i, + cssRe: /([a-z0-9-]+)\s*:\s*([^;\s]+(?:\s*[^;\s]+)*);?/gi, + 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'}, + + // Reference the prototype's version of the method. Signatures are identical. + addUnits : Ext.Element.prototype.addUnits, + + /** + * 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 (Ext.isObject(box)) { + return { + top: box.top || 0, + right: box.right || 0, + bottom: box.bottom || 0, + left: box.left || 0 + }; + } else { + 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: + *
+ * 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.Element.parseStyles(css));
+ * 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.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);
+The Array of DOM elements which this CompositeElement encapsulates. Read-only.
+ *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.CompositeElementLite, {
+ nextAll: function() {
+ var els = this.elements, i, l = els.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 = els[i].nextSibling; n; n = n.nextSibling) {
+ r[++ri] = n;
+ }
+ }
+
+// Add all found siblings to this Composite
+ return this.add(r);
+ }
+});el : Ext.Elementindex : Numberthis 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;
+ }
+ };
+};
+Ext.require('Ext.util.DelayedTask', function() {
+
+ Ext.util.Event = Ext.extend(Object, (function() {
+ 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() {
+ listener.ev.removeListener(listener.fn, scope);
+ return handler.apply(scope, arguments);
+ };
+ }
+
+ return {
+ 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 (!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, o) {
+ o = o || {};
+ scope = scope || this.observable;
+
+ var listener = {
+ fn: fn,
+ scope: scope,
+ o: o,
+ 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 (o.single) {
+ handler = createSingle(handler, listener, o, scope);
+ }
+ if (o.delay) {
+ handler = createDelayed(handler, listener, o, scope);
+ }
+ if (o.buffer) {
+ handler = createBuffered(handler, listener, o, 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;
+ if (listener.fn == fn && (s == scope || s == 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;
+ }
+ };
+ })());
+});
+
+/**
+ * @class Ext.EventManager
+ * Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides
+ * several useful events directly.
+ * See {@link Ext.EventObject} for more details on normalized event objects.
+ * @singleton
+ */
+Ext.EventManager = {
+
+ // --------------------- onReady ---------------------
+
+ /**
+ * Check if we have bound our global onReady listener
+ * @private
+ */
+ hasBoundOnReady: false,
+
+ /**
+ * Check if fireDocReady has been called
+ * @private
+ */
+ hasFiredReady: false,
+
+ /**
+ * Timer for the document ready event in old IE versions
+ * @private
+ */
+ readyTimeout: null,
+
+ /**
+ * Checks if we have bound an onreadystatechange event
+ * @private
+ */
+ hasOnReadyStateChange: false,
+
+ /**
+ * Holds references to any onReady functions
+ * @private
+ */
+ readyEvent: new Ext.util.Event(),
+
+ /**
+ * Check the ready state for old IE versions
+ * @private
+ * @return {Boolean} True if the document is ready
+ */
+ checkReadyState: function(){
+ var me = Ext.EventManager;
+
+ if(window.attachEvent){
+ // See here for reference: http://javascript.nwbox.com/IEContentLoaded/
+ // licensed courtesy of http://developer.yahoo.com/yui/license.html
+ if (window != top) {
+ return false;
+ }
+ try{
+ document.documentElement.doScroll('left');
+ }catch(e){
+ return false;
+ }
+ me.fireDocReady();
+ return true;
+ }
+ if (document.readyState == 'complete') {
+ me.fireDocReady();
+ return true;
+ }
+ me.readyTimeout = setTimeout(arguments.callee, 2);
+ return false;
+ },
+
+ /**
+ * Binds the appropriate browser event for checking if the DOM has loaded.
+ * @private
+ */
+ bindReadyEvent: function(){
+ var me = Ext.EventManager;
+ if (me.hasBoundOnReady) {
+ return;
+ }
+
+ if (document.addEventListener) {
+ document.addEventListener('DOMContentLoaded', me.fireDocReady, false);
+ // fallback, load will ~always~ fire
+ window.addEventListener('load', me.fireDocReady, false);
+ } else {
+ // check if the document is ready, this will also kick off the scroll checking timer
+ if (!me.checkReadyState()) {
+ document.attachEvent('onreadystatechange', me.checkReadyState);
+ me.hasOnReadyStateChange = true;
+ }
+ // fallback, onload will ~always~ fire
+ window.attachEvent('onload', me.fireDocReady, false);
+ }
+ me.hasBoundOnReady = true;
+ },
+
+ /**
+ * We know the document is loaded, so trigger any onReady events.
+ * @private
+ */
+ fireDocReady: function(){
+ var me = Ext.EventManager;
+
+ // only unbind these events once
+ if (!me.hasFiredReady) {
+ me.hasFiredReady = true;
+
+ if (document.addEventListener) {
+ document.removeEventListener('DOMContentLoaded', me.fireDocReady, false);
+ window.removeEventListener('load', me.fireDocReady, false);
+ } else {
+ if (me.readyTimeout !== null) {
+ clearTimeout(me.readyTimeout);
+ }
+ if (me.hasOnReadyStateChange) {
+ document.detachEvent('onreadystatechange', me.checkReadyState);
+ }
+ window.detachEvent('onload', me.fireDocReady);
+ }
+ Ext.supports.init();
+ }
+ if (!Ext.isReady) {
+ Ext.isReady = true;
+ me.onWindowUnload();
+ me.readyEvent.fire();
+ }
+ },
+
+ /**
+ * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Can be
+ * accessed shorthanded as Ext.onReady().
+ * @param {Function} fn The method the event invokes.
+ * @param {Object} scope (optional) The scope (this reference) in which the handler function executes. Defaults to the browser window.
+ * @param {Boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}.
+ */
+ onDocumentReady: function(fn, scope, options){
+ options = options || {};
+ var me = Ext.EventManager,
+ readyEvent = me.readyEvent;
+
+ // force single to be true so our event is only ever fired once.
+ options.single = true;
+
+ // Document already loaded, let's just fire it
+ if (Ext.isReady) {
+ readyEvent.addListener(fn, scope, options);
+ readyEvent.fire();
+ } else {
+ options.delay = options.delay || 1;
+ readyEvent.addListener(fn, scope, options);
+ me.bindReadyEvent();
+ }
+ },
+
+
+ // --------------------- event binding ---------------------
+
+ /**
+ * Contains a list of all document mouse downs, so we can ensure they fire even when stopEvent is called.
+ * @private
+ */
+ stoppedMouseDownEvent: new Ext.util.Event(),
+
+ /**
+ * Options to parse for the 4th argument to addListener.
+ * @private
+ */
+ propRe: /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate|freezeEvent)$/,
+
+ /**
+ * Get the id of the element. If one has not been assigned, automatically assign it.
+ * @param {HTMLElement/Ext.Element} element The element to get the id for.
+ * @return {String} id
+ */
+ getId : function(element) {
+ var skipGarbageCollection = false,
+ id;
+
+ element = Ext.getDom(element);
+
+ if (element === document || element === window) {
+ id = element === document ? Ext.documentId : Ext.windowId;
+ }
+ else {
+ id = Ext.id(element);
+ }
+ // skip garbage collection for special elements (window, document, iframes)
+ if (element && (element.getElementById || element.navigator)) {
+ skipGarbageCollection = true;
+ }
+
+ if (!Ext.cache[id]){
+ Ext.Element.addToCache(new Ext.Element(element), id);
+ if (skipGarbageCollection) {
+ Ext.cache[id].skipGarbageCollection = true;
+ }
+ }
+ return id;
+ },
+
+ /**
+ * Convert a "config style" listener into a set of flat arguments so they can be passed to addListener
+ * @private
+ * @param {Object} element The element the event is for
+ * @param {Object} event The event configuration
+ * @param {Object} isRemove True if a removal should be performed, otherwise an add will be done.
+ */
+ prepareListenerConfig: function(element, config, isRemove){
+ var me = this,
+ propRe = me.propRe,
+ key, value, args;
+
+ // loop over all the keys in the object
+ for (key in config) {
+ if (config.hasOwnProperty(key)) {
+ // if the key is something else then an event option
+ if (!propRe.test(key)) {
+ value = config[key];
+ // if the value is a function it must be something like click: function(){}, scope: this
+ // which means that there might be multiple event listeners with shared options
+ if (Ext.isFunction(value)) {
+ // shared options
+ args = [element, key, value, config.scope, config];
+ } else {
+ // if its not a function, it must be an object like click: {fn: function(){}, scope: this}
+ args = [element, key, value.fn, value.scope, value];
+ }
+
+ if (isRemove === true) {
+ me.removeListener.apply(this, args);
+ } else {
+ me.addListener.apply(me, args);
+ }
+ }
+ }
+ }
+ },
+
+ /**
+ * Normalize cross browser event differences
+ * @private
+ * @param {Object} eventName The event name
+ * @param {Object} fn The function to execute
+ * @return {Object} The new event name/function
+ */
+ normalizeEvent: function(eventName, fn){
+ if (/mouseenter|mouseleave/.test(eventName) && !Ext.supports.MouseEnterLeave) {
+ if (fn) {
+ fn = Ext.Function.createInterceptor(fn, this.contains, this);
+ }
+ eventName = eventName == 'mouseenter' ? 'mouseover' : 'mouseout';
+ } else if (eventName == 'mousewheel' && !Ext.supports.MouseWheel && !Ext.isOpera){
+ eventName = 'DOMMouseScroll';
+ }
+ return {
+ eventName: eventName,
+ fn: fn
+ };
+ },
+
+ /**
+ * Checks whether the event's relatedTarget is contained inside (or is) the element.
+ * @private
+ * @param {Object} event
+ */
+ contains: function(event){
+ var parent = event.browserEvent.currentTarget,
+ child = this.getRelatedTarget(event);
+
+ if (parent && parent.firstChild) {
+ while (child) {
+ if (child === parent) {
+ return false;
+ }
+ child = child.parentNode;
+ if (child && (child.nodeType != 1)) {
+ child = null;
+ }
+ }
+ }
+ return true;
+ },
+
+ /**
+ * Appends an event handler to an element. The shorthand version {@link #on} is equivalent. Typically you will
+ * use {@link Ext.Element#addListener} directly on an Element in favor of calling this version.
+ * @param {String/HTMLElement} el The html element or id to assign the event handler to.
+ * @param {String} eventName The name of the event to listen for.
+ * @param {Function} handler The handler function the event invokes. This function is passed
+ * the following parameters:this reference) in which the handler function is executed. Defaults to the Element.
+ * @param {Object} options (optional) An object containing handler configuration properties.
+ * This may contain any of the following properties:this reference) in which the handler function is executed. Defaults to the Element.See {@link Ext.Element#addListener} for examples of how to use these options.
+ */ + addListener: function(element, eventName, fn, scope, options){ + // Check if we've been passed a "config style" event. + if (typeof eventName !== 'string') { + this.prepareListenerConfig(element, eventName); + return; + } + + var dom = Ext.getDom(element), + bind, + wrap; + + + // create the wrapper function + options = options || {}; + + bind = this.normalizeEvent(eventName, fn); + wrap = this.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 == document && eventName == 'mousedown') { + this.stoppedMouseDownEvent.addListener(wrap); + } + + // add all required data into the event cache + this.getEventListenerCache(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') {
+ this.prepareListenerConfig(element, eventName, true);
+ return;
+ }
+
+ var dom = Ext.getDom(element),
+ cache = this.getEventListenerCache(dom, eventName),
+ bindName = this.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 == document && eventName == 'mousedown') {
+ this.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 dom = Ext.getDom(element),
+ cache, ev;
+ if (!dom) {
+ return;
+ }
+ cache = this.getElementEventCache(dom);
+
+ for (ev in cache) {
+ if (cache.hasOwnProperty(ev)) {
+ this.removeListener(dom, ev);
+ }
+ }
+ Ext.cache[dom.id].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) {
+ this.removeListener(dom, eventName);
+ }
+ else {
+ this.removeAll(dom);
+ }
+
+ if(dom && dom.childNodes) {
+ for(len = element.childNodes.length; i < len; i++) {
+ this.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;
+
+ return function wrap(e, args) {
+ // Compile the implementation upon first firing
+ if (!gen) {
+ f = ['if(!Ext) {return;}'];
+
+ if(options.buffer || options.delay || options.freezeEvent) {
+ f.push('e = new Ext.EventObjectImpl(e, ' + (options.freezeEvent ? 'true' : 'false' ) + ');');
+ } else {
+ f.push('e = Ext.EventObject.setEvent(e);');
+ }
+
+ if (options.delegate) {
+ f.push('var t = e.getTarget("' + options.delegate + '", this);');
+ f.push('if(!t) {return;}');
+ } else {
+ f.push('var t = e.target;');
+ }
+
+ 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('fn.call(scope || dom, e, t, options);');
+
+ if(options.single) {
+ f.push('Ext.EventManager.removeListener(dom, ename, fn, scope);');
+ }
+
+ if(options.delay) {
+ f.push('}, ' + options.delay + '));');
+ }
+
+ if(options.buffer) {
+ f.push('}, ' + options.buffer + ');');
+ }
+
+ gen = Ext.functionFactory('e', 'options', 'fn', 'scope', 'ename', 'dom', 'wrap', 'args', f.join('\n'));
+ }
+
+ gen.call(dom, e, options, fn, scope, ename, dom, wrap, args);
+ };
+ },
+
+ /**
+ * 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) {
+ if (!element) {
+ return [];
+ }
+
+ var eventCache = this.getElementEventCache(element);
+ return eventCache[eventName] || (eventCache[eventName] = []);
+ },
+
+ /**
+ * Gets the event cache for the object
+ * @private
+ * @param {HTMLElement} element The element
+ * @return {Object} The event cache for the object
+ */
+ getElementEventCache : function(element) {
+ if (!element) {
+ return {};
+ }
+ var elementCache = Ext.cache[this.getId(element)];
+ return elementCache.events || (elementCache.events = {});
+ },
+
+ // --------------------- utility methods ---------------------
+ mouseLeaveRe: /(mouseout|mouseleave)/,
+ mouseEnterRe: /(mouseover|mouseenter)/,
+
+ /**
+ * Stop the event (preventDefault and stopPropagation)
+ * @param {Event} The event to stop
+ */
+ stopEvent: function(event) {
+ this.stopPropagation(event);
+ this.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 (this.mouseLeaveRe.test(event.type)) {
+ target = event.toElement;
+ } else if (this.mouseEnterRe.test(event.type)) {
+ target = event.fromElement;
+ }
+ }
+ return this.resolveTextNode(target);
+ },
+
+ /**
+ * Gets the x coordinate from the event
+ * @param {Object} event The event
+ * @return {Number} The x coordinate
+ */
+ getPageX: function(event) {
+ return this.getXY(event)[0];
+ },
+
+ /**
+ * Gets the y coordinate from the event
+ * @param {Object} event The event
+ * @return {Number} The y coordinate
+ */
+ getPageY: function(event) {
+ return this.getXY(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,
+ doc = document.documentElement,
+ body = document.body;
+
+ // pageX/pageY not available (undefined, not null), use clientX/clientY instead
+ if (!x && x !== 0) {
+ x = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
+ y = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.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 this.resolveTextNode(event.target || event.srcElement);
+ },
+
+ /**
+ * Resolve any text nodes accounting for browser differences.
+ * @private
+ * @param {HTMLElement} node The node
+ * @return {HTMLElement} The resolved node
+ */
+ // 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.
+ 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 = this.resizeEvent;
+ if(!resize){
+ this.resizeEvent = resize = new Ext.util.Event();
+ this.on(window, 'resize', this.fireResize, this, {buffer: 100});
+ }
+ resize.addListener(fn, scope, options);
+ },
+
+ /**
+ * Fire the resize event.
+ * @private
+ */
+ fireResize: function(){
+ var me = this,
+ 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(me.curHeight != h || me.curWidth != w){
+ me.curHeight = h;
+ me.curWidth = w;
+ me.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){
+ if (this.resizeEvent) {
+ this.resizeEvent.removeListener(fn, scope);
+ }
+ },
+
+ onWindowUnload: function() {
+ var unload = this.unloadEvent;
+ if (!unload) {
+ this.unloadEvent = unload = new Ext.util.Event();
+ this.addListener(window, 'unload', this.fireUnload, this);
+ }
+ },
+
+ /**
+ * Fires the unload event for items bound with onWindowUnload
+ * @private
+ */
+ fireUnload: function() {
+ // wrap in a try catch, could have some problems during unload
+ try {
+ this.removeUnloadListener();
+ // Work around FF3 remembering the last scroll position when refreshing the grid and then losing grid view
+ if (Ext.isGecko3) {
+ var gridviews = Ext.ComponentQuery.query('gridview'),
+ i = 0,
+ ln = gridviews.length;
+ for (; i < ln; i++) {
+ gridviews[i].scrollToTop();
+ }
+ }
+ // Purge all elements in the cache
+ var el,
+ cache = Ext.cache;
+ for (el in cache) {
+ if (cache.hasOwnProperty(el)) {
+ Ext.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(){
+ if (this.unloadEvent) {
+ this.removeListener(window, 'unload', this.fireUnload);
+ }
+ },
+
+ /**
+ * 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 this.useKeyDown ? 'keydown' : 'keypress';
+ }
+};
+
+/**
+ * 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 = Ext.EventManager.onDocumentReady;
+
+/**
+ * Alias for {@link Ext.EventManager#addListener Ext.EventManager.addListener}
+ * @member Ext.EventManager
+ * @method on
+ */
+Ext.EventManager.on = Ext.EventManager.addListener;
+
+/**
+ * Alias for {@link Ext.EventManager#removeListener Ext.EventManager.removeListener}
+ * @member Ext.EventManager
+ * @method un
+ */
+Ext.EventManager.un = Ext.EventManager.removeListener;
+
+(function(){
+ var initExtCss = function() {
+ // find the body element
+ var bd = document.body || document.getElementsByTagName('body')[0],
+ baseCSSPrefix = Ext.baseCSSPrefix,
+ cls = [baseCSSPrefix + 'body'],
+ htmlCls = [],
+ html;
+
+ if (!bd) {
+ return false;
+ }
+
+ html = bd.parentNode;
+
+ function add (c) {
+ cls.push(baseCSSPrefix + c);
+ }
+
+ //Let's keep this human readable!
+ if (Ext.isIE) {
+ add('ie');
+
+ // very often CSS needs to do checks like "IE7+" or "IE6 or 7". To help
+ // reduce the clutter (since CSS/SCSS cannot do these tests), we add some
+ // additional classes:
+ //
+ // x-ie7p : IE7+ : 7 <= ieVer
+ // x-ie7m : IE7- : ieVer <= 7
+ // x-ie8p : IE8+ : 8 <= ieVer
+ // x-ie8m : IE8- : ieVer <= 8
+ // x-ie9p : IE9+ : 9 <= ieVer
+ // x-ie78 : IE7 or 8 : 7 <= ieVer <= 8
+ //
+ if (Ext.isIE6) {
+ add('ie6');
+ } else { // ignore pre-IE6 :)
+ add('ie7p');
+
+ if (Ext.isIE7) {
+ add('ie7');
+ } else {
+ add('ie8p');
+
+ if (Ext.isIE8) {
+ add('ie8');
+ } else {
+ add('ie9p');
+
+ if (Ext.isIE9) {
+ add('ie9');
+ }
+ }
+ }
+ }
+
+ if (Ext.isIE6 || Ext.isIE7) {
+ add('ie7m');
+ }
+ if (Ext.isIE6 || Ext.isIE7 || Ext.isIE8) {
+ add('ie8m');
+ }
+ if (Ext.isIE7 || Ext.isIE8) {
+ add('ie78');
+ }
+ }
+ if (Ext.isGecko) {
+ add('gecko');
+ if (Ext.isGecko3) {
+ add('gecko3');
+ }
+ if (Ext.isGecko4) {
+ add('gecko4');
+ }
+ if (Ext.isGecko5) {
+ add('gecko5');
+ }
+ }
+ if (Ext.isOpera) {
+ add('opera');
+ }
+ if (Ext.isWebKit) {
+ add('webkit');
+ }
+ if (Ext.isSafari) {
+ add('safari');
+ if (Ext.isSafari2) {
+ add('safari2');
+ }
+ if (Ext.isSafari3) {
+ add('safari3');
+ }
+ if (Ext.isSafari4) {
+ add('safari4');
+ }
+ if (Ext.isSafari5) {
+ add('safari5');
+ }
+ }
+ if (Ext.isChrome) {
+ add('chrome');
+ }
+ if (Ext.isMac) {
+ add('mac');
+ }
+ if (Ext.isLinux) {
+ add('linux');
+ }
+ if (!Ext.supports.CSS3BorderRadius) {
+ add('nbr');
+ }
+ if (!Ext.supports.CSS3LinearGradient) {
+ add('nlg');
+ }
+ if (!Ext.scopeResetCSS) {
+ add('reset');
+ }
+
+ // add to the parent to allow for selectors x-strict x-border-box, also set the isBorderBox property correctly
+ if (html) {
+ if (Ext.isStrict && (Ext.isIE6 || Ext.isIE7)) {
+ Ext.isBorderBox = false;
+ }
+ else {
+ Ext.isBorderBox = true;
+ }
+
+ htmlCls.push(baseCSSPrefix + (Ext.isBorderBox ? 'border-box' : 'strict'));
+ if (!Ext.isStrict) {
+ htmlCls.push(baseCSSPrefix + 'quirks');
+ }
+ Ext.fly(html, '_internal').addCls(htmlCls);
+ }
+
+ Ext.fly(bd, '_internal').addCls(cls);
+ return true;
+ };
+
+ Ext.onReady(initExtCss);
+})();
+
+/**
+ * @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
+ },
+
+ constructor: function(event, freezeEvent){
+ if (event) {
+ this.setEvent(event.browserEvent || event, freezeEvent);
+ }
+ },
+
+ setEvent: function(event, freezeEvent){
+ var me = this, button, options;
+
+ if (event == me || (event && event.browserEvent)) { // already wrapped
+ return event;
+ }
+ me.browserEvent = event;
+ if (event) {
+ // normalize buttons
+ button = event.button ? me.btnMap[event.button] : (event.which ? event.which - 1 : -1);
+ if (me.clickRe.test(event.type) && button == -1) {
+ button = 0;
+ }
+ options = {
+ type: event.type,
+ button: button,
+ shiftKey: event.shiftKey,
+ // mac metaKey behaves like ctrlKey
+ ctrlKey: event.ctrlKey || event.metaKey || false,
+ altKey: event.altKey,
+ // in getKey these will be normalized for the mac
+ keyCode: event.keyCode,
+ charCode: event.charCode,
+ // cache the targets for the delayed and or buffered events
+ target: Ext.EventManager.getTarget(event),
+ relatedTarget: Ext.EventManager.getRelatedTarget(event),
+ currentTarget: event.currentTarget,
+ xy: (freezeEvent ? me.getXY() : null)
+ };
+ } else {
+ options = {
+ button: -1,
+ shiftKey: false,
+ ctrlKey: false,
+ altKey: false,
+ keyCode: 0,
+ charCode: 0,
+ target: null,
+ xy: [0, 0]
+ };
+ }
+ Ext.apply(me, options);
+ return me;
+ },
+
+ /**
+ * Stop the event (preventDefault and stopPropagation)
+ */
+ stopEvent: function(){
+ this.stopPropagation();
+ this.preventDefault();
+ },
+
+ /**
+ * Prevents the browsers default handling of the event.
+ */
+ preventDefault: function(){
+ if (this.browserEvent) {
+ Ext.EventManager.preventDefault(this.browserEvent);
+ }
+ },
+
+ /**
+ * Cancels bubbling of the event.
+ */
+ stopPropagation: function(){
+ var browserEvent = this.browserEvent;
+
+ if (browserEvent) {
+ if (browserEvent.type == 'mousedown') {
+ Ext.EventManager.stoppedMouseDownEvent.fire(this);
+ }
+ Ext.EventManager.stopPropagation(browserEvent);
+ }
+ },
+
+ /**
+ * Gets the character code for the event.
+ * @return {Number}
+ */
+ getCharCode: function(){
+ return this.charCode || this.keyCode;
+ },
+
+ /**
+ * Returns a normalized keyCode for the event.
+ * @return {Number} The key code
+ */
+ getKey: function(){
+ return this.normalizeKey(this.keyCode || this.charCode);
+ },
+
+ /**
+ * Normalize key codes across browsers
+ * @private
+ * @param {Number} key The key code
+ * @return {Number} The normalized code
+ */
+ normalizeKey: function(key){
+ // can't feature detect this
+ return Ext.isWebKit ? (this.safariKeys[key] || key) : key;
+ },
+
+ /**
+ * Gets the x coordinate of the event.
+ * @return {Number}
+ * @deprecated 4.0 Replaced by {@link #getX}
+ */
+ getPageX: function(){
+ return this.getX();
+ },
+
+ /**
+ * Gets the y coordinate of the event.
+ * @return {Number}
+ * @deprecated 4.0 Replaced by {@link #getY}
+ */
+ getPageY: function(){
+ return this.getY();
+ },
+
+ /**
+ * Gets the x coordinate of the event.
+ * @return {Number}
+ */
+ getX: function() {
+ return this.getXY()[0];
+ },
+
+ /**
+ * Gets the y coordinate of the event.
+ * @return {Number}
+ */
+ getY: function() {
+ return this.getXY()[1];
+ },
+
+ /**
+ * Gets the page coordinates of the event.
+ * @return {Number[]} The xy values like [x, y]
+ */
+ getXY: function() {
+ if (!this.xy) {
+ // same for XY
+ this.xy = Ext.EventManager.getPageXY(this.browserEvent);
+ }
+ return this.xy;
+ },
+
+ /**
+ * Gets the target for the event.
+ * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
+ * @param {Number/HTMLElement} maxDepth (optional) The max depth to search as a number or element (defaults to 10 || document.body)
+ * @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node
+ * @return {HTMLElement}
+ */
+ getTarget : function(selector, maxDepth, returnEl){
+ if (selector) {
+ return Ext.fly(this.target).findParent(selector, maxDepth, returnEl);
+ }
+ return returnEl ? Ext.get(this.target) : this.target;
+ },
+
+ /**
+ * Gets the related target.
+ * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
+ * @param {Number/HTMLElement} maxDepth (optional) The max depth to search as a number or element (defaults to 10 || document.body)
+ * @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node
+ * @return {HTMLElement}
+ */
+ getRelatedTarget : function(selector, maxDepth, returnEl){
+ if (selector) {
+ return Ext.fly(this.relatedTarget).findParent(selector, maxDepth, returnEl);
+ }
+ return returnEl ? Ext.get(this.relatedTarget) : this.relatedTarget;
+ },
+
+ /**
+ * Correctly scales a given wheel delta.
+ * @param {Number} delta The delta value.
+ */
+ correctWheelDelta : function (delta) {
+ var scale = this.WHEEL_SCALE,
+ ret = Math.round(delta / scale);
+
+ if (!ret && delta) {
+ ret = (delta < 0) ? -1 : 1; // don't allow non-zero deltas to go to zero!
+ }
+
+ return ret;
+ },
+
+ /**
+ * Returns the mouse wheel deltas for this event.
+ * @return {Object} An object with "x" and "y" properties holding the mouse wheel deltas.
+ */
+ getWheelDeltas : function () {
+ var me = this,
+ event = me.browserEvent,
+ dx = 0, dy = 0; // the deltas
+
+ if (Ext.isDefined(event.wheelDeltaX)) { // WebKit has both dimensions
+ dx = event.wheelDeltaX;
+ dy = event.wheelDeltaY;
+ } else if (event.wheelDelta) { // old WebKit and IE
+ dy = event.wheelDelta;
+ } else if (event.detail) { // Gecko
+ dy = -event.detail; // gecko is backwards
+
+ // Gecko sometimes returns really big values if the user changes settings to
+ // scroll a whole page per scroll
+ if (dy > 100) {
+ dy = 3;
+ } else if (dy < -100) {
+ dy = -3;
+ }
+
+ // Firefox 3.1 adds an axis field to the event to indicate direction of
+ // scroll. See https://developer.mozilla.org/en/Gecko-Specific_DOM_Events
+ if (Ext.isDefined(event.axis) && event.axis === event.HORIZONTAL_AXIS) {
+ dx = dy;
+ dy = 0;
+ }
+ }
+
+ return {
+ x: me.correctWheelDelta(dx),
+ y: me.correctWheelDelta(dy)
+ };
+ },
+
+ /**
+ * Normalizes mouse wheel y-delta across browsers. To get x-delta information, use
+ * {@link #getWheelDeltas} instead.
+ * @return {Number} The mouse wheel y-delta
+ */
+ getWheelDelta : function(){
+ var deltas = this.getWheelDeltas();
+
+ return deltas.y;
+ },
+
+ /**
+ * Returns true if the target of this event is a child of el. Unless the allowEl parameter is set, it will return false if if the target is el.
+ * Example usage:
+// Handle click on any child of an element
+Ext.getBody().on('click', function(e){
+ if(e.within('some-el')){
+ alert('Clicked on a child of some-el!');
+ }
+});
+
+// Handle click directly on an element, ignoring clicks on child nodes
+Ext.getBody().on('click', function(e,t){
+ if((t.id == 'some-el') && !e.within(t, true)){
+ alert('Clicked directly on some-el!');
+ }
+});
+HTMLEvents
+ *MouseEvents
+ *UIEvents
+ *this reference) in which the handler function executes. Defaults to this Element.
+ * @return {Object} The listeners object which was added to this element so that monitoring can be stopped. Example usage:
+// Hide the menu if the mouse moves out for 250ms or more
+this.mouseLeaveMonitor = this.menuEl.monitorMouseLeave(250, this.hideMenu, this);
+
+...
+// Remove mouseleave monitor on menu destroy
+this.menuEl.un(this.mouseLeaveMonitor);
+ +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]);
+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 constrainTo {Mixed} The Element or {@link Ext.util.Region Region} into which this element is to be constrained. + * @param proposedPosition {Array} 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.shadow.offset,
+ 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
+ // TODO: Rewrite the Shadow class. When that's done, get the extra for each side from the Shadow.
+ if (shadowSize) {
+ constrainTo.adjust(0, -shadowSize, -shadowSize, shadowSize);
+ }
+
+ // 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(document, 'c-c');
+ },
+
+ /**
+ * Centers the Element in either the viewport, or another Element.
+ * @param {String/HTMLElement/Ext.Element} centerIn (optional) The element in which to center the element.
+ */
+ center : function(centerIn){
+ return this.alignTo(centerIn || document, 'c-c');
+ }
+});
+
+/**
+ * @class Ext.Element
+ */
+(function(){
+
+var ELEMENT = Ext.Element,
+ LEFT = "left",
+ RIGHT = "right",
+ TOP = "top",
+ BOTTOM = "bottom",
+ POSITION = "position",
+ STATIC = "static",
+ RELATIVE = "relative",
+ AUTO = "auto",
+ ZINDEX = "z-index";
+
+Ext.override(Ext.Element, {
+ /**
+ * 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(){
+ return ELEMENT.getX(this.dom);
+ },
+
+ /**
+ * 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(){
+ 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]];
+ },
+
+ /**
+ * 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 (optional) True for the default animation, or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ setX : function(x, animate){
+ return this.setXY([x, this.getY()], animate);
+ },
+
+ /**
+ * 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 (optional) True for the default animation, or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ setY : function(y, animate){
+ return this.setXY([this.getX(), y], animate);
+ },
+
+ /**
+ * Sets the element's left position directly using CSS style (instead of {@link #setX}).
+ * @param {String} left The left CSS property value
+ * @return {Ext.Element} this
+ */
+ setLeft : function(left){
+ this.setStyle(LEFT, this.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.Element} this
+ */
+ setTop : function(top){
+ this.setStyle(TOP, this.addUnits(top));
+ return this;
+ },
+
+ /**
+ * Sets the element's CSS right style.
+ * @param {String} right The right CSS property value
+ * @return {Ext.Element} this
+ */
+ setRight : function(right){
+ this.setStyle(RIGHT, this.addUnits(right));
+ return this;
+ },
+
+ /**
+ * Sets the element's CSS bottom style.
+ * @param {String} bottom The bottom CSS property value
+ * @return {Ext.Element} 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 (optional) 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;
+ },
+
+ /**
+ * 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 (optional) True for the default animation, or a standard Element animation config object
+ * @return {Ext.Element} 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 (optional) True for the default animation, or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ moveTo : function(x, y, animate){
+ return this.setXY([x, y], animate);
+ },
+
+ /**
+ * 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 !local ? this.getX() : 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){
+ var me = this;
+ return !local ? me.getX() + me.getWidth() : (me.getLeft(true) + me.getWidth()) || 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 !local ? this.getY() : 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){
+ var me = this;
+ return !local ? me.getY() + me.getHeight() : (me.getTop(true) + me.getHeight()) || 0;
+ },
+
+ /**
+ * 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 (optional) Positioning to use "relative", "absolute" or "fixed"
+ * @param {Number} zIndex (optional) The zIndex to apply
+ * @param {Number} x (optional) Set the page X position
+ * @param {Number} y (optional) 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]);
+ }
+ },
+
+ /**
+ * Clear positioning back to the default when the document was loaded
+ * @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.
+ * @return {Ext.Element} 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 l = this.getStyle(LEFT);
+ var t = this.getStyle(TOP);
+ return {
+ "position" : this.getStyle(POSITION),
+ "left" : l,
+ "right" : l ? "" : this.getStyle(RIGHT),
+ "top" : t,
+ "bottom" : t ? "" : this.getStyle(BOTTOM),
+ "z-index" : this.getStyle(ZINDEX)
+ };
+ },
+
+ /**
+ * Set positioning with an object returned by getPositioning().
+ * @param {Object} posCfg
+ * @return {Ext.Element} 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;
+ },
+
+ /**
+ * Translates the passed page coordinates into left/top css values for this element
+ * @param {Number/Number[]} x The page x or an array containing [x, y]
+ * @param {Number} y (optional) 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) {
+ if (Ext.isArray(x)) {
+ y = x[1];
+ x = x[0];
+ }
+ var me = this,
+ relative = me.isStyle(POSITION, RELATIVE),
+ o = me.getXY(),
+ left = parseInt(me.getStyle(LEFT), 10),
+ top = parseInt(me.getStyle(TOP), 10);
+
+ if (!Ext.isNumber(left)) {
+ left = relative ? 0 : me.dom.offsetLeft;
+ }
+ if (!Ext.isNumber(top)) {
+ top = relative ? 0 : me.dom.offsetTop;
+ }
+ left = (Ext.isNumber(x)) ? x - o[0] + left : undefined;
+ top = (Ext.isNumber(y)) ? y - o[1] + top : undefined;
+ return {
+ left: left,
+ top: top
+ };
+ },
+
+ /**
+ * 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 (optional) Whether to adjust for box-model issues automatically
+ * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+ * @return {Ext.Element} this
+ */
+ 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;
+ },
+
+ /**
+ * 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 (optional) If true a box for the content of the element is returned.
+ * @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y.
+ * @return {Object} box An object in the format
+{
+ x: <Element's X position>,
+ y: <Element's Y position>,
+ width: <Element's width>,
+ height: <Element's height>,
+ bottom: <Element's lower bound>,
+ right: <Element's rightmost bound>
+}
+
+{
+ x: <Element's X position>,
+ y: <Element's Y position>,
+ width: <Element's width>,
+ height: <Element's height>,
+ bottom: <Element's lower bound>,
+ right: <Element's rightmost bound>
+}
+{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
+ * @param {Function} fn The function to call
+ * @param {Object} scope (optional) The scope (this reference) in which the specified function is executed. Defaults to this Element.
+ * @return {Ext.util.KeyMap} The KeyMap created
+ */
+ addKeyListener : function(key, fn, scope){
+ var config;
+ if(typeof key != 'object' || Ext.isArray(key)){
+ config = {
+ key: key,
+ fn: fn,
+ scope: scope
+ };
+ }else{
+ config = {
+ key : key.key,
+ shift : key.shift,
+ ctrl : key.ctrl,
+ alt : key.alt,
+ fn: fn,
+ scope: scope
+ };
+ }
+ return Ext.create('Ext.util.KeyMap', this, config);
+ },
+
+ /**
+ * Creates a KeyMap for this element
+ * @param {Object} config The KeyMap config. See {@link Ext.util.KeyMap} for more details
+ * @return {Ext.util.KeyMap} The KeyMap created
+ */
+ addKeyMap : function(config){
+ return Ext.create('Ext.util.KeyMap', this, config);
+ }
+});
+
+//Import the newly-added Ext.Element functions into CompositeElementLite. We call this here because
+//Element.keys.js is the last extra Ext.Element include in the ext-all.js build
+Ext.CompositeElementLite.importElementMethods();
+
+/**
+ * @class Ext.CompositeElementLite
+ */
+Ext.apply(Ext.CompositeElementLite.prototype, {
+ addElements : function(els, root){
+ if(!els){
+ return this;
+ }
+ if(typeof els == "string"){
+ els = Ext.Element.selectorFunction(els, root);
+ }
+ var yels = this.elements;
+ Ext.each(els, function(e) {
+ yels.push(Ext.get(e));
+ });
+ return this;
+ },
+
+ /**
+ * Returns the first Element
+ * @return {Ext.Element}
+ */
+ first : function(){
+ return this.item(0);
+ },
+
+ /**
+ * Returns the last Element
+ * @return {Ext.Element}
+ */
+ last : function(){
+ return this.item(this.getCount()-1);
+ },
+
+ /**
+ * Returns true if this composite contains the passed element
+ * @param el {String/HTMLElement/Ext.Element/Number} 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 (optional) True to also remove the element from the document
+ * @return {Ext.CompositeElement} this
+ */
+ removeElement : function(keys, removeDom){
+ var me = this,
+ els = this.elements,
+ el;
+ Ext.each(keys, function(val){
+ if ((el = (els[val] || els[val = me.indexOf(val)]))) {
+ if(removeDom){
+ if(el.dom){
+ el.remove();
+ }else{
+ Ext.removeNode(el);
+ }
+ }
+ Ext.Array.erase(els, val, 1);
+ }
+ });
+ return this;
+ }
+});
+
+/**
+ * @class Ext.CompositeElement
+ * @extends Ext.CompositeElementLite
+ * 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.Element} and + * {@link Ext.fx.Anim}. The methods from these classes will be performed on all the elements in this collection.
+ *All methods return this and can be chained.
+ * Usage: +
+var els = Ext.select("#some-el div.some-class", true);
+// or select directly from an existing element
+var el = Ext.get('some-el');
+el.select('div.some-class', true);
+
+els.setWidth(100); // all elements become 100 width
+els.hide(true); // all elements fade out and hide
+// or
+els.setWidth(100).hide(true);
+Perform custom animation on this object.
+ *
This method is applicable to both the {@link Ext.Component Component} class and the {@link Ext.Element Element} class. + * It performs animated transitions of certain properties of this object over a specified timeline.
+ *The sole parameter is an object which specifies start property values, end property values, and properties which
+ * describe the timeline. Of the properties listed below, only to is mandatory.
Properties include
from to durationeasing
+ * - ease
+ * - easeIn
+ * - easeOut
+ * - easeInOut
+ * - backIn
+ * - backOut
+ * - elasticIn
+ * - elasticOut
+ * - bounceIn
+ * - bounceOut
+ *
keyframes listeners beforeanimate event or the afteranimate event.from, to, and keyframe objects:x y left left value. Units must be supplied.top top value. Units must be supplied.width width value. Units must be supplied.height height value. Units must be supplied.scrollLeft scrollLeft value.scrollTop scrollLeft value.opacity opacity value. This must be a value between 0 and 1.Be aware than 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.
+ *from, to, and keyframe objects:x y left left value in pixels.top top value in pixels.width width value in pixels.width width value in pixels.dynamic 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.
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, + value, + keyValue; + + 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 != ''){ + Ext.each(value.split('^'), function(val){ + all.push(me.decodeValue(val)); + }, me); + } + return all; + case 'o': + all = {}; + if(value != ''){ + Ext.each(value.split('^'), function(val){ + keyValue = val.split('='); + all[keyValue[0]] = me.decodeValue(keyValue[1]); + }, me); + } + 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); + } +}); +/** + * 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} with an optional . prefix + * + * - `component` or `.component` + * - `gridpanel` or `.gridpanel` + * + * 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 + * - 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, + uses: ['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.el ? candidate.el.hasCls(className) : EA.contains(candidate.initCls(), 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 :+ * 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 #add} event when complete. + * @param {String} keyThe 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, + data; + + if (arguments.length === 1) { + value = key; + key = me.getKey(value); + } + + if (me.containsKey(key)) { + return me.replace(key, value); + } + + data = me.getData(key, value); + key = data[0]; + value = data[1]; + me.map[key] = value; + ++me.length; + me.fireEvent('add', me, key, value); + return value; + }, + + /** + * Replaces an item in the hash. If the key doesn't exist, the + * {@link #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 (!me.containsKey(key)) { + me.add(key, value); + } + old = map[key]; + map[key] = value; + 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; + 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.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: + *The key of the item
The value of the item
The total number of items in the hash
+// in your initialization function
+init : function(){
+ Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
+ var win = new Window(...);
+ win.restoreState();
+}
+ A flag which causes the object to attempt to restore the state of
+ * internal properties from a saved state on startup. The object must have
+ * a {@link #stateId} for state to be managed.
+ * Auto-generated ids are not guaranteed to be stable across page loads and
+ * cannot be relied upon to save and restore the same state for a object.
+ *
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}. By default, this function does
+ * nothing. The developer must provide an implementation which returns an
+ * object hash which represents the restorable state of the 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
+ * more behaviour.
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: true, + + /** + * @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.
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 (component instanceof Ext.AbstractComponent) {
+ return component;
+ }
+ else if (Ext.isString(component)) {
+ return Ext.createByAlias('widget.' + component);
+ }
+ else {
+ var type = component.xtype || defaultType,
+ config = component;
+
+ return Ext.createByAlias('widget.' + type, config);
+ }
+ },
+
+ registerType: function(type, cls) {
+ this.types[type] = cls;
+ cls[this.typeName] = type;
+ cls.prototype[this.typeName] = type;
+ }
+});
+/**
+ * An abstract base class which provides shared methods for Components across the Sencha product line.
+ *
+ * Please refer to sub class's documentation
+ * @private
+ */
+Ext.define('Ext.AbstractComponent', {
+
+ /* Begin Definitions */
+ requires: [
+ 'Ext.ComponentQuery',
+ 'Ext.ComponentManager'
+ ],
+
+ mixins: {
+ observable: 'Ext.util.Observable',
+ animate: 'Ext.util.Animate',
+ state: 'Ext.state.Stateful'
+ },
+
+ // The "uses" property specifies class which are used in an instantiated AbstractComponent.
+ // They do *not* have to be loaded before this class may be defined - that is what "requires" is for.
+ uses: [
+ 'Ext.PluginManager',
+ 'Ext.ComponentManager',
+ 'Ext.Element',
+ 'Ext.DomHelper',
+ 'Ext.XTemplate',
+ 'Ext.ComponentQuery',
+ 'Ext.ComponentLoader',
+ 'Ext.EventManager',
+ 'Ext.layout.Layout',
+ 'Ext.layout.component.Auto',
+ 'Ext.LoadMask',
+ 'Ext.ZIndexManager'
+ ],
+
+ statics: {
+ AUTO_ID: 1000
+ },
+
+ /* End Definitions */
+
+ isComponent: true,
+
+ getAutoId: function() {
+ return ++Ext.AbstractComponent.AUTO_ID;
+ },
+
+
+ /**
+ * @cfg {String} id
+ * The **unique id of this component instance.**
+ *
+ * It should not be necessary to use this configuration except for singleton objects in your application. Components
+ * created with an id may be accessed globally using {@link Ext#getCmp Ext.getCmp}.
+ *
+ * Instead of using assigned ids, use the {@link #itemId} config, and {@link Ext.ComponentQuery ComponentQuery}
+ * which provides selector-based searching for Sencha Components analogous to DOM querying. The {@link
+ * Ext.container.Container Container} class contains {@link Ext.container.Container#down shortcut methods} to query
+ * its descendant Components by selector.
+ *
+ * Note that this id will also be used as the element id for the containing HTML element that is rendered to the
+ * page for this component. This allows you to write id-based CSS rules to style the specific instance of this
+ * component uniquely, and also to select sub-elements using this component's id as the parent.
+ *
+ * **Note**: to avoid complications imposed by a unique id also see `{@link #itemId}`.
+ *
+ * **Note**: to access the container of a Component see `{@link #ownerCt}`.
+ *
+ * Defaults to an {@link #getId auto-assigned id}.
+ */
+
+ /**
+ * @cfg {String} itemId
+ * An itemId can be used as an alternative way to get a reference to a component when no object reference is
+ * available. Instead of using an `{@link #id}` with {@link Ext}.{@link Ext#getCmp getCmp}, use `itemId` with
+ * {@link Ext.container.Container}.{@link Ext.container.Container#getComponent getComponent} which will retrieve
+ * `itemId`'s or {@link #id}'s. Since `itemId`'s are an index to the container's internal MixedCollection, the
+ * `itemId` is scoped locally to the container -- avoiding potential conflicts with {@link Ext.ComponentManager}
+ * which requires a **unique** `{@link #id}`.
+ *
+ * var c = new Ext.panel.Panel({ //
+ * {@link Ext.Component#height height}: 300,
+ * {@link #renderTo}: document.body,
+ * {@link Ext.container.Container#layout layout}: 'auto',
+ * {@link Ext.container.Container#items items}: [
+ * {
+ * itemId: 'p1',
+ * {@link Ext.panel.Panel#title title}: 'Panel 1',
+ * {@link Ext.Component#height height}: 150
+ * },
+ * {
+ * itemId: 'p2',
+ * {@link Ext.panel.Panel#title title}: 'Panel 2',
+ * {@link Ext.Component#height height}: 150
+ * }
+ * ]
+ * })
+ * p1 = c.{@link Ext.container.Container#getComponent getComponent}('p1'); // not the same as {@link Ext#getCmp Ext.getCmp()}
+ * p2 = p1.{@link #ownerCt}.{@link Ext.container.Container#getComponent getComponent}('p2'); // reference via a sibling
+ *
+ * Also see {@link #id}, `{@link Ext.container.Container#query}`, `{@link Ext.container.Container#down}` and
+ * `{@link Ext.container.Container#child}`.
+ *
+ * **Note**: to access the container of an item see {@link #ownerCt}.
+ */
+
+ /**
+ * @property {Ext.Container} ownerCt
+ * This Component's owner {@link Ext.container.Container Container} (is set automatically
+ * when this Component is added to a Container). Read-only.
+ *
+ * **Note**: to access items within the Container see {@link #itemId}.
+ */
+
+ /**
+ * @property {Boolean} layoutManagedWidth
+ * @private
+ * Flag set by the container layout to which this Component is added.
+ * If the layout manages this Component's width, it sets the value to 1.
+ * If it does NOT manage the width, it sets it to 2.
+ * If the layout MAY affect the width, but only if the owning Container has a fixed width, this is set to 0.
+ */
+
+ /**
+ * @property {Boolean} layoutManagedHeight
+ * @private
+ * Flag set by the container layout to which this Component is added.
+ * If the layout manages this Component's height, it sets the value to 1.
+ * If it does NOT manage the height, it sets it to 2.
+ * If the layout MAY affect the height, but only if the owning Container has a fixed height, this is set to 0.
+ */
+
+ /**
+ * @cfg {String/Object} autoEl
+ * A tag name or {@link Ext.DomHelper DomHelper} spec used to create the {@link #getEl Element} which will
+ * encapsulate this Component.
+ *
+ * You do not normally need to specify this. For the base classes {@link Ext.Component} and
+ * {@link Ext.container.Container}, this defaults to **'div'**. The more complex Sencha classes use a more
+ * complex DOM structure specified by their own {@link #renderTpl}s.
+ *
+ * This is intended to allow the developer to create application-specific utility Components encapsulated by
+ * different DOM elements. Example usage:
+ *
+ * {
+ * xtype: 'component',
+ * autoEl: {
+ * tag: 'img',
+ * src: 'http://www.example.com/example.jpg'
+ * }
+ * }, {
+ * xtype: 'component',
+ * autoEl: {
+ * tag: 'blockquote',
+ * html: 'autoEl is cool!'
+ * }
+ * }, {
+ * xtype: 'container',
+ * autoEl: 'ul',
+ * cls: 'ux-unordered-list',
+ * items: {
+ * xtype: 'component',
+ * autoEl: 'li',
+ * html: 'First list item'
+ * }
+ * }
+ */
+
+ /**
+ * @cfg {Ext.XTemplate/String/String[]} renderTpl
+ * An {@link Ext.XTemplate XTemplate} used to create the internal structure inside this Component's encapsulating
+ * {@link #getEl Element}.
+ *
+ * You do not normally need to specify this. For the base classes {@link Ext.Component} and
+ * {@link Ext.container.Container}, this defaults to **`null`** which means that they will be initially rendered
+ * with no internal structure; they render their {@link #getEl Element} empty. The more specialized ExtJS and Touch
+ * classes which use a more complex DOM structure, provide their own template definitions.
+ *
+ * This is intended to allow the developer to create application-specific utility Components with customized
+ * internal structure.
+ *
+ * Upon rendering, any created child elements may be automatically imported into object properties using the
+ * {@link #renderSelectors} and {@link #childEls} options.
+ */
+ renderTpl: null,
+
+ /**
+ * @cfg {Object} renderData
+ *
+ * The data used by {@link #renderTpl} in addition to the following property values of the component:
+ *
+ * - id
+ * - ui
+ * - uiCls
+ * - baseCls
+ * - componentCls
+ * - frame
+ *
+ * See {@link #renderSelectors} and {@link #childEls} for usage examples.
+ */
+
+ /**
+ * @cfg {Object} renderSelectors
+ * An object containing properties specifying {@link Ext.DomQuery DomQuery} selectors which identify child elements
+ * created by the render process.
+ *
+ * After the Component's internal structure is rendered according to the {@link #renderTpl}, this object is iterated through,
+ * and the found Elements are added as properties to the Component using the `renderSelector` property name.
+ *
+ * For example, a Component which renderes a title and description into its element:
+ *
+ * Ext.create('Ext.Component', {
+ * renderTo: Ext.getBody(),
+ * renderTpl: [
+ * '{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 #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: [ + * '{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 `{@link #render}` also. + */ + + /** + * @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 + * Read-only property indicating 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 The width of the top framing element in pixels. + * @property {Number} frameSize.right The width of the right framing element in pixels. + * @property {Number} frameSize.bottom The width of the bottom framing element in pixels. + * @property {Number} frameSize.left The width of the left framing element in pixels. + */ + + /** + * @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 + * The `xtype` configuration option can be used to optimize Component creation and rendering. It serves as a + * shortcut to the full componet name. For example, the component `Ext.button.Button` has an xtype of `button`. + * + * You can define your own xtype on a custom {@link Ext.Component component} by specifying the + * {@link Ext.Class#alias alias} config option with a prefix of `widget`. For example: + * + * Ext.define('PressMeButton', { + * extend: 'Ext.button.Button', + * alias: 'widget.pressmebutton', + * text: 'Press Me' + * }) + * + * Any Component can be created implicitly as an object config with an xtype specified, allowing it to be + * declared and passed into the rendering pipeline without actually being instantiated as an object. Not only is + * rendering deferred, but the actual creation of the object itself is also deferred, saving memory and resources + * until they are actually needed. In complex, nested layouts containing many Components, this can make a + * noticeable improvement in performance. + * + * // Explicit creation of contained Components: + * var panel = new Ext.Panel({ + * ... + * items: [ + * Ext.create('Ext.button.Button', { + * text: 'OK' + * }) + * ] + * }; + * + * // Implicit creation using xtype: + * var panel = new Ext.Panel({ + * ... + * items: [{ + * xtype: 'button', + * text: 'OK' + * }] + * }; + * + * In the first example, the button will always be created immediately during the panel's initialization. With + * many added Components, this approach could potentially slow the rendering of the page. In the second example, + * the button will not be created or rendered until the panel is actually displayed in the browser. If the panel + * is never displayed (for example, if it is a tab that remains hidden) then the button will never be created and + * will never consume any resources whatsoever. + */ + + /** + * @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/String[]} ui + * A set style for a component. Can be a string or an Array of multiple strings (UIs) + */ + ui: 'default', + + /** + * @cfg {String[]} uiCls + * An array of of classNames which are currently applied to this component + * @private + */ + uiCls: [], + + /** + * @cfg {String} 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} border + * Specifies the border 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'. + */ + + /** + * @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 + * Read-only property indicating whether or not the component can be dragged + */ + 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 #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#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 #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. + */ + + /** + * @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 #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. + * + * **This defaults to `true` for the {@link Ext.window.Window Window} class.** + */ + autoRender: false, + + needsLayout: 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 + * Read-only property indicating whether or not the component has been rendered. + */ + rendered: false, + + /** + * @property {Number} componentLayoutCounter + * @private + * The number of component layout calls made on this object. + */ + componentLayoutCounter: 0, + + weight: 0, + + trimRe: /^\s+|\s+$/g, + spacesRe: /\s+/, + + + /** + * @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 its disabled. Components like FieldContainer, FieldSet, Field, Button, Tab + * override this property to false since they want to implement custom disable logic. + */ + maskOnDisable: true, + + /** + * Creates new Component. + * @param {Object} config (optional) Config object. + */ + constructor : function(config) { + var me = this, + i, len; + + config = config || {}; + me.initialConfig = config; + Ext.apply(me, config); + + 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 #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 #show} method. + * @param {Ext.Component} this + */ + 'show', + /** + * @event beforehide + * Fires before the component is hidden when calling the {@link #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 #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 #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 beforedestroy + * Fires before the component is {@link #destroy}ed. Return false from an event handler to stop the + * {@link #destroy}. + * @param {Ext.Component} this + */ + 'beforedestroy', + /** + * @event destroy + * Fires after the component is {@link #destroy}ed. + * @param {Ext.Component} this + */ + 'destroy', + /** + * @event resize + * Fires after the component is resized. + * @param {Ext.Component} this + * @param {Number} adjWidth The box-adjusted width that was set + * @param {Number} adjHeight The box-adjusted height that was set + */ + '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' + ); + + me.getId(); + + me.mons = []; + me.additionalCls = []; + me.renderData = me.renderData || {}; + me.renderSelectors = me.renderSelectors || {}; + + if (me.plugins) { + me.plugins = [].concat(me.plugins); + me.constructPlugins(); + } + + 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) { + me.plugins = [].concat(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. + } + + if (me.autoShow) { + me.show(); + } + + }, + + 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.constructPlugins(); + }, + + /** + * 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, + layout = me.ownerCt ? (me.shadowOwnerCt || me.ownerCt).getLayout() : null, + state = { + collapsed: me.collapsed + }, + width = me.width, + height = me.height, + cm = me.collapseMemento, + anchors; + + // If a Panel-local collapse has taken place, use remembered values as the dimensions. + // TODO: remove this coupling with Panel's privates! All collapse/expand logic should be refactored into one place. + if (me.collapsed && cm) { + if (Ext.isDefined(cm.data.width)) { + width = cm.width; + } + if (Ext.isDefined(cm.data.height)) { + height = cm.height; + } + } + + // If we have flex, only store the perpendicular dimension. + if (layout && me.flex) { + state.flex = me.flex; + if (layout.perpendicularPrefix) { + state[layout.perpendicularPrefix] = me['get' + layout.perpendicularPrefixCap](); + } else { + } + } + // If we have anchor, only store dimensions which are *not* being anchored + else if (layout && me.anchor) { + state.anchor = me.anchor; + anchors = me.anchor.split(' ').concat(null); + if (!anchors[0]) { + if (me.width) { + state.width = width; + } + } + if (!anchors[1]) { + if (me.height) { + state.height = height; + } + } + } + // Store dimensions. + else { + if (me.width) { + state.width = width; + } + if (me.height) { + state.height = height; + } + } + + // Don't save dimensions if they are unchanged from the original configuration. + if (state.width == me.initialConfig.width) { + delete state.width; + } + if (state.height == me.initialConfig.height) { + delete state.height; + } + + // If a Box layout was managing the perpendicular dimension, don't save that dimension + if (layout && layout.align && (layout.align.indexOf('stretch') !== -1)) { + delete state[layout.perpendicularPrefix]; + } + return state; + }, + + show: Ext.emptyFn, + + animate: function(animObj) { + var me = this, + to; + + animObj = animObj || {}; + to = animObj.to || {}; + + if (Ext.fx.Manager.hasFxBlock(me.id)) { + return me; + } + // Special processing for animating Component dimensions. + if (!animObj.dynamic && (to.height || to.width)) { + var curWidth = me.getWidth(), + w = curWidth, + curHeight = me.getHeight(), + h = curHeight, + needsResize = false; + + if (to.height && to.height > curHeight) { + h = to.height; + needsResize = true; + } + if (to.width && to.width > curWidth) { + w = to.width; + 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) { + var clearWidth = !Ext.isNumber(me.width), + clearHeight = !Ext.isNumber(me.height); + + me.componentLayout.childrenChanged = true; + me.setSize(w, h, me.ownerCt); + me.el.setSize(curWidth, curHeight); + if (clearWidth) { + delete me.width; + } + if (clearHeight) { + delete me.height; + } + } + } + return me.mixins.animate.animate.apply(me, arguments); + }, + + /** + * This method finds the topmost active layout who's processing will eventually determine the size and position of + * this Component. + * + * This method is useful when dynamically adding Components into Containers, and some processing must take place + * after the final sizing and positioning of the Component has been performed. + * + * @return {Ext.Component} + */ + findLayoutController: function() { + return this.findParentBy(function(c) { + // Return true if we are at the root of the Container tree + // or this Container's layout is busy but the next one up is not. + return !c.ownerCt || (c.layout.layoutBusy && !c.ownerCt.layout.layoutBusy); + }); + }, + + onShow : function() { + // Layout if needed + var needsLayout = this.needsLayout; + if (Ext.isObject(needsLayout)) { + this.doComponentLayout(needsLayout.width, needsLayout.height, needsLayout.isSetSize, needsLayout.ownerCt); + } + }, + + constructPlugin: function(plugin) { + if (plugin.ptype && typeof plugin.init != 'function') { + plugin.cmp = this; + plugin = Ext.PluginManager.create(plugin); + } + else if (typeof plugin == 'string') { + plugin = Ext.PluginManager.create({ + ptype: plugin, + cmp: this + }); + } + return plugin; + }, + + /** + * Ensures that the plugins array contains fully constructed plugin instances. This converts any configs into their + * appropriate instances. + */ + constructPlugins: function() { + var me = this, + plugins = me.plugins, + i, len; + + if (plugins) { + for (i = 0, len = plugins.length; i < len; i++) { + // this just returns already-constructed plugin instances... + plugins[i] = me.constructPlugin(plugins[i]); + } + } + }, + + // @private + initPlugin : function(plugin) { + plugin.init(this); + + return plugin; + }, + + /** + * Handles autoRender. Floating Components may have an ownerCt. If they are asking to be constrained, constrain them + * within that ownerCt, and have their z-index managed locally. Floating Components are always rendered to + * document.body + */ + doAutoRender: function() { + var me = this; + if (me.floating) { + me.render(document.body); + } else { + me.render(Ext.isBoolean(me.autoRender) ? Ext.getBody() : me.autoRender); + } + }, + + // @private + render : function(container, position) { + var me = this; + + if (!me.rendered && me.fireEvent('beforerender', me) !== false) { + + // Flag set during the render process. + // It can be used to inhibit event-driven layout calls during the render phase + me.rendering = true; + + // If this.el is defined, we want to make sure we are dealing with + // an Ext Element. + if (me.el) { + me.el = Ext.get(me.el); + } + + // Perform render-time processing for floating Components + if (me.floating) { + me.onFloatRender(); + } + + container = me.initContainer(container); + + me.onRender(container, position); + + // Tell the encapsulating element to hide itself in the way the Component is configured to hide + // This means DISPLAY, VISIBILITY or OFFSETS. + me.el.setVisibilityMode(Ext.Element[me.hideMode.toUpperCase()]); + + if (me.overCls) { + me.el.hover(me.addOverCls, me.removeOverCls, me); + } + + me.fireEvent('render', me); + + me.initContent(); + + me.afterRender(container); + me.fireEvent('afterrender', me); + + me.initEvents(); + + if (me.hidden) { + // Hiding during the render process should not perform any ancillary + // actions that the full hide process does; It is not hiding, it begins in a hidden state.' + // So just make the element hidden according to the configured hideMode + me.el.hide(); + } + + if (me.disabled) { + // pass silent so the event doesn't fire the first time. + me.disable(true); + } + + // Delete the flag once the rendering is done. + delete me.rendering; + } + return me; + }, + + // @private + onRender : function(container, position) { + var me = this, + el = me.el, + styles = me.initStyles(), + renderTpl, renderData, i; + + position = me.getInsertPosition(position); + + if (!el) { + if (position) { + el = Ext.DomHelper.insertBefore(position, me.getElConfig(), true); + } + else { + el = Ext.DomHelper.append(container, me.getElConfig(), true); + } + } + else if (me.allowDomMove !== false) { + if (position) { + container.dom.insertBefore(el.dom, position); + } else { + container.dom.appendChild(el.dom); + } + } + + if (Ext.scopeResetCSS && !me.ownerCt) { + // If this component's el is the body element, we add the reset class to the html tag + if (el.dom == Ext.getBody().dom) { + el.parent().addCls(Ext.baseCSSPrefix + 'reset'); + } + else { + // Else we wrap this element in an element that adds the reset class. + me.resetEl = el.wrap({ + cls: Ext.baseCSSPrefix + 'reset' + }); + } + } + + me.setUI(me.ui); + + el.addCls(me.initCls()); + el.setStyle(styles); + + // Here we check if the component has a height set through style or css. + // If it does then we set the this.height to that value and it won't be + // considered an auto height component + // if (this.height === undefined) { + // var height = el.getHeight(); + // // This hopefully means that the panel has an explicit height set in style or css + // if (height - el.getPadding('tb') - el.getBorderWidth('tb') > 0) { + // this.height = height; + // } + // } + + me.el = el; + + me.initFrame(); + + renderTpl = me.initRenderTpl(); + if (renderTpl) { + renderData = me.initRenderData(); + renderTpl.append(me.getTargetEl(), renderData); + } + + me.applyRenderSelectors(); + + me.rendered = true; + }, + + // @private + afterRender : function() { + var me = this, + pos, + xy; + + me.getComponentLayout(); + + // Set the size if a size is configured, or if this is the outermost Container. + // Also, if this is a collapsed Panel, it needs an initial component layout + // to lay out its header so that it can have a height determined. + if (me.collapsed || (!me.ownerCt || (me.height || me.width))) { + me.setSize(me.width, me.height); + } else { + // It is expected that child items be rendered before this method returns and + // the afterrender event fires. Since we aren't going to do the layout now, we + // must render the child items. This is handled implicitly above in the layout + // caused by setSize. + me.renderChildren(); + } + + // For floaters, calculate x and y if they aren't defined by aligning + // the sized element to the center of either the container or the ownerCt + if (me.floating && (me.x === undefined || me.y === undefined)) { + if (me.floatParent) { + xy = me.el.getAlignToXY(me.floatParent.getTargetEl(), 'c-c'); + pos = me.floatParent.getTargetEl().translatePoints(xy[0], xy[1]); + } else { + xy = me.el.getAlignToXY(me.container, 'c-c'); + pos = me.container.translatePoints(xy[0], xy[1]); + } + me.x = me.x === undefined ? pos.left: me.x; + me.y = me.y === undefined ? pos.top: me.y; + } + + if (Ext.isDefined(me.x) || Ext.isDefined(me.y)) { + me.setPosition(me.x, me.y); + } + + if (me.styleHtmlContent) { + me.getTargetEl().addCls(me.styleHtmlCls); + } + }, + + /** + * @private + * 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.floatingItems) { + me.floatingItems = Ext.create('Ext.ZIndexManager', me); + } + me.floatingItems.register(cmp); + }, + + renderChildren: function () { + var me = this, + layout = me.getComponentLayout(); + + me.suspendLayout = true; + layout.renderChildren(); + delete me.suspendLayout; + }, + + frameCls: Ext.baseCSSPrefix + 'frame', + + frameIdRegex: /[-]frame\d+[TMB][LCR]$/, + + frameElementCls: { + tl: [], + tc: [], + tr: [], + ml: [], + mc: [], + mr: [], + bl: [], + bc: [], + br: [] + }, + + frameTpl: [ + '