this reference) in which the
* function is executed. Defaults to the array
* @return {Object} The first item in the array which returned true from the selection
* function, or null if none was found.
*/
findBy : function(array, fn, scope) {
var i = 0,
len = array.length;
for (; i < len; i++) {
if (fn.call(scope || array, array[i], i)) {
return array[i];
}
}
return null;
},
/**
* Converts a value to an array if it's not already an array; returns:
*
* - An empty array if given value is `undefined` or `null`
* - Itself if given value is already an array
* - An array copy if given value is {@link Ext#isIterable iterable} (arguments, NodeList and alike)
* - An array with one item which is the given value, otherwise
*
* @param {Object} value The value to convert to an array if it's not already is an array
* @param {Boolean} newReference (Optional) True to clone the given array and return a new reference if necessary,
* defaults to false
* @return {Array} array
*/
from: function(value, newReference) {
if (value === undefined || value === null) {
return [];
}
if (Ext.isArray(value)) {
return (newReference) ? slice.call(value) : value;
}
var type = typeof value;
// Both strings and functions will have a length property. In phantomJS, NodeList
// instances report typeof=='function' but don't have an apply method...
if (value && value.length !== undefined && type !== 'string' && (type !== 'function' || !value.apply)) {
return ExtArray.toArray(value);
}
return [value];
},
/**
* Removes the specified item from the array if it exists
*
* @param {Array} array The array
* @param {Object} item The item to remove
* @return {Array} The passed array itself
*/
remove: function(array, item) {
var index = ExtArray.indexOf(array, item);
if (index !== -1) {
erase(array, index, 1);
}
return array;
},
/**
* Push an item into the array only if the array doesn't contain it yet
*
* @param {Array} array The array
* @param {Object} item The item to include
*/
include: function(array, item) {
if (!ExtArray.contains(array, item)) {
array.push(item);
}
},
/**
* Clone a flat array without referencing the previous one. Note that this is different
* from Ext.clone since it doesn't handle recursive cloning. It's simply a convenient, easy-to-remember method
* for Array.prototype.slice.call(array)
*
* @param {Array} array The array
* @return {Array} The clone array
*/
clone: function(array) {
return slice.call(array);
},
/**
* Merge multiple arrays into one with unique items.
*
* {@link Ext.Array#union} is alias for {@link Ext.Array#merge}
*
* @param {Array} array1
* @param {Array} array2
* @param {Array} etc
* @return {Array} merged
*/
merge: function() {
var args = slice.call(arguments),
array = [],
i, ln;
for (i = 0, ln = args.length; i < ln; i++) {
array = array.concat(args[i]);
}
return ExtArray.unique(array);
},
/**
* Merge multiple arrays into one with unique items that exist in all of the arrays.
*
* @param {Array} array1
* @param {Array} array2
* @param {Array} etc
* @return {Array} intersect
*/
intersect: function() {
var intersection = [],
arrays = slice.call(arguments),
arraysLength,
array,
arrayLength,
minArray,
minArrayIndex,
minArrayCandidate,
minArrayLength,
element,
elementCandidate,
elementCount,
i, j, k;
if (!arrays.length) {
return intersection;
}
// Find the smallest array
arraysLength = arrays.length;
for (i = minArrayIndex = 0; i < arraysLength; i++) {
minArrayCandidate = arrays[i];
if (!minArray || minArrayCandidate.length < minArray.length) {
minArray = minArrayCandidate;
minArrayIndex = i;
}
}
minArray = ExtArray.unique(minArray);
erase(arrays, minArrayIndex, 1);
// Use the smallest unique'd array as the anchor loop. If the other array(s) do contain
// an item in the small array, we're likely to find it before reaching the end
// of the inner loop and can terminate the search early.
minArrayLength = minArray.length;
arraysLength = arrays.length;
for (i = 0; i < minArrayLength; i++) {
element = minArray[i];
elementCount = 0;
for (j = 0; j < arraysLength; j++) {
array = arrays[j];
arrayLength = array.length;
for (k = 0; k < arrayLength; k++) {
elementCandidate = array[k];
if (element === elementCandidate) {
elementCount++;
break;
}
}
}
if (elementCount === arraysLength) {
intersection.push(element);
}
}
return intersection;
},
/**
* Perform a set difference A-B by subtracting all items in array B from array A.
*
* @param {Array} arrayA
* @param {Array} arrayB
* @return {Array} difference
*/
difference: function(arrayA, arrayB) {
var clone = slice.call(arrayA),
ln = clone.length,
i, j, lnB;
for (i = 0,lnB = arrayB.length; i < lnB; i++) {
for (j = 0; j < ln; j++) {
if (clone[j] === arrayB[i]) {
erase(clone, j, 1);
j--;
ln--;
}
}
}
return clone;
},
/**
* Returns a shallow copy of a part of an array. This is equivalent to the native
* call "Array.prototype.slice.call(array, begin, end)". This is often used when "array"
* is "arguments" since the arguments object does not supply a slice method but can
* be the context object to Array.prototype.slice.
*
* @param {Array} array The array (or arguments object).
* @param {Number} begin The index at which to begin. Negative values are offsets from
* the end of the array.
* @param {Number} end The index at which to end. The copied items do not include
* end. Negative values are offsets from the end of the array. If end is omitted,
* all items up to the end of the array are copied.
* @return {Array} The copied piece of the array.
* @method slice
*/
// Note: IE6 will return [] on slice.call(x, undefined).
slice: ([1,2].slice(1, undefined).length ?
function (array, begin, end) {
return slice.call(array, begin, end);
} :
// at least IE6 uses arguments.length for variadic signature
function (array, begin, end) {
// After tested for IE 6, the one below is of the best performance
// see http://jsperf.com/slice-fix
if (typeof begin === 'undefined') {
return slice.call(array);
}
if (typeof end === 'undefined') {
return slice.call(array, begin);
}
return slice.call(array, begin, end);
}
),
/**
* Sorts the elements of an Array.
* By default, this method sorts the elements alphabetically and ascending.
*
* @param {Array} array The array to sort.
* @param {Function} sortFn (optional) The comparison function.
* @param {Mixed} sortFn.a An item to compare.
* @param {Mixed} sortFn.b Another item to compare.
* @return {Array} The sorted array.
*/
sort: supportsSort ? function(array, sortFn) {
if (sortFn) {
return array.sort(sortFn);
} else {
return array.sort();
}
} : function(array, sortFn) {
var length = array.length,
i = 0,
comparison,
j, min, tmp;
for (; i < length; i++) {
min = i;
for (j = i + 1; j < length; j++) {
if (sortFn) {
comparison = sortFn(array[j], array[min]);
if (comparison < 0) {
min = j;
}
} else if (array[j] < array[min]) {
min = j;
}
}
if (min !== i) {
tmp = array[i];
array[i] = array[min];
array[min] = tmp;
}
}
return array;
},
/**
* Recursively flattens into 1-d Array. Injects Arrays inline.
*
* @param {Array} array The array to flatten
* @return {Array} The 1-d array.
*/
flatten: function(array) {
var worker = [];
function rFlatten(a) {
var i, ln, v;
for (i = 0, ln = a.length; i < ln; i++) {
v = a[i];
if (Ext.isArray(v)) {
rFlatten(v);
} else {
worker.push(v);
}
}
return worker;
}
return rFlatten(array);
},
/**
* Returns the minimum value in the Array.
*
* @param {Array/NodeList} array The Array from which to select the minimum value.
* @param {Function} comparisonFn (optional) a function to perform the comparision which determines minimization.
* If omitted the "<" operator will be used. Note: gt = 1; eq = 0; lt = -1
* @param {Mixed} comparisonFn.min Current minimum value.
* @param {Mixed} comparisonFn.item The value to compare with the current minimum.
* @return {Object} minValue The minimum value
*/
min: function(array, comparisonFn) {
var min = array[0],
i, ln, item;
for (i = 0, ln = array.length; i < ln; i++) {
item = array[i];
if (comparisonFn) {
if (comparisonFn(min, item) === 1) {
min = item;
}
}
else {
if (item < min) {
min = item;
}
}
}
return min;
},
/**
* Returns the maximum value in the Array.
*
* @param {Array/NodeList} array The Array from which to select the maximum value.
* @param {Function} comparisonFn (optional) a function to perform the comparision which determines maximization.
* If omitted the ">" operator will be used. Note: gt = 1; eq = 0; lt = -1
* @param {Mixed} comparisonFn.max Current maximum value.
* @param {Mixed} comparisonFn.item The value to compare with the current maximum.
* @return {Object} maxValue The maximum value
*/
max: function(array, comparisonFn) {
var max = array[0],
i, ln, item;
for (i = 0, ln = array.length; i < ln; i++) {
item = array[i];
if (comparisonFn) {
if (comparisonFn(max, item) === -1) {
max = item;
}
}
else {
if (item > max) {
max = item;
}
}
}
return max;
},
/**
* Calculates the mean of all items in the array.
*
* @param {Array} array The Array to calculate the mean value of.
* @return {Number} The mean.
*/
mean: function(array) {
return array.length > 0 ? ExtArray.sum(array) / array.length : undefined;
},
/**
* Calculates the sum of all items in the given array.
*
* @param {Array} array The Array to calculate the sum value of.
* @return {Number} The sum.
*/
sum: function(array) {
var sum = 0,
i, ln, item;
for (i = 0,ln = array.length; i < ln; i++) {
item = array[i];
sum += item;
}
return sum;
},
/**
* Creates a map (object) keyed by the elements of the given array. The values in
* the map are the index+1 of the array element. For example:
*
* var map = Ext.Array.toMap(['a','b','c']);
*
* // map = { a: 1, b: 2, c: 3 };
*
* Or a key property can be specified:
*
* var map = Ext.Array.toMap([
* { name: 'a' },
* { name: 'b' },
* { name: 'c' }
* ], 'name');
*
* // map = { a: 1, b: 2, c: 3 };
*
* Lastly, a key extractor can be provided:
*
* var map = Ext.Array.toMap([
* { name: 'a' },
* { name: 'b' },
* { name: 'c' }
* ], function (obj) { return obj.name.toUpperCase(); });
*
* // map = { A: 1, B: 2, C: 3 };
*
* @param {Array} array The Array to create the map from.
* @param {String/Function} [getKey] Name of the object property to use
* as a key or a function to extract the key.
* @param {Object} [scope] Value of this inside callback.
* @return {Object} The resulting map.
*/
toMap: function(array, getKey, scope) {
var map = {},
i = array.length;
if (!getKey) {
while (i--) {
map[array[i]] = i+1;
}
} else if (typeof getKey == 'string') {
while (i--) {
map[array[i][getKey]] = i+1;
}
} else {
while (i--) {
map[getKey.call(scope, array[i])] = i+1;
}
}
return map;
},
/**
* Creates a map (object) keyed by a property of elements of the given array. The values in
* the map are the array element. For example:
*
* var map = Ext.Array.toMap(['a','b','c']);
*
* // map = { a: 'a', b: 'b', c: 'c' };
*
* Or a key property can be specified:
*
* var map = Ext.Array.toMap([
* { name: 'a' },
* { name: 'b' },
* { name: 'c' }
* ], 'name');
*
* // map = { a: {name: 'a'}, b: {name: 'b'}, c: {name: 'c'} };
*
* Lastly, a key extractor can be provided:
*
* var map = Ext.Array.toMap([
* { name: 'a' },
* { name: 'b' },
* { name: 'c' }
* ], function (obj) { return obj.name.toUpperCase(); });
*
* // map = { A: {name: 'a'}, B: {name: 'b'}, C: {name: 'c'} };
*
* @param {Array} array The Array to create the map from.
* @param {String/Function} [getKey] Name of the object property to use
* as a key or a function to extract the key.
* @param {Object} [scope] Value of this inside callback.
* @return {Object} The resulting map.
*/
toValueMap: function(array, getKey, scope) {
var map = {},
i = array.length;
if (!getKey) {
while (i--) {
map[array[i]] = array[i];
}
} else if (typeof getKey == 'string') {
while (i--) {
map[array[i][getKey]] = array[i];
}
} else {
while (i--) {
map[getKey.call(scope, array[i])] = array[i];
}
}
return map;
},
/**
* Removes items from an array. This is functionally equivalent to the splice method
* of Array, but works around bugs in IE8's splice method and does not copy the
* removed elements in order to return them (because very often they are ignored).
*
* @param {Array} array The Array on which to replace.
* @param {Number} index The index in the array at which to operate.
* @param {Number} removeCount The number of items to remove at index.
* @return {Array} The array passed.
* @method
*/
erase: erase,
/**
* Inserts items in to an array.
*
* @param {Array} array The Array in which to insert.
* @param {Number} index The index in the array at which to operate.
* @param {Array} items The array of items to insert at index.
* @return {Array} The array passed.
*/
insert: function (array, index, items) {
return replace(array, index, 0, items);
},
/**
* Replaces items in an array. This is functionally equivalent to the splice method
* of Array, but works around bugs in IE8's splice method and is often more convenient
* to call because it accepts an array of items to insert rather than use a variadic
* argument list.
*
* @param {Array} array The Array on which to replace.
* @param {Number} index The index in the array at which to operate.
* @param {Number} removeCount The number of items to remove at index (can be 0).
* @param {Array} insert (optional) An array of items to insert at index.
* @return {Array} The array passed.
* @method
*/
replace: replace,
/**
* Replaces items in an array. This is equivalent to the splice method of Array, but
* works around bugs in IE8's splice method. The signature is exactly the same as the
* splice method except that the array is the first argument. All arguments following
* removeCount are inserted in the array at index.
*
* @param {Array} array The Array on which to replace.
* @param {Number} index The index in the array at which to operate.
* @param {Number} removeCount The number of items to remove at index (can be 0).
* @param {Object...} elements The elements to add to the array. If you don't specify
* any elements, splice simply removes elements from the array.
* @return {Array} An array containing the removed items.
* @method
*/
splice: splice,
/**
* Pushes new items onto the end of an Array.
*
* Passed parameters may be single items, or arrays of items. If an Array is found in the argument list, all its
* elements are pushed into the end of the target Array.
*
* @param {Array} target The Array onto which to push new items
* @param {Object...} elements The elements to add to the array. Each parameter may
* be an Array, in which case all the elements of that Array will be pushed into the end of the
* destination Array.
* @return {Array} An array containing all the new items push onto the end.
*
*/
push: function(array) {
var len = arguments.length,
i = 1,
newItem;
if (array === undefined) {
array = [];
} else if (!Ext.isArray(array)) {
array = [array];
}
for (; i < len; i++) {
newItem = arguments[i];
Array.prototype.push[Ext.isIterable(newItem) ? 'apply' : 'call'](array, newItem);
}
return array;
}
};
/**
* @method
* @member Ext
* @inheritdoc Ext.Array#each
*/
Ext.each = ExtArray.each;
/**
* @method
* @member Ext.Array
* @inheritdoc Ext.Array#merge
*/
ExtArray.union = ExtArray.merge;
/**
* Old alias to {@link Ext.Array#min}
* @deprecated 4.0.0 Use {@link Ext.Array#min} instead
* @method
* @member Ext
* @inheritdoc Ext.Array#min
*/
Ext.min = ExtArray.min;
/**
* Old alias to {@link Ext.Array#max}
* @deprecated 4.0.0 Use {@link Ext.Array#max} instead
* @method
* @member Ext
* @inheritdoc Ext.Array#max
*/
Ext.max = ExtArray.max;
/**
* Old alias to {@link Ext.Array#sum}
* @deprecated 4.0.0 Use {@link Ext.Array#sum} instead
* @method
* @member Ext
* @inheritdoc Ext.Array#sum
*/
Ext.sum = ExtArray.sum;
/**
* Old alias to {@link Ext.Array#mean}
* @deprecated 4.0.0 Use {@link Ext.Array#mean} instead
* @method
* @member Ext
* @inheritdoc Ext.Array#mean
*/
Ext.mean = ExtArray.mean;
/**
* Old alias to {@link Ext.Array#flatten}
* @deprecated 4.0.0 Use {@link Ext.Array#flatten} instead
* @method
* @member Ext
* @inheritdoc Ext.Array#flatten
*/
Ext.flatten = ExtArray.flatten;
/**
* Old alias to {@link Ext.Array#clean}
* @deprecated 4.0.0 Use {@link Ext.Array#clean} instead
* @method
* @member Ext
* @inheritdoc Ext.Array#clean
*/
Ext.clean = ExtArray.clean;
/**
* Old alias to {@link Ext.Array#unique}
* @deprecated 4.0.0 Use {@link Ext.Array#unique} instead
* @method
* @member Ext
* @inheritdoc Ext.Array#unique
*/
Ext.unique = ExtArray.unique;
/**
* Old alias to {@link Ext.Array#pluck Ext.Array.pluck}
* @deprecated 4.0.0 Use {@link Ext.Array#pluck Ext.Array.pluck} instead
* @method
* @member Ext
* @inheritdoc Ext.Array#pluck
*/
Ext.pluck = ExtArray.pluck;
/**
* @method
* @member Ext
* @inheritdoc Ext.Array#toArray
*/
Ext.toArray = function() {
return ExtArray.toArray.apply(ExtArray, arguments);
};
}());
// @tag foundation,core
// @require Array.js
// @define Ext.Function
/**
* @class Ext.Function
*
* A collection of useful static methods to deal with function callbacks
* @singleton
* @alternateClassName Ext.util.Functions
*/
Ext.Function = {
/**
* A very commonly used method throughout the framework. It acts as a wrapper around another method
* which originally accepts 2 arguments for `name` and `value`.
* The wrapped function then allows "flexible" value setting of either:
*
* - `name` and `value` as 2 arguments
* - one single object argument with multiple key - value pairs
*
* For example:
*
* var setValue = Ext.Function.flexSetter(function(name, value) {
* this[name] = value;
* });
*
* // Afterwards
* // Setting a single name - value
* setValue('name1', 'value1');
*
* // Settings multiple name - value pairs
* setValue({
* name1: 'value1',
* name2: 'value2',
* name3: 'value3'
* });
*
* @param {Function} setter
* @returns {Function} flexSetter
*/
flexSetter: function(fn) {
return function(a, b) {
var k, i;
if (a === null) {
return this;
}
if (typeof a !== 'string') {
for (k in a) {
if (a.hasOwnProperty(k)) {
fn.call(this, k, a[k]);
}
}
if (Ext.enumerables) {
for (i = Ext.enumerables.length; i--;) {
k = Ext.enumerables[i];
if (a.hasOwnProperty(k)) {
fn.call(this, k, a[k]);
}
}
}
} else {
fn.call(this, a, b);
}
return this;
};
},
/**
* Create a new function from the provided `fn`, change `this` to the provided scope, optionally
* overrides arguments for the call. (Defaults to the arguments passed by the caller)
*
* {@link Ext#bind Ext.bind} is alias for {@link Ext.Function#bind Ext.Function.bind}
*
* @param {Function} fn The function to delegate.
* @param {Object} scope (optional) The scope (`this` reference) in which the function is executed.
* **If omitted, defaults to the default global environment object (usually the browser window).**
* @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
* @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
* if a number the args are inserted at the specified position
* @return {Function} The new function
*/
bind: function(fn, scope, args, appendArgs) {
if (arguments.length === 2) {
return function() {
return fn.apply(scope, arguments);
};
}
var method = fn,
slice = Array.prototype.slice;
return function() {
var callArgs = args || arguments;
if (appendArgs === true) {
callArgs = slice.call(arguments, 0);
callArgs = callArgs.concat(args);
}
else if (typeof appendArgs == 'number') {
callArgs = slice.call(arguments, 0); // copy arguments first
Ext.Array.insert(callArgs, appendArgs, args);
}
return method.apply(scope || Ext.global, callArgs);
};
},
/**
* Create a new function from the provided `fn`, the arguments of which are pre-set to `args`.
* New arguments passed to the newly created callback when it's invoked are appended after the pre-set ones.
* This is especially useful when creating callbacks.
*
* For example:
*
* var originalFunction = function(){
* alert(Ext.Array.from(arguments).join(' '));
* };
*
* var callback = Ext.Function.pass(originalFunction, ['Hello', 'World']);
*
* callback(); // alerts 'Hello World'
* callback('by Me'); // alerts 'Hello World by Me'
*
* {@link Ext#pass Ext.pass} is alias for {@link Ext.Function#pass Ext.Function.pass}
*
* @param {Function} fn The original function
* @param {Array} args The arguments to pass to new callback
* @param {Object} scope (optional) The scope (`this` reference) in which the function is executed.
* @return {Function} The new callback function
*/
pass: function(fn, args, scope) {
if (!Ext.isArray(args)) {
if (Ext.isIterable(args)) {
args = Ext.Array.clone(args);
} else {
args = args !== undefined ? [args] : [];
}
}
return function() {
var fnArgs = [].concat(args);
fnArgs.push.apply(fnArgs, arguments);
return fn.apply(scope || this, fnArgs);
};
},
/**
* Create an alias to the provided method property with name `methodName` of `object`.
* Note that the execution scope will still be bound to the provided `object` itself.
*
* @param {Object/Function} object
* @param {String} methodName
* @return {Function} aliasFn
*/
alias: function(object, methodName) {
return function() {
return object[methodName].apply(object, arguments);
};
},
/**
* Create a "clone" of the provided method. The returned method will call the given
* method passing along all arguments and the "this" pointer and return its result.
*
* @param {Function} method
* @return {Function} cloneFn
*/
clone: function(method) {
return function() {
return method.apply(this, arguments);
};
},
/**
* Creates an interceptor function. The passed function is called before the original one. If it returns false,
* the original one is not called. The resulting function returns the results of the original function.
* The passed function is called with the parameters of the original function. Example usage:
*
* var sayHi = function(name){
* alert('Hi, ' + name);
* }
*
* sayHi('Fred'); // alerts "Hi, Fred"
*
* // create a new function that validates input without
* // directly modifying the original function:
* var sayHiToFriend = Ext.Function.createInterceptor(sayHi, function(name){
* return name == 'Brian';
* });
*
* sayHiToFriend('Fred'); // no alert
* sayHiToFriend('Brian'); // alerts "Hi, Brian"
*
* @param {Function} origFn The original function.
* @param {Function} newFn The function to call before the original
* @param {Object} [scope] The scope (`this` reference) in which the passed function is executed.
* **If omitted, defaults to the scope in which the original function is called or the browser window.**
* @param {Object} [returnValue=null] The value to return if the passed function return false.
* @return {Function} The new function
*/
createInterceptor: function(origFn, newFn, scope, returnValue) {
var method = origFn;
if (!Ext.isFunction(newFn)) {
return origFn;
} else {
returnValue = Ext.isDefined(returnValue) ? returnValue : null;
return function() {
var me = this,
args = arguments;
newFn.target = me;
newFn.method = origFn;
return (newFn.apply(scope || me || Ext.global, args) !== false) ? origFn.apply(me || Ext.global, args) : returnValue;
};
}
},
/**
* Creates a delegate (callback) which, when called, executes after a specific delay.
*
* @param {Function} fn The function which will be called on a delay when the returned function is called.
* Optionally, a replacement (or additional) argument list may be specified.
* @param {Number} delay The number of milliseconds to defer execution by whenever called.
* @param {Object} scope (optional) The scope (`this` reference) used by the function at execution time.
* @param {Array} args (optional) Override arguments for the call. (Defaults to the arguments passed by the caller)
* @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
* if a number the args are inserted at the specified position.
* @return {Function} A function which, when called, executes the original function after the specified delay.
*/
createDelayed: function(fn, delay, scope, args, appendArgs) {
if (scope || args) {
fn = Ext.Function.bind(fn, scope, args, appendArgs);
}
return function() {
var me = this,
args = Array.prototype.slice.call(arguments);
setTimeout(function() {
fn.apply(me, args);
}, delay);
};
},
/**
* Calls this function after the number of millseconds specified, optionally in a specific scope. Example usage:
*
* var sayHi = function(name){
* alert('Hi, ' + name);
* }
*
* // executes immediately:
* sayHi('Fred');
*
* // executes after 2 seconds:
* Ext.Function.defer(sayHi, 2000, this, ['Fred']);
*
* // this syntax is sometimes useful for deferring
* // execution of an anonymous function:
* Ext.Function.defer(function(){
* alert('Anonymous');
* }, 100);
*
* {@link Ext#defer Ext.defer} is alias for {@link Ext.Function#defer Ext.Function.defer}
*
* @param {Function} fn The function to defer.
* @param {Number} millis The number of milliseconds for the setTimeout call
* (if less than or equal to 0 the function is executed immediately)
* @param {Object} scope (optional) The scope (`this` reference) in which the function is executed.
* **If omitted, defaults to the browser window.**
* @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
* @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
* if a number the args are inserted at the specified position
* @return {Number} The timeout id that can be used with clearTimeout
*/
defer: function(fn, millis, scope, args, appendArgs) {
fn = Ext.Function.bind(fn, scope, args, appendArgs);
if (millis > 0) {
return setTimeout(Ext.supports.TimeoutActualLateness ? function () {
fn();
} : fn, millis);
}
fn();
return 0;
},
/**
* Create a combined function call sequence of the original function + the passed function.
* The resulting function returns the results of the original function.
* The passed function is called with the parameters of the original function. Example usage:
*
* var sayHi = function(name){
* alert('Hi, ' + name);
* }
*
* sayHi('Fred'); // alerts "Hi, Fred"
*
* var sayGoodbye = Ext.Function.createSequence(sayHi, function(name){
* alert('Bye, ' + name);
* });
*
* sayGoodbye('Fred'); // both alerts show
*
* @param {Function} originalFn The original function.
* @param {Function} newFn The function to sequence
* @param {Object} scope (optional) The scope (`this` reference) in which the passed function is executed.
* If omitted, defaults to the scope in which the original function is called or the default global environment object (usually the browser window).
* @return {Function} The new function
*/
createSequence: function(originalFn, newFn, scope) {
if (!newFn) {
return originalFn;
}
else {
return function() {
var result = originalFn.apply(this, arguments);
newFn.apply(scope || this, arguments);
return result;
};
}
},
/**
* Creates a delegate function, optionally with a bound scope which, when called, buffers
* the execution of the passed function for the configured number of milliseconds.
* If called again within that period, the impending invocation will be canceled, and the
* timeout period will begin again.
*
* @param {Function} fn The function to invoke on a buffered timer.
* @param {Number} buffer The number of milliseconds by which to buffer the invocation of the
* function.
* @param {Object} scope (optional) The scope (`this` reference) in which
* the passed function is executed. If omitted, defaults to the scope specified by the caller.
* @param {Array} args (optional) Override arguments for the call. Defaults to the arguments
* passed by the caller.
* @return {Function} A function which invokes the passed function after buffering for the specified time.
*/
createBuffered: function(fn, buffer, scope, args) {
var timerId;
return function() {
var callArgs = args || Array.prototype.slice.call(arguments, 0),
me = scope || this;
if (timerId) {
clearTimeout(timerId);
}
timerId = setTimeout(function(){
fn.apply(me, callArgs);
}, buffer);
};
},
/**
* Creates a throttled version of the passed function which, when called repeatedly and
* rapidly, invokes the passed function only after a certain interval has elapsed since the
* previous invocation.
*
* This is useful for wrapping functions which may be called repeatedly, such as
* a handler of a mouse move event when the processing is expensive.
*
* @param {Function} fn The function to execute at a regular time interval.
* @param {Number} interval The interval **in milliseconds** on which the passed function is executed.
* @param {Object} scope (optional) The scope (`this` reference) in which
* the passed function is executed. If omitted, defaults to the scope specified by the caller.
* @returns {Function} A function which invokes the passed function at the specified interval.
*/
createThrottled: function(fn, interval, scope) {
var lastCallTime, elapsed, lastArgs, timer, execute = function() {
fn.apply(scope || this, lastArgs);
lastCallTime = Ext.Date.now();
};
return function() {
elapsed = Ext.Date.now() - lastCallTime;
lastArgs = arguments;
clearTimeout(timer);
if (!lastCallTime || (elapsed >= interval)) {
execute();
} else {
timer = setTimeout(execute, interval - elapsed);
}
};
},
/**
* Adds behavior to an existing method that is executed before the
* original behavior of the function. For example:
*
* var soup = {
* contents: [],
* add: function(ingredient) {
* this.contents.push(ingredient);
* }
* };
* Ext.Function.interceptBefore(soup, "add", function(ingredient){
* if (!this.contents.length && ingredient !== "water") {
* // Always add water to start with
* this.contents.push("water");
* }
* });
* soup.add("onions");
* soup.add("salt");
* soup.contents; // will contain: water, onions, salt
*
* @param {Object} object The target object
* @param {String} methodName Name of the method to override
* @param {Function} fn Function with the new behavior. It will
* be called with the same arguments as the original method. The
* return value of this function will be the return value of the
* new method.
* @param {Object} [scope] The scope to execute the interceptor function. Defaults to the object.
* @return {Function} The new function just created.
*/
interceptBefore: function(object, methodName, fn, scope) {
var method = object[methodName] || Ext.emptyFn;
return (object[methodName] = function() {
var ret = fn.apply(scope || this, arguments);
method.apply(this, arguments);
return ret;
});
},
/**
* Adds behavior to an existing method that is executed after the
* original behavior of the function. For example:
*
* var soup = {
* contents: [],
* add: function(ingredient) {
* this.contents.push(ingredient);
* }
* };
* Ext.Function.interceptAfter(soup, "add", function(ingredient){
* // Always add a bit of extra salt
* this.contents.push("salt");
* });
* soup.add("water");
* soup.add("onions");
* soup.contents; // will contain: water, salt, onions, salt
*
* @param {Object} object The target object
* @param {String} methodName Name of the method to override
* @param {Function} fn Function with the new behavior. It will
* be called with the same arguments as the original method. The
* return value of this function will be the return value of the
* new method.
* @param {Object} [scope] The scope to execute the interceptor function. Defaults to the object.
* @return {Function} The new function just created.
*/
interceptAfter: function(object, methodName, fn, scope) {
var method = object[methodName] || Ext.emptyFn;
return (object[methodName] = function() {
method.apply(this, arguments);
return fn.apply(scope || this, arguments);
});
}
};
/**
* @method
* @member Ext
* @inheritdoc Ext.Function#defer
*/
Ext.defer = Ext.Function.alias(Ext.Function, 'defer');
/**
* @method
* @member Ext
* @inheritdoc Ext.Function#pass
*/
Ext.pass = Ext.Function.alias(Ext.Function, 'pass');
/**
* @method
* @member Ext
* @inheritdoc Ext.Function#bind
*/
Ext.bind = Ext.Function.alias(Ext.Function, 'bind');
// @tag foundation,core
// @require Function.js
// @define Ext.Object
/**
* @class Ext.Object
*
* A collection of useful static methods to deal with objects.
*
* @singleton
*/
(function() {
// The "constructor" for chain:
var TemplateClass = function(){},
ExtObject = Ext.Object = {
/**
* Returns a new object with the given object as the prototype chain. This method is
* designed to mimic the ECMA standard `Object.create` method and is assigned to that
* function when it is available.
*
* **NOTE** This method does not support the property definitions capability of the
* `Object.create` method. Only the first argument is supported.
*
* @param {Object} object The prototype chain for the new object.
*/
chain: Object.create || function (object) {
TemplateClass.prototype = object;
var result = new TemplateClass();
TemplateClass.prototype = null;
return result;
},
/**
* Converts a `name` - `value` pair to an array of objects with support for nested structures. Useful to construct
* query strings. For example:
*
* var objects = Ext.Object.toQueryObjects('hobbies', ['reading', 'cooking', 'swimming']);
*
* // objects then equals:
* [
* { name: 'hobbies', value: 'reading' },
* { name: 'hobbies', value: 'cooking' },
* { name: 'hobbies', value: 'swimming' },
* ];
*
* var objects = Ext.Object.toQueryObjects('dateOfBirth', {
* day: 3,
* month: 8,
* year: 1987,
* extra: {
* hour: 4
* minute: 30
* }
* }, true); // Recursive
*
* // objects then equals:
* [
* { name: 'dateOfBirth[day]', value: 3 },
* { name: 'dateOfBirth[month]', value: 8 },
* { name: 'dateOfBirth[year]', value: 1987 },
* { name: 'dateOfBirth[extra][hour]', value: 4 },
* { name: 'dateOfBirth[extra][minute]', value: 30 },
* ];
*
* @param {String} name
* @param {Object/Array} value
* @param {Boolean} [recursive=false] True to traverse object recursively
* @return {Array}
*/
toQueryObjects: function(name, value, recursive) {
var self = ExtObject.toQueryObjects,
objects = [],
i, ln;
if (Ext.isArray(value)) {
for (i = 0, ln = value.length; i < ln; i++) {
if (recursive) {
objects = objects.concat(self(name + '[' + i + ']', value[i], true));
}
else {
objects.push({
name: name,
value: value[i]
});
}
}
}
else if (Ext.isObject(value)) {
for (i in value) {
if (value.hasOwnProperty(i)) {
if (recursive) {
objects = objects.concat(self(name + '[' + i + ']', value[i], true));
}
else {
objects.push({
name: name,
value: value[i]
});
}
}
}
}
else {
objects.push({
name: name,
value: value
});
}
return objects;
},
/**
* Takes an object and converts it to an encoded query string.
*
* Non-recursive:
*
* Ext.Object.toQueryString({foo: 1, bar: 2}); // returns "foo=1&bar=2"
* Ext.Object.toQueryString({foo: null, bar: 2}); // returns "foo=&bar=2"
* Ext.Object.toQueryString({'some price': '$300'}); // returns "some%20price=%24300"
* Ext.Object.toQueryString({date: new Date(2011, 0, 1)}); // returns "date=%222011-01-01T00%3A00%3A00%22"
* Ext.Object.toQueryString({colors: ['red', 'green', 'blue']}); // returns "colors=red&colors=green&colors=blue"
*
* Recursive:
*
* Ext.Object.toQueryString({
* username: 'Jacky',
* dateOfBirth: {
* day: 1,
* month: 2,
* year: 1911
* },
* hobbies: ['coding', 'eating', 'sleeping', ['nested', 'stuff']]
* }, true); // returns the following string (broken down and url-decoded for ease of reading purpose):
* // username=Jacky
* // &dateOfBirth[day]=1&dateOfBirth[month]=2&dateOfBirth[year]=1911
* // &hobbies[0]=coding&hobbies[1]=eating&hobbies[2]=sleeping&hobbies[3][0]=nested&hobbies[3][1]=stuff
*
* @param {Object} object The object to encode
* @param {Boolean} [recursive=false] Whether or not to interpret the object in recursive format.
* (PHP / Ruby on Rails servers and similar).
* @return {String} queryString
*/
toQueryString: function(object, recursive) {
var paramObjects = [],
params = [],
i, j, ln, paramObject, value;
for (i in object) {
if (object.hasOwnProperty(i)) {
paramObjects = paramObjects.concat(ExtObject.toQueryObjects(i, object[i], recursive));
}
}
for (j = 0, ln = paramObjects.length; j < ln; j++) {
paramObject = paramObjects[j];
value = paramObject.value;
if (Ext.isEmpty(value)) {
value = '';
} else if (Ext.isDate(value)) {
value = Ext.Date.toString(value);
}
params.push(encodeURIComponent(paramObject.name) + '=' + encodeURIComponent(String(value)));
}
return params.join('&');
},
/**
* Converts a query string back into an object.
*
* Non-recursive:
*
* Ext.Object.fromQueryString("foo=1&bar=2"); // returns {foo: '1', bar: '2'}
* Ext.Object.fromQueryString("foo=&bar=2"); // returns {foo: null, bar: '2'}
* Ext.Object.fromQueryString("some%20price=%24300"); // returns {'some price': '$300'}
* Ext.Object.fromQueryString("colors=red&colors=green&colors=blue"); // returns {colors: ['red', 'green', 'blue']}
*
* Recursive:
*
* Ext.Object.fromQueryString(
* "username=Jacky&"+
* "dateOfBirth[day]=1&dateOfBirth[month]=2&dateOfBirth[year]=1911&"+
* "hobbies[0]=coding&hobbies[1]=eating&hobbies[2]=sleeping&"+
* "hobbies[3][0]=nested&hobbies[3][1]=stuff", true);
*
* // returns
* {
* username: 'Jacky',
* dateOfBirth: {
* day: '1',
* month: '2',
* year: '1911'
* },
* hobbies: ['coding', 'eating', 'sleeping', ['nested', 'stuff']]
* }
*
* @param {String} queryString The query string to decode
* @param {Boolean} [recursive=false] Whether or not to recursively decode the string. This format is supported by
* PHP / Ruby on Rails servers and similar.
* @return {Object}
*/
fromQueryString: function(queryString, recursive) {
var parts = queryString.replace(/^\?/, '').split('&'),
object = {},
temp, components, name, value, i, ln,
part, j, subLn, matchedKeys, matchedName,
keys, key, nextKey;
for (i = 0, ln = parts.length; i < ln; i++) {
part = parts[i];
if (part.length > 0) {
components = part.split('=');
name = decodeURIComponent(components[0]);
value = (components[1] !== undefined) ? decodeURIComponent(components[1]) : '';
if (!recursive) {
if (object.hasOwnProperty(name)) {
if (!Ext.isArray(object[name])) {
object[name] = [object[name]];
}
object[name].push(value);
}
else {
object[name] = value;
}
}
else {
matchedKeys = name.match(/(\[):?([^\]]*)\]/g);
matchedName = name.match(/^([^\[]+)/);
name = matchedName[0];
keys = [];
if (matchedKeys === null) {
object[name] = value;
continue;
}
for (j = 0, subLn = matchedKeys.length; j < subLn; j++) {
key = matchedKeys[j];
key = (key.length === 2) ? '' : key.substring(1, key.length - 1);
keys.push(key);
}
keys.unshift(name);
temp = object;
for (j = 0, subLn = keys.length; j < subLn; j++) {
key = keys[j];
if (j === subLn - 1) {
if (Ext.isArray(temp) && key === '') {
temp.push(value);
}
else {
temp[key] = value;
}
}
else {
if (temp[key] === undefined || typeof temp[key] === 'string') {
nextKey = keys[j+1];
temp[key] = (Ext.isNumeric(nextKey) || nextKey === '') ? [] : {};
}
temp = temp[key];
}
}
}
}
}
return object;
},
/**
* Iterates through an object and invokes the given callback function for each iteration.
* The iteration can be stopped by returning `false` in the callback function. For example:
*
* var person = {
* name: 'Jacky'
* hairColor: 'black'
* loves: ['food', 'sleeping', 'wife']
* };
*
* Ext.Object.each(person, function(key, value, myself) {
* console.log(key + ":" + value);
*
* if (key === 'hairColor') {
* return false; // stop the iteration
* }
* });
*
* @param {Object} object The object to iterate
* @param {Function} fn The callback function.
* @param {String} fn.key
* @param {Object} fn.value
* @param {Object} fn.object The object itself
* @param {Object} [scope] The execution scope (`this`) of the callback function
*/
each: function(object, fn, scope) {
for (var property in object) {
if (object.hasOwnProperty(property)) {
if (fn.call(scope || object, property, object[property], object) === false) {
return;
}
}
}
},
/**
* Merges any number of objects recursively without referencing them or their children.
*
* var extjs = {
* companyName: 'Ext JS',
* products: ['Ext JS', 'Ext GWT', 'Ext Designer'],
* isSuperCool: true,
* office: {
* size: 2000,
* location: 'Palo Alto',
* isFun: true
* }
* };
*
* var newStuff = {
* companyName: 'Sencha Inc.',
* products: ['Ext JS', 'Ext GWT', 'Ext Designer', 'Sencha Touch', 'Sencha Animator'],
* office: {
* size: 40000,
* location: 'Redwood City'
* }
* };
*
* var sencha = Ext.Object.merge(extjs, newStuff);
*
* // extjs and sencha then equals to
* {
* companyName: 'Sencha Inc.',
* products: ['Ext JS', 'Ext GWT', 'Ext Designer', 'Sencha Touch', 'Sencha Animator'],
* isSuperCool: true,
* office: {
* size: 40000,
* location: 'Redwood City',
* isFun: true
* }
* }
*
* @param {Object} destination The object into which all subsequent objects are merged.
* @param {Object...} object Any number of objects to merge into the destination.
* @return {Object} merged The destination object with all passed objects merged in.
*/
merge: function(destination) {
var i = 1,
ln = arguments.length,
mergeFn = ExtObject.merge,
cloneFn = Ext.clone,
object, key, value, sourceKey;
for (; i < ln; i++) {
object = arguments[i];
for (key in object) {
value = object[key];
if (value && value.constructor === Object) {
sourceKey = destination[key];
if (sourceKey && sourceKey.constructor === Object) {
mergeFn(sourceKey, value);
}
else {
destination[key] = cloneFn(value);
}
}
else {
destination[key] = value;
}
}
}
return destination;
},
/**
* @private
* @param destination
*/
mergeIf: function(destination) {
var i = 1,
ln = arguments.length,
cloneFn = Ext.clone,
object, key, value;
for (; i < ln; i++) {
object = arguments[i];
for (key in object) {
if (!(key in destination)) {
value = object[key];
if (value && value.constructor === Object) {
destination[key] = cloneFn(value);
}
else {
destination[key] = value;
}
}
}
}
return destination;
},
/**
* Returns the first matching key corresponding to the given value.
* If no matching value is found, null is returned.
*
* var person = {
* name: 'Jacky',
* loves: 'food'
* };
*
* alert(Ext.Object.getKey(person, 'food')); // alerts 'loves'
*
* @param {Object} object
* @param {Object} value The value to find
*/
getKey: function(object, value) {
for (var property in object) {
if (object.hasOwnProperty(property) && object[property] === value) {
return property;
}
}
return null;
},
/**
* Gets all values of the given object as an array.
*
* var values = Ext.Object.getValues({
* name: 'Jacky',
* loves: 'food'
* }); // ['Jacky', 'food']
*
* @param {Object} object
* @return {Array} An array of values from the object
*/
getValues: function(object) {
var values = [],
property;
for (property in object) {
if (object.hasOwnProperty(property)) {
values.push(object[property]);
}
}
return values;
},
/**
* Gets all keys of the given object as an array.
*
* var values = Ext.Object.getKeys({
* name: 'Jacky',
* loves: 'food'
* }); // ['name', 'loves']
*
* @param {Object} object
* @return {String[]} An array of keys from the object
* @method
*/
getKeys: (typeof Object.keys == 'function')
? function(object){
if (!object) {
return [];
}
return Object.keys(object);
}
: function(object) {
var keys = [],
property;
for (property in object) {
if (object.hasOwnProperty(property)) {
keys.push(property);
}
}
return keys;
},
/**
* Gets the total number of this object's own properties
*
* var size = Ext.Object.getSize({
* name: 'Jacky',
* loves: 'food'
* }); // size equals 2
*
* @param {Object} object
* @return {Number} size
*/
getSize: function(object) {
var size = 0,
property;
for (property in object) {
if (object.hasOwnProperty(property)) {
size++;
}
}
return size;
},
/**
* Checks if there are any properties on this object.
* @param {Object} object
* @return {Boolean} `true` if there no properties on the object.
*/
isEmpty: function(object){
for (var key in object) {
if (object.hasOwnProperty(key)) {
return false;
}
}
return true;
},
/**
* Shallow compares the contents of 2 objects using strict equality. Objects are
* considered equal if they both have the same set of properties and the
* value for those properties equals the other in the corresponding object.
*
* // Returns true
* Ext.Object.equals({
* foo: 1,
* bar: 2
* }, {
* foo: 1,
* bar: 2
* });
*
* @param {Object} object1
* @param {Object} object2
* @return {Boolean} `true` if the objects are equal.
*/
equals: (function() {
var check = function(o1, o2) {
var key;
for (key in o1) {
if (o1.hasOwnProperty(key)) {
if (o1[key] !== o2[key]) {
return false;
}
}
}
return true;
};
return function(object1, object2) {
// Short circuit if the same object is passed twice
if (object1 === object2) {
return true;
} if (object1 && object2) {
// Do the second check because we could have extra keys in
// object2 that don't exist in object1.
return check(object1, object2) && check(object2, object1);
} else if (!object1 && !object2) {
return object1 === object2;
} else {
return false;
}
};
})(),
/**
* @private
*/
classify: function(object) {
var prototype = object,
objectProperties = [],
propertyClassesMap = {},
objectClass = function() {
var i = 0,
ln = objectProperties.length,
property;
for (; i < ln; i++) {
property = objectProperties[i];
this[property] = new propertyClassesMap[property]();
}
},
key, value;
for (key in object) {
if (object.hasOwnProperty(key)) {
value = object[key];
if (value && value.constructor === Object) {
objectProperties.push(key);
propertyClassesMap[key] = ExtObject.classify(value);
}
}
}
objectClass.prototype = prototype;
return objectClass;
}
};
/**
* A convenient alias method for {@link Ext.Object#merge}.
*
* @member Ext
* @method merge
* @inheritdoc Ext.Object#merge
*/
Ext.merge = Ext.Object.merge;
/**
* @private
* @member Ext
*/
Ext.mergeIf = Ext.Object.mergeIf;
/**
*
* @member Ext
* @method urlEncode
* @inheritdoc Ext.Object#toQueryString
* @deprecated 4.0.0 Use {@link Ext.Object#toQueryString} instead
*/
Ext.urlEncode = function() {
var args = Ext.Array.from(arguments),
prefix = '';
// Support for the old `pre` argument
if ((typeof args[1] === 'string')) {
prefix = args[1] + '&';
args[1] = false;
}
return prefix + ExtObject.toQueryString.apply(ExtObject, args);
};
/**
* Alias for {@link Ext.Object#fromQueryString}.
*
* @member Ext
* @method urlDecode
* @inheritdoc Ext.Object#fromQueryString
* @deprecated 4.0.0 Use {@link Ext.Object#fromQueryString} instead
*/
Ext.urlDecode = function() {
return ExtObject.fromQueryString.apply(ExtObject, arguments);
};
}());
// @tag foundation,core
// @require Object.js
// @define Ext.Date
/**
* @class Ext.Date
* A set of useful static methods to deal with date
* Note that if Ext.Date is required and loaded, it will copy all methods / properties to
* this object for convenience
*
* The date parsing and formatting syntax contains a subset of
* [PHP's `date()` function](http://www.php.net/date), and the formats that are
* supported will provide results equivalent to their PHP versions.
*
* The following is a list of all currently supported formats:
*
Format Description Example returned values
------ ----------------------------------------------------------------------- -----------------------
d Day of the month, 2 digits with leading zeros 01 to 31
D A short textual representation of the day of the week Mon to Sun
j Day of the month without leading zeros 1 to 31
l A full textual representation of the day of the week Sunday to Saturday
N ISO-8601 numeric representation of the day of the week 1 (for Monday) through 7 (for Sunday)
S English ordinal suffix for the day of the month, 2 characters st, nd, rd or th. Works well with j
w Numeric representation of the day of the week 0 (for Sunday) to 6 (for Saturday)
z The day of the year (starting from 0) 0 to 364 (365 in leap years)
W ISO-8601 week number of year, weeks starting on Monday 01 to 53
F A full textual representation of a month, such as January or March January to December
m Numeric representation of a month, with leading zeros 01 to 12
M A short textual representation of a month Jan to Dec
n Numeric representation of a month, without leading zeros 1 to 12
t Number of days in the given month 28 to 31
L Whether it's a leap year 1 if it is a leap year, 0 otherwise.
o ISO-8601 year number (identical to (Y), but if the ISO week number (W) Examples: 1998 or 2004
belongs to the previous or next year, that year is used instead)
Y A full numeric representation of a year, 4 digits Examples: 1999 or 2003
y A two digit representation of a year Examples: 99 or 03
a Lowercase Ante meridiem and Post meridiem am or pm
A Uppercase Ante meridiem and Post meridiem AM or PM
g 12-hour format of an hour without leading zeros 1 to 12
G 24-hour format of an hour without leading zeros 0 to 23
h 12-hour format of an hour with leading zeros 01 to 12
H 24-hour format of an hour with leading zeros 00 to 23
i Minutes, with leading zeros 00 to 59
s Seconds, with leading zeros 00 to 59
u Decimal fraction of a second Examples:
(minimum 1 digit, arbitrary number of digits allowed) 001 (i.e. 0.001s) or
100 (i.e. 0.100s) or
999 (i.e. 0.999s) or
999876543210 (i.e. 0.999876543210s)
O Difference to Greenwich time (GMT) in hours and minutes Example: +1030
P Difference to Greenwich time (GMT) with colon between hours and minutes Example: -08:00
T Timezone abbreviation of the machine running the code Examples: EST, MDT, PDT ...
Z Timezone offset in seconds (negative if west of UTC, positive if east) -43200 to 50400
c ISO 8601 date
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)\/
time A javascript millisecond timestamp 1350024476440
timestamp A UNIX timestamp (same as U) 1350024866
*
* Example usage (note that you must escape format specifiers with '\\' to render them as character literals):
*
* // Sample date:
* // 'Wed Jan 10 2007 15:05:01 GMT-0600 (Central Standard Time)'
*
* var dt = new Date('1/10/2007 03:05:01 PM GMT-0600');
* console.log(Ext.Date.format(dt, 'Y-m-d')); // 2007-01-10
* console.log(Ext.Date.format(dt, 'F j, Y, g:i a')); // January 10, 2007, 3:05 pm
* console.log(Ext.Date.format(dt, 'l, \\t\\he jS \\of F Y h:i:s A')); // Wednesday, the 10th of January 2007 03:05:01 PM
*
* Here are some standard date/time patterns that you might find helpful. They
* are not part of the source of Ext.Date, but to use them you can simply copy this
* block of code into any script that is included after Ext.Date and they will also become
* globally available on the Date object. Feel free to add or remove patterns as needed in your code.
*
* Ext.Date.patterns = {
* ISO8601Long:"Y-m-d H:i:s",
* ISO8601Short:"Y-m-d",
* ShortDate: "n/j/Y",
* LongDate: "l, F d, Y",
* FullDateTime: "l, F d, Y g:i:s A",
* MonthDay: "F d",
* ShortTime: "g:i A",
* LongTime: "g:i:s A",
* SortableDateTime: "Y-m-d\\TH:i:s",
* UniversalSortableDateTime: "Y-m-d H:i:sO",
* YearMonth: "F, Y"
* };
*
* Example usage:
*
* var dt = new Date();
* console.log(Ext.Date.format(dt, Ext.Date.patterns.ShortDate));
*
* Developer-written, custom formats may be used by supplying both a formatting and a parsing function
* which perform to specialized requirements. The functions are stored in {@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.
*/
Ext.Date = new function() {
var utilDate = this,
stripEscapeRe = /(\\.)/g,
hourInfoRe = /([gGhHisucUOPZ]|MS)/,
dateInfoRe = /([djzmnYycU]|MS)/,
slashRe = /\\/gi,
numberTokenRe = /\{(\d+)\}/g,
MSFormatRe = new RegExp('\\/Date\\(([-+])?(\\d+)(?:[+-]\\d{4})?\\)\\/'),
code = [
// date calculations (note: the code below creates a dependency on Ext.Number.from())
"var me = this, dt, y, m, d, h, i, s, ms, o, O, z, zz, u, v, W, year, jan4, week1monday, daysInMonth, dayMatched,",
"def = me.defaults,",
"from = Ext.Number.from,",
"results = String(input).match(me.parseRegexes[{0}]);", // either null, or an array of matched strings
"if(results){",
"{1}",
"if(u != null){", // i.e. unix time is defined
"v = new Date(u * 1000);", // give top priority to UNIX time
"}else{",
// create Date object representing midnight of the current day;
// this will provide us with our date defaults
// (note: clearTime() handles Daylight Saving Time automatically)
"dt = me.clearTime(new Date);",
"y = from(y, from(def.y, dt.getFullYear()));",
"m = from(m, from(def.m - 1, dt.getMonth()));",
"dayMatched = d !== undefined;",
"d = from(d, from(def.d, dt.getDate()));",
// Attempt to validate the day. Since it defaults to today, it may go out
// of range, for example parsing m/Y where the value is 02/2000 on the 31st of May.
// It will attempt to parse 2000/02/31, which will overflow to March and end up
// returning 03/2000. We only do this when we default the day. If an invalid day value
// was set to be parsed by the user, continue on and either let it overflow or return null
// depending on the strict value. This will be in line with the normal Date behaviour.
"if (!dayMatched) {",
"dt.setDate(1);",
"dt.setMonth(m);",
"dt.setFullYear(y);",
"daysInMonth = me.getDaysInMonth(dt);",
"if (d > daysInMonth) {",
"d = daysInMonth;",
"}",
"}",
"h = from(h, from(def.h, dt.getHours()));",
"i = from(i, from(def.i, dt.getMinutes()));",
"s = from(s, from(def.s, dt.getSeconds()));",
"ms = from(ms, from(def.ms, dt.getMilliseconds()));",
"if(z >= 0 && y >= 0){",
// both the year and zero-based day of year are defined and >= 0.
// these 2 values alone provide sufficient info to create a full date object
// create Date object representing January 1st for the given year
// handle years < 100 appropriately
"v = me.add(new Date(y < 100 ? 100 : y, 0, 1, h, i, s, ms), me.YEAR, y < 100 ? y - 100 : 0);",
// then add day of year, checking for Date "rollover" if necessary
"v = !strict? v : (strict === true && (z <= 364 || (me.isLeapYear(v) && z <= 365))? me.add(v, me.DAY, z) : null);",
"}else if(strict === true && !me.isValid(y, m + 1, d, h, i, s, ms)){", // check for Date "rollover"
"v = null;", // invalid date, so return null
"}else{",
"if (W) {", // support ISO-8601
// http://en.wikipedia.org/wiki/ISO_week_date
//
// Mutually equivalent definitions for week 01 are:
// a. the week starting with the Monday which is nearest in time to 1 January
// b. the week with 4 January in it
// ... there are many others ...
//
// We'll use letter b above to determine the first week of the year.
//
// So, first get a Date object for January 4th of whatever calendar year is desired.
//
// Then, the first Monday of the year can easily be determined by (operating on this Date):
// 1. Getting the day of the week.
// 2. Subtracting that by one.
// 3. Multiplying that by 86400000 (one day in ms).
// 4. Subtracting this number of days (in ms) from the January 4 date (represented in ms).
//
// Example #1 ...
//
// January 2012
// Su Mo Tu We Th Fr Sa
// 1 2 3 4 5 6 7
// 8 9 10 11 12 13 14
// 15 16 17 18 19 20 21
// 22 23 24 25 26 27 28
// 29 30 31
//
// 1. January 4th is a Wednesday.
// 2. Its day number is 3.
// 3. Simply substract 2 days from Wednesday.
// 4. The first week of the year begins on Monday, January 2. Simple!
//
// Example #2 ...
// January 1992
// Su Mo Tu We Th Fr Sa
// 1 2 3 4
// 5 6 7 8 9 10 11
// 12 13 14 15 16 17 18
// 19 20 21 22 23 24 25
// 26 27 28 29 30 31
//
// 1. January 4th is a Saturday.
// 2. Its day number is 6.
// 3. Simply subtract 5 days from Saturday.
// 4. The first week of the year begins on Monday, December 30. Simple!
//
// v = Ext.Date.clearTime(new Date(week1monday.getTime() + ((W - 1) * 604800000)));
// (This is essentially doing the same thing as above but for the week rather than the day)
"year = y || (new Date()).getFullYear(),",
"jan4 = new Date(year, 0, 4, 0, 0, 0),",
"week1monday = new Date(jan4.getTime() - ((jan4.getDay() - 1) * 86400000));",
"v = Ext.Date.clearTime(new Date(week1monday.getTime() + ((W - 1) * 604800000)));",
"} else {",
// plain old Date object
// handle years < 100 properly
"v = me.add(new Date(y < 100 ? 100 : y, m, d, h, i, s, ms), me.YEAR, y < 100 ? y - 100 : 0);",
"}",
"}",
"}",
"}",
"if(v){",
// favor UTC offset over GMT offset
"if(zz != null){",
// reset to UTC, then add offset
"v = me.add(v, me.SECOND, -v.getTimezoneOffset() * 60 - zz);",
"}else if(o){",
// reset to GMT, then add offset
"v = me.add(v, me.MINUTE, -v.getTimezoneOffset() + (sn == '+'? -1 : 1) * (hr * 60 + mn));",
"}",
"}",
"return v;"
].join('\n');
// create private copy of Ext JS'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(numberTokenRe, function(m, i) {
return args[i];
});
}
Ext.apply(utilDate, {
/**
* Returns the current timestamp.
* @return {Number} Milliseconds since UNIX epoch.
* @method
*/
now: Date.now || function() {
return +new Date();
},
/**
* @private
* Private for now
*/
toString: function(date) {
var pad = Ext.String.leftPad;
return date.getFullYear() + "-"
+ pad(date.getMonth() + 1, 2, '0') + "-"
+ pad(date.getDate(), 2, '0') + "T"
+ pad(date.getHours(), 2, '0') + ":"
+ pad(date.getMinutes(), 2, '0') + ":"
+ pad(date.getSeconds(), 2, '0');
},
/**
* Returns the number of milliseconds between two dates.
* @param {Date} dateA The first date.
* @param {Date} [dateB=new Date()] (optional) The second date.
* @return {Number} The difference in milliseconds
*/
getElapsed: function(dateA, dateB) {
return Math.abs(dateA - (dateB || utilDate.now()));
},
/**
* Global flag which determines if strict date parsing should be used.
* Strict date parsing will not roll-over invalid dates, which is the
* default behavior of JavaScript Date objects.
* (see {@link #parse} for more information)
* @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 unrecognized characters as literals
};
},
/**
* An object hash in which each property is a date parsing function. The property name is the
* format string which that function parses.
*
* This object is automatically populated with date parsing functions as
* date formats are requested for Ext standard formatting strings.
*
* Custom parsing functions may be inserted into this object, keyed by a name which from then on
* may be used as a format string to {@link #parse}.
*
* Example:
*
* Ext.Date.parseFunctions['x-date-format'] = myDateParser;
*
* A parsing function should return a Date object, and is passed the following parameters:-
*
date: StringThe date string to parse.
* strict: BooleanTrue to validate date strings while parsing * (i.e. prevent JavaScript Date "rollover") (The default must be `false`). * Invalid date strings should return `null` when parsed.
*
-
*
date: DateThe Date to format.
*
-
*
y: NumberThe default year value. (defaults to undefined)
* m: NumberThe default 1-based month value. (defaults to undefined)
* d: NumberThe default day value. (defaults to undefined)
* h: NumberThe default hour value. (defaults to undefined)
* i: NumberThe default minute value. (defaults to undefined)
* s: NumberThe default second value. (defaults to undefined)
* ms: NumberThe default millisecond value. (defaults to undefined)
*
Other.awesome.Class
* will simply be loaded from ./Other/awesome/Class.js
*/
paths: {
'Ext': '.'
},
/**
* @cfg {Boolean} preserveScripts
* False to remove and optionally {@link #garbageCollect garbage-collect} asynchronously loaded scripts,
* True to retain script element for browser debugger compatibility and improved load performance.
*/
preserveScripts : true,
/**
* @cfg {String} scriptCharset
* Optional charset to specify encoding of dynamic script content.
*/
scriptCharset : undefined
},
/**
* Set the configuration for the loader. This should be called right after ext-(debug).js
* is included in the page, and before Ext.onReady. i.e:
*
*
*
*
*
* Refer to config options of {@link Ext.Loader} for the list of possible properties
*
* @param {Object} config The config object to override the default values
* @return {Ext.Loader} this
*/
setConfig: function(name, value) {
if (Ext.isObject(name) && arguments.length === 1) {
Ext.merge(Loader.config, name);
if ('paths' in name) {
Ext.app.collectNamespaces(name.paths);
}
}
else {
Loader.config[name] = (Ext.isObject(value)) ? Ext.merge(Loader.config[name], value) : value;
if (name === 'paths') {
Ext.app.collectNamespaces(value);
}
}
return Loader;
},
/**
* Get the config value corresponding to the specified name. If no name is given, will return the config object
* @param {String} name The config property name
* @return {Object}
*/
getConfig: function(name) {
if (name) {
return Loader.config[name];
}
return Loader.config;
},
/**
* Sets the path of a namespace.
* For Example:
*
* Ext.Loader.setPath('Ext', '.');
*
* @param {String/Object} name See {@link Ext.Function#flexSetter flexSetter}
* @param {String} [path] See {@link Ext.Function#flexSetter flexSetter}
* @return {Ext.Loader} this
* @method
*/
setPath: flexSetter(function(name, path) {
Loader.config.paths[name] = path;
Ext.app.namespaces[name] = true;
setPathCount++;
return Loader;
}),
/**
* Sets a batch of path entries
*
* @param {Object } paths a set of className: path mappings
* @return {Ext.Loader} this
*/
addClassPathMappings: function(paths) {
var name;
if(setPathCount == 0){
Loader.config.paths = paths;
} else {
for(name in paths){
Loader.config.paths[name] = paths[name];
}
}
setPathCount++;
return Loader;
},
/**
* Translates a className to a file path by adding the
* the proper prefix and converting the .'s to /'s. For example:
*
* Ext.Loader.setPath('My', '/path/to/My');
*
* alert(Ext.Loader.getPath('My.awesome.Class')); // alerts '/path/to/My/awesome/Class.js'
*
* Note that the deeper namespace levels, if explicitly set, are always resolved first. For example:
*
* Ext.Loader.setPath({
* 'My': '/path/to/lib',
* 'My.awesome': '/other/path/for/awesome/stuff',
* 'My.awesome.more': '/more/awesome/path'
* });
*
* alert(Ext.Loader.getPath('My.awesome.Class')); // alerts '/other/path/for/awesome/stuff/Class.js'
*
* alert(Ext.Loader.getPath('My.awesome.more.Class')); // alerts '/more/awesome/path/Class.js'
*
* alert(Ext.Loader.getPath('My.cool.Class')); // alerts '/path/to/lib/cool/Class.js'
*
* alert(Ext.Loader.getPath('Unknown.strange.Stuff')); // alerts 'Unknown/strange/Stuff.js'
*
* @param {String} className
* @return {String} path
*/
getPath: function(className) {
var path = '',
paths = Loader.config.paths,
prefix = Loader.getPrefix(className);
if (prefix.length > 0) {
if (prefix === className) {
return paths[prefix];
}
path = paths[prefix];
className = className.substring(prefix.length + 1);
}
if (path.length > 0) {
path += '/';
}
return path.replace(slashDotSlashRe, '/') + className.replace(dotRe, "/") + '.js';
},
/**
* @private
* @param {String} className
*/
getPrefix: function(className) {
var paths = Loader.config.paths,
prefix, deepestPrefix = '';
if (paths.hasOwnProperty(className)) {
return className;
}
for (prefix in paths) {
if (paths.hasOwnProperty(prefix) && prefix + '.' === className.substring(0, prefix.length + 1)) {
if (prefix.length > deepestPrefix.length) {
deepestPrefix = prefix;
}
}
}
return deepestPrefix;
},
/**
* @private
* @param {String} className
*/
isAClassNameWithAKnownPrefix: function(className) {
var prefix = Loader.getPrefix(className);
// we can only say it's really a class if className is not equal to any known namespace
return prefix !== '' && prefix !== className;
},
/**
* Loads all classes by the given names and all their direct dependencies; optionally executes
* the given callback function when finishes, within the optional scope.
*
* {@link Ext#require} is alias for {@link Ext.Loader#require}.
*
* @param {String/Array} expressions Can either be a string or an array of string
* @param {Function} fn (Optional) The callback function
* @param {Object} scope (Optional) The execution scope (`this`) of the callback function
* @param {String/Array} excludes (Optional) Classes to be excluded, useful when being used with expressions
*/
require: function(expressions, fn, scope, excludes) {
if (fn) {
fn.call(scope);
}
},
/**
* Synchronously loads all classes by the given names and all their direct dependencies; optionally
* executes the given callback function when finishes, within the optional scope.
*
* {@link Ext#syncRequire} is alias for {@link Ext.Loader#syncRequire}.
*
* @param {String/Array} expressions Can either be a string or an array of string
* @param {Function} fn (Optional) The callback function
* @param {Object} scope (Optional) The execution scope (`this`) of the callback function
* @param {String/Array} excludes (Optional) Classes to be excluded, useful when being used with expressions
*/
syncRequire: function() {},
/**
* Explicitly exclude files from being loaded. Useful when used in conjunction with a broad include expression.
* Can be chained with more `require` and `exclude` methods, eg:
*
* Ext.exclude('Ext.data.*').require('*');
*
* Ext.exclude('widget.button*').require('widget.*');
*
* {@link Ext#exclude} is alias for {@link Ext.Loader#exclude}.
*
* @param {Array} excludes
* @return {Object} object contains `require` method for chaining
*/
exclude: function(excludes) {
return {
require: function(expressions, fn, scope) {
return Loader.require(expressions, fn, scope, excludes);
},
syncRequire: function(expressions, fn, scope) {
return Loader.syncRequire(expressions, fn, scope, excludes);
}
};
},
/**
* Add a new listener to be executed when all required scripts are fully loaded
*
* @param {Function} fn The function callback to be executed
* @param {Object} scope The execution scope (this) of the callback function
* @param {Boolean} withDomReady Whether or not to wait for document dom ready as well
*/
onReady: function(fn, scope, withDomReady, options) {
var oldFn;
if (withDomReady !== false && Ext.onDocumentReady) {
oldFn = fn;
fn = function() {
Ext.onDocumentReady(oldFn, scope, options);
};
}
fn.call(scope);
}
});
var queue = [],
isClassFileLoaded = {},
isFileLoaded = {},
classNameToFilePathMap = {},
scriptElements = {},
readyListeners = [],
usedClasses = [],
requiresMap = {},
comparePriority = function(listenerA, listenerB) {
return listenerB.priority - listenerA.priority;
};
Ext.apply(Loader, {
/**
* @private
*/
documentHead: typeof document != 'undefined' && (document.head || document.getElementsByTagName('head')[0]),
/**
* Flag indicating whether there are still files being loaded
* @private
*/
isLoading: false,
/**
* Maintain the queue for all dependencies. Each item in the array is an object of the format:
*
* {
* requires: [...], // The required classes for this queue item
* callback: function() { ... } // The function to execute when all classes specified in requires exist
* }
*
* @private
*/
queue: queue,
/**
* Maintain the list of files that have already been handled so that they never get double-loaded
* @private
*/
isClassFileLoaded: isClassFileLoaded,
/**
* @private
*/
isFileLoaded: isFileLoaded,
/**
* Maintain the list of listeners to execute when all required scripts are fully loaded
* @private
*/
readyListeners: readyListeners,
/**
* Contains classes referenced in `uses` properties.
* @private
*/
optionalRequires: usedClasses,
/**
* Map of fully qualified class names to an array of dependent classes.
* @private
*/
requiresMap: requiresMap,
/**
* @private
*/
numPendingFiles: 0,
/**
* @private
*/
numLoadedFiles: 0,
/** @private */
hasFileLoadError: false,
/**
* @private
*/
classNameToFilePathMap: classNameToFilePathMap,
/**
* The number of scripts loading via loadScript.
* @private
*/
scriptsLoading: 0,
/**
* @private
*/
syncModeEnabled: false,
scriptElements: scriptElements,
/**
* Refresh all items in the queue. If all dependencies for an item exist during looping,
* it will execute the callback and call refreshQueue again. Triggers onReady when the queue is
* empty
* @private
*/
refreshQueue: function() {
var ln = queue.length,
i, item, j, requires;
// When the queue of loading classes reaches zero, trigger readiness
if (!ln && !Loader.scriptsLoading) {
return Loader.triggerReady();
}
for (i = 0; i < ln; i++) {
item = queue[i];
if (item) {
requires = item.requires;
// Don't bother checking when the number of files loaded
// is still less than the array length
if (requires.length > Loader.numLoadedFiles) {
continue;
}
// Remove any required classes that are loaded
for (j = 0; j < requires.length; ) {
if (Manager.isCreated(requires[j])) {
// Take out from the queue
arrayErase(requires, j, 1);
}
else {
j++;
}
}
// If we've ended up with no required classes, call the callback
if (item.requires.length === 0) {
arrayErase(queue, i, 1);
item.callback.call(item.scope);
Loader.refreshQueue();
break;
}
}
}
return Loader;
},
/**
* Inject a script element to document's head, call onLoad and onError accordingly
* @private
*/
injectScriptElement: function(url, onLoad, onError, scope, charset) {
var script = document.createElement('script'),
dispatched = false,
config = Loader.config,
onLoadFn = function() {
if(!dispatched) {
dispatched = true;
script.onload = script.onreadystatechange = script.onerror = null;
if (typeof config.scriptChainDelay == 'number') {
//free the stack (and defer the next script)
defer(onLoad, config.scriptChainDelay, scope);
} else {
onLoad.call(scope);
}
Loader.cleanupScriptElement(script, config.preserveScripts === false, config.garbageCollect);
}
},
onErrorFn = function(arg) {
defer(onError, 1, scope); //free the stack
Loader.cleanupScriptElement(script, config.preserveScripts === false, config.garbageCollect);
};
script.type = 'text/javascript';
script.onerror = onErrorFn;
charset = charset || config.scriptCharset;
if (charset) {
script.charset = charset;
}
/*
* IE9 Standards mode (and others) SHOULD follow the load event only
* (Note: IE9 supports both onload AND readystatechange events)
*/
if ('addEventListener' in script ) {
script.onload = onLoadFn;
} else if ('readyState' in script) { // for true to make the {@link #currency} function
* append the currency sign to the formatted value.
*
* This may be overridden in a locale file.
*/
currencyAtEnd: false,
//` tags in place of newlines. */ nl2br : function(v) { return Ext.isEmpty(v) ? '' : v.replace(nl2brRe, '
'); }, /** * Alias for {@link Ext.String#capitalize}. * @method * @inheritdoc Ext.String#capitalize */ capitalize: Ext.String.capitalize, /** * Alias for {@link Ext.String#ellipsis}. * @method * @inheritdoc Ext.String#ellipsis */ ellipsis: Ext.String.ellipsis, /** * Alias for {@link Ext.String#format}. * @method * @inheritdoc Ext.String#format */ format: Ext.String.format, /** * Alias for {@link Ext.String#htmlDecode}. * @method * @inheritdoc Ext.String#htmlDecode */ htmlDecode: Ext.String.htmlDecode, /** * Alias for {@link Ext.String#htmlEncode}. * @method * @inheritdoc Ext.String#htmlEncode */ htmlEncode: Ext.String.htmlEncode, /** * Alias for {@link Ext.String#leftPad}. * @method * @inheritdoc Ext.String#leftPad */ leftPad: Ext.String.leftPad, /** * Alias for {@link Ext.String#trim}. * @method * @inheritdoc Ext.String#trim */ trim : Ext.String.trim, /** * Parses a number or string representing margin sizes into an object. * Supports CSS-style margin declarations (e.g. 10, "10", "10 10", "10 10 10" and * "10 10 10 10" are all valid options and would return the same result). * * @param {Number/String} v The encoded margins * @return {Object} An object with margin sizes for top, right, bottom and left */ parseBox : function(box) { box = box || 0; if (typeof box === 'number') { return { top : box, right : box, bottom: box, left : box }; } var parts = box.split(' '), ln = parts.length; if (ln == 1) { parts[1] = parts[2] = parts[3] = parts[0]; } else if (ln == 2) { parts[2] = parts[0]; parts[3] = parts[1]; } else if (ln == 3) { parts[3] = parts[1]; } return { top :parseInt(parts[0], 10) || 0, right :parseInt(parts[1], 10) || 0, bottom:parseInt(parts[2], 10) || 0, left :parseInt(parts[3], 10) || 0 }; }, /** * Escapes the passed string for use in a regular expression. * @param {String} str * @return {String} */ escapeRegex : function(s) { return s.replace(/([\-.*+?\^${}()|\[\]\/\\])/g, "\\$1"); } }); }()); // @tag extras,core // @require Format.js /** * Provides the ability to execute one or more arbitrary tasks in a asynchronous manner. * Generally, you can use the singleton {@link Ext.TaskManager} instead, but if needed, * you can create separate instances of TaskRunner. Any number of separate tasks can be * started at any time and will run independently of each other. * * Example usage: * * // Start a simple clock task that updates a div once per second * var updateClock = function () { * Ext.fly('clock').update(new Date().format('g:i:s A')); * } * * var runner = new Ext.util.TaskRunner(); * var task = runner.start({ * run: updateClock, * interval: 1000 * } * * The equivalent using TaskManager: * * var task = Ext.TaskManager.start({ * run: updateClock, * interval: 1000 * }); * * To end a running task: * * task.destroy(); * * If a task needs to be started and stopped repeated over time, you can create a * {@link Ext.util.TaskRunner.Task Task} instance. * * var task = runner.newTask({ * run: function () { * // useful code * }, * interval: 1000 * }); * * task.start(); * * // ... * * task.stop(); * * // ... * * task.start(); * * A re-usable, one-shot task can be managed similar to the above: * * var task = runner.newTask({ * run: function () { * // useful code to run once * }, * repeat: 1 * }); * * task.start(); * * // ... * * task.start(); * * See the {@link #start} method for details about how to configure a task object. * * Also see {@link Ext.util.DelayedTask}. * * @constructor * @param {Number/Object} [interval=10] The minimum precision in milliseconds supported by this * TaskRunner instance. Alternatively, a config object to apply to the new instance. */ Ext.define('Ext.util.TaskRunner', { /** * @cfg {Boolean} [fireIdleEvent=true] * This may be configured `false` to inhibit firing of the {@link Ext.EventManager#idleEvent idle event} after task invocation. */ /** * @cfg interval * The timer resolution. */ interval: 10, /** * @property timerId * The id of the current timer. * @private */ timerId: null, constructor: function (interval) { var me = this; if (typeof interval == 'number') { me.interval = interval; } else if (interval) { Ext.apply(me, interval); } me.tasks = []; me.timerFn = Ext.Function.bind(me.onTick, me); }, /** * Creates a new {@link Ext.util.TaskRunner.Task Task} instance. These instances can * be easily started and stopped. * @param {Object} config The config object. For details on the supported properties, * see {@link #start}. */ newTask: function (config) { var task = new Ext.util.TaskRunner.Task(config); task.manager = this; return task; }, /** * Starts a new task. * * Before each invocation, Ext injects the property `taskRunCount` into the task object * so that calculations based on the repeat count can be performed. * * The returned task will contain a `destroy` method that can be used to destroy the * task and cancel further calls. This is equivalent to the {@link #stop} method. * * @param {Object} task A config object that supports the following properties: * @param {Function} task.run The function to execute each time the task is invoked. The * function will be called at each interval and passed the `args` argument if specified, * and the current invocation count if not. * * If a particular scope (`this` reference) is required, be sure to specify it using * the `scope` argument. * * @param {Function} task.onError The function to execute in case of unhandled * error on task.run. * * @param {Boolean} task.run.return `false` from this function to terminate the task. * * @param {Number} task.interval The frequency in milliseconds with which the task * should be invoked. * * @param {Object[]} task.args An array of arguments to be passed to the function * specified by `run`. If not specified, the current invocation count is passed. * * @param {Object} task.scope The scope (`this` reference) in which to execute the * `run` function. Defaults to the task config object. * * @param {Number} task.duration The length of time in milliseconds to invoke the task * before stopping automatically (defaults to indefinite). * * @param {Number} task.repeat The number of times to invoke the task before stopping * automatically (defaults to indefinite). * @return {Object} The task */ start: function(task) { var me = this, now = Ext.Date.now(); if (!task.pending) { me.tasks.push(task); task.pending = true; // don't allow the task to be added to me.tasks again } task.stopped = false; // might have been previously stopped... task.taskStartTime = now; task.taskRunTime = task.fireOnStart !== false ? 0 : task.taskStartTime; task.taskRunCount = 0; if (!me.firing) { if (task.fireOnStart !== false) { me.startTimer(0, now); } else { me.startTimer(task.interval, now); } } return task; }, /** * Stops an existing running task. * @param {Object} task The task to stop * @return {Object} The task */ stop: function(task) { // NOTE: we don't attempt to remove the task from me.tasks at this point because // this could be called from inside a task which would then corrupt the state of // the loop in onTick if (!task.stopped) { task.stopped = true; if (task.onStop) { task.onStop.call(task.scope || task, task); } } return task; }, /** * Stops all tasks that are currently running. */ stopAll: function() { // onTick will take care of cleaning up the mess after this point... Ext.each(this.tasks, this.stop, this); }, //------------------------------------------------------------------------- firing: false, nextExpires: 1e99, // private onTick: function () { var me = this, tasks = me.tasks, now = Ext.Date.now(), nextExpires = 1e99, len = tasks.length, expires, newTasks, i, task, rt, remove; me.timerId = null; me.firing = true; // ensure we don't startTimer during this loop... // tasks.length can be > len if start is called during a task.run call... so we // first check len to avoid tasks.length reference but eventually we need to also // check tasks.length. we avoid repeating use of tasks.length by setting len at // that time (to help the next loop) for (i = 0; i < len || i < (len = tasks.length); ++i) { task = tasks[i]; if (!(remove = task.stopped)) { expires = task.taskRunTime + task.interval; if (expires <= now) { rt = 1; // otherwise we have a stale "rt" try { rt = task.run.apply(task.scope || task, task.args || [++task.taskRunCount]); } catch (taskError) { try { if (task.onError) { rt = task.onError.call(task.scope || task, task, taskError); } } catch (ignore) { } } task.taskRunTime = now; if (rt === false || task.taskRunCount === task.repeat) { me.stop(task); remove = true; } else { remove = task.stopped; // in case stop was called by run expires = now + task.interval; } } if (!remove && task.duration && task.duration <= (now - task.taskStartTime)) { me.stop(task); remove = true; } } if (remove) { task.pending = false; // allow the task to be added to me.tasks again // once we detect that a task needs to be removed, we copy the tasks that // will carry forward into newTasks... this way we avoid O(N*N) to remove // each task from the tasks array (and ripple the array down) and also the // potentially wasted effort of making a new tasks[] even if all tasks are // going into the next wave. if (!newTasks) { newTasks = tasks.slice(0, i); // we don't set me.tasks here because callbacks can also start tasks, // which get added to me.tasks... so we will visit them in this loop // and account for their expirations in nextExpires... } } else { if (newTasks) { newTasks.push(task); // we've cloned the tasks[], so keep this one... } if (nextExpires > expires) { nextExpires = expires; // track the nearest expiration time } } } if (newTasks) { // only now can we copy the newTasks to me.tasks since no user callbacks can // take place me.tasks = newTasks; } me.firing = false; // we're done, so allow startTimer afterwards if (me.tasks.length) { // we create a new Date here because all the callbacks could have taken a long // time... we want to base the next timeout on the current time (after the // callback storm): me.startTimer(nextExpires - now, Ext.Date.now()); } // After a tick if (me.fireIdleEvent !== false) { Ext.EventManager.idleEvent.fire(); } }, // private startTimer: function (timeout, now) { var me = this, expires = now + timeout, timerId = me.timerId; // Check to see if this request is enough in advance of the current timer. If so, // we reschedule the timer based on this new expiration. if (timerId && me.nextExpires - expires > me.interval) { clearTimeout(timerId); timerId = null; } if (!timerId) { if (timeout < me.interval) { timeout = me.interval; } me.timerId = setTimeout(me.timerFn, timeout); me.nextExpires = expires; } } }, function () { var me = this, proto = me.prototype; /** * Destroys this instance, stopping all tasks that are currently running. * @method destroy */ proto.destroy = proto.stopAll; // Documented in TaskManager.js Ext.util.TaskManager = Ext.TaskManager = new me(); /** * Instances of this class are created by {@link Ext.util.TaskRunner#newTask} method. * * For details on config properties, see {@link Ext.util.TaskRunner#start}. * @class Ext.util.TaskRunner.Task */ me.Task = new Ext.Class({ isTask: true, /** * This flag is set to `true` by {@link #stop}. * @private */ stopped: true, // this avoids the odd combination of !stopped && !pending /** * Override default behavior */ fireOnStart: false, constructor: function (config) { Ext.apply(this, config); }, /** * Restarts this task, clearing it duration, expiration and run count. * @param {Number} [interval] Optionally reset this task's interval. */ restart: function (interval) { if (interval !== undefined) { this.interval = interval; } this.manager.start(this); }, /** * Starts this task if it is not already started. * @param {Number} [interval] Optionally reset this task's interval. */ start: function (interval) { if (this.stopped) { this.restart(interval); } }, /** * Stops this task. */ stop: function () { this.manager.stop(this); } }); proto = me.Task.prototype; /** * Destroys this instance, stopping this task's execution. * @method destroy */ proto.destroy = proto.stop; }); // @tag extras,core /** * A static {@link Ext.util.TaskRunner} instance that can be used to start and stop * arbitrary tasks. See {@link Ext.util.TaskRunner} for supported methods and task * config properties. * * // Start a simple clock task that updates a div once per second * var task = { * run: function(){ * Ext.fly('clock').update(new Date().format('g:i:s A')); * }, * interval: 1000 //1 second * } * * Ext.TaskManager.start(task); * * See the {@link #start} method for details about how to configure a task object. */ Ext.define('Ext.util.TaskManager', { extend: Ext.util.TaskRunner , alternateClassName: [ 'Ext.TaskManager' ], singleton: true }); // @tag extras,core // @require ../util/TaskManager.js /** * @class Ext.perf.Accumulator * @private */ Ext.define('Ext.perf.Accumulator', (function () { var currentFrame = null, khrome = Ext.global['chrome'], formatTpl, // lazy init on first request for timestamp (avoids infobar in IE until needed) // Also avoids kicking off Chrome's microsecond timer until first needed getTimestamp = function () { getTimestamp = function () { return new Date().getTime(); }; var interval, toolbox; // If Chrome is started with the --enable-benchmarking switch if (Ext.isChrome && khrome && khrome.Interval) { interval = new khrome.Interval(); interval.start(); getTimestamp = function () { return interval.microseconds() / 1000; }; } else if (window.ActiveXObject) { try { // the above technique is not very accurate for small intervals... toolbox = new ActiveXObject('SenchaToolbox.Toolbox'); Ext.senchaToolbox = toolbox; // export for other uses getTimestamp = function () { return toolbox.milliseconds; }; } catch (e) { // ignore } } else if (Date.now) { getTimestamp = Date.now; } Ext.perf.getTimestamp = Ext.perf.Accumulator.getTimestamp = getTimestamp; return getTimestamp(); }; function adjustSet (set, time) { set.sum += time; set.min = Math.min(set.min, time); set.max = Math.max(set.max, time); } function leaveFrame (time) { var totalTime = time ? time : (getTimestamp() - this.time), // do this first me = this, // me = frame accum = me.accum; ++accum.count; if (! --accum.depth) { adjustSet(accum.total, totalTime); } adjustSet(accum.pure, totalTime - me.childTime); currentFrame = me.parent; if (currentFrame) { ++currentFrame.accum.childCount; currentFrame.childTime += totalTime; } } function makeSet () { return { min: Number.MAX_VALUE, max: 0, sum: 0 }; } function makeTap (me, fn) { return function () { var frame = me.enter(), ret = fn.apply(this, arguments); frame.leave(); return ret; }; } function round (x) { return Math.round(x * 100) / 100; } function setToJSON (count, childCount, calibration, set) { var data = { avg: 0, min: set.min, max: set.max, sum: 0 }; if (count) { calibration = calibration || 0; data.sum = set.sum - childCount * calibration; data.avg = data.sum / count; // min and max cannot be easily corrected since we don't know the number of // child calls for them. } return data; } return { constructor: function (name) { var me = this; me.count = me.childCount = me.depth = me.maxDepth = 0; me.pure = makeSet(); me.total = makeSet(); me.name = name; }, statics: { getTimestamp: getTimestamp }, format: function (calibration) { if (!formatTpl) { formatTpl = new Ext.XTemplate([ '{name} - {count} call(s)', '
this will refer to the browser window.
* @param {Array} newArgs (optional) Overrides args passed to constructor
*/
me.delay = function(newDelay, newFn, newScope, newArgs) {
if (cancelOnDelay) {
me.cancel();
}
delay = newDelay || delay,
fn = newFn || fn;
scope = newScope || scope;
args = newArgs || args;
if (!me.id) {
me.id = setInterval(call, delay);
}
};
/**
* Cancel the last queued timeout
*/
me.cancel = function() {
if (me.id) {
clearInterval(me.id);
me.id = null;
}
};
};
// @tag dom,core
/**
* Represents single event type that an Observable object listens to.
* All actual listeners are tracked inside here. When the event fires,
* it calls all the registered listener functions.
*
* @private
*/
Ext.define('Ext.util.Event', function() {
var arraySlice = Array.prototype.slice,
arrayInsert = Ext.Array.insert,
toArray = Ext.Array.toArray,
DelayedTask = Ext.util.DelayedTask;
return {
/**
* @property {Boolean} isEvent
* `true` in this class to identify an object as an instantiated Event, or subclass thereof.
*/
isEvent: true,
// Private. Event suspend count
suspended: 0,
noOptions: {},
constructor: function(observable, name) {
this.name = name;
this.observable = observable;
this.listeners = [];
},
addListener: function(fn, scope, options) {
var me = this,
listeners, listener, priority, isNegativePriority, highestNegativePriorityIndex,
hasNegativePriorityIndex, length, index, i, listenerPriority;
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);
}
listeners = me.listeners;
index = length = listeners.length;
priority = options && options.priority;
highestNegativePriorityIndex = me._highestNegativePriorityIndex;
hasNegativePriorityIndex = (highestNegativePriorityIndex !== undefined);
if (priority) {
// Find the index at which to insert the listener into the listeners array,
// sorted by priority highest to lowest.
isNegativePriority = (priority < 0);
if (!isNegativePriority || hasNegativePriorityIndex) {
// If the priority is a positive number, or if it is a negative number
// and there are other existing negative priority listenrs, then we
// need to calcuate the listeners priority-order index.
// If the priority is a negative number, begin the search for priority
// order index at the index of the highest existing negative priority
// listener, otherwise begin at 0
for(i = (isNegativePriority ? highestNegativePriorityIndex : 0); i < length; i++) {
// Listeners created without options will have no "o" property
listenerPriority = listeners[i].o ? listeners[i].o.priority||0 : 0;
if (listenerPriority < priority) {
index = i;
break;
}
}
} else {
// if the priority is a negative number, and there are no other negative
// priority listeners, then no calculation is needed - the negative
// priority listener gets appended to the end of the listeners array.
me._highestNegativePriorityIndex = index;
}
} else if (hasNegativePriorityIndex) {
// listeners with a priority of 0 or undefined are appended to the end of
// the listeners array unless there are negative priority listeners in the
// listeners array, then they are inserted before the highest negative
// priority listener.
index = highestNegativePriorityIndex;
}
if (!isNegativePriority && index <= highestNegativePriorityIndex) {
me._highestNegativePriorityIndex ++;
}
if (index === length) {
me.listeners[length] = listener;
} else {
arrayInsert(me.listeners, index, [listener]);
}
}
},
createListener: function(fn, scope, o) {
scope = scope || this.observable;
var me = this,
listener = {
fn: fn,
scope: scope,
ev: me
},
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) {
listener.o = o;
if (o.single) {
handler = me.createSingle(handler, listener, o, scope);
}
if (o.target) {
handler = me.createTargeted(handler, listener, o, scope);
}
if (o.delay) {
handler = me.createDelayed(handler, listener, o, scope);
}
if (o.buffer) {
handler = me.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;
// Compare the listener's scope with *JUST THE PASSED SCOPE* if one is passed, and only fall back to the owning Observable if none is passed.
// We cannot use the test (s == scope || s == this.observable)
// Otherwise, if the Observable itself adds Ext.emptyFn as a listener, and then Ext.emptyFn is added under another scope, there will be a false match.
if (listener.fn == fn && (s == (scope || this.observable))) {
return i;
}
}
}
return - 1;
},
isListening: function(fn, scope) {
return this.findListener(fn, scope) !== -1;
},
removeListener: function(fn, scope) {
var me = this,
index,
listener,
highestNegativePriorityIndex,
k;
index = me.findListener(fn, scope);
if (index != -1) {
listener = me.listeners[index];
highestNegativePriorityIndex = me._highestNegativePriorityIndex;
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
// We can use splice directly. The IE8 bug which Ext.Array works around only affects *insertion*
// http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/6e946d03-e09f-4b22-a4dd-cd5e276bf05a/
me.listeners.splice(index, 1);
// if the listeners array contains negative priority listeners, adjust the
// internal index if needed.
if (highestNegativePriorityIndex) {
if (index < highestNegativePriorityIndex) {
me._highestNegativePriorityIndex --;
} else if (index === highestNegativePriorityIndex && index === me.listeners.length) {
delete me._highestNegativePriorityIndex;
}
}
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);
}
},
suspend: function() {
this.suspended += 1;
},
resume: function() {
if (this.suspended) {
this.suspended--;
}
},
fire: function() {
var me = this,
listeners = me.listeners,
count = listeners.length,
i,
args,
listener,
len;
if (!me.suspended && count > 0) {
me.firing = true;
args = arguments.length ? arraySlice.call(arguments, 0) : []
len = args.length;
for (i = 0; i < count; i++) {
listener = listeners[i];
if (listener.o) {
args[len] = listener.o;
}
if (listener && listener.fireFn.apply(listener.scope || me.observable, args) === false) {
return (me.firing = false);
}
}
}
me.firing = false;
return true;
},
createTargeted: function (handler, listener, o, scope) {
return function(){
if (o.target === arguments[0]){
handler.apply(scope, arguments);
}
};
},
createBuffered: function (handler, listener, o, scope) {
listener.task = new DelayedTask();
return function() {
listener.task.delay(o.buffer, handler, scope, toArray(arguments));
};
},
createDelayed: function (handler, listener, o, scope) {
return function() {
var task = new DelayedTask();
if (!listener.tasks) {
listener.tasks = [];
}
listener.tasks.push(task);
task.delay(o.delay || 10, handler, scope, toArray(arguments));
};
},
createSingle: function (handler, listener, o, scope) {
return function() {
var event = listener.ev;
if (event.removeListener(listener.fn, scope) && event.observable) {
// Removing from a regular Observable-owned, named event (not an anonymous
// event such as Ext's readyEvent): Decrement the listeners count
event.observable.hasListeners[event.name]--;
}
return handler.apply(scope, arguments);
};
}
};
});
// @tag dom,core
// @require util/Event.js
// @define Ext.EventManager
/**
* @class Ext.EventManager
* Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides
* several useful events directly.
*
* See {@link Ext.EventObject} for more details on normalized event objects.
* @singleton
*/
Ext.EventManager = new function() {
var EventManager = this,
doc = document,
win = window,
escapeRx = /\\/g,
prefix = Ext.baseCSSPrefix,
// IE9strict addEventListener has some issues with using synthetic events
supportsAddEventListener = !Ext.isIE9 && 'addEventListener' in doc,
readyEvent,
initExtCss = function() {
// find the body element
var bd = doc.body || doc.getElementsByTagName('body')[0],
cls = [prefix + 'body'],
htmlCls = [],
supportsLG = Ext.supports.CSS3LinearGradient,
supportsBR = Ext.supports.CSS3BorderRadius,
html;
if (!bd) {
return false;
}
html = bd.parentNode;
function add (c) {
cls.push(prefix + c);
}
//Let's keep this human readable!
if (Ext.isIE && Ext.isIE9m) {
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.isIE7m) {
add('ie7m');
}
if (Ext.isIE8m) {
add('ie8m');
}
if (Ext.isIE9m) {
add('ie9m');
}
if (Ext.isIE7 || Ext.isIE8) {
add('ie78');
}
}
if (Ext.isIE10) {
add('ie10');
}
if (Ext.isGecko) {
add('gecko');
if (Ext.isGecko3) {
add('gecko3');
}
if (Ext.isGecko4) {
add('gecko4');
}
if (Ext.isGecko5) {
add('gecko5');
}
}
if (Ext.isOpera) {
add('opera');
}
if (Ext.isWebKit) {
add('webkit');
}
if (Ext.isSafari) {
add('safari');
if (Ext.isSafari2) {
add('safari2');
}
if (Ext.isSafari3) {
add('safari3');
}
if (Ext.isSafari4) {
add('safari4');
}
if (Ext.isSafari5) {
add('safari5');
}
if (Ext.isSafari5_0) {
add('safari5_0')
}
}
if (Ext.isChrome) {
add('chrome');
}
if (Ext.isMac) {
add('mac');
}
if (Ext.isLinux) {
add('linux');
}
if (!supportsBR) {
add('nbr');
}
if (!supportsLG) {
add('nlg');
}
// add to the parent to allow for selectors x-strict x-border-box, also set the isBorderBox property correctly
if (html) {
if (Ext.isStrict && (Ext.isIE6 || Ext.isIE7)) {
Ext.isBorderBox = false;
}
else {
Ext.isBorderBox = true;
}
if(!Ext.isBorderBox) {
htmlCls.push(prefix + 'content-box');
}
if (Ext.isStrict) {
htmlCls.push(prefix + 'strict');
} else {
htmlCls.push(prefix + 'quirks');
}
Ext.fly(html, '_internal').addCls(htmlCls);
}
Ext.fly(bd, '_internal').addCls(cls);
return true;
};
Ext.apply(EventManager, {
/**
* Check if we have bound our global onReady listener
* @private
*/
hasBoundOnReady: false,
/**
* Check if fireDocReady has been called
* @private
*/
hasFiredReady: false,
/**
* Additionally, allow the 'DOM' listener thread to complete (usually desirable with mobWebkit, Gecko)
* before firing the entire onReady chain (high stack load on Loader) by specifying a delay value.
* Defaults to 1ms.
* @private
*/
deferReadyEvent : 1,
/*
* diags: a list of event names passed to onReadyEvent (in chron order)
* @private
*/
onReadyChain : [],
/**
* Holds references to any onReady functions
* @private
*/
readyEvent:
(function () {
readyEvent = new Ext.util.Event();
readyEvent.fire = function () {
Ext._beforeReadyTime = Ext._beforeReadyTime || new Date().getTime();
readyEvent.self.prototype.fire.apply(readyEvent, arguments);
Ext._afterReadytime = new Date().getTime();
};
return readyEvent;
}()),
/**
* Fires when an event handler finishes its run, just before returning to browser control.
*
* This includes DOM event handlers, Ajax (including JSONP) event handlers, and {@link Ext.util.TaskRunner TaskRunners}
*
* This can be useful for performing cleanup, or update tasks which need to happen only
* after all code in an event handler has been run, but which should not be executed in a timer
* due to the intervening browser reflow/repaint which would take place.
*
*/
idleEvent: new Ext.util.Event(),
/**
* detects whether the EventManager has been placed in a paused state for synchronization
* with external debugging / perf tools (PageAnalyzer)
* @private
*/
isReadyPaused: function(){
return (/[?&]ext-pauseReadyFire\b/i.test(location.search) && !Ext._continueFireReady);
},
/**
* Binds the appropriate browser event for checking if the DOM has loaded.
* @private
*/
bindReadyEvent: function() {
if (EventManager.hasBoundOnReady) {
return;
}
// Test scenario where Core is dynamically loaded AFTER window.load
if ( doc.readyState == 'complete' ) { // Firefox4+ got support for this state, others already do.
EventManager.onReadyEvent({
type: doc.readyState || 'body'
});
} else {
doc.addEventListener('DOMContentLoaded', EventManager.onReadyEvent, false);
win.addEventListener('load', EventManager.onReadyEvent, false);
EventManager.hasBoundOnReady = true;
}
},
onReadyEvent : function(e) {
if (e && e.type) {
EventManager.onReadyChain.push(e.type);
}
if (EventManager.hasBoundOnReady) {
doc.removeEventListener('DOMContentLoaded', EventManager.onReadyEvent, false);
win.removeEventListener('load', EventManager.onReadyEvent, false);
}
if (!Ext.isReady) {
EventManager.fireDocReady();
}
},
/**
* We know the document is loaded, so trigger any onReady events.
* @private
*/
fireDocReady: function() {
if (!Ext.isReady) {
Ext._readyTime = new Date().getTime();
Ext.isReady = true;
Ext.supports.init();
EventManager.onWindowUnload();
readyEvent.onReadyChain = EventManager.onReadyChain; //diags report
if (Ext.isNumber(EventManager.deferReadyEvent)) {
Ext.Function.defer(EventManager.fireReadyEvent, EventManager.deferReadyEvent);
EventManager.hasDocReadyTimer = true;
} else {
EventManager.fireReadyEvent();
}
}
},
/**
* Fires the ready event
* @private
*/
fireReadyEvent: function() {
// Unset the timer flag here since other onReady events may be
// added during the fire() call and we don't want to block them
EventManager.hasDocReadyTimer = false;
EventManager.isFiring = true;
// Ready events are all single: true, if we get to the end
// & there are more listeners, it means they were added
// inside some other ready event
while (readyEvent.listeners.length && !EventManager.isReadyPaused()) {
readyEvent.fire();
}
EventManager.isFiring = false;
EventManager.hasFiredReady = true;
Ext.EventManager.idleEvent.fire();
},
/**
* Adds a listener to be notified when the document is ready (before onload and before images are loaded).
*
* {@link Ext#onDocumentReady} is an alias for {@link Ext.EventManager#onDocumentReady}.
*
* @param {Function} fn The method the event invokes.
* @param {Object} [scope] The scope (`this` reference) in which the handler function executes.
* Defaults to the browser window.
* @param {Object} [options] Options object as passed to {@link Ext.Element#addListener}.
*/
onDocumentReady: function(fn, scope, options) {
options = options || {};
// force single, only ever fire it once
options.single = true;
readyEvent.addListener(fn, scope, options);
// If we're in the middle of firing, or we have a deferred timer
// pending, drop out since the event will be fired later
if (!(EventManager.isFiring || EventManager.hasDocReadyTimer)) {
if (Ext.isReady) {
EventManager.fireReadyEvent();
} else {
EventManager.bindReadyEvent();
}
}
},
// --------------------- event binding ---------------------
/**
* Contains a list of all document mouse downs, so we can ensure they fire even when stopEvent is called.
* @private
*/
stoppedMouseDownEvent: new Ext.util.Event(),
/**
* Options to parse for the 4th argument to addListener.
* @private
*/
propRe: /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate|freezeEvent)$/,
/**
* Get the id of the element. If one has not been assigned, automatically assign it.
* @param {HTMLElement/Ext.Element} element The element to get the id for.
* @return {String} id
*/
getId : function(element) {
var id;
element = Ext.getDom(element);
if (element === doc || element === win) {
id = element === doc ? Ext.documentId : Ext.windowId;
}
else {
id = Ext.id(element);
}
if (!Ext.cache[id]) {
Ext.addCacheEntry(id, null, element);
}
return id;
},
/**
* Convert a "config style" listener into a set of flat arguments so they can be passed to addListener
* @private
* @param {Object} element The element the event is for
* @param {Object} event The event configuration
* @param {Object} isRemove True if a removal should be performed, otherwise an add will be done.
*/
prepareListenerConfig: function(element, config, isRemove) {
var propRe = EventManager.propRe,
key, value, args;
// loop over all the keys in the object
for (key in config) {
if (config.hasOwnProperty(key)) {
// if the key is something else then an event option
if (!propRe.test(key)) {
value = config[key];
// if the value is a function it must be something like click: function() {}, scope: this
// which means that there might be multiple event listeners with shared options
if (typeof value == 'function') {
// shared options
args = [element, key, value, config.scope, config];
} else {
// if its not a function, it must be an object like click: {fn: function() {}, scope: this}
args = [element, key, value.fn, value.scope, value];
}
if (isRemove) {
EventManager.removeListener.apply(EventManager, args);
} else {
EventManager.addListener.apply(EventManager, args);
}
}
}
}
},
mouseEnterLeaveRe: /mouseenter|mouseleave/,
/**
* Normalize cross browser event differences
* @private
* @param {Object} eventName The event name
* @param {Object} fn The function to execute
* @return {Object} The new event name/function
*/
normalizeEvent: function(eventName, fn) {
if (EventManager.mouseEnterLeaveRe.test(eventName) && !Ext.supports.MouseEnterLeave) {
if (fn) {
fn = Ext.Function.createInterceptor(fn, EventManager.contains);
}
eventName = eventName == 'mouseenter' ? 'mouseover' : 'mouseout';
} else if (eventName == 'mousewheel' && !Ext.supports.MouseWheel && !Ext.isOpera) {
eventName = 'DOMMouseScroll';
}
return {
eventName: eventName,
fn: fn
};
},
/**
* Checks whether the event's relatedTarget is contained inside (or is) the element.
* @private
* @param {Object} event
*/
contains: function(event) {
event = event.browserEvent || event;
var parent = event.currentTarget,
child = EventManager.getRelatedTarget(event);
if (parent && parent.firstChild) {
while (child) {
if (child === parent) {
return false;
}
child = child.parentNode;
if (child && (child.nodeType != 1)) {
child = null;
}
}
}
return true;
},
/**
* Appends an event handler to an element. The shorthand version {@link #on} is equivalent.
* Typically you will use {@link Ext.Element#addListener} directly on an Element in favor of
* calling this version.
*
* {@link Ext.EventManager#on} is an alias for {@link Ext.EventManager#addListener}.
*
* @param {String/Ext.Element/HTMLElement/Window} 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/String} handler The handler function the event invokes. A String parameter
* is assumed to be method name in `scope` object, or Element object if no scope is provided.
* @param {Ext.EventObject} handler.event The {@link Ext.EventObject EventObject} describing the event.
* @param {Ext.dom.Element} handler.target The Element which was the target of the event.
* Note that this may be filtered by using the `delegate` option.
* @param {Object} handler.options The options object from the addListener call.
*
* @param {Object} [scope] The scope (`this` reference) in which the handler function is executed.
* Defaults to the Element.
*
* @param {Object} [options] An object containing handler configuration properties.
* This may contain any of the following properties (See {@link Ext.Element#addListener}
* for examples of how to use these options.):
* @param {Object} options.scope The scope (`this` reference) in which the handler function is executed. Defaults to the Element.
* @param {String} options.delegate A simple selector to filter the target or look for a descendant of the target
* @param {Boolean} options.stopEvent True to stop the event. That is stop propagation, and prevent the default action.
* @param {Boolean} options.preventDefault True to prevent the default action
* @param {Boolean} options.stopPropagation True to prevent event propagation
* @param {Boolean} options.normalized False to pass a browser event to the handler function instead of an Ext.EventObject
* @param {Number} options.delay The number of milliseconds to delay the invocation of the handler after te event fires.
* @param {Boolean} options.single True to add a handler to handle just the next firing of the event, and then remove itself.
* @param {Number} options.buffer Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
* by the specified number of milliseconds. If the event fires again within that time, the original
* handler is *not* invoked, but the new handler is scheduled in its place.
* @param {Ext.dom.Element} options.target Only call the handler if the event was fired on the target Element,
* *not* if the event was bubbled up from a child node.
*/
addListener: function(element, eventName, fn, scope, options) {
// Check if we've been passed a "config style" event.
if (typeof eventName !== 'string') {
EventManager.prepareListenerConfig(element, eventName);
return;
}
var dom = element.dom || Ext.getDom(element),
hasAddEventListener, bind, wrap, cache, id, cacheItem, capture;
if (typeof fn === 'string') {
fn = Ext.resolveMethod(fn, scope || element);
}
// create the wrapper function
options = options || {};
bind = EventManager.normalizeEvent(eventName, fn);
wrap = EventManager.createListenerWrap(dom, eventName, bind.fn, scope, options);
// add all required data into the event cache
cache = EventManager.getEventListenerCache(element.dom ? element : dom, eventName);
eventName = bind.eventName;
// In IE9 we prefer to use attachEvent but it's not available for some Elements (SVG)
hasAddEventListener = supportsAddEventListener || (Ext.isIE9 && !dom.attachEvent);
if (!hasAddEventListener) {
id = EventManager.normalizeId(dom);
// If there's no id we don't have any events bound, so we never
// need to clone at this point.
if (id) {
cacheItem = Ext.cache[id][eventName];
if (cacheItem && cacheItem.firing) {
// If we're in the middle of firing we want to update the class
// cache reference so it is different to the array we referenced
// when we started firing the event. Though this is a more difficult
// way of not mutating the collection while firing, a vast majority of
// the time we won't be adding listeners for the same element/event type
// while firing the same event.
cache = EventManager.cloneEventListenerCache(dom, eventName);
}
}
}
capture = !!options.capture;
cache.push({
fn: fn,
wrap: wrap,
scope: scope,
capture: capture
});
if (!hasAddEventListener) {
// If cache length is 1, it means we're binding the first event
// for this element for this type
if (cache.length === 1) {
id = EventManager.normalizeId(dom, true);
fn = Ext.Function.bind(EventManager.handleSingleEvent, EventManager, [id, eventName], true);
Ext.cache[id][eventName] = {
firing: false,
fn: fn
};
dom.attachEvent('on' + eventName, fn);
}
} else {
dom.addEventListener(eventName, wrap, capture);
}
if (dom == doc && eventName == 'mousedown') {
EventManager.stoppedMouseDownEvent.addListener(wrap);
}
},
// Handle the case where the window/document already has an id attached.
// In this case we still want to return our custom window/doc id.
normalizeId: function(dom, force) {
var id;
if (dom === document) {
id = Ext.documentId;
} else if (dom === window) {
id = Ext.windowId;
} else {
id = dom.id;
}
if (!id && force) {
id = EventManager.getId(dom);
}
return id;
},
handleSingleEvent: function(e, id, eventName) {
// Don't create a copy here, since we fire lots of events and it's likely
// that we won't add an event during a fire. Instead, we'll handle this during
// the process of adding events
var listenerCache = EventManager.getEventListenerCache(id, eventName),
attachItem = Ext.cache[id][eventName],
len, i;
// Typically this will never occur, however, the framework allows the creation
// of synthetic events in Ext.EventObject. As such, it makes it possible to fire
// off the same event on the same element during this method.
if (attachItem.firing) {
return;
}
attachItem.firing = true;
for (i = 0, len = listenerCache.length; i < len; ++i) {
listenerCache[i].wrap(e);
}
attachItem.firing = false;
},
/**
* 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.
*
* {@link Ext.EventManager#on} is an alias for {@link Ext.EventManager#addListener}.
*
* @param {String/Ext.Element/HTMLElement/Window} el The id or html element from which to remove the listener.
* @param {String} eventName The name of the event.
* @param {Function} fn The handler function to remove. **This must be a reference to the function passed
* into the {@link #addListener} call.**
* @param {Object} scope If a scope (`this` reference) was specified when the listener was added,
* then this must refer to the same object.
*/
removeListener : function(element, eventName, fn, scope) {
// handle our listener config object syntax
if (typeof eventName !== 'string') {
EventManager.prepareListenerConfig(element, eventName, true);
return;
}
var dom = Ext.getDom(element),
id, el = element.dom ? element : Ext.get(dom),
cache = EventManager.getEventListenerCache(el, eventName),
bindName = EventManager.normalizeEvent(eventName).eventName,
i = cache.length, j, cacheItem, hasRemoveEventListener,
listener, wrap;
if (!dom) {
return;
}
// In IE9 we prefer to use detachEvent but it's not available for some Elements (SVG)
hasRemoveEventListener = supportsAddEventListener || (Ext.isIE9 && !dom.detachEvent);
if (typeof fn === 'string') {
fn = Ext.resolveMethod(fn, scope || element);
}
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 (!hasRemoveEventListener) {
// if length is 1, we're removing the final event, actually
// unbind it from the element
id = EventManager.normalizeId(dom, true);
cacheItem = Ext.cache[id][bindName];
if (cacheItem && cacheItem.firing) {
// See code in addListener for why we create a copy
cache = EventManager.cloneEventListenerCache(dom, bindName);
}
if (cache.length === 1) {
fn = cacheItem.fn;
delete Ext.cache[id][bindName];
dom.detachEvent('on' + bindName, fn);
}
} else {
dom.removeEventListener(bindName, wrap, listener.capture);
}
if (wrap && dom == doc && eventName == 'mousedown') {
EventManager.stoppedMouseDownEvent.removeListener(wrap);
}
// remove listener from cache
Ext.Array.erase(cache, i, 1);
}
}
},
/**
* Removes all event handers from an element. Typically you will use {@link Ext.Element#removeAllListeners}
* directly on an Element in favor of calling this version.
* @param {String/Ext.Element/HTMLElement/Window} el The id or html element from which to remove all event handlers.
*/
removeAll : function(element) {
var id = (typeof element === 'string') ? element : element.id,
cache, events, eventName;
// If the element does not have an ID or a cache entry for its ID, then this is a no-op
if (id && (cache = Ext.cache[id])) {
events = cache.events;
for (eventName in events) {
if (events.hasOwnProperty(eventName)) {
EventManager.removeListener(element, eventName);
}
}
cache.events = {};
}
},
/**
* Recursively removes all previous added listeners from an element and its children. Typically you will use {@link Ext.Element#purgeAllListeners}
* directly on an Element in favor of calling this version.
* @param {String/Ext.Element/HTMLElement/Window} 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, childNodes;
if (eventName) {
EventManager.removeListener(element, eventName);
} else {
EventManager.removeAll(element);
}
if (dom && dom.childNodes) {
childNodes = dom.childNodes;
for (len = childNodes.length; i < len; i++) {
EventManager.purgeElement(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, wrap = function(e, args) {
// Compile the implementation upon first firing
if (!gen) {
f = ['if(!' + Ext.name + ') {return;}'];
if (options.buffer || options.delay || options.freezeEvent) {
if (options.freezeEvent) {
// If we're freezing, we still want to update the singleton event object
// as well as returning a frozen copy
f.push('e = X.EventObject.setEvent(e);');
}
f.push('e = new X.EventObjectImpl(e, ' + (options.freezeEvent ? 'true' : 'false' ) + ');');
} else {
f.push('e = X.EventObject.setEvent(e);');
}
if (options.delegate) {
// double up '\' characters so escape sequences survive the
// string-literal translation
f.push('var result, t = e.getTarget("' + (options.delegate + '').replace(escapeRx, '\\\\') + '", this);');
f.push('if(!t) {return;}');
} else {
f.push('var t = e.target, result;');
}
if (options.target) {
f.push('if(e.target !== options.target) {return;}');
}
if (options.stopEvent) {
f.push('e.stopEvent();');
} else {
if(options.preventDefault) {
f.push('e.preventDefault();');
}
if(options.stopPropagation) {
f.push('e.stopPropagation();');
}
}
if (options.normalized === false) {
f.push('e = e.browserEvent;');
}
if (options.buffer) {
f.push('(wrap.task && clearTimeout(wrap.task));');
f.push('wrap.task = setTimeout(function() {');
}
if (options.delay) {
f.push('wrap.tasks = wrap.tasks || [];');
f.push('wrap.tasks.push(setTimeout(function() {');
}
// finally call the actual handler fn
f.push('result = fn.call(scope || dom, e, t, options);');
if (options.single) {
f.push('evtMgr.removeListener(dom, ename, fn, scope);');
}
// Fire the global idle event for all events except mousemove which is too common, and
// fires too frequently and fast to be use in tiggering onIdle processing. Do not fire on page unload.
if (ename !== 'mousemove' && ename !== 'unload') {
f.push('if (evtMgr.idleEvent.listeners.length) {');
f.push('evtMgr.idleEvent.fire();');
f.push('}');
}
if (options.delay) {
f.push('}, ' + options.delay + '));');
}
if (options.buffer) {
f.push('}, ' + options.buffer + ');');
}
f.push('return result;');
gen = Ext.cacheableFunctionFactory('e', 'options', 'fn', 'scope', 'ename', 'dom', 'wrap', 'args', 'X', 'evtMgr', f.join('\n'));
}
return gen.call(dom, e, options, fn, scope, ename, dom, wrap, args, Ext, EventManager);
};
return wrap;
},
/**
* Gets the event cache object for a particular element
* @private
* @param {HTMLElement} element The element
* @return {Object} The event cache object
*/
getEventCache: function(element) {
var elementCache, eventCache, id;
if (!element) {
return [];
}
if (element.$cache) {
elementCache = element.$cache;
} else {
// getId will populate the cache for this element if it isn't already present
if (typeof element === 'string') {
id = element;
} else {
id = EventManager.getId(element);
}
elementCache = Ext.cache[id];
}
eventCache = elementCache.events || (elementCache.events = {});
return eventCache;
},
/**
* Get the event cache for a particular element for a particular event
* @private
* @param {HTMLElement} element The element
* @param {Object} eventName The event name
* @return {Array} The events for the element
*/
getEventListenerCache : function(element, eventName) {
var eventCache = EventManager.getEventCache(element);
return eventCache[eventName] || (eventCache[eventName] = []);
},
/**
* Clones 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 cloned events for the element
*/
cloneEventListenerCache: function(element, eventName){
var eventCache = EventManager.getEventCache(element),
out;
if (eventCache[eventName]) {
out = eventCache[eventName].slice(0);
} else {
out = [];
}
eventCache[eventName] = out;
return out;
},
// --------------------- utility methods ---------------------
mouseLeaveRe: /(mouseout|mouseleave)/,
mouseEnterRe: /(mouseover|mouseenter)/,
/**
* Stop the event (preventDefault and stopPropagation)
* @param {Event} event The event to stop
*/
stopEvent: function(event) {
EventManager.stopPropagation(event);
EventManager.preventDefault(event);
},
/**
* Cancels bubbling of the event.
* @param {Event} 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} event The event to prevent the default
*/
preventDefault: function(event) {
event = event.browserEvent || event;
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
// Some keys events require setting the keyCode to -1 to be prevented
try {
// all ctrl + X and F1 -> F12
if (event.ctrlKey || event.keyCode > 111 && event.keyCode < 124) {
event.keyCode = -1;
}
} catch (e) {
// see this outdated document http://support.microsoft.com/kb/934364/en-us for more info
}
}
},
/**
* Gets the related target from the event.
* @param {Object} event The event
* @return {HTMLElement} The related target.
*/
getRelatedTarget: function(event) {
event = event.browserEvent || event;
var target = event.relatedTarget;
if (!target) {
if (EventManager.mouseLeaveRe.test(event.type)) {
target = event.toElement;
} else if (EventManager.mouseEnterRe.test(event.type)) {
target = event.fromElement;
}
}
return EventManager.resolveTextNode(target);
},
/**
* Gets the x coordinate from the event
* @param {Object} event The event
* @return {Number} The x coordinate
*/
getPageX: function(event) {
return EventManager.getPageXY(event)[0];
},
/**
* Gets the y coordinate from the event
* @param {Object} event The event
* @return {Number} The y coordinate
*/
getPageY: function(event) {
return EventManager.getPageXY(event)[1];
},
/**
* Gets the x & y coordinate from the event
* @param {Object} event The event
* @return {Number[]} The x/y coordinate
*/
getPageXY: function(event) {
event = event.browserEvent || event;
var x = event.pageX,
y = event.pageY,
docEl = doc.documentElement,
body = doc.body;
// pageX/pageY not available (undefined, not null), use clientX/clientY instead
if (!x && x !== 0) {
x = event.clientX + (docEl && docEl.scrollLeft || body && body.scrollLeft || 0) - (docEl && docEl.clientLeft || body && body.clientLeft || 0);
y = event.clientY + (docEl && docEl.scrollTop || body && body.scrollTop || 0) - (docEl && docEl.clientTop || body && body.clientTop || 0);
}
return [x, y];
},
/**
* Gets the target of the event.
* @param {Object} event The event
* @return {HTMLElement} target
*/
getTarget: function(event) {
event = event.browserEvent || event;
return EventManager.resolveTextNode(event.target || event.srcElement);
},
// technically no need to browser sniff this, however it makes
// no sense to check this every time, for every event, whether
// the string is equal.
/**
* Resolve any text nodes accounting for browser differences.
* @private
* @param {HTMLElement} node The node
* @return {HTMLElement} The resolved node
*/
resolveTextNode: Ext.isGecko ?
function(node) {
if (node) {
// 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 node.nodeType == 3 ? node.parentNode: node;
}
}
}
:
function(node) {
return node && node.nodeType == 3 ? node.parentNode: node;
},
// --------------------- custom event binding ---------------------
// Keep track of the current width/height
curWidth: 0,
curHeight: 0,
/**
* Adds a listener to be notified when the browser window is resized and provides resize event buffering (100 milliseconds),
* passes new viewport width and height to handlers.
* @param {Function} fn The handler function the window resize event invokes.
* @param {Object} scope The scope (this reference) in which the handler function executes. Defaults to the browser window.
* @param {Boolean} [options] Options object as passed to {@link Ext.Element#addListener}
*/
onWindowResize: function(fn, scope, options) {
var resize = EventManager.resizeEvent;
if (!resize) {
EventManager.resizeEvent = resize = new Ext.util.Event();
EventManager.on(win, 'resize', EventManager.fireResize, null, {buffer: 100});
}
resize.addListener(fn, scope, options);
},
/**
* Fire the resize event.
* @private
*/
fireResize: function() {
var w = Ext.Element.getViewWidth(),
h = Ext.Element.getViewHeight();
//whacky problem in IE where the resize event will sometimes fire even though the w/h are the same.
if (EventManager.curHeight != h || EventManager.curWidth != w) {
EventManager.curHeight = h;
EventManager.curWidth = w;
EventManager.resizeEvent.fire(w, h);
}
},
/**
* Removes the passed window resize listener.
* @param {Function} fn The method the event invokes
* @param {Object} scope The scope of handler
*/
removeResizeListener: function(fn, scope) {
var resize = EventManager.resizeEvent;
if (resize) {
resize.removeListener(fn, scope);
}
},
/**
* Adds a listener to be notified when the browser window is unloaded.
* @param {Function} fn The handler function the window unload event invokes.
* @param {Object} scope The scope (this reference) in which the handler function executes. Defaults to the browser window.
* @param {Boolean} options Options object as passed to {@link Ext.Element#addListener}
*/
onWindowUnload: function(fn, scope, options) {
var unload = EventManager.unloadEvent;
if (!unload) {
EventManager.unloadEvent = unload = new Ext.util.Event();
EventManager.addListener(win, 'unload', EventManager.fireUnload);
}
if (fn) {
unload.addListener(fn, scope, options);
}
},
/**
* Fires the unload event for items bound with onWindowUnload
* @private
*/
fireUnload: function() {
// wrap in a try catch, could have some problems during unload
try {
// relinquish references.
doc = win = undefined;
var gridviews, i, ln,
el, cache;
EventManager.unloadEvent.fire();
// Work around FF3 remembering the last scroll position when refreshing the grid and then losing grid view
if (Ext.isGecko3) {
gridviews = Ext.ComponentQuery.query('gridview');
i = 0;
ln = gridviews.length;
for (; i < ln; i++) {
gridviews[i].scrollToTop();
}
}
// Purge all elements in the cache
cache = Ext.cache;
for (el in cache) {
if (cache.hasOwnProperty(el)) {
EventManager.removeAll(el);
}
}
} catch(e) {
}
},
/**
* Removes the passed window unload listener.
* @param {Function} fn The method the event invokes
* @param {Object} scope The scope of handler
*/
removeUnloadListener: function(fn, scope) {
var unload = EventManager.unloadEvent;
if (unload) {
unload.removeListener(fn, scope);
}
},
/**
* note 1: IE fires ONLY the keydown event on specialkey autorepeat
* note 2: Safari < 3.1, Gecko (Mac/Linux) & Opera fire only the keypress event on specialkey autorepeat
* (research done by Jan Wolter at http://unixpapa.com/js/key.html)
* @private
*/
useKeyDown: Ext.isWebKit ?
parseInt(navigator.userAgent.match(/AppleWebKit\/(\d+)/)[1], 10) >= 525 :
!((Ext.isGecko && !Ext.isWindows) || Ext.isOpera),
/**
* Indicates which event to use for getting key presses.
* @return {String} The appropriate event name.
*/
getKeyEvent: function() {
return EventManager.useKeyDown ? 'keydown' : 'keypress';
}
});
// route "< ie9-Standards" to a legacy IE onReady implementation
if(!supportsAddEventListener && document.attachEvent) {
Ext.apply( EventManager, {
/* Customized implementation for Legacy IE. The default implementation is configured for use
* with all other 'standards compliant' agents.
* References: http://javascript.nwbox.com/IEContentLoaded/
* licensed courtesy of http://developer.yahoo.com/yui/license.html
*/
/**
* This strategy has minimal benefits for Sencha solutions that build themselves (ie. minimal initial page markup).
* However, progressively-enhanced pages (with image content and/or embedded frames) will benefit the most from it.
* Browser timer resolution is too poor to ensure a doScroll check more than once on a page loaded with minimal
* assets (the readystatechange event 'complete' usually beats the doScroll timer on a 'lightly-loaded' initial document).
*/
pollScroll : function() {
var scrollable = true;
try {
document.documentElement.doScroll('left');
} catch(e) {
scrollable = false;
}
// on IE8, when running within an iFrame, document.body is not immediately available
if (scrollable && document.body) {
EventManager.onReadyEvent({
type:'doScroll'
});
} else {
/*
* minimize thrashing --
* adjusted for setTimeout's close-to-minimums (not too low),
* as this method SHOULD always be called once initially
*/
EventManager.scrollTimeout = setTimeout(EventManager.pollScroll, 20);
}
return scrollable;
},
/**
* Timer for doScroll polling
* @private
*/
scrollTimeout: null,
/* @private
*/
readyStatesRe : /complete/i,
/* @private
*/
checkReadyState: function() {
var state = document.readyState;
if (EventManager.readyStatesRe.test(state)) {
EventManager.onReadyEvent({
type: state
});
}
},
bindReadyEvent: function() {
var topContext = true;
if (EventManager.hasBoundOnReady) {
return;
}
//are we in an IFRAME? (doScroll ineffective here)
try {
topContext = window.frameElement === undefined;
} catch(e) {
// If we throw an exception, it means we're probably getting access denied,
// which means we're in an iframe cross domain.
topContext = false;
}
if (!topContext || !doc.documentElement.doScroll) {
EventManager.pollScroll = Ext.emptyFn; //then noop this test altogether
}
// starts doScroll polling if necessary
if (EventManager.pollScroll() === true) {
return;
}
// Core is loaded AFTER initial document write/load ?
if (doc.readyState == 'complete' ) {
EventManager.onReadyEvent({type: 'already ' + (doc.readyState || 'body') });
} else {
doc.attachEvent('onreadystatechange', EventManager.checkReadyState);
window.attachEvent('onload', EventManager.onReadyEvent);
EventManager.hasBoundOnReady = true;
}
},
onReadyEvent : function(e) {
if (e && e.type) {
EventManager.onReadyChain.push(e.type);
}
if (EventManager.hasBoundOnReady) {
document.detachEvent('onreadystatechange', EventManager.checkReadyState);
window.detachEvent('onload', EventManager.onReadyEvent);
}
if (Ext.isNumber(EventManager.scrollTimeout)) {
clearTimeout(EventManager.scrollTimeout);
delete EventManager.scrollTimeout;
}
if (!Ext.isReady) {
EventManager.fireDocReady();
}
},
//diags: a list of event types passed to onReadyEvent (in chron order)
onReadyChain : []
});
}
/**
* Adds a function to be called when the DOM is ready, and all required classes have been loaded.
*
* If the DOM is ready and all classes are loaded, the passed function is executed immediately.
* @member Ext
* @method onReady
* @param {Function} fn The function callback to be executed
* @param {Object} scope The execution scope (`this` reference) of the callback function
* @param {Object} options The options to modify the listener as passed to {@link Ext.util.Observable#addListener addListener}.
*/
Ext.onReady = function(fn, scope, options) {
Ext.Loader.onReady(fn, scope, true, options);
};
/**
* @member Ext
* @method onDocumentReady
* @inheritdoc Ext.EventManager#onDocumentReady
*/
Ext.onDocumentReady = EventManager.onDocumentReady;
/**
* @member Ext.EventManager
* @method on
* @inheritdoc Ext.EventManager#addListener
*/
EventManager.on = EventManager.addListener;
/**
* @member Ext.EventManager
* @method un
* @inheritdoc Ext.EventManager#removeListener
*/
EventManager.un = EventManager.removeListener;
Ext.onReady(initExtCss);
};
// @tag core
/**
* Base class that provides a common interface for publishing events. Subclasses are expected to to have a property
* "events" with all the events defined, and, optionally, a property "listeners" with configured listeners defined.
*
* For example:
*
* Ext.define('Employee', {
* mixins: {
* observable: 'Ext.util.Observable'
* },
*
* constructor: function (config) {
* // The Observable constructor copies all of the properties of `config` on
* // to `this` using {@link Ext#apply}. Further, the `listeners` property is
* // processed to add listeners.
* //
* this.mixins.observable.constructor.call(this, config);
*
* this.addEvents(
* 'fired',
* 'quit'
* );
* }
* });
*
* This could then be used like this:
*
* var newEmployee = new Employee({
* name: employeeName,
* listeners: {
* quit: function() {
* // By default, "this" will be the object that fired the event.
* alert(this.name + " has quit!");
* }
* }
* });
*/
Ext.define('Ext.util.Observable', function(Observable) {
// Private Destroyable class which removes listeners
var emptyArray = [],
arrayProto = Array.prototype,
arraySlice = arrayProto.slice,
ExtEvent = Ext.util.Event,
ListenerRemover = function(observable) {
// Passed a ListenerRemover: return it
if (observable instanceof ListenerRemover) {
return observable;
}
this.observable = observable;
// Called when addManagedListener is used with the event source as the second arg:
// (owner, eventSource, args...)
if (arguments[1].isObservable) {
this.managedListeners = true;
}
this.args = arraySlice.call(arguments, 1);
};
ListenerRemover.prototype.destroy = function() {
this.observable[this.managedListeners ? 'mun' : 'un'].apply(this.observable, this.args);
};
return {
/* Begin Definitions */
statics: {
/**
* Removes **all** added captures from the Observable.
*
* @param {Ext.util.Observable} o The Observable to release
* @static
*/
releaseCapture: function(o) {
o.fireEventArgs = this.prototype.fireEventArgs;
},
/**
* Starts capture on the specified Observable. All events will be passed to the supplied function with the event
* name + standard signature of the event **before** the event is fired. If the supplied function returns false,
* the event will not fire.
*
* @param {Ext.util.Observable} o The Observable to capture events from.
* @param {Function} fn The function to call when an event is fired.
* @param {Object} scope (optional) The scope (`this` reference) in which the function is executed. Defaults to
* the Observable firing the event.
* @static
*/
capture: function(o, fn, scope) {
// We're capturing calls to fireEventArgs to avoid duplication of events;
// however fn expects fireEvent's signature so we have to convert it here.
// To avoid unnecessary conversions, observe() below is aware of the changes
// and will capture fireEventArgs instead.
var newFn = function(eventName, args) {
return fn.apply(scope, [eventName].concat(args));
}
this.captureArgs(o, newFn, scope);
},
/**
* @private
*/
captureArgs: function(o, fn, scope) {
o.fireEventArgs = Ext.Function.createInterceptor(o.fireEventArgs, fn, scope);
},
/**
* Sets observability on the passed class constructor.
*
* This makes any event fired on any instance of the passed class also fire a single event through
* the **class** allowing for central handling of events on many instances at once.
*
* Usage:
*
* Ext.util.Observable.observe(Ext.data.Connection);
* Ext.data.Connection.on('beforerequest', function(con, options) {
* console.log('Ajax request made to ' + options.url);
* });
*
* @param {Function} c The class constructor to make observable.
* @param {Object} listeners An object containing a series of listeners to add. See {@link #addListener}.
* @static
*/
observe: function(cls, listeners) {
if (cls) {
if (!cls.isObservable) {
Ext.applyIf(cls, new this());
this.captureArgs(cls.prototype, cls.fireEventArgs, cls);
}
if (Ext.isObject(listeners)) {
cls.on(listeners);
}
}
return cls;
},
/**
* Prepares a given class for observable instances. This method is called when a
* class derives from this class or uses this class as a mixin.
* @param {Function} T The class constructor to prepare.
* @private
*/
prepareClass: function (T, mixin) {
// T.hasListeners is the object to track listeners on class T. This object's
// prototype (__proto__) is the "hasListeners" of T.superclass.
// Instances of T will create "hasListeners" that have T.hasListeners as their
// immediate prototype (__proto__).
if (!T.HasListeners) {
// We create a HasListeners "class" for this class. The "prototype" of the
// HasListeners class is an instance of the HasListeners class associated
// with this class's super class (or with Observable).
var HasListeners = function () {},
SuperHL = T.superclass.HasListeners || (mixin && mixin.HasListeners) ||
Observable.HasListeners;
// Make the HasListener class available on the class and its prototype:
T.prototype.HasListeners = T.HasListeners = HasListeners;
// And connect its "prototype" to the new HasListeners of our super class
// (which is also the class-level "hasListeners" instance).
HasListeners.prototype = T.hasListeners = new SuperHL();
}
}
},
/* End Definitions */
/**
* @cfg {Object} listeners
*
* A config object containing one or more event handlers to be added to this object during initialization. This
* should be a valid listeners config object as specified in the {@link #addListener} example for attaching multiple
* handlers at once.
*
* **DOM events from Ext JS {@link Ext.Component Components}**
*
* While _some_ Ext JS Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually
* only done when extra value can be added. For example the {@link Ext.view.View DataView}'s **`{@link
* Ext.view.View#itemclick itemclick}`** event passing the node clicked on. To access DOM events directly from a
* child element of a Component, we need to specify the `element` option to identify the Component property to add a
* DOM listener to:
*
* new Ext.panel.Panel({
* width: 400,
* height: 200,
* dockedItems: [{
* xtype: 'toolbar'
* }],
* listeners: {
* click: {
* element: 'el', //bind to the underlying el property on the panel
* fn: function(){ console.log('click el'); }
* },
* dblclick: {
* element: 'body', //bind to the underlying body property on the panel
* fn: function(){ console.log('dblclick body'); }
* }
* }
* });
*/
/**
* @property {Boolean} isObservable
* `true` in this class to identify an object as an instantiated Observable, or subclass thereof.
*/
isObservable: true,
/**
* @private
* Initial suspended call count. Incremented when {@link #suspendEvents} is called, decremented when {@link #resumeEvents} is called.
*/
eventsSuspended: 0,
/**
* @property {Object} hasListeners
* @readonly
* This object holds a key for any event that has a listener. The listener may be set
* directly on the instance, or on its class or a super class (via {@link #observe}) or
* on the {@link Ext.app.EventBus MVC EventBus}. The values of this object are truthy
* (a non-zero number) and falsy (0 or undefined). They do not represent an exact count
* of listeners. The value for an event is truthy if the event must be fired and is
* falsy if there is no need to fire the event.
*
* The intended use of this property is to avoid the expense of fireEvent calls when
* there are no listeners. This can be particularly helpful when one would otherwise
* have to call fireEvent hundreds or thousands of times. It is used like this:
*
* if (this.hasListeners.foo) {
* this.fireEvent('foo', this, arg1);
* }
*/
constructor: function(config) {
var me = this;
Ext.apply(me, config);
// The subclass may have already initialized it.
if (!me.hasListeners) {
me.hasListeners = new me.HasListeners();
}
me.events = me.events || {};
if (me.listeners) {
me.on(me.listeners);
me.listeners = null; //Set as an instance property to pre-empt the prototype in case any are set there.
}
if (me.bubbleEvents) {
me.enableBubble(me.bubbleEvents);
}
},
onClassExtended: function (T) {
if (!T.HasListeners) {
// Some classes derive from us and some others derive from those classes. All
// of these are passed to this method.
Observable.prepareClass(T);
}
},
// @private
// Matches options property names within a listeners specification object - property names which are never used as event names.
eventOptionsRe : /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate|element|destroyable|vertical|horizontal|freezeEvent|priority)$/,
/**
* Adds listeners to any Observable object (or Ext.Element) which are automatically removed when this Component is
* destroyed.
*
* @param {Ext.util.Observable/Ext.Element} item The item to which to add a listener/listeners.
* @param {Object/String} ename The event name, or an object containing event name properties.
* @param {Function} fn (optional) If the `ename` parameter was an event name, this is the handler function.
* @param {Object} scope (optional) If the `ename` parameter was an event name, this is the scope (`this` reference)
* in which the handler function is executed.
* @param {Object} options (optional) If the `ename` parameter was an event name, this is the
* {@link Ext.util.Observable#addListener addListener} options.
* @return {Object} **Only when the `destroyable` option is specified. **
*
* A `Destroyable` object. An object which implements the `destroy` method which removes all listeners added in this call. For example:
*
* this.btnListeners = = myButton.mon({
* destroyable: true
* mouseover: function() { console.log('mouseover'); },
* mouseout: function() { console.log('mouseout'); },
* click: function() { console.log('click'); }
* });
*
* And when those listeners need to be removed:
*
* Ext.destroy(this.btnListeners);
*
* or
*
* this.btnListeners.destroy();
*/
addManagedListener: function(item, ename, fn, scope, options, /* private */ noDestroy) {
var me = this,
managedListeners = me.managedListeners = me.managedListeners || [],
config, passedOptions;
if (typeof ename !== 'string') {
// When creating listeners using the object form, allow caller to override the default of
// using the listeners object as options.
// This is used by relayEvents, when adding its relayer so that it does not contibute
// a spurious options param to the end of the arg list.
passedOptions = arguments.length > 4 ? options : ename;
options = ename;
for (ename in options) {
if (options.hasOwnProperty(ename)) {
config = options[ename];
if (!me.eventOptionsRe.test(ename)) {
// recurse, but pass the noDestroy parameter as true so that lots of individual Destroyables are not created.
// We create a single one at the end if necessary.
me.addManagedListener(item, ename, config.fn || config, config.scope || options.scope || scope, config.fn ? config : passedOptions, true);
}
}
}
if (options && options.destroyable) {
return new ListenerRemover(me, item, options);
}
}
else {
if (typeof fn === 'string') {
scope = scope || me;
fn = Ext.resolveMethod(fn, scope);
}
managedListeners.push({
item: item,
ename: ename,
fn: fn,
scope: scope,
options: options
});
item.on(ename, fn, scope, options);
// The 'noDestroy' flag is sent if we're looping through a hash of listeners passing each one to addManagedListener separately
if (!noDestroy && options && options.destroyable) {
return new ListenerRemover(me, item, ename, fn, scope);
}
}
},
/**
* Removes listeners that were added by the {@link #mon} method.
*
* @param {Ext.util.Observable/Ext.Element} item The item from which to remove a listener/listeners.
* @param {Object/String} ename The event name, or an object containing event name properties.
* @param {Function} fn (optional) If the `ename` parameter was an event name, this is the handler function.
* @param {Object} scope (optional) If the `ename` parameter was an event name, this is the scope (`this` reference)
* in which the handler function is executed.
*/
removeManagedListener: function(item, ename, fn, scope) {
var me = this,
options,
config,
managedListeners,
length,
i, func;
if (typeof ename !== 'string') {
options = ename;
for (ename in options) {
if (options.hasOwnProperty(ename)) {
config = options[ename];
if (!me.eventOptionsRe.test(ename)) {
me.removeManagedListener(item, ename, config.fn || config, config.scope || options.scope || scope);
}
}
}
} else {
managedListeners = me.managedListeners ? me.managedListeners.slice() : [];
if (typeof fn === 'string') {
scope = scope || me;
fn = Ext.resolveMethod(fn, scope);
}
for (i = 0, length = managedListeners.length; i < length; i++) {
me.removeManagedListenerItem(false, managedListeners[i], item, ename, fn, scope);
}
}
},
/**
* Fires the specified event with the passed parameters (minus the event name, plus the `options` object passed
* to {@link #addListener}).
*
* An event may be set to bubble up an Observable parent hierarchy (See {@link Ext.Component#getBubbleTarget}) by
* calling {@link #enableBubble}.
*
* @param {String} eventName The name of the event to fire.
* @param {Object...} args Variable number of parameters are passed to handlers.
* @return {Boolean} returns false if any of the handlers return false otherwise it returns true.
*/
fireEvent: function(eventName) {
return this.fireEventArgs(eventName, arraySlice.call(arguments, 1));
},
/**
* Fires the specified event with the passed parameter list.
*
* An event may be set to bubble up an Observable parent hierarchy (See {@link Ext.Component#getBubbleTarget}) by
* calling {@link #enableBubble}.
*
* @param {String} eventName The name of the event to fire.
* @param {Object[]} args An array of parameters which are passed to handlers.
* @return {Boolean} returns false if any of the handlers return false otherwise it returns true.
*/
fireEventArgs: function(eventName, args) {
eventName = eventName.toLowerCase();
var me = this,
events = me.events,
event = events && events[eventName],
ret = true;
// Only continue firing the event if there are listeners to be informed.
// Bubbled events will always have a listener count, so will be fired.
if (event && me.hasListeners[eventName]) {
ret = me.continueFireEvent(eventName, args || emptyArray, event.bubble);
}
return ret;
},
/**
* Continue to fire event.
* @private
*
* @param {String} eventName
* @param {Array} args
* @param {Boolean} bubbles
*/
continueFireEvent: function(eventName, args, bubbles) {
var target = this,
queue, event,
ret = true;
do {
if (target.eventsSuspended) {
if ((queue = target.eventQueue)) {
queue.push([eventName, args, bubbles]);
}
return ret;
} else {
event = target.events[eventName];
// Continue bubbling if event exists and it is `true` or the handler didn't returns false and it
// configure to bubble.
if (event && event !== true) {
if ((ret = event.fire.apply(event, args)) === false) {
break;
}
}
}
} while (bubbles && (target = target.getBubbleParent()));
return ret;
},
/**
* Gets the bubbling parent for an Observable
* @private
* @return {Ext.util.Observable} The bubble parent. null is returned if no bubble target exists
*/
getBubbleParent: function() {
var me = this, parent = me.getBubbleTarget && me.getBubbleTarget();
if (parent && parent.isObservable) {
return parent;
}
return null;
},
/**
* Appends an event handler to this object. For example:
*
* myGridPanel.on("mouseover", this.onMouseOver, this);
*
* The method also allows for a single argument to be passed which is a config object
* containing properties which specify multiple events. For example:
*
* myGridPanel.on({
* cellClick: this.onCellClick,
* mouseover: this.onMouseOver,
* mouseout: this.onMouseOut,
* scope: this // Important. Ensure "this" is correct during handler execution
* });
*
* One can also specify options for each event handler separately:
*
* myGridPanel.on({
* cellClick: {fn: this.onCellClick, scope: this, single: true},
* mouseover: {fn: panel.onMouseOver, scope: panel}
* });
*
* *Names* of methods in a specified scope may also be used. Note that
* `scope` MUST be specified to use this option:
*
* myGridPanel.on({
* cellClick: {fn: 'onCellClick', scope: this, single: true},
* mouseover: {fn: 'onMouseOver', scope: panel}
* });
*
* @param {String/Object} eventName The name of the event to listen for.
* May also be an object who's property names are event names.
*
* @param {Function} [fn] The method the event invokes, or *if `scope` is specified, the *name* of the method within
* the specified `scope`. Will be called with arguments
* given to {@link Ext.util.Observable#fireEvent} plus the `options` parameter described below.
*
* @param {Object} [scope] The scope (`this` reference) in which the handler function is
* executed. **If omitted, defaults to the object which fired the event.**
*
* @param {Object} [options] An object containing handler configuration.
*
* **Note:** Unlike in ExtJS 3.x, the options object will also be passed as the last
* argument to every event handler.
*
* This object may contain any of the following properties:
*
* @param {Object} options.scope
* The scope (`this` reference) in which the handler function is executed. **If omitted,
* defaults to the object which fired the event.**
*
* @param {Number} options.delay
* The number of milliseconds to delay the invocation of the handler after the event fires.
*
* @param {Boolean} options.single
* True to add a handler to handle just the next firing of the event, and then remove itself.
*
* @param {Number} options.buffer
* Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
* by the specified number of milliseconds. If the event fires again within that time,
* the original handler is _not_ invoked, but the new handler is scheduled in its place.
*
* @param {Ext.util.Observable} options.target
* Only call the handler if the event was fired on the target Observable, _not_ if the event
* was bubbled up from a child Observable.
*
* @param {String} options.element
* **This option is only valid for listeners bound to {@link Ext.Component Components}.**
* The name of a Component property which references an element to add a listener to.
*
* This option is useful during Component construction to add DOM event listeners to elements of
* {@link Ext.Component Components} which will exist only after the Component is rendered.
* For example, to add a click listener to a Panel's body:
*
* new Ext.panel.Panel({
* title: 'The title',
* listeners: {
* click: this.handlePanelClick,
* element: 'body'
* }
* });
*
* @param {Boolean} [options.destroyable=false]
* When specified as `true`, the function returns A `Destroyable` object. An object which implements the `destroy` method which removes all listeners added in this call.
*
* @param {Number} [options.priority]
* An optional numeric priority that determines the order in which event handlers
* are run. Event handlers with no priority will be run as if they had a priority
* of 0. Handlers with a higher priority will be prioritized to run sooner than
* those with a lower priority. Negative numbers can be used to set a priority
* lower than the default. Internally, the framework uses a range of 1000 or
* greater, and -1000 or lesser for handers that are intended to run before or
* after all others, so it is recommended to stay within the range of -999 to 999
* when setting the priority of event handlers in application-level code.
*
* **Combining Options**
*
* Using the options argument, it is possible to combine different types of listeners:
*
* A delayed, one-time listener.
*
* myPanel.on('hide', this.handleClick, this, {
* single: true,
* delay: 100
* });
*
* @return {Object} **Only when the `destroyable` option is specified. **
*
* A `Destroyable` object. An object which implements the `destroy` method which removes all listeners added in this call. For example:
*
* this.btnListeners = = myButton.on({
* destroyable: true
* mouseover: function() { console.log('mouseover'); },
* mouseout: function() { console.log('mouseout'); },
* click: function() { console.log('click'); }
* });
*
* And when those listeners need to be removed:
*
* Ext.destroy(this.btnListeners);
*
* or
*
* this.btnListeners.destroy();
*/
addListener: function(ename, fn, scope, options) {
var me = this,
config, event,
prevListenerCount = 0;
// Object listener hash passed
if (typeof ename !== 'string') {
options = ename;
for (ename in options) {
if (options.hasOwnProperty(ename)) {
config = options[ename];
if (!me.eventOptionsRe.test(ename)) {
/* This would be an API change so check removed until https://sencha.jira.com/browse/EXTJSIV-7183 is fully implemented in 4.2
// Test must go here as well as in the simple form because of the attempted property access here on the config object.
*/
me.addListener(ename, config.fn || config, config.scope || options.scope, config.fn ? config : options);
}
}
}
if (options && options.destroyable) {
return new ListenerRemover(me, options);
}
}
// String, function passed
else {
ename = ename.toLowerCase();
event = me.events[ename];
if (event && event.isEvent) {
prevListenerCount = event.listeners.length;
} else {
me.events[ename] = event = new ExtEvent(me, ename);
}
// Allow listeners: { click: 'onClick', scope: myObject }
if (typeof fn === 'string') {
scope = scope || me;
fn = Ext.resolveMethod(fn, scope);
}
event.addListener(fn, scope, options);
// If a new listener has been added (Event.addListener rejects duplicates of the same fn+scope)
// then increment the hasListeners counter
if (event.listeners.length !== prevListenerCount) {
me.hasListeners._incr_(ename);
}
if (options && options.destroyable) {
return new ListenerRemover(me, ename, fn, scope, options);
}
}
},
/**
* Removes an event handler.
*
* @param {String} eventName The type of event the handler was associated with.
* @param {Function} fn The handler to remove. **This must be a reference to the function passed into the
* {@link Ext.util.Observable#addListener} call.**
* @param {Object} scope (optional) The scope originally specified for the handler. It must be the same as the
* scope argument specified in the original call to {@link Ext.util.Observable#addListener} or the listener will not be removed.
*/
removeListener: function(ename, fn, scope) {
var me = this,
config,
event,
options;
if (typeof ename !== 'string') {
options = ename;
for (ename in options) {
if (options.hasOwnProperty(ename)) {
config = options[ename];
if (!me.eventOptionsRe.test(ename)) {
me.removeListener(ename, config.fn || config, config.scope || options.scope);
}
}
}
} else {
ename = ename.toLowerCase();
event = me.events[ename];
if (event && event.isEvent) {
if (typeof fn === 'string') {
scope = scope || me;
fn = Ext.resolveMethod(fn, scope);
}
if (event.removeListener(fn, scope)) {
me.hasListeners._decr_(ename);
}
}
}
},
/**
* Removes all listeners for this object including the managed listeners
*/
clearListeners: function() {
var events = this.events,
hasListeners = this.hasListeners,
event,
key;
for (key in events) {
if (events.hasOwnProperty(key)) {
event = events[key];
if (event.isEvent) {
delete hasListeners[key];
event.clearListeners();
}
}
}
this.clearManagedListeners();
},
/**
* Removes all managed listeners for this object.
*/
clearManagedListeners : function() {
var managedListeners = this.managedListeners || [],
i = 0,
len = managedListeners.length;
for (; i < len; i++) {
this.removeManagedListenerItem(true, managedListeners[i]);
}
this.managedListeners = [];
},
/**
* Remove a single managed listener item
* @private
* @param {Boolean} isClear True if this is being called during a clear
* @param {Object} managedListener The managed listener item
* See removeManagedListener for other args
*/
removeManagedListenerItem: function(isClear, managedListener, item, ename, fn, scope){
if (isClear || (managedListener.item === item && managedListener.ename === ename && (!fn || managedListener.fn === fn) && (!scope || managedListener.scope === scope))) {
managedListener.item.un(managedListener.ename, managedListener.fn, managedListener.scope);
if (!isClear) {
Ext.Array.remove(this.managedListeners, managedListener);
}
}
},
/**
* Adds the specified events to the list of events which this Observable may fire.
*
* @param {Object/String...} eventNames Either an object with event names as properties with
* a value of `true`. For example:
*
* this.addEvents({
* storeloaded: true,
* storecleared: true
* });
*
* Or any number of event names as separate parameters. For example:
*
* this.addEvents('storeloaded', 'storecleared');
*
*/
addEvents: function(o) {
var me = this,
events = me.events || (me.events = {}),
arg, args, i;
if (typeof o == 'string') {
for (args = arguments, i = args.length; i--; ) {
arg = args[i];
if (!events[arg]) {
events[arg] = true;
}
}
} else {
Ext.applyIf(me.events, o);
}
},
/**
* Checks to see if this object has any listeners for a specified event, or whether the event bubbles. The answer
* indicates whether the event needs firing or not.
*
* @param {String} eventName The name of the event to check for
* @return {Boolean} `true` if the event is being listened for or bubbles, else `false`
*/
hasListener: function(ename) {
return !!this.hasListeners[ename.toLowerCase()];
},
/**
* Suspends the firing of all events. (see {@link #resumeEvents})
*
* @param {Boolean} queueSuspended Pass as true to queue up suspended events to be fired
* after the {@link #resumeEvents} call instead of discarding all suspended events.
*/
suspendEvents: function(queueSuspended) {
this.eventsSuspended += 1;
if (queueSuspended && !this.eventQueue) {
this.eventQueue = [];
}
},
/**
* Suspends firing of the named event(s).
*
* After calling this method to suspend events, the events will no longer fire when requested to fire.
*
* **Note that if this is called multiple times for a certain event, the converse method
* {@link #resumeEvent} will have to be called the same number of times for it to resume firing.**
*
* @param {String...} eventName Multiple event names to suspend.
*/
suspendEvent: function(eventName) {
var len = arguments.length,
i, event;
for (i = 0; i < len; i++) {
event = this.events[arguments[i]];
// If it exists, and is an Event object (not still a boolean placeholder), suspend it
if (event && event.suspend) {
event.suspend();
}
}
},
/**
* Resumes firing of the named event(s).
*
* After calling this method to resume events, the events will fire when requested to fire.
*
* **Note that if the {@link #suspendEvent} method is called multiple times for a certain event,
* this converse method will have to be called the same number of times for it to resume firing.**
*
* @param {String...} eventName Multiple event names to resume.
*/
resumeEvent: function() {
var len = arguments.length,
i, event;
for (i = 0; i < len; i++) {
// If it exists, and is an Event object (not still a boolean placeholder), resume it
event = this.events[arguments[i]];
if (event && event.resume) {
event.resume();
}
}
},
/**
* Resumes firing events (see {@link #suspendEvents}).
*
* If events were suspended using the `queueSuspended` parameter, then all events fired
* during event suspension will be sent to any listeners now.
*/
resumeEvents: function() {
var me = this,
queued = me.eventQueue,
qLen, q;
if (me.eventsSuspended && ! --me.eventsSuspended) {
delete me.eventQueue;
if (queued) {
qLen = queued.length;
for (q = 0; q < qLen; q++) {
me.continueFireEvent.apply(me, queued[q]);
}
}
}
},
/**
* Relays selected events from the specified Observable as if the events were fired by `this`.
*
* For example if you are extending Grid, you might decide to forward some events from store.
* So you can do this inside your initComponent:
*
* this.relayEvents(this.getStore(), ['load']);
*
* The grid instance will then have an observable 'load' event which will be passed the
* parameters of the store's load event and any function fired with the grid's load event
* would have access to the grid using the `this` keyword.
*
* @param {Object} origin The Observable whose events this object is to relay.
* @param {String[]} events Array of event names to relay.
* @param {String} [prefix] A common prefix to prepend to the event names. For example:
*
* this.relayEvents(this.getStore(), ['load', 'clear'], 'store');
*
* Now the grid will forward 'load' and 'clear' events of store as 'storeload' and 'storeclear'.
*
* @return {Object} A `Destroyable` object. An object which implements the `destroy` method which, when destroyed, removes all relayers. For example:
*
* this.storeRelayers = this.relayEvents(this.getStore(), ['load', 'clear'], 'store');
*
* Can be undone by calling
*
* Ext.destroy(this.storeRelayers);
*
* or
* this.store.relayers.destroy();
*/
relayEvents : function(origin, events, prefix) {
var me = this,
len = events.length,
i = 0,
oldName,
relayers = {};
for (; i < len; i++) {
oldName = events[i];
// Build up the listener hash.
relayers[oldName] = me.createRelayer(prefix ? prefix + oldName : oldName);
}
// Add the relaying listeners as ManagedListeners so that they are removed when this.clearListeners is called (usually when _this_ is destroyed)
// Explicitly pass options as undefined so that the listener does not get an extra options param
// which then has to be sliced off in the relayer.
me.mon(origin, relayers, null, null, undefined);
// relayed events are always destroyable.
return new ListenerRemover(me, origin, relayers);
},
/**
* @private
* Creates an event handling function which refires the event from this object as the passed event name.
* @param {String} newName The name under which to refire the passed parameters.
* @param {Array} beginEnd (optional) The caller can specify on which indices to slice.
* @returns {Function}
*/
createRelayer: function(newName, beginEnd) {
var me = this;
return function() {
return me.fireEventArgs.call(me, newName, beginEnd ? arraySlice.apply(arguments, beginEnd) : arguments);
};
},
/**
* Enables events fired by this Observable to bubble up an owner hierarchy by calling `this.getBubbleTarget()` if
* present. There is no implementation in the Observable base class.
*
* This is commonly used by Ext.Components to bubble events to owner Containers.
* See {@link Ext.Component#getBubbleTarget}. The default implementation in Ext.Component returns the
* Component's immediate owner. But if a known target is required, this can be overridden to access the
* required target more quickly.
*
* Example:
*
* Ext.define('Ext.overrides.form.field.Base', {
* override: 'Ext.form.field.Base',
*
* // Add functionality to Field's initComponent to enable the change event to bubble
* initComponent: function () {
* this.callParent();
* this.enableBubble('change');
* }
* });
*
* var myForm = Ext.create('Ext.form.Panel', {
* title: 'User Details',
* items: [{
* ...
* }],
* listeners: {
* change: function() {
* // Title goes red if form has been modified.
* myForm.header.setStyle('color', 'red');
* }
* }
* });
*
* @param {String/String[]} eventNames The event name to bubble, or an Array of event names.
*/
enableBubble: function(eventNames) {
if (eventNames) {
var me = this,
names = (typeof eventNames == 'string') ? arguments : eventNames,
length = names.length,
events = me.events,
ename, event, i;
for (i = 0; i < length; ++i) {
ename = names[i].toLowerCase();
event = events[ename];
if (!event || typeof event == 'boolean') {
events[ename] = event = new ExtEvent(me, ename);
}
// Event must fire if it bubbles (We don't know if anyone up the
// bubble hierarchy has listeners added)
me.hasListeners._incr_(ename);
event.bubble = true;
}
}
}
};
}, function() {
var Observable = this,
proto = Observable.prototype,
HasListeners = function () {},
prepareMixin = function (T) {
if (!T.HasListeners) {
var proto = T.prototype;
// Classes that use us as a mixin (best practice) need to be prepared.
Observable.prepareClass(T, this);
// Now that we are mixed in to class T, we need to watch T for derivations
// and prepare them also.
T.onExtended(function (U) {
Observable.prepareClass(U);
});
// Also, if a class uses us as a mixin and that class is then used as
// a mixin, we need to be notified of that as well.
if (proto.onClassMixedIn) {
// play nice with other potential overrides...
Ext.override(T, {
onClassMixedIn: function (U) {
prepareMixin.call(this, U);
this.callParent(arguments);
}
});
} else {
// just us chickens, so add the method...
proto.onClassMixedIn = function (U) {
prepareMixin.call(this, U);
};
}
}
},
globalEvents;
HasListeners.prototype = {
//$$: 42 // to make sure we have a proper prototype
_decr_: function (ev) {
if (! --this[ev]) {
// Delete this entry, since 0 does not mean no one is listening, just
// that no one is *directly* listening. This allows the eventBus or
// class observers to "poke" through and expose their presence.
delete this[ev];
}
},
_incr_: function (ev) {
if (this.hasOwnProperty(ev)) {
// if we already have listeners at this level, just increment the count...
++this[ev];
} else {
// otherwise, start the count at 1 (which hides whatever is in our prototype
// chain)...
this[ev] = 1;
}
}
};
proto.HasListeners = Observable.HasListeners = HasListeners;
Observable.createAlias({
/**
* @method
* Shorthand for {@link #addListener}.
* @inheritdoc Ext.util.Observable#addListener
*/
on: 'addListener',
/**
* @method
* Shorthand for {@link #removeListener}.
* @inheritdoc Ext.util.Observable#removeListener
*/
un: 'removeListener',
/**
* @method
* Shorthand for {@link #addManagedListener}.
* @inheritdoc Ext.util.Observable#addManagedListener
*/
mon: 'addManagedListener',
/**
* @method
* Shorthand for {@link #removeManagedListener}.
* @inheritdoc Ext.util.Observable#removeManagedListener
*/
mun: 'removeManagedListener'
});
//deprecated, will be removed in 5.0
Observable.observeClass = Observable.observe;
/**
* @member Ext
* @property {Ext.util.Observable} globalEvents
* An instance of `{@link Ext.util.Observable}` through which Ext fires global events.
*
* This Observable instance fires the following events:
*
* * **`idle`**
*
* Fires when an event handler finishes its run, just before returning to browser control.
*
* This includes DOM event handlers, Ajax (including JSONP) event handlers, and {@link Ext.util.TaskRunner TaskRunners}
*
* This can be useful for performing cleanup, or update tasks which need to happen only
* after all code in an event handler has been run, but which should not be executed in a timer
* due to the intervening browser reflow/repaint which would take place.
*
* * **`ready`**
*
* Fires when the DOM is ready, and all required classes have been loaded. Functionally
* the same as {@link Ext#onReady}, but must be called with the `single` option:
*
* Ext.on({
* ready: function() {
* console.log('document is ready!');
* },
* single: true
* });
*
* * **`resumelayouts`**
*
* Fires after global layout processing has been resumed in {@link Ext.AbstractComponent#resumeLayouts}.
*/
Ext.globalEvents = globalEvents = new Observable({
events: {
idle: Ext.EventManager.idleEvent,
ready: Ext.EventManager.readyEvent
}
});
/**
* @member Ext
* @method on
* Shorthand for the {@link Ext.util.Observable#addListener} method of the
* {@link Ext#globalEvents} Observable instance.
* @inheritdoc Ext.util.Observable#addListener
*/
Ext.on = function() {
return globalEvents.addListener.apply(globalEvents, arguments);
};
/**
* @member Ext
* @method
* Shorthand for the {@link Ext.util.Observable#removeListener} method of the
* {@link Ext#globalEvents} Observable instance.
* @inheritdoc Ext.util.Observable#removeListener
*/
Ext.un = function() {
return globalEvents.removeListener.apply(globalEvents, arguments);
};
// this is considered experimental (along with beforeMethod, afterMethod, removeMethodListener?)
// allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call
// private
function getMethodEvent(method){
var e = (this.methodEvents = this.methodEvents || {})[method],
returnValue,
v,
cancel,
obj = this,
makeCall;
if (!e) {
this.methodEvents[method] = e = {};
e.originalFn = this[method];
e.methodName = method;
e.before = [];
e.after = [];
makeCall = function(fn, scope, args){
if((v = fn.apply(scope || obj, args)) !== undefined){
if (typeof v == 'object') {
if(v.returnValue !== undefined){
returnValue = v.returnValue;
}else{
returnValue = v;
}
cancel = !!v.cancel;
}
else
if (v === false) {
cancel = true;
}
else {
returnValue = v;
}
}
};
this[method] = function(){
var args = Array.prototype.slice.call(arguments, 0),
b, i, len;
returnValue = v = undefined;
cancel = false;
for(i = 0, len = e.before.length; i < len; i++){
b = e.before[i];
makeCall(b.fn, b.scope, args);
if (cancel) {
return returnValue;
}
}
if((v = e.originalFn.apply(obj, args)) !== undefined){
returnValue = v;
}
for(i = 0, len = e.after.length; i < len; i++){
b = e.after[i];
makeCall(b.fn, b.scope, args);
if (cancel) {
return returnValue;
}
}
return returnValue;
};
}
return e;
}
Ext.apply(proto, {
onClassMixedIn: prepareMixin,
// these are considered experimental
// allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call
// adds an 'interceptor' called before the original method
beforeMethod : function(method, fn, scope){
getMethodEvent.call(this, method).before.push({
fn: fn,
scope: scope
});
},
// adds a 'sequence' called after the original method
afterMethod : function(method, fn, scope){
getMethodEvent.call(this, method).after.push({
fn: fn,
scope: scope
});
},
removeMethodListener: function(method, fn, scope){
var e = this.getMethodEvent(method),
i, len;
for(i = 0, len = e.before.length; i < len; i++){
if(e.before[i].fn == fn && e.before[i].scope == scope){
Ext.Array.erase(e.before, i, 1);
return;
}
}
for(i = 0, len = e.after.length; i < len; i++){
if(e.after[i].fn == fn && e.after[i].scope == scope){
Ext.Array.erase(e.after, i, 1);
return;
}
}
},
toggleEventLogging: function(toggle) {
Ext.util.Observable[toggle ? 'capture' : 'releaseCapture'](this, function(en) {
if (Ext.isDefined(Ext.global.console)) {
Ext.global.console.log(en, arguments);
}
});
}
});
});
// @tag dom,core
// @require EventManager.js
// @define Ext.EventObject
/**
* @class Ext.EventObject
Just as {@link Ext.Element} wraps around a native DOM node, Ext.EventObject
wraps the browser's native event-object normalizing cross-browser differences,
such as which mouse button is clicked, keys pressed, mechanisms to stop
event-propagation along with a method to prevent default actions from taking place.
For example:
function handleClick(e, t){ // e is not a standard event object, it is a Ext.EventObject
e.preventDefault();
var target = e.getTarget(); // same as t (the target HTMLElement)
...
}
var myDiv = {@link Ext#get Ext.get}("myDiv"); // get reference to an {@link Ext.Element}
myDiv.on( // 'on' is shorthand for addListener
"click", // perform an action on click of myDiv
handleClick // reference to the action handler
);
// other methods to do the same:
Ext.EventManager.on("myDiv", 'click', handleClick);
Ext.EventManager.addListener("myDiv", 'click', handleClick);
* @singleton
* @markdown
*/
Ext.define('Ext.EventObjectImpl', {
/** Key constant @type Number */
BACKSPACE: 8,
/** Key constant @type Number */
TAB: 9,
/** Key constant @type Number */
NUM_CENTER: 12,
/** Key constant @type Number */
ENTER: 13,
/** Key constant @type Number */
RETURN: 13,
/** Key constant @type Number */
SHIFT: 16,
/** Key constant @type Number */
CTRL: 17,
/** Key constant @type Number */
ALT: 18,
/** Key constant @type Number */
PAUSE: 19,
/** Key constant @type Number */
CAPS_LOCK: 20,
/** Key constant @type Number */
ESC: 27,
/** Key constant @type Number */
SPACE: 32,
/** Key constant @type Number */
PAGE_UP: 33,
/** Key constant @type Number */
PAGE_DOWN: 34,
/** Key constant @type Number */
END: 35,
/** Key constant @type Number */
HOME: 36,
/** Key constant @type Number */
LEFT: 37,
/** Key constant @type Number */
UP: 38,
/** Key constant @type Number */
RIGHT: 39,
/** Key constant @type Number */
DOWN: 40,
/** Key constant @type Number */
PRINT_SCREEN: 44,
/** Key constant @type Number */
INSERT: 45,
/** Key constant @type Number */
DELETE: 46,
/** Key constant @type Number */
ZERO: 48,
/** Key constant @type Number */
ONE: 49,
/** Key constant @type Number */
TWO: 50,
/** Key constant @type Number */
THREE: 51,
/** Key constant @type Number */
FOUR: 52,
/** Key constant @type Number */
FIVE: 53,
/** Key constant @type Number */
SIX: 54,
/** Key constant @type Number */
SEVEN: 55,
/** Key constant @type Number */
EIGHT: 56,
/** Key constant @type Number */
NINE: 57,
/** Key constant @type Number */
A: 65,
/** Key constant @type Number */
B: 66,
/** Key constant @type Number */
C: 67,
/** Key constant @type Number */
D: 68,
/** Key constant @type Number */
E: 69,
/** Key constant @type Number */
F: 70,
/** Key constant @type Number */
G: 71,
/** Key constant @type Number */
H: 72,
/** Key constant @type Number */
I: 73,
/** Key constant @type Number */
J: 74,
/** Key constant @type Number */
K: 75,
/** Key constant @type Number */
L: 76,
/** Key constant @type Number */
M: 77,
/** Key constant @type Number */
N: 78,
/** Key constant @type Number */
O: 79,
/** Key constant @type Number */
P: 80,
/** Key constant @type Number */
Q: 81,
/** Key constant @type Number */
R: 82,
/** Key constant @type Number */
S: 83,
/** Key constant @type Number */
T: 84,
/** Key constant @type Number */
U: 85,
/** Key constant @type Number */
V: 86,
/** Key constant @type Number */
W: 87,
/** Key constant @type Number */
X: 88,
/** Key constant @type Number */
Y: 89,
/** Key constant @type Number */
Z: 90,
/** Key constant @type Number */
CONTEXT_MENU: 93,
/** Key constant @type Number */
NUM_ZERO: 96,
/** Key constant @type Number */
NUM_ONE: 97,
/** Key constant @type Number */
NUM_TWO: 98,
/** Key constant @type Number */
NUM_THREE: 99,
/** Key constant @type Number */
NUM_FOUR: 100,
/** Key constant @type Number */
NUM_FIVE: 101,
/** Key constant @type Number */
NUM_SIX: 102,
/** Key constant @type Number */
NUM_SEVEN: 103,
/** Key constant @type Number */
NUM_EIGHT: 104,
/** Key constant @type Number */
NUM_NINE: 105,
/** Key constant @type Number */
NUM_MULTIPLY: 106,
/** Key constant @type Number */
NUM_PLUS: 107,
/** Key constant @type Number */
NUM_MINUS: 109,
/** Key constant @type Number */
NUM_PERIOD: 110,
/** Key constant @type Number */
NUM_DIVISION: 111,
/** Key constant @type Number */
F1: 112,
/** Key constant @type Number */
F2: 113,
/** Key constant @type Number */
F3: 114,
/** Key constant @type Number */
F4: 115,
/** Key constant @type Number */
F5: 116,
/** Key constant @type Number */
F6: 117,
/** Key constant @type Number */
F7: 118,
/** Key constant @type Number */
F8: 119,
/** Key constant @type Number */
F9: 120,
/** Key constant @type Number */
F10: 121,
/** Key constant @type Number */
F11: 122,
/** Key constant @type Number */
F12: 123,
/**
* The mouse wheel delta scaling factor. This value depends on browser version and OS and
* attempts to produce a similar scrolling experience across all platforms and browsers.
*
* To change this value:
*
* Ext.EventObjectImpl.prototype.WHEEL_SCALE = 72;
*
* @type Number
* @markdown
*/
WHEEL_SCALE: (function () {
var scale;
if (Ext.isGecko) {
// Firefox uses 3 on all platforms
scale = 3;
} else if (Ext.isMac) {
// Continuous scrolling devices have momentum and produce much more scroll than
// discrete devices on the same OS and browser. To make things exciting, Safari
// (and not Chrome) changed from small values to 120 (like IE).
if (Ext.isSafari && Ext.webKitVersion >= 532.0) {
// Safari changed the scrolling factor to match IE (for details see
// https://bugs.webkit.org/show_bug.cgi?id=24368). The WebKit version where this
// change was introduced was 532.0
// Detailed discussion:
// https://bugs.webkit.org/show_bug.cgi?id=29601
// http://trac.webkit.org/browser/trunk/WebKit/chromium/src/mac/WebInputEventFactory.mm#L1063
scale = 120;
} else {
// MS optical wheel mouse produces multiples of 12 which is close enough
// to help tame the speed of the continuous mice...
scale = 12;
}
// Momentum scrolling produces very fast scrolling, so increase the scale factor
// to help produce similar results cross platform. This could be even larger and
// it would help those mice, but other mice would become almost unusable as a
// result (since we cannot tell which device type is in use).
scale *= 3;
} else {
// IE, Opera and other Windows browsers use 120.
scale = 120;
}
return scale;
}()),
/**
* Simple click regex
* @private
*/
clickRe: /(dbl)?click/,
// safari keypress events for special keys return bad keycodes
safariKeys: {
3: 13, // enter
63234: 37, // left
63235: 39, // right
63232: 38, // up
63233: 40, // down
63276: 33, // page up
63277: 34, // page down
63272: 46, // delete
63273: 36, // home
63275: 35 // end
},
// normalize button clicks, don't see any way to feature detect this.
btnMap: Ext.isIE ? {
1: 0,
4: 1,
2: 2
} : {
0: 0,
1: 1,
2: 2
},
/**
* @property {Boolean} ctrlKey
* True if the control key was down during the event.
* In Mac this will also be true when meta key was down.
*/
/**
* @property {Boolean} altKey
* True if the alt key was down during the event.
*/
/**
* @property {Boolean} shiftKey
* True if the shift key was down during the event.
*/
constructor: function(event, freezeEvent){
if (event) {
this.setEvent(event.browserEvent || event, freezeEvent);
}
},
setEvent: function(event, freezeEvent){
var me = this, button, options;
if (event === me || (event && event.browserEvent)) { // already wrapped
return event;
}
me.browserEvent = event;
if (event) {
// normalize buttons
button = event.button ? me.btnMap[event.button] : (event.which ? event.which - 1 : -1);
if (me.clickRe.test(event.type) && button == -1) {
button = 0;
}
options = {
type: event.type,
button: button,
shiftKey: event.shiftKey,
// mac metaKey behaves like ctrlKey
ctrlKey: event.ctrlKey || event.metaKey || false,
altKey: event.altKey,
// in getKey these will be normalized for the mac
keyCode: event.keyCode,
charCode: event.charCode,
// cache the targets for the delayed and or buffered events
target: Ext.EventManager.getTarget(event),
relatedTarget: Ext.EventManager.getRelatedTarget(event),
currentTarget: event.currentTarget,
xy: (freezeEvent ? me.getXY() : null)
};
} else {
options = {
button: -1,
shiftKey: false,
ctrlKey: false,
altKey: false,
keyCode: 0,
charCode: 0,
target: null,
xy: [0, 0]
};
}
Ext.apply(me, options);
return me;
},
/**
* Stop the event (preventDefault and stopPropagation)
*/
stopEvent: function(){
this.stopPropagation();
this.preventDefault();
},
/**
* Prevents the browsers default handling of the event.
*/
preventDefault: function(){
if (this.browserEvent) {
Ext.EventManager.preventDefault(this.browserEvent);
}
},
/**
* Cancels bubbling of the event.
*/
stopPropagation: function(){
var browserEvent = this.browserEvent;
if (browserEvent) {
if (browserEvent.type == 'mousedown') {
Ext.EventManager.stoppedMouseDownEvent.fire(this);
}
Ext.EventManager.stopPropagation(browserEvent);
}
},
/**
* Gets the character code for the event.
* @return {Number}
*/
getCharCode: function(){
return this.charCode || this.keyCode;
},
/**
* Returns a normalized keyCode for the event.
* @return {Number} The key code
*/
getKey: function(){
return this.normalizeKey(this.keyCode || this.charCode);
},
/**
* Normalize key codes across browsers
* @private
* @param {Number} key The key code
* @return {Number} The normalized code
*/
normalizeKey: function(key){
// can't feature detect this
return Ext.isWebKit ? (this.safariKeys[key] || key) : key;
},
/**
* Gets the x coordinate of the event.
* @return {Number}
* @deprecated 4.0 Replaced by {@link #getX}
*/
getPageX: function(){
return this.getX();
},
/**
* Gets the y coordinate of the event.
* @return {Number}
* @deprecated 4.0 Replaced by {@link #getY}
*/
getPageY: function(){
return this.getY();
},
/**
* Gets the x coordinate of the event.
* @return {Number}
*/
getX: function() {
return this.getXY()[0];
},
/**
* Gets the y coordinate of the event.
* @return {Number}
*/
getY: function() {
return this.getXY()[1];
},
/**
* Gets the page coordinates of the event.
* @return {Number[]} The xy values like [x, y]
*/
getXY: function() {
if (!this.xy) {
// same for XY
this.xy = Ext.EventManager.getPageXY(this.browserEvent);
}
return this.xy;
},
/**
* Gets the target for the event.
* @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
* @param {Number/HTMLElement} maxDepth (optional) The max depth to search as a number or element (defaults to 10 || document.body)
* @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node
* @return {HTMLElement}
*/
getTarget : function(selector, maxDepth, returnEl){
if (selector) {
return Ext.fly(this.target).findParent(selector, maxDepth, returnEl);
}
return returnEl ? Ext.get(this.target) : this.target;
},
/**
* Gets the related target.
* @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
* @param {Number/HTMLElement} maxDepth (optional) The max depth to search as a number or element (defaults to 10 || document.body)
* @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node
* @return {HTMLElement}
*/
getRelatedTarget : function(selector, maxDepth, returnEl){
if (selector && this.relatedTarget) {
return Ext.fly(this.relatedTarget).findParent(selector, maxDepth, returnEl);
}
return returnEl ? Ext.get(this.relatedTarget) : this.relatedTarget;
},
/**
* Correctly scales a given wheel delta.
* @param {Number} delta The delta value.
*/
correctWheelDelta : function (delta) {
var scale = this.WHEEL_SCALE,
ret = Math.round(delta / scale);
if (!ret && delta) {
ret = (delta < 0) ? -1 : 1; // don't allow non-zero deltas to go to zero!
}
return ret;
},
/**
* Returns the mouse wheel deltas for this event.
* @return {Object} An object with "x" and "y" properties holding the mouse wheel deltas.
*/
getWheelDeltas : function () {
var me = this,
event = me.browserEvent,
dx = 0, dy = 0; // the deltas
if (Ext.isDefined(event.wheelDeltaX)) { // WebKit has both dimensions
dx = event.wheelDeltaX;
dy = event.wheelDeltaY;
} else if (event.wheelDelta) { // old WebKit and IE
dy = event.wheelDelta;
} else if (event.detail) { // Gecko
dy = -event.detail; // gecko is backwards
// Gecko sometimes returns really big values if the user changes settings to
// scroll a whole page per scroll
if (dy > 100) {
dy = 3;
} else if (dy < -100) {
dy = -3;
}
// Firefox 3.1 adds an axis field to the event to indicate direction of
// scroll. See https://developer.mozilla.org/en/Gecko-Specific_DOM_Events
if (Ext.isDefined(event.axis) && event.axis === event.HORIZONTAL_AXIS) {
dx = dy;
dy = 0;
}
}
return {
x: me.correctWheelDelta(dx),
y: me.correctWheelDelta(dy)
};
},
/**
* Normalizes mouse wheel y-delta across browsers. To get x-delta information, use
* {@link #getWheelDeltas} instead.
* @return {Number} The mouse wheel y-delta
*/
getWheelDelta : function(){
var deltas = this.getWheelDeltas();
return deltas.y;
},
/**
* Returns true if the target of this event is a child of el. Unless the allowEl parameter is set, it will return false if if the target is el.
* Example usage:
// Handle click on any child of an element
Ext.getBody().on('click', function(e){
if(e.within('some-el')){
alert('Clicked on a child of some-el!');
}
});
// Handle click directly on an element, ignoring clicks on child nodes
Ext.getBody().on('click', function(e,t){
if((t.id == 'some-el') && !e.within(t, true)){
alert('Clicked directly on some-el!');
}
});
HTMLEvents
*-
*
- load *
- unload *
- select *
- change *
- submit *
- reset *
- resize *
- scroll *
MouseEvents
*-
*
- click *
- dblclick *
- mousedown *
- mouseup *
- mouseover *
- mousemove *
- mouseout *
UIEvents
*-
*
- focusin *
- focusout *
- activate *
- focus *
- blur *
Returns an array of unique class names based upon the input strings, or string arrays.
*The number of parameters is unlimited.
*Example
// Add x-invalid and x-mandatory classes, do not duplicate
myElement.dom.className = Ext.core.Element.mergeClsList(this.initialClasses, 'x-invalid x-mandatory');
changed property will be true.
* @static
* @inheritable
*/
mergeClsList: function() {
var clsList, clsHash = {},
i, length, j, listLength, clsName, result = [],
changed = false,
trimRe = this.trimRe,
whitespaceRe = this.whitespaceRe;
for (i = 0, length = arguments.length; i < length; i++) {
clsList = arguments[i];
if (Ext.isString(clsList)) {
clsList = clsList.replace(trimRe, '').split(whitespaceRe);
}
if (clsList) {
for (j = 0, listLength = clsList.length; j < listLength; j++) {
clsName = clsList[j];
if (!clsHash[clsName]) {
if (i) {
changed = true;
}
clsHash[clsName] = true;
}
}
}
}
for (clsName in clsHash) {
result.push(clsName);
}
result.changed = changed;
return result;
},
/**
* Returns an array of unique class names deom the first parameter with all class names * from the second parameter removed.
*Example
// Remove x-invalid and x-mandatory classes if present.
myElement.dom.className = Ext.core.Element.removeCls(this.initialClasses, 'x-invalid x-mandatory');
existingClsList.
* @return {Array} An array of strings representing remaining class names. If class names were removed, the changed property will be true.
* @static
* @inheritable
*/
removeCls: function(existingClsList, removeClsList) {
var clsHash = {},
i, length, clsName, result = [],
changed = false,
whitespaceRe = this.whitespaceRe;
if (existingClsList) {
if (Ext.isString(existingClsList)) {
existingClsList = existingClsList.replace(this.trimRe, '').split(whitespaceRe);
}
for (i = 0, length = existingClsList.length; i < length; i++) {
clsHash[existingClsList[i]] = true;
}
}
if (removeClsList) {
if (Ext.isString(removeClsList)) {
removeClsList = removeClsList.split(whitespaceRe);
}
for (i = 0, length = removeClsList.length; i < length; i++) {
clsName = removeClsList[i];
if (clsHash[clsName]) {
changed = true;
delete clsHash[clsName];
}
}
}
for (clsName in clsHash) {
result.push(clsName);
}
result.changed = changed;
return result;
},
/**
* @property {Number}
* Visibility mode constant for use with {@link Ext.dom.Element#setVisibilityMode}.
* Use the CSS 'visibility' property to hide the element.
*
* Note that in this mode, {@link Ext.dom.Element#isVisible isVisible} may return true
* for an element even though it actually has a parent element that is hidden. For this
* reason, and in most cases, using the {@link #OFFSETS} mode is a better choice.
* @static
* @inheritable
*/
VISIBILITY: 1,
/**
* @property {Number}
* Visibility mode constant for use with {@link Ext.dom.Element#setVisibilityMode}.
* Use the CSS 'display' property to hide the element.
* @static
* @inheritable
*/
DISPLAY: 2,
/**
* @property {Number}
* Visibility mode constant for use with {@link Ext.dom.Element#setVisibilityMode}.
* Use CSS absolute positioning and top/left offsets to hide the element.
* @static
* @inheritable
*/
OFFSETS: 3,
/**
* @property {Number}
* Visibility mode constant for use with {@link Ext.dom.Element#setVisibilityMode}.
* Add or remove the {@link Ext.Layer#visibilityCls} class to hide the element.
* @static
* @inheritable
*/
ASCLASS: 4
},
constructor: function(element, forceNew) {
var me = this,
dom = typeof element == 'string'
? document.getElementById(element)
: element,
id;
// set an "el" property that references "this". This allows
// Ext.util.Positionable methods to operate on this.el.dom since it
// gets mixed into both Element and Component
me.el = me;
if (!dom) {
return null;
}
id = dom.id;
if (!forceNew && id && Ext.cache[id]) {
// element object already exists
return Ext.cache[id].el;
}
/**
* @property {HTMLElement} dom
* The DOM element
*/
me.dom = dom;
/**
* @property {String} id
* The DOM element ID
*/
me.id = id || Ext.id(dom);
me.self.addToCache(me);
},
/**
* Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
* @param {Object} o The object with the attributes
* @param {Boolean} [useSet=true] false to override the default setAttribute to use expandos.
* @return {Ext.dom.Element} this
*/
set: function(o, useSet) {
var el = this.dom,
attr,
value;
for (attr in o) {
if (o.hasOwnProperty(attr)) {
value = o[attr];
if (attr == 'style') {
this.applyStyles(value);
}
else if (attr == 'cls') {
el.className = value;
}
else if (useSet !== false) {
if (value === undefined) {
el.removeAttribute(attr);
} else {
el.setAttribute(attr, value);
}
}
else {
el[attr] = value;
}
}
}
return this;
},
/**
* @property {String} defaultUnit
* The default unit to append to CSS values where a unit isn't provided.
*/
defaultUnit: "px",
/**
* Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)
* @param {String} selector The simple selector to test
* @return {Boolean} True if this element matches the selector, else false
*/
is: function(simpleSelector) {
return Ext.DomQuery.is(this.dom, simpleSelector);
},
/**
* Returns the value of the "value" attribute
* @param {Boolean} asNumber true to parse the value as a number
* @return {String/Number}
*/
getValue: function(asNumber) {
var val = this.dom.value;
return asNumber ? parseInt(val, 10) : val;
},
/**
* Removes this element's dom reference. Note that event and cache removal is handled at {@link Ext#removeNode
* Ext.removeNode}
*/
remove: function() {
var me = this,
dom = me.dom;
if (me.isAnimate) {
me.stopAnimation();
}
if (dom) {
Ext.removeNode(dom);
delete me.dom;
}
},
/**
* Returns true if this element is an ancestor of the passed element
* @param {HTMLElement/String} el The element to check
* @return {Boolean} True if this element is an ancestor of el, else false
*/
contains: function(el) {
if (!el) {
return false;
}
var me = this,
dom = el.dom || el;
// we need el-contains-itself logic here because isAncestor does not do that:
return (dom === me.dom) || Ext.dom.AbstractElement.isAncestor(me.dom, dom);
},
/**
* Returns the value of an attribute from the element's underlying DOM node.
* @param {String} name The attribute name
* @param {String} [namespace] The namespace in which to look for the attribute
* @return {String} The attribute value
*/
getAttribute: function(name, ns) {
var dom = this.dom;
return dom.getAttributeNS(ns, name) || dom.getAttribute(ns + ":" + name) || dom.getAttribute(name) || dom[name];
},
/**
* Update the innerHTML of this element
* @param {String} html The new HTML
* @return {Ext.dom.Element} this
*/
update: function(html) {
if (this.dom) {
this.dom.innerHTML = html;
}
return this;
},
/**
* Set the innerHTML of this element
* @param {String} html The new HTML
* @return {Ext.Element} this
*/
setHTML: function(html) {
if(this.dom) {
this.dom.innerHTML = html;
}
return this;
},
/**
* Returns the innerHTML of an Element or an empty string if the element's
* dom no longer exists.
*/
getHTML: function() {
return this.dom ? this.dom.innerHTML : '';
},
/**
* Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
hide: function() {
this.setVisible(false);
return this;
},
/**
* Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
show: function() {
this.setVisible(true);
return this;
},
/**
* Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
* the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
* @param {Boolean} visible Whether the element is visible
* @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
* @return {Ext.Element} this
*/
setVisible: function(visible, animate) {
var me = this,
statics = me.self,
mode = me.getVisibilityMode(),
prefix = Ext.baseCSSPrefix;
switch (mode) {
case statics.VISIBILITY:
me.removeCls([prefix + 'hidden-display', prefix + 'hidden-offsets']);
me[visible ? 'removeCls' : 'addCls'](prefix + 'hidden-visibility');
break;
case statics.DISPLAY:
me.removeCls([prefix + 'hidden-visibility', prefix + 'hidden-offsets']);
me[visible ? 'removeCls' : 'addCls'](prefix + 'hidden-display');
break;
case statics.OFFSETS:
me.removeCls([prefix + 'hidden-visibility', prefix + 'hidden-display']);
me[visible ? 'removeCls' : 'addCls'](prefix + 'hidden-offsets');
break;
}
return me;
},
getVisibilityMode: function() {
// Only flyweights won't have a $cache object, by calling getCache the cache
// will be created for future accesses. As such, we're eliminating the method
// call since it's mostly redundant
var data = (this.$cache || this.getCache()).data,
visMode = data.visibilityMode;
if (visMode === undefined) {
data.visibilityMode = visMode = this.self.DISPLAY;
}
return visMode;
},
/**
* Use this to change the visibility mode between {@link #VISIBILITY}, {@link #DISPLAY}, {@link #OFFSETS} or {@link #ASCLASS}.
*/
setVisibilityMode: function(mode) {
(this.$cache || this.getCache()).data.visibilityMode = mode;
return this;
},
getCache: function() {
var me = this,
id = me.dom.id || Ext.id(me.dom);
// Note that we do not assign an ID to the calling object here.
// An Ext.dom.Element will have one assigned at construction, and an Ext.dom.Element.Fly must not have one.
// We assign an ID to the DOM element if it does not have one.
me.$cache = Ext.cache[id] || Ext.addCacheEntry(id, null, me.dom);
return me.$cache;
}
},
function() {
var AbstractElement = this;
/**
* @private
* @member Ext
*/
Ext.getDetachedBody = function () {
var detachedEl = AbstractElement.detachedBodyEl;
if (!detachedEl) {
detachedEl = document.createElement('div');
AbstractElement.detachedBodyEl = detachedEl = new AbstractElement.Fly(detachedEl);
detachedEl.isDetachedBody = true;
}
return detachedEl;
};
/**
* @private
* @member Ext
*/
Ext.getElementById = function (id) {
var el = document.getElementById(id),
detachedBodyEl;
if (!el && (detachedBodyEl = AbstractElement.detachedBodyEl)) {
el = detachedBodyEl.dom.querySelector('#' + Ext.escapeId(id));
}
return el;
};
/**
* @member Ext
* @method get
* @inheritdoc Ext.dom.Element#get
*/
Ext.get = function(el) {
return Ext.dom.Element.get(el);
};
this.addStatics({
/**
* @class Ext.dom.Element.Fly
* @alternateClassName Ext.dom.AbstractElement.Fly
* @extends Ext.dom.Element
*
* A non-persistent wrapper for a DOM element which may be used to execute methods of {@link Ext.dom.Element}
* upon a DOM element without creating an instance of {@link Ext.dom.Element}.
*
* A **singleton** instance of this class is returned when you use {@link Ext#fly}
*
* Because it is a singleton, this Flyweight does not have an ID, and must be used and discarded in a single line.
* You should not keep and use the reference to this singleton over multiple lines because methods that you call
* may themselves make use of {@link Ext#fly} and may change the DOM element to which the instance refers.
*/
Fly: new Ext.Class({
// Although here the class is extending from AbstractElement,
// the class will be overwritten by Element definition with
// a class extending from Element instead.
// Therefore above we document it as extending Ext.Element.
extend: AbstractElement,
/**
* @property {Boolean} isFly
* This is `true` to identify Element flyweights
*/
isFly: true,
constructor: function(dom) {
this.dom = dom;
// set an "el" property that references "this". This allows
// Ext.util.Positionable methods to operate on this.el.dom since it
// gets mixed into both Element and Component
this.el = this;
},
/**
* @private
* Attach this fliyweight instance to the passed DOM element.
*
* Note that a flightweight does **not** have an ID, and does not acquire the ID of the DOM element.
*/
attach: function (dom) {
// Attach to the passed DOM element. The same code as in Ext.Fly
this.dom = dom;
// Use cached data if there is existing cached data for the referenced DOM element,
// otherwise it will be created when needed by getCache.
this.$cache = dom.id ? Ext.cache[dom.id] : null;
return this;
}
}),
_flyweights: {},
/**
* Gets the singleton {@link Ext.dom.Element.Fly flyweight} element, with the passed node as the active element.
*
* Because it is a singleton, this Flyweight does not have an ID, and must be used and discarded in a single line.
* You may not keep and use the reference to this singleton over multiple lines because methods that you call
* may themselves make use of {@link Ext#fly} and may change the DOM element to which the instance refers.
*
* {@link Ext#fly} is alias for {@link Ext.dom.AbstractElement#fly}.
*
* Use this to make one-time references to DOM elements which are not going to be accessed again either by
* application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link
* Ext#get Ext.get} will be more appropriate to take advantage of the caching provided by the Ext.dom.Element
* class.
*
* @param {String/HTMLElement} dom The dom node or id
* @param {String} [named] Allows for creation of named reusable flyweights to prevent conflicts (e.g.
* internally Ext uses "_global")
* @return {Ext.dom.Element.Fly} The singleton flyweight object (or null if no matching element was found)
* @static
* @member Ext.dom.AbstractElement
*/
fly: function(dom, named) {
var fly = null,
_flyweights = AbstractElement._flyweights;
named = named || '_global';
dom = Ext.getDom(dom);
if (dom) {
fly = _flyweights[named] || (_flyweights[named] = new AbstractElement.Fly());
// Attach to the passed DOM element.
// This code performs the same function as Fly.attach, but inline it for efficiency
fly.dom = dom;
// Use cached data if there is existing cached data for the referenced DOM element,
// otherwise it will be created when needed by getCache.
fly.$cache = dom.id ? Ext.cache[dom.id] : null;
}
return fly;
}
});
/**
* @member Ext
* @method fly
* @inheritdoc Ext.dom.AbstractElement#fly
*/
Ext.fly = function() {
return AbstractElement.fly.apply(AbstractElement, arguments);
};
(function (proto) {
/**
* @method destroy
* @member Ext.dom.AbstractElement
* @inheritdoc Ext.dom.AbstractElement#remove
* Alias to {@link #remove}.
*/
proto.destroy = proto.remove;
/**
* Returns a child element of this element given its `id`.
* @method getById
* @member Ext.dom.AbstractElement
* @param {String} id The id of the desired child element.
* @param {Boolean} [asDom=false] True to return the DOM element, false to return a
* wrapped Element object.
*/
if (document.querySelector) {
proto.getById = function (id, asDom) {
// for normal elements getElementById is the best solution, but if the el is
// not part of the document.body, we have to resort to querySelector
var dom = document.getElementById(id) ||
this.dom.querySelector('#'+Ext.escapeId(id));
return asDom ? dom : (dom ? Ext.get(dom) : null);
};
} else {
proto.getById = function (id, asDom) {
var dom = document.getElementById(id);
return asDom ? dom : (dom ? Ext.get(dom) : null);
};
}
}(this.prototype));
});
// @tag dom,core
// @define Ext.DomHelper
// @define Ext.core.DomHelper
/**
* @class Ext.DomHelper
* @extends Ext.dom.Helper
* @alternateClassName Ext.core.DomHelper
* @singleton
*
* 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:
*
* - **tag** - The tag name of the element.
* - **children** or **cn** - An array of the same kind of element definition objects to be created and appended.
* These can be nested as deep as you want.
* - **cls** - The class attribute of the element. This will end up being either the "class" attribute on a HTML
* fragment or className for a DOM node, depending on whether DomHelper is using fragments or DOM.
* - **html** - The innerHTML for the element.
*
* **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:
*
* - **{@link #append}**
* - **{@link #insertBefore}**
* - **{@link #insertAfter}**
* - **{@link #overwrite}**
* - **{@link #createTemplate}**
* - **{@link #insertHtml}**
*
* # 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
*
*/
Ext.define('Ext.dom.Helper', (function() {
// kill repeat to save bytes
var afterbegin = 'afterbegin',
afterend = 'afterend',
beforebegin = 'beforebegin',
beforeend = 'beforeend',
ts = 'Kids: ',
* ' {#}. {name}
Name: {name}
', * 'Title: {title}
', * 'Company: {company}
', * 'Kids: ',
* ' {name}
{name}\'s favorite beverages:
', * 'Name: {name}
', * 'Kids: ',
* ' {name} Dad: {parent.name}
- ',
* '
- {$} ', // the special **`{$}`** variable contains the property name * '
- {.} ', // within the loop, the **`{.}`** variable is set to the property value * '
Name: {name}
', * 'Kids: ',
* ' {name}
Name: {name}
', * 'Kids: ',
* ' {name} is a ',
* ' teenager kid baby Name: {name} Kids: ',
* ' {name} is a ',
* ' girl boy Name: {name} Kids: ',
* ' {#}: {name} In 5 Years: {age+5} Dad: {parent.name} Name: {name} Company: {[values.company.toUpperCase() + ", " + values.title]} Kids: ',
* ' Name: {name} Company: {[values.company.toUpperCase() + ", " + values.title]} Kids: ',
* ' Name: {name} Kids: ',
* ' Girl: {name} - {age} Boy: {name} - {age} {name} is a baby! paragraph one paragraph two paragraph three This class encapsulates a collection of DOM elements, providing methods to filter
* members, or to perform collective actions upon the whole set. Although they are not listed, this class supports all of the methods of {@link Ext.dom.Element} and
* {@link Ext.fx.Anim}. The methods from these classes will be performed on all the elements in this collection. All methods return this and can be chained.
* Value Description
* ----- -----------------------------
* tl The top left corner (default)
* t The center of the top edge
* tr The top right corner
* l The center of the left edge
* c In the center of the element
* r The center of the right edge
* bl The bottom left corner
* b The center of the bottom edge
* br The bottom right corner
*
*
* Example Usage:
*
* // align el to other-el using the default positioning
* // ("tl-bl", non-constrained)
* el.alignTo("other-el");
*
* // align the top left corner of el with the top right corner of other-el
* // (constrained to viewport)
* el.alignTo("other-el", "tr?");
*
* // align the bottom right corner of el with the center left edge of other-el
* el.alignTo("other-el", "br-l?");
*
* // align the center of el with the bottom left corner of other-el and
* // adjust the x position by -6 pixels (and the y position by 0)
* el.alignTo("other-el", "c-bl", [-6, 0]);
*
* @param {Ext.util.Positionable/HTMLElement/String} element The Positionable,
* HTMLElement, or id of the element to align to.
* @param {String} [position="tl-bl?"] The position to align to
* @param {Number[]} [offsets] Offset the positioning by [x, y]
* @param {Boolean/Object} [animate] true for the default animation or a standard
* Element animation config object
* @return {Ext.util.Positionable} this
*/
alignTo: function(element, position, offsets, animate) {
var me = this,
el = me.el;
return me.setXY(me.getAlignToXY(element, position, offsets),
el.anim && !!animate ? el.anim(animate) : false);
},
/**
* Anchors an element to another element and realigns it when the window is resized.
* @param {Ext.util.Positionable/HTMLElement/String} element The Positionable,
* HTMLElement, or id of the element to align to.
* @param {String} [position="tl-bl?"] The position to align to
* @param {Number[]} [offsets] Offset the positioning by [x, y]
* @param {Boolean/Object} [animate] true for the default animation or a standard
* Element animation config object
* @param {Boolean/Number} [monitorScroll=50] True to monitor body scroll and
* reposition. If this parameter is a number, it is used as the buffer delay in
* milliseconds.
* @param {Function} [callback] The function to call after the animation finishes
* @return {Ext.util.Positionable} this
*/
anchorTo: function(anchorToEl, alignment, offsets, animate, monitorScroll, callback) {
var me = this,
scroll = !Ext.isEmpty(monitorScroll),
action = function() {
me.alignTo(anchorToEl, alignment, offsets, animate);
Ext.callback(callback, me);
},
anchor = me.getAnchor();
// previous listener anchor, remove it
me.removeAnchor();
Ext.apply(anchor, {
fn: action,
scroll: scroll
});
Ext.EventManager.onWindowResize(action, null);
if (scroll) {
Ext.EventManager.on(window, 'scroll', action, null,
{buffer: !isNaN(monitorScroll) ? monitorScroll : 50});
}
action(); // align immediately
return me;
},
/**
* Calculates x,y coordinates specified by the anchor position on the element, adding
* extraX and extraY values.
* @param {String} [anchor='tl'] The specified anchor position.
* See {@link #alignTo} for details on supported anchor positions.
* @param {Number} [extraX] value to be added to the x coordinate
* @param {Number} [extraY] value to be added to the y coordinate
* @param {Object} [size] An object containing the size to use for calculating anchor
* position {width: (target width), height: (target height)} (defaults to the
* element's current size)
* @return {Number[]} [x, y] An array containing the element's x and y coordinates
* @private
*/
calculateAnchorXY: function(anchor, extraX, extraY, mySize) {
//Passing a different size is useful for pre-calculating anchors,
//especially for anchored animations that change the el size.
var me = this,
el = me.el,
doc = document,
isViewport = el.dom == doc.body || el.dom == doc,
round = Math.round,
xy, myWidth, myHeight;
anchor = (anchor || "tl").toLowerCase();
mySize = mySize || {};
myWidth = mySize.width || isViewport ? Ext.Element.getViewWidth() : me.getWidth();
myHeight = mySize.height || isViewport ? Ext.Element.getViewHeight() : me.getHeight();
// Calculate anchor position.
// Test most common cases for picker alignment first.
switch (anchor) {
case 'tl' : xy = [0, 0];
break;
case 'bl' : xy = [0, myHeight];
break;
case 'tr' : xy = [myWidth, 0];
break;
case 'c' : xy = [round(myWidth * 0.5), round(myHeight * 0.5)];
break;
case 't' : xy = [round(myWidth * 0.5), 0];
break;
case 'l' : xy = [0, round(myHeight * 0.5)];
break;
case 'r' : xy = [myWidth, round(myHeight * 0.5)];
break;
case 'b' : xy = [round(myWidth * 0.5), myHeight];
break;
case 'tc' : xy = [round(myWidth * 0.5), 0];
break;
case 'bc' : xy = [round(myWidth * 0.5), myHeight];
break;
case 'br' : xy = [myWidth, myHeight];
}
return [xy[0] + extraX, xy[1] + extraY];
},
/**
* By default this method does nothing but return the position spec passed to it. In
* rtl mode it is overridden to convert "l" to "r" and vice versa when required.
* @private
*/
convertPositionSpec: Ext.identityFn,
/**
* Gets the x,y coordinates to align this element with another element. See
* {@link #alignTo} for more info on the supported position values.
* @param {Ext.util.Positionable/HTMLElement/String} element The Positionable,
* HTMLElement, or id of the element to align to.
* @param {String} [position="tl-bl?"] The position to align to
* @param {Number[]} [offsets] Offset the positioning by [x, y]
* @return {Number[]} [x, y]
*/
getAlignToXY: function(alignToEl, posSpec, offset) {
var me = this,
viewportWidth = Ext.Element.getViewWidth() - 10, // 10px of margin for ie
viewportHeight = Ext.Element.getViewHeight() - 10, // 10px of margin for ie
doc = document,
docElement = doc.documentElement,
docBody = doc.body,
scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0),
scrollY = (docElement.scrollTop || docBody.scrollTop || 0),
alignMatch, myPosition, alignToElPosition, myWidth, myHeight,
alignToElRegion, swapY, swapX, constrain, align1, align2,
p1y, p1x, p2y, p2x, x, y;
alignToEl = Ext.get(alignToEl.el || alignToEl);
if (!alignToEl || !alignToEl.dom) {
}
offset = offset || [0,0];
posSpec = (!posSpec || posSpec == "?" ? "tl-bl?" :
(!(/-/).test(posSpec) && posSpec !== "" ? "tl-" + posSpec : posSpec || "tl-bl")).toLowerCase();
posSpec = me.convertPositionSpec(posSpec);
alignMatch = posSpec.match(me._alignRe);
align1 = alignMatch[1];
align2 = alignMatch[2];
constrain = !!alignMatch[3];
//Subtract the aligned el's internal xy from the target's offset xy
//plus custom offset to get this Element's new offset xy
myPosition = me.getAnchorXY(align1, true);
alignToElPosition = me.getAnchorToXY(alignToEl, align2, false);
x = alignToElPosition[0] - myPosition[0] + offset[0];
y = alignToElPosition[1] - myPosition[1] + offset[1];
// If position spec ended with a "?", then constrain to viewport is necessary
if (constrain) {
myWidth = me.getWidth();
myHeight = me.getHeight();
alignToElRegion = alignToEl.getRegion();
// If we are at a viewport boundary and the aligned el is anchored
// on a target border that is perpendicular to the vp border,
// allow the aligned el to slide on that border, otherwise swap
// the aligned el to the opposite border of the target.
p1y = align1.charAt(0);
p1x = align1.charAt(align1.length - 1);
p2y = align2.charAt(0);
p2x = align2.charAt(align2.length - 1);
swapY = ((p1y == "t" && p2y == "b") || (p1y == "b" && p2y == "t"));
swapX = ((p1x == "r" && p2x == "l") || (p1x == "l" && p2x == "r"));
if (x + myWidth > viewportWidth + scrollX) {
x = swapX ? alignToElRegion.left - myWidth : viewportWidth + scrollX - myWidth;
}
if (x < scrollX) {
x = swapX ? alignToElRegion.right : scrollX;
}
if (y + myHeight > viewportHeight + scrollY) {
y = swapY ? alignToElRegion.top - myHeight : viewportHeight + scrollY - myHeight;
}
if (y < scrollY) {
y = swapY ? alignToElRegion.bottom : scrollY;
}
}
return [x,y];
},
// private
getAnchor: function(){
var el = this.el,
data = (el.$cache || el.getCache()).data,
anchor;
if (!el.dom) {
return;
}
anchor = data._anchor;
if(!anchor){
anchor = data._anchor = {};
}
return anchor;
},
/**
* Gets the x,y coordinates specified by the anchor position on the element.
* @param {String} [anchor='tl'] The specified anchor position.
* See {@link #alignTo} for details on supported anchor positions.
* @param {Boolean} [local] True to get the local (element top/left-relative) anchor
* position instead of page coordinates
* @param {Object} [size] An object containing the size to use for calculating anchor
* position {width: (target width), height: (target height)} (defaults to the
* element's current size)
* @return {Number[]} [x, y] An array containing the element's x and y coordinates
*/
getAnchorXY: function(anchor, local, mySize) {
var me = this,
myPos = me.getXY(),
el = me.el,
doc = document,
isViewport = el.dom == doc.body || el.dom == doc,
scroll = el.getScroll(),
extraX = isViewport ? scroll.left : local ? 0 : myPos[0],
extraY = isViewport ? scroll.top : local ? 0 : myPos[1];
return me.calculateAnchorXY(anchor, extraX, extraY, mySize);
},
/**
* Return an object defining the area of this Element which can be passed to
* {@link #setBox} to set another Element's size/location to match this element.
*
* @param {Boolean} [contentBox] If true a box for the content of the element is
* returned.
* @param {Boolean} [local] If true the element's left and top relative to its
* `offsetParent` are returned instead of page x/y.
* @return {Object} box An object in the format:
*
* {
* x:
*/
Ext.define('Ext.dom.CompositeElement', {
alternateClassName: 'Ext.CompositeElement',
extend: Ext.dom.CompositeElementLite ,
// private
getElement: function(el) {
// In this case just return it, since we already have a reference to it
return el;
},
// private
transformElement: function(el) {
return Ext.get(el);
}
}, function() {
/**
* Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
* to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
* {@link Ext.CompositeElementLite CompositeElementLite} object.
* @param {String/HTMLElement[]} selector The CSS selector or an array of elements
* @param {Boolean} [unique] true to create a unique Ext.Element for each element (defaults to a shared flyweight object)
* @param {HTMLElement/String} [root] The root element of the query or id of the root
* @return {Ext.CompositeElementLite/Ext.CompositeElement}
* @member Ext.dom.Element
* @method select
* @static
*/
Ext.dom.Element.select = function(selector, unique, root) {
var elements;
if (typeof selector == "string") {
elements = Ext.dom.Element.selectorFunction(selector, root);
}
else if (selector.length !== undefined) {
elements = selector;
}
else {
}
return (unique === true) ? new Ext.CompositeElement(elements) : new Ext.CompositeElementLite(elements);
};
});
/**
* Shorthand of {@link Ext.Element#method-select}.
* @member Ext
* @method select
* @inheritdoc Ext.Element#select
*/
Ext.select = Ext.Element.select;
Ext.ClassManager.addNameAlternateMappings({
"Ext.rtl.layout.container.boxOverflow.Menu": [],
"Ext.draw.engine.ImageExporter": [],
"Ext.layout.component.Auto": [],
"Ext.grid.property.Store": [
"Ext.grid.PropertyStore"
],
"Ext.layout.container.Box": [
"Ext.layout.BoxLayout"
],
"Ext.rtl.resizer.BorderSplitterTracker": [],
"Ext.direct.JsonProvider": [],
"Ext.tree.Panel": [
"Ext.tree.TreePanel",
"Ext.TreePanel"
],
"Ext.data.Model": [
"Ext.data.Record"
],
"Ext.data.reader.Reader": [
"Ext.data.Reader",
"Ext.data.DataReader"
],
"Ext.tab.Tab": [],
"Ext.button.Button": [
"Ext.Button"
],
"Ext.util.Grouper": [],
"Ext.direct.RemotingProvider": [],
"Ext.data.NodeInterface": [],
"Ext.view.NodeCache": [],
"Ext.grid.column.Date": [
"Ext.grid.DateColumn"
],
"Ext.form.field.Trigger": [
"Ext.form.TriggerField",
"Ext.form.TwinTriggerField",
"Ext.form.Trigger"
],
"Ext.grid.plugin.RowEditing": [],
"Ext.tip.QuickTip": [
"Ext.QuickTip"
],
"Ext.rtl.grid.plugin.HeaderResizer": [],
"Ext.form.action.Load": [
"Ext.form.Action.Load"
],
"Ext.form.field.ComboBox": [
"Ext.form.ComboBox"
],
"Ext.layout.container.Border": [
"Ext.layout.BorderLayout"
],
"Ext.rtl.layout.container.Column": [],
"Ext.data.JsonPStore": [],
"Ext.layout.component.field.TextArea": [],
"Ext.layout.container.Container": [
"Ext.layout.ContainerLayout"
],
"Ext.util.Sortable": [],
"Ext.selection.Model": [
"Ext.AbstractSelectionModel"
],
"Ext.draw.CompositeSprite": [],
"Ext.fx.Queue": [],
"Ext.dd.StatusProxy": [],
"Ext.form.field.Checkbox": [
"Ext.form.Checkbox"
],
"Ext.direct.Transaction": [
"Ext.Direct.Transaction"
],
"Ext.util.Offset": [],
"Ext.container.Monitor": [],
"Ext.view.DragZone": [],
"Ext.util.KeyNav": [
"Ext.KeyNav"
],
"Ext.rtl.dom.Element_static": [],
"Ext.form.field.File": [
"Ext.form.FileUploadField",
"Ext.ux.form.FileUploadField",
"Ext.form.File"
],
"Ext.slider.Single": [
"Ext.Slider",
"Ext.form.SliderField",
"Ext.slider.SingleSlider",
"Ext.slider.Slider"
],
"Ext.panel.Proxy": [
"Ext.dd.PanelProxy"
],
"Ext.fx.target.Target": [],
"Ext.ComponentManager": [
"Ext.ComponentMgr"
],
"Ext.grid.feature.GroupingSummary": [],
"Ext.grid.property.HeaderContainer": [
"Ext.grid.PropertyColumnModel"
],
"Ext.layout.component.BoundList": [],
"Ext.tab.Bar": [],
"Ext.app.Application": [],
"Ext.layout.container.Accordion": [
"Ext.layout.AccordionLayout"
],
"Ext.ShadowPool": [],
"Ext.grid.locking.HeaderContainer": [],
"Ext.resizer.ResizeTracker": [],
"Ext.panel.Tool": [],
"Ext.layout.container.boxOverflow.None": [
"Ext.layout.boxOverflow.None"
],
"Ext.grid.CellContext": [],
"Ext.tree.View": [],
"Ext.ElementLoader": [],
"Ext.grid.ColumnComponentLayout": [],
"Ext.toolbar.Separator": [
"Ext.Toolbar.Separator"
],
"Ext.dd.DragZone": [],
"Ext.layout.component.FieldSet": [],
"Ext.util.Renderable": [],
"Ext.util.Bindable": [],
"Ext.data.SortTypes": [],
"Ext.rtl.layout.container.HBox": [],
"Ext.util.Animate": [],
"Ext.data.flash.BinaryXhr": [],
"Ext.form.field.Date": [
"Ext.form.DateField",
"Ext.form.Date"
],
"Ext.Component": [],
"Ext.chart.axis.Axis": [
"Ext.chart.Axis"
],
"Ext.menu.DatePicker": [],
"Ext.fx.target.CompositeSprite": [],
"Ext.rtl.tip.QuickTipManager": [],
"Ext.form.field.Picker": [
"Ext.form.Picker"
],
"Ext.fx.Animator": [],
"Ext.Ajax": [],
"Ext.layout.component.Dock": [
"Ext.layout.component.AbstractDock"
],
"Ext.util.Filter": [],
"Ext.dd.DragDrop": [],
"Ext.view.View": [
"Ext.DataView"
],
"Ext.data.association.BelongsTo": [
"Ext.data.BelongsToAssociation"
],
"Ext.fx.target.Element": [],
"Ext.draw.Surface": [],
"Ext.dd.DDProxy": [],
"Ext.data.AbstractStore": [],
"Ext.grid.plugin.BufferedRendererTreeView": [],
"Ext.grid.locking.View": [
"Ext.grid.LockingView"
],
"Ext.form.action.StandardSubmit": [],
"Ext.dd.Registry": [],
"Ext.picker.Month": [
"Ext.MonthPicker"
],
"Ext.menu.Manager": [
"Ext.menu.MenuMgr"
],
"Ext.container.Container": [
"Ext.Container"
],
"Ext.rtl.form.field.Spinner": [],
"Ext.util.KeyMap": [
"Ext.KeyMap"
],
"Ext.data.Batch": [],
"Ext.resizer.Handle": [],
"Ext.util.ElementContainer": [],
"Ext.grid.feature.Grouping": [],
"Ext.tab.Panel": [
"Ext.TabPanel"
],
"Ext.rtl.grid.CellEditor": [],
"Ext.layout.component.Body": [],
"Ext.layout.Context": [],
"Ext.layout.component.field.ComboBox": [],
"Ext.dd.DDTarget": [],
"Ext.chart.Chart": [],
"Ext.data.Field": [],
"Ext.form.field.FileButton": [],
"Ext.chart.series.Gauge": [],
"Ext.data.StoreManager": [
"Ext.StoreMgr",
"Ext.data.StoreMgr",
"Ext.StoreManager"
],
"Ext.data.IdGenerator": [],
"Ext.tip.QuickTipManager": [
"Ext.QuickTips"
],
"Ext.grid.plugin.Editing": [],
"Ext.Queryable": [],
"Ext.state.LocalStorageProvider": [],
"Ext.grid.RowEditor": [],
"Ext.app.EventDomain": [],
"Ext.form.action.Action": [
"Ext.form.Action"
],
"Ext.fx.Easing": [],
"Ext.ProgressBar": [],
"Ext.tree.ViewDragZone": [],
"Ext.data.reader.Array": [
"Ext.data.ArrayReader"
],
"Ext.picker.Date": [
"Ext.DatePicker"
],
"Ext.rtl.grid.column.Column": [],
"Ext.data.proxy.JsonP": [
"Ext.data.ScriptTagProxy"
],
"Ext.chart.series.Area": [],
"Ext.fx.Anim": [],
"Ext.menu.Item": [
"Ext.menu.TextItem"
],
"Ext.rtl.dom.Element_position": [],
"Ext.chart.Legend": [],
"Ext.grid.plugin.HeaderReorderer": [],
"Ext.rtl.view.Table": [],
"Ext.layout.container.VBox": [
"Ext.layout.VBoxLayout"
],
"Ext.rtl.util.Floating": [],
"Ext.view.DropZone": [],
"Ext.rtl.tree.Column": [],
"Ext.layout.component.Button": [],
"Ext.form.field.Hidden": [
"Ext.form.Hidden"
],
"Ext.form.FieldContainer": [],
"Ext.rtl.grid.plugin.RowEditing": [],
"Ext.data.proxy.Server": [
"Ext.data.ServerProxy"
],
"Ext.chart.series.Cartesian": [
"Ext.chart.CartesianSeries",
"Ext.chart.CartesianChart"
],
"Ext.rtl.layout.component.Dock": [],
"Ext.grid.column.Column": [
"Ext.grid.Column"
],
"Ext.data.ResultSet": [],
"Ext.data.association.HasMany": [
"Ext.data.HasManyAssociation"
],
"Ext.layout.container.Fit": [
"Ext.layout.FitLayout"
],
"Ext.util.CSS": [],
"Ext.rtl.AbstractComponent": [],
"Ext.layout.component.field.Field": [],
"Ext.data.proxy.Ajax": [
"Ext.data.HttpProxy",
"Ext.data.AjaxProxy"
],
"Ext.rtl.EventObjectImpl": [],
"Ext.app.domain.Component": [],
"Ext.form.Label": [],
"Ext.data.writer.Writer": [
"Ext.data.DataWriter",
"Ext.data.Writer"
],
"Ext.view.BoundListKeyNav": [],
"Ext.form.FieldSet": [],
"Ext.form.field.VTypes": [
"Ext.form.VTypes"
],
"Ext.fx.PropertyHandler": [],
"Ext.form.CheckboxGroup": [],
"Ext.data.JsonP": [],
"Ext.draw.engine.Vml": [],
"Ext.layout.container.CheckboxGroup": [],
"Ext.app.domain.Direct": [],
"Ext.panel.Header": [],
"Ext.app.Controller": [],
"Ext.rtl.dom.Layer": [],
"Ext.grid.plugin.CellEditing": [],
"Ext.form.field.Time": [
"Ext.form.TimeField",
"Ext.form.Time"
],
"Ext.fx.CubicBezier": [],
"Ext.button.Cycle": [
"Ext.CycleButton"
],
"Ext.app.domain.Global": [],
"Ext.data.Tree": [],
"Ext.ModelManager": [
"Ext.ModelMgr"
],
"Ext.data.XmlStore": [],
"Ext.grid.ViewDropZone": [],
"Ext.rtl.slider.Multi": [],
"Ext.grid.header.DropZone": [],
"Ext.rtl.layout.component.field.Text": [],
"Ext.util.HashMap": [],
"Ext.grid.column.Template": [
"Ext.grid.TemplateColumn"
],
"Ext.ComponentLoader": [],
"Ext.form.FieldAncestor": [],
"Ext.rtl.layout.container.Border": [],
"Ext.app.domain.Controller": [],
"Ext.chart.axis.Gauge": [],
"Ext.layout.container.border.Region": [],
"Ext.data.validations": [],
"Ext.data.Connection": [],
"Ext.resizer.Splitter": [],
"Ext.dd.DropZone": [],
"Ext.direct.ExceptionEvent": [],
"Ext.form.RadioManager": [],
"Ext.data.association.HasOne": [
"Ext.data.HasOneAssociation"
],
"Ext.draw.Text": [],
"Ext.window.MessageBox": [],
"Ext.fx.target.CompositeElementCSS": [],
"Ext.rtl.selection.CellModel": [],
"Ext.rtl.layout.ContextItem": [],
"Ext.chart.series.Line": [
"Ext.chart.LineSeries",
"Ext.chart.LineChart"
],
"Ext.view.Table": [],
"Ext.fx.target.CompositeElement": [],
"Ext.fx.Manager": [],
"Ext.data.writer.Json": [
"Ext.data.JsonWriter"
],
"Ext.chart.Label": [],
"Ext.grid.View": [],
"Ext.Action": [],
"Ext.form.Basic": [
"Ext.form.BasicForm"
],
"Ext.rtl.form.field.Checkbox": [],
"Ext.container.Viewport": [
"Ext.Viewport"
],
"Ext.state.Stateful": [],
"Ext.grid.feature.RowBody": [],
"Ext.form.field.Text": [
"Ext.form.TextField",
"Ext.form.Text"
],
"Ext.rtl.layout.component.field.Trigger": [],
"Ext.data.reader.Xml": [
"Ext.data.XmlReader"
],
"Ext.grid.feature.AbstractSummary": [],
"Ext.chart.axis.Category": [
"Ext.chart.CategoryAxis"
],
"Ext.rtl.layout.container.boxOverflow.Scroller": [],
"Ext.grid.plugin.BufferedRendererTableView": [],
"Ext.layout.container.Absolute": [
"Ext.layout.AbsoluteLayout"
],
"Ext.rtl.layout.container.Box": [],
"Ext.data.reader.Json": [
"Ext.data.JsonReader"
],
"Ext.util.TextMetrics": [],
"Ext.data.TreeStore": [],
"Ext.view.BoundList": [
"Ext.BoundList"
],
"Ext.form.field.HtmlEditor": [
"Ext.form.HtmlEditor"
],
"Ext.layout.container.Form": [
"Ext.layout.FormLayout"
],
"Ext.chart.MaskLayer": [],
"Ext.resizer.BorderSplitterTracker": [],
"Ext.util.LruCache": [],
"Ext.tip.Tip": [
"Ext.Tip"
],
"Ext.grid.column.CheckColumn": [
"Ext.ux.CheckColumn"
],
"Ext.grid.column.RowNumberer": [
"Ext.grid.RowNumberer"
],
"Ext.rtl.resizer.SplitterTracker": [],
"Ext.grid.feature.RowWrap": [],
"Ext.data.proxy.Client": [
"Ext.data.ClientProxy"
],
"Ext.data.Types": [],
"Ext.draw.SpriteDD": [],
"Ext.layout.container.boxOverflow.Menu": [
"Ext.layout.boxOverflow.Menu"
],
"Ext.LoadMask": [],
"Ext.rtl.grid.RowEditor": [],
"Ext.toolbar.Paging": [
"Ext.PagingToolbar"
],
"Ext.data.association.Association": [
"Ext.data.Association"
],
"Ext.tree.ViewDropZone": [],
"Ext.toolbar.Toolbar": [
"Ext.Toolbar"
],
"Ext.tip.ToolTip": [
"Ext.ToolTip"
],
"Ext.chart.Highlight": [],
"Ext.state.Manager": [],
"Ext.util.Inflector": [],
"Ext.grid.Panel": [
"Ext.list.ListView",
"Ext.ListView",
"Ext.grid.GridPanel"
],
"Ext.data.NodeStore": [],
"Ext.Shadow": [],
"Ext.form.action.Submit": [
"Ext.form.Action.Submit"
],
"Ext.form.Panel": [
"Ext.FormPanel",
"Ext.form.FormPanel"
],
"Ext.chart.series.Series": [],
"Ext.data.Request": [],
"Ext.dd.DD": [],
"Ext.toolbar.Fill": [
"Ext.Toolbar.Fill"
],
"Ext.data.proxy.WebStorage": [
"Ext.data.WebStorageProxy"
],
"Ext.util.Floating": [],
"Ext.form.action.DirectSubmit": [
"Ext.form.Action.DirectSubmit"
],
"Ext.util.Cookies": [],
"Ext.data.UuidGenerator": [],
"Ext.util.Point": [],
"Ext.fx.target.Component": [],
"Ext.form.CheckboxManager": [],
"Ext.form.field.Field": [],
"Ext.form.field.Display": [
"Ext.form.DisplayField",
"Ext.form.Display"
],
"Ext.layout.container.Anchor": [
"Ext.layout.AnchorLayout"
],
"Ext.layout.component.field.Text": [],
"Ext.data.DirectStore": [],
"Ext.dom.Layer": [
"Ext.Layer"
],
"Ext.grid.RowEditorButtons": [],
"Ext.data.BufferStore": [],
"Ext.grid.plugin.DivRenderer": [],
"Ext.grid.ColumnLayout": [],
"Ext.chart.series.Column": [
"Ext.chart.ColumnSeries",
"Ext.chart.ColumnChart",
"Ext.chart.StackedColumnChart"
],
"Ext.AbstractComponent": [],
"Ext.flash.Component": [
"Ext.FlashComponent"
],
"Ext.form.field.Base": [
"Ext.form.Field",
"Ext.form.BaseField"
],
"Ext.grid.feature.GroupStore": [],
"Ext.data.SequentialIdGenerator": [],
"Ext.grid.header.Container": [],
"Ext.container.ButtonGroup": [
"Ext.ButtonGroup"
],
"Ext.data.PageMap": [],
"Ext.grid.column.Action": [
"Ext.grid.ActionColumn"
],
"Ext.layout.component.field.Trigger": [],
"Ext.layout.component.field.FieldContainer": [],
"Ext.chart.Shape": [],
"Ext.panel.DD": [],
"Ext.container.AbstractContainer": [],
"Ext.data.ArrayStore": [],
"Ext.rtl.layout.container.CheckboxGroup": [],
"Ext.window.Window": [
"Ext.Window"
],
"Ext.picker.Color": [
"Ext.ColorPalette"
],
"Ext.grid.feature.Feature": [],
"Ext.chart.theme.Theme": [],
"Ext.util.ClickRepeater": [],
"Ext.form.field.Spinner": [
"Ext.form.Spinner"
],
"Ext.container.DockingContainer": [],
"Ext.selection.DataViewModel": [],
"Ext.rtl.selection.TreeModel": [],
"Ext.dd.DragTracker": [],
"Ext.data.Group": [],
"Ext.dd.DragDropManager": [
"Ext.dd.DragDropMgr",
"Ext.dd.DDM"
],
"Ext.selection.CheckboxModel": [],
"Ext.menu.KeyNav": [],
"Ext.layout.container.Column": [
"Ext.layout.ColumnLayout"
],
"Ext.draw.Matrix": [],
"Ext.form.field.Number": [
"Ext.form.NumberField",
"Ext.form.Number"
],
"Ext.rtl.util.Renderable": [],
"Ext.data.proxy.Direct": [
"Ext.data.DirectProxy"
],
"Ext.chart.Navigation": [],
"Ext.slider.Tip": [],
"Ext.chart.theme.Base": [],
"Ext.form.field.TextArea": [
"Ext.form.TextArea"
],
"Ext.rtl.layout.container.VBox": [],
"Ext.form.field.Radio": [
"Ext.form.Radio"
],
"Ext.layout.component.ProgressBar": [],
"Ext.chart.series.Pie": [
"Ext.chart.PieSeries",
"Ext.chart.PieChart"
],
"Ext.tree.plugin.TreeViewDragDrop": [],
"Ext.direct.Provider": [],
"Ext.data.TreeModel": [],
"Ext.layout.Layout": [],
"Ext.toolbar.TextItem": [
"Ext.Toolbar.TextItem"
],
"Ext.rtl.button.Button": [],
"Ext.util.AbstractMixedCollection": [],
"Ext.data.JsonStore": [],
"Ext.button.Split": [
"Ext.SplitButton"
],
"Ext.dd.DropTarget": [],
"Ext.direct.RemotingEvent": [],
"Ext.draw.Sprite": [],
"Ext.fx.target.Sprite": [],
"Ext.data.proxy.LocalStorage": [
"Ext.data.LocalStorageProxy"
],
"Ext.layout.component.Draw": [],
"Ext.AbstractPlugin": [],
"Ext.Editor": [],
"Ext.chart.axis.Radial": [],
"Ext.chart.Tip": [],
"Ext.layout.container.Table": [
"Ext.layout.TableLayout"
],
"Ext.chart.axis.Abstract": [],
"Ext.data.proxy.Rest": [
"Ext.data.RestProxy"
],
"Ext.rtl.layout.container.Absolute": [],
"Ext.util.Queue": [],
"Ext.state.CookieProvider": [],
"Ext.Img": [],
"Ext.dd.DragSource": [],
"Ext.grid.CellEditor": [],
"Ext.layout.ClassList": [],
"Ext.button.Manager": [
"Ext.ButtonToggleManager"
],
"Ext.rtl.form.field.File": [],
"Ext.util.Sorter": [],
"Ext.resizer.SplitterTracker": [],
"Ext.panel.Table": [],
"Ext.draw.Color": [],
"Ext.chart.series.Bar": [
"Ext.chart.BarSeries",
"Ext.chart.BarChart",
"Ext.chart.StackedBarChart"
],
"Ext.PluginManager": [
"Ext.PluginMgr"
],
"Ext.util.ComponentDragger": [],
"Ext.chart.series.Scatter": [],
"Ext.chart.Callout": [],
"Ext.data.Store": [],
"Ext.grid.feature.Summary": [],
"Ext.util.ProtoElement": [],
"Ext.layout.component.Component": [],
"Ext.direct.Manager": [],
"Ext.data.proxy.Proxy": [
"Ext.data.DataProxy",
"Ext.data.Proxy"
],
"Ext.menu.CheckItem": [],
"Ext.layout.container.Card": [
"Ext.layout.CardLayout"
],
"Ext.draw.Component": [],
"Ext.toolbar.Item": [
"Ext.Toolbar.Item"
],
"Ext.form.RadioGroup": [],
"Ext.rtl.tab.Bar": [],
"Ext.rtl.form.field.Trigger": [],
"Ext.slider.Thumb": [],
"Ext.grid.header.DragZone": [],
"Ext.rtl.resizer.ResizeTracker": [],
"Ext.form.action.DirectLoad": [
"Ext.form.Action.DirectLoad"
],
"Ext.picker.Time": [],
"Ext.grid.plugin.BufferedRenderer": [],
"Ext.resizer.BorderSplitter": [],
"Ext.menu.ColorPicker": [],
"Ext.ZIndexManager": [
"Ext.WindowGroup"
],
"Ext.menu.Menu": [],
"Ext.chart.LegendItem": [],
"Ext.toolbar.Spacer": [
"Ext.Toolbar.Spacer"
],
"Ext.rtl.dd.DD": [],
"Ext.panel.Panel": [
"Ext.Panel"
],
"Ext.util.Memento": [],
"Ext.app.domain.Store": [],
"Ext.data.proxy.Memory": [
"Ext.data.MemoryProxy"
],
"Ext.chart.axis.Time": [
"Ext.chart.TimeAxis"
],
"Ext.grid.plugin.DragDrop": [],
"Ext.ComponentQuery": [],
"Ext.draw.engine.SvgExporter": [],
"Ext.layout.container.Auto": [],
"Ext.grid.locking.Lockable": [
"Ext.grid.Lockable"
],
"Ext.view.AbstractView": [],
"Ext.util.Region": [],
"Ext.draw.Draw": [],
"Ext.fx.target.ElementCSS": [],
"Ext.rtl.panel.Panel": [],
"Ext.layout.component.field.HtmlEditor": [],
"Ext.data.proxy.SessionStorage": [
"Ext.data.SessionStorageProxy"
],
"Ext.app.EventBus": [],
"Ext.menu.Separator": [],
"Ext.util.History": [
"Ext.History"
],
"Ext.direct.Event": [],
"Ext.direct.RemotingMethod": [],
"Ext.dd.ScrollManager": [],
"Ext.chart.Mask": [],
"Ext.rtl.dom.Element_anim": [],
"Ext.selection.CellModel": [],
"Ext.view.TableLayout": [],
"Ext.rtl.panel.Header": [],
"Ext.rtl.dom.Element_scroll": [],
"Ext.state.Provider": [],
"Ext.layout.container.Editor": [],
"Ext.grid.ColumnManager": [
"Ext.grid.ColumnModel"
],
"Ext.data.Errors": [],
"Ext.grid.plugin.RowExpander": [],
"Ext.selection.TreeModel": [],
"Ext.form.Labelable": [],
"Ext.grid.column.Number": [
"Ext.grid.NumberColumn"
],
"Ext.draw.engine.Svg": [],
"Ext.grid.property.Grid": [
"Ext.grid.PropertyGrid"
],
"Ext.FocusManager": [
"Ext.FocusMgr"
],
"Ext.AbstractManager": [],
"Ext.chart.series.Radar": [],
"Ext.rtl.dom.Element_insertion": [],
"Ext.grid.property.Property": [
"Ext.PropGridProperty"
],
"Ext.chart.TipSurface": [],
"Ext.layout.SizeModel": [],
"Ext.grid.column.Boolean": [
"Ext.grid.BooleanColumn"
],
"Ext.direct.PollingProvider": [],
"Ext.grid.plugin.HeaderResizer": [],
"Ext.tree.Column": [],
"Ext.data.writer.Xml": [
"Ext.data.XmlWriter"
],
"Ext.slider.Multi": [
"Ext.slider.MultiSlider"
],
"Ext.panel.AbstractPanel": [],
"Ext.layout.component.field.Slider": [],
"Ext.chart.axis.Numeric": [
"Ext.chart.NumericAxis"
],
"Ext.layout.container.boxOverflow.Scroller": [
"Ext.layout.boxOverflow.Scroller"
],
"Ext.data.Operation": [],
"Ext.resizer.Resizer": [
"Ext.Resizable"
],
"Ext.layout.container.HBox": [
"Ext.layout.HBoxLayout"
],
"Ext.selection.RowModel": [],
"Ext.layout.ContextItem": [],
"Ext.util.MixedCollection": []
});
Ext.ClassManager.addNameAliasMappings({
"Ext.rtl.layout.container.boxOverflow.Menu": [],
"Ext.draw.engine.ImageExporter": [],
"Ext.layout.component.Auto": [
"layout.autocomponent"
],
"Ext.grid.property.Store": [],
"Ext.layout.container.Box": [
"layout.box"
],
"Ext.rtl.resizer.BorderSplitterTracker": [],
"Ext.direct.JsonProvider": [
"direct.jsonprovider"
],
"Ext.tree.Panel": [
"widget.treepanel"
],
"Ext.data.Model": [],
"Ext.data.reader.Reader": [],
"Ext.tab.Tab": [
"widget.tab"
],
"Ext.button.Button": [
"widget.button"
],
"Ext.util.Grouper": [],
"Ext.direct.RemotingProvider": [
"direct.remotingprovider"
],
"Ext.data.NodeInterface": [],
"Ext.view.NodeCache": [],
"Ext.grid.column.Date": [
"widget.datecolumn"
],
"Ext.form.field.Trigger": [
"widget.trigger",
"widget.triggerfield"
],
"Ext.grid.plugin.RowEditing": [
"plugin.rowediting"
],
"Ext.tip.QuickTip": [
"widget.quicktip"
],
"Ext.rtl.grid.plugin.HeaderResizer": [],
"Ext.form.action.Load": [
"formaction.load"
],
"Ext.form.field.ComboBox": [
"widget.combo",
"widget.combobox"
],
"Ext.layout.container.Border": [
"layout.border"
],
"Ext.rtl.layout.container.Column": [],
"Ext.data.JsonPStore": [
"store.jsonp"
],
"Ext.layout.component.field.TextArea": [
"layout.textareafield"
],
"Ext.layout.container.Container": [
"layout.container"
],
"Ext.util.Sortable": [],
"Ext.selection.Model": [],
"Ext.draw.CompositeSprite": [],
"Ext.fx.Queue": [],
"Ext.dd.StatusProxy": [],
"Ext.form.field.Checkbox": [
"widget.checkbox",
"widget.checkboxfield"
],
"Ext.direct.Transaction": [
"direct.transaction"
],
"Ext.util.Offset": [],
"Ext.container.Monitor": [],
"Ext.view.DragZone": [],
"Ext.util.KeyNav": [],
"Ext.rtl.dom.Element_static": [],
"Ext.form.field.File": [
"widget.filefield",
"widget.fileuploadfield"
],
"Ext.slider.Single": [
"widget.slider",
"widget.sliderfield"
],
"Ext.panel.Proxy": [],
"Ext.fx.target.Target": [],
"Ext.ComponentManager": [],
"Ext.grid.feature.GroupingSummary": [
"feature.groupingsummary"
],
"Ext.grid.property.HeaderContainer": [],
"Ext.layout.component.BoundList": [
"layout.boundlist"
],
"Ext.tab.Bar": [
"widget.tabbar"
],
"Ext.app.Application": [],
"Ext.layout.container.Accordion": [
"layout.accordion"
],
"Ext.ShadowPool": [],
"Ext.grid.locking.HeaderContainer": [],
"Ext.resizer.ResizeTracker": [],
"Ext.panel.Tool": [
"widget.tool"
],
"Ext.layout.container.boxOverflow.None": [],
"Ext.grid.CellContext": [],
"Ext.tree.View": [
"widget.treeview"
],
"Ext.ElementLoader": [],
"Ext.grid.ColumnComponentLayout": [
"layout.columncomponent"
],
"Ext.toolbar.Separator": [
"widget.tbseparator"
],
"Ext.dd.DragZone": [],
"Ext.layout.component.FieldSet": [
"layout.fieldset"
],
"Ext.util.Renderable": [],
"Ext.util.Bindable": [],
"Ext.data.SortTypes": [],
"Ext.rtl.layout.container.HBox": [],
"Ext.util.Animate": [],
"Ext.data.flash.BinaryXhr": [],
"Ext.form.field.Date": [
"widget.datefield"
],
"Ext.Component": [
"widget.box",
"widget.component"
],
"Ext.chart.axis.Axis": [],
"Ext.menu.DatePicker": [
"widget.datemenu"
],
"Ext.fx.target.CompositeSprite": [],
"Ext.rtl.tip.QuickTipManager": [],
"Ext.form.field.Picker": [
"widget.pickerfield"
],
"Ext.fx.Animator": [],
"Ext.Ajax": [],
"Ext.layout.component.Dock": [
"layout.dock"
],
"Ext.util.Filter": [],
"Ext.dd.DragDrop": [],
"Ext.view.View": [
"widget.dataview"
],
"Ext.data.association.BelongsTo": [
"association.belongsto"
],
"Ext.fx.target.Element": [],
"Ext.draw.Surface": [],
"Ext.dd.DDProxy": [],
"Ext.data.AbstractStore": [],
"Ext.grid.plugin.BufferedRendererTreeView": [],
"Ext.grid.locking.View": [],
"Ext.form.action.StandardSubmit": [
"formaction.standardsubmit"
],
"Ext.dd.Registry": [],
"Ext.picker.Month": [
"widget.monthpicker"
],
"Ext.menu.Manager": [],
"Ext.container.Container": [
"widget.container"
],
"Ext.rtl.form.field.Spinner": [],
"Ext.util.KeyMap": [],
"Ext.data.Batch": [],
"Ext.resizer.Handle": [],
"Ext.util.ElementContainer": [],
"Ext.grid.feature.Grouping": [
"feature.grouping"
],
"Ext.tab.Panel": [
"widget.tabpanel"
],
"Ext.rtl.grid.CellEditor": [],
"Ext.layout.component.Body": [
"layout.body"
],
"Ext.layout.Context": [],
"Ext.layout.component.field.ComboBox": [
"layout.combobox"
],
"Ext.dd.DDTarget": [],
"Ext.chart.Chart": [
"widget.chart"
],
"Ext.data.Field": [
"data.field"
],
"Ext.form.field.FileButton": [
"widget.filebutton"
],
"Ext.chart.series.Gauge": [
"series.gauge"
],
"Ext.data.StoreManager": [],
"Ext.data.IdGenerator": [],
"Ext.tip.QuickTipManager": [],
"Ext.grid.plugin.Editing": [
"editing.editing"
],
"Ext.Queryable": [],
"Ext.state.LocalStorageProvider": [
"state.localstorage"
],
"Ext.grid.RowEditor": [
"widget.roweditor"
],
"Ext.app.EventDomain": [],
"Ext.form.action.Action": [],
"Ext.fx.Easing": [],
"Ext.ProgressBar": [
"widget.progressbar"
],
"Ext.tree.ViewDragZone": [],
"Ext.data.reader.Array": [
"reader.array"
],
"Ext.picker.Date": [
"widget.datepicker"
],
"Ext.rtl.grid.column.Column": [],
"Ext.data.proxy.JsonP": [
"proxy.jsonp",
"proxy.scripttag"
],
"Ext.chart.series.Area": [
"series.area"
],
"Ext.fx.Anim": [],
"Ext.menu.Item": [
"widget.menuitem"
],
"Ext.rtl.dom.Element_position": [],
"Ext.chart.Legend": [],
"Ext.grid.plugin.HeaderReorderer": [
"plugin.gridheaderreorderer"
],
"Ext.rtl.view.Table": [],
"Ext.layout.container.VBox": [
"layout.vbox"
],
"Ext.rtl.util.Floating": [],
"Ext.view.DropZone": [],
"Ext.rtl.tree.Column": [],
"Ext.layout.component.Button": [
"layout.button"
],
"Ext.form.field.Hidden": [
"widget.hidden",
"widget.hiddenfield"
],
"Ext.form.FieldContainer": [
"widget.fieldcontainer"
],
"Ext.rtl.grid.plugin.RowEditing": [],
"Ext.data.proxy.Server": [
"proxy.server"
],
"Ext.chart.series.Cartesian": [],
"Ext.rtl.layout.component.Dock": [],
"Ext.grid.column.Column": [
"widget.gridcolumn"
],
"Ext.data.ResultSet": [],
"Ext.data.association.HasMany": [
"association.hasmany"
],
"Ext.layout.container.Fit": [
"layout.fit"
],
"Ext.util.CSS": [],
"Ext.rtl.AbstractComponent": [],
"Ext.layout.component.field.Field": [
"layout.field"
],
"Ext.data.proxy.Ajax": [
"proxy.ajax"
],
"Ext.rtl.EventObjectImpl": [],
"Ext.app.domain.Component": [],
"Ext.form.Label": [
"widget.label"
],
"Ext.data.writer.Writer": [
"writer.base"
],
"Ext.view.BoundListKeyNav": [],
"Ext.form.FieldSet": [
"widget.fieldset"
],
"Ext.form.field.VTypes": [],
"Ext.fx.PropertyHandler": [],
"Ext.form.CheckboxGroup": [
"widget.checkboxgroup"
],
"Ext.data.JsonP": [],
"Ext.draw.engine.Vml": [],
"Ext.layout.container.CheckboxGroup": [
"layout.checkboxgroup"
],
"Ext.app.domain.Direct": [],
"Ext.panel.Header": [
"widget.header"
],
"Ext.app.Controller": [],
"Ext.rtl.dom.Layer": [],
"Ext.grid.plugin.CellEditing": [
"plugin.cellediting"
],
"Ext.form.field.Time": [
"widget.timefield"
],
"Ext.fx.CubicBezier": [],
"Ext.button.Cycle": [
"widget.cycle"
],
"Ext.app.domain.Global": [],
"Ext.data.Tree": [
"data.tree"
],
"Ext.ModelManager": [],
"Ext.data.XmlStore": [
"store.xml"
],
"Ext.grid.ViewDropZone": [],
"Ext.rtl.slider.Multi": [],
"Ext.grid.header.DropZone": [],
"Ext.rtl.layout.component.field.Text": [],
"Ext.util.HashMap": [],
"Ext.grid.column.Template": [
"widget.templatecolumn"
],
"Ext.ComponentLoader": [],
"Ext.form.FieldAncestor": [],
"Ext.rtl.layout.container.Border": [],
"Ext.app.domain.Controller": [],
"Ext.chart.axis.Gauge": [
"axis.gauge"
],
"Ext.layout.container.border.Region": [],
"Ext.data.validations": [],
"Ext.data.Connection": [],
"Ext.resizer.Splitter": [
"widget.splitter"
],
"Ext.dd.DropZone": [],
"Ext.direct.ExceptionEvent": [
"direct.exception"
],
"Ext.form.RadioManager": [],
"Ext.data.association.HasOne": [
"association.hasone"
],
"Ext.draw.Text": [
"widget.text"
],
"Ext.window.MessageBox": [
"widget.messagebox"
],
"Ext.fx.target.CompositeElementCSS": [],
"Ext.rtl.selection.CellModel": [],
"Ext.rtl.layout.ContextItem": [],
"Ext.chart.series.Line": [
"series.line"
],
"Ext.view.Table": [
"widget.tableview"
],
"Ext.fx.target.CompositeElement": [],
"Ext.fx.Manager": [],
"Ext.data.writer.Json": [
"writer.json"
],
"Ext.chart.Label": [],
"Ext.grid.View": [
"widget.gridview"
],
"Ext.Action": [],
"Ext.form.Basic": [],
"Ext.rtl.form.field.Checkbox": [],
"Ext.container.Viewport": [
"widget.viewport"
],
"Ext.state.Stateful": [],
"Ext.grid.feature.RowBody": [
"feature.rowbody"
],
"Ext.form.field.Text": [
"widget.textfield"
],
"Ext.rtl.layout.component.field.Trigger": [],
"Ext.data.reader.Xml": [
"reader.xml"
],
"Ext.grid.feature.AbstractSummary": [
"feature.abstractsummary"
],
"Ext.chart.axis.Category": [
"axis.category"
],
"Ext.rtl.layout.container.boxOverflow.Scroller": [],
"Ext.grid.plugin.BufferedRendererTableView": [],
"Ext.layout.container.Absolute": [
"layout.absolute"
],
"Ext.rtl.layout.container.Box": [],
"Ext.data.reader.Json": [
"reader.json"
],
"Ext.util.TextMetrics": [],
"Ext.data.TreeStore": [
"store.tree"
],
"Ext.view.BoundList": [
"widget.boundlist"
],
"Ext.form.field.HtmlEditor": [
"widget.htmleditor"
],
"Ext.layout.container.Form": [
"layout.form"
],
"Ext.chart.MaskLayer": [],
"Ext.resizer.BorderSplitterTracker": [],
"Ext.util.LruCache": [],
"Ext.tip.Tip": [],
"Ext.grid.column.CheckColumn": [
"widget.checkcolumn"
],
"Ext.grid.column.RowNumberer": [
"widget.rownumberer"
],
"Ext.rtl.resizer.SplitterTracker": [],
"Ext.grid.feature.RowWrap": [
"feature.rowwrap"
],
"Ext.data.proxy.Client": [],
"Ext.data.Types": [],
"Ext.draw.SpriteDD": [],
"Ext.layout.container.boxOverflow.Menu": [],
"Ext.LoadMask": [
"widget.loadmask"
],
"Ext.rtl.grid.RowEditor": [],
"Ext.toolbar.Paging": [
"widget.pagingtoolbar"
],
"Ext.data.association.Association": [],
"Ext.tree.ViewDropZone": [],
"Ext.toolbar.Toolbar": [
"widget.toolbar"
],
"Ext.tip.ToolTip": [
"widget.tooltip"
],
"Ext.chart.Highlight": [],
"Ext.state.Manager": [],
"Ext.util.Inflector": [],
"Ext.grid.Panel": [
"widget.grid",
"widget.gridpanel"
],
"Ext.data.NodeStore": [
"store.node"
],
"Ext.Shadow": [],
"Ext.form.action.Submit": [
"formaction.submit"
],
"Ext.form.Panel": [
"widget.form"
],
"Ext.chart.series.Series": [],
"Ext.data.Request": [],
"Ext.dd.DD": [],
"Ext.toolbar.Fill": [
"widget.tbfill"
],
"Ext.data.proxy.WebStorage": [],
"Ext.util.Floating": [],
"Ext.form.action.DirectSubmit": [
"formaction.directsubmit"
],
"Ext.util.Cookies": [],
"Ext.data.UuidGenerator": [
"idgen.uuid"
],
"Ext.util.Point": [],
"Ext.fx.target.Component": [],
"Ext.form.CheckboxManager": [],
"Ext.form.field.Field": [],
"Ext.form.field.Display": [
"widget.displayfield"
],
"Ext.layout.container.Anchor": [
"layout.anchor"
],
"Ext.layout.component.field.Text": [
"layout.textfield"
],
"Ext.data.DirectStore": [
"store.direct"
],
"Ext.dom.Layer": [],
"Ext.grid.RowEditorButtons": [
"widget.roweditorbuttons"
],
"Ext.data.BufferStore": [
"store.buffer"
],
"Ext.grid.plugin.DivRenderer": [
"plugin.divrenderer"
],
"Ext.grid.ColumnLayout": [
"layout.gridcolumn"
],
"Ext.chart.series.Column": [
"series.column"
],
"Ext.AbstractComponent": [],
"Ext.flash.Component": [
"widget.flash"
],
"Ext.form.field.Base": [
"widget.field"
],
"Ext.grid.feature.GroupStore": [],
"Ext.data.SequentialIdGenerator": [
"idgen.sequential"
],
"Ext.grid.header.Container": [
"widget.headercontainer"
],
"Ext.container.ButtonGroup": [
"widget.buttongroup"
],
"Ext.data.PageMap": [],
"Ext.grid.column.Action": [
"widget.actioncolumn"
],
"Ext.layout.component.field.Trigger": [
"layout.triggerfield"
],
"Ext.layout.component.field.FieldContainer": [
"layout.fieldcontainer"
],
"Ext.chart.Shape": [],
"Ext.panel.DD": [],
"Ext.container.AbstractContainer": [],
"Ext.data.ArrayStore": [
"store.array"
],
"Ext.rtl.layout.container.CheckboxGroup": [],
"Ext.window.Window": [
"widget.window"
],
"Ext.picker.Color": [
"widget.colorpicker"
],
"Ext.grid.feature.Feature": [
"feature.feature"
],
"Ext.chart.theme.Theme": [],
"Ext.util.ClickRepeater": [],
"Ext.form.field.Spinner": [
"widget.spinnerfield"
],
"Ext.container.DockingContainer": [],
"Ext.selection.DataViewModel": [],
"Ext.rtl.selection.TreeModel": [],
"Ext.dd.DragTracker": [],
"Ext.data.Group": [],
"Ext.dd.DragDropManager": [],
"Ext.selection.CheckboxModel": [
"selection.checkboxmodel"
],
"Ext.menu.KeyNav": [],
"Ext.layout.container.Column": [
"layout.column"
],
"Ext.draw.Matrix": [],
"Ext.form.field.Number": [
"widget.numberfield"
],
"Ext.rtl.util.Renderable": [],
"Ext.data.proxy.Direct": [
"proxy.direct"
],
"Ext.chart.Navigation": [],
"Ext.slider.Tip": [
"widget.slidertip"
],
"Ext.chart.theme.Base": [],
"Ext.form.field.TextArea": [
"widget.textarea",
"widget.textareafield"
],
"Ext.rtl.layout.container.VBox": [],
"Ext.form.field.Radio": [
"widget.radio",
"widget.radiofield"
],
"Ext.layout.component.ProgressBar": [
"layout.progressbar"
],
"Ext.chart.series.Pie": [
"series.pie"
],
"Ext.tree.plugin.TreeViewDragDrop": [
"plugin.treeviewdragdrop"
],
"Ext.direct.Provider": [
"direct.provider"
],
"Ext.data.TreeModel": [],
"Ext.layout.Layout": [],
"Ext.toolbar.TextItem": [
"widget.tbtext"
],
"Ext.rtl.button.Button": [],
"Ext.util.AbstractMixedCollection": [],
"Ext.data.JsonStore": [
"store.json"
],
"Ext.button.Split": [
"widget.splitbutton"
],
"Ext.dd.DropTarget": [],
"Ext.direct.RemotingEvent": [
"direct.rpc"
],
"Ext.draw.Sprite": [],
"Ext.fx.target.Sprite": [],
"Ext.data.proxy.LocalStorage": [
"proxy.localstorage"
],
"Ext.layout.component.Draw": [
"layout.draw"
],
"Ext.AbstractPlugin": [],
"Ext.Editor": [
"widget.editor"
],
"Ext.chart.axis.Radial": [
"axis.radial"
],
"Ext.chart.Tip": [],
"Ext.layout.container.Table": [
"layout.table"
],
"Ext.chart.axis.Abstract": [],
"Ext.data.proxy.Rest": [
"proxy.rest"
],
"Ext.rtl.layout.container.Absolute": [],
"Ext.util.Queue": [],
"Ext.state.CookieProvider": [],
"Ext.Img": [
"widget.image",
"widget.imagecomponent"
],
"Ext.dd.DragSource": [],
"Ext.grid.CellEditor": [],
"Ext.layout.ClassList": [],
"Ext.button.Manager": [],
"Ext.rtl.form.field.File": [],
"Ext.util.Sorter": [],
"Ext.resizer.SplitterTracker": [],
"Ext.panel.Table": [
"widget.tablepanel"
],
"Ext.draw.Color": [],
"Ext.chart.series.Bar": [
"series.bar"
],
"Ext.PluginManager": [],
"Ext.util.ComponentDragger": [],
"Ext.chart.series.Scatter": [
"series.scatter"
],
"Ext.chart.Callout": [],
"Ext.data.Store": [
"store.store"
],
"Ext.grid.feature.Summary": [
"feature.summary"
],
"Ext.util.ProtoElement": [],
"Ext.layout.component.Component": [],
"Ext.direct.Manager": [],
"Ext.data.proxy.Proxy": [
"proxy.proxy"
],
"Ext.menu.CheckItem": [
"widget.menucheckitem"
],
"Ext.layout.container.Card": [
"layout.card"
],
"Ext.draw.Component": [
"widget.draw"
],
"Ext.toolbar.Item": [
"widget.tbitem"
],
"Ext.form.RadioGroup": [
"widget.radiogroup"
],
"Ext.rtl.tab.Bar": [],
"Ext.rtl.form.field.Trigger": [],
"Ext.slider.Thumb": [],
"Ext.grid.header.DragZone": [],
"Ext.rtl.resizer.ResizeTracker": [],
"Ext.form.action.DirectLoad": [
"formaction.directload"
],
"Ext.picker.Time": [
"widget.timepicker"
],
"Ext.grid.plugin.BufferedRenderer": [
"plugin.bufferedrenderer"
],
"Ext.resizer.BorderSplitter": [
"widget.bordersplitter"
],
"Ext.menu.ColorPicker": [
"widget.colormenu"
],
"Ext.ZIndexManager": [],
"Ext.menu.Menu": [
"widget.menu"
],
"Ext.chart.LegendItem": [],
"Ext.toolbar.Spacer": [
"widget.tbspacer"
],
"Ext.rtl.dd.DD": [],
"Ext.panel.Panel": [
"widget.panel"
],
"Ext.util.Memento": [],
"Ext.app.domain.Store": [],
"Ext.data.proxy.Memory": [
"proxy.memory"
],
"Ext.chart.axis.Time": [
"axis.time"
],
"Ext.grid.plugin.DragDrop": [
"plugin.gridviewdragdrop"
],
"Ext.ComponentQuery": [],
"Ext.draw.engine.SvgExporter": [],
"Ext.layout.container.Auto": [
"layout.auto",
"layout.autocontainer"
],
"Ext.grid.locking.Lockable": [],
"Ext.view.AbstractView": [],
"Ext.util.Region": [],
"Ext.draw.Draw": [],
"Ext.fx.target.ElementCSS": [],
"Ext.rtl.panel.Panel": [],
"Ext.layout.component.field.HtmlEditor": [
"layout.htmleditor"
],
"Ext.data.proxy.SessionStorage": [
"proxy.sessionstorage"
],
"Ext.app.EventBus": [],
"Ext.menu.Separator": [
"widget.menuseparator"
],
"Ext.util.History": [],
"Ext.direct.Event": [
"direct.event"
],
"Ext.direct.RemotingMethod": [],
"Ext.dd.ScrollManager": [],
"Ext.chart.Mask": [],
"Ext.rtl.dom.Element_anim": [],
"Ext.selection.CellModel": [
"selection.cellmodel"
],
"Ext.view.TableLayout": [
"layout.tableview"
],
"Ext.rtl.panel.Header": [],
"Ext.rtl.dom.Element_scroll": [],
"Ext.state.Provider": [],
"Ext.layout.container.Editor": [
"layout.editor"
],
"Ext.grid.ColumnManager": [],
"Ext.data.Errors": [],
"Ext.grid.plugin.RowExpander": [
"plugin.rowexpander"
],
"Ext.selection.TreeModel": [
"selection.treemodel"
],
"Ext.form.Labelable": [],
"Ext.grid.column.Number": [
"widget.numbercolumn"
],
"Ext.draw.engine.Svg": [],
"Ext.grid.property.Grid": [
"widget.propertygrid"
],
"Ext.FocusManager": [],
"Ext.AbstractManager": [],
"Ext.chart.series.Radar": [
"series.radar"
],
"Ext.rtl.dom.Element_insertion": [],
"Ext.grid.property.Property": [],
"Ext.chart.TipSurface": [],
"Ext.layout.SizeModel": [],
"Ext.grid.column.Boolean": [
"widget.booleancolumn"
],
"Ext.direct.PollingProvider": [
"direct.pollingprovider"
],
"Ext.grid.plugin.HeaderResizer": [
"plugin.gridheaderresizer"
],
"Ext.tree.Column": [
"widget.treecolumn"
],
"Ext.data.writer.Xml": [
"writer.xml"
],
"Ext.slider.Multi": [
"widget.multislider"
],
"Ext.panel.AbstractPanel": [],
"Ext.layout.component.field.Slider": [
"layout.sliderfield"
],
"Ext.chart.axis.Numeric": [
"axis.numeric"
],
"Ext.layout.container.boxOverflow.Scroller": [],
"Ext.data.Operation": [],
"Ext.resizer.Resizer": [],
"Ext.layout.container.HBox": [
"layout.hbox"
],
"Ext.selection.RowModel": [
"selection.rowmodel"
],
"Ext.layout.ContextItem": [],
"Ext.util.MixedCollection": []
});
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);