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;
},
_replaceSim: replaceSim, // for unit testing
_spliceSim: spliceSim,
/**
* 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(/^([^\[]+)/);
if (!matchedName) {
throw new Error('[Ext.Object.fromQueryString] Malformed query string given, failed parsing name from "' + part + '"');
}
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 { Ext.log({ msg: taskError, level: 'error' }); 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 (!fn) {
Ext.Error.raise({
sourceClass: Ext.getClassName(this.observable),
sourceMethod: "addListener",
msg: "The specified callback function is undefined"
});
}
if (!me.isListening(fn, scope)) {
listener = me.createListener(fn, scope, options);
if (me.firing) {
// if we are currently firing this event, don't disturb the listener loop
me.listeners = me.listeners.slice(0);
}
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);
}
if (!fn) {
Ext.Error.raise({
sourceClass: 'Ext.EventManager',
sourceMethod: 'addListener',
targetElement: element,
eventName: eventName,
msg: 'Error adding "' + eventName + '\" listener. The handler function is undefined.'
});
}
// create the wrapper function
options = options || {};
bind = EventManager.normalizeEvent(eventName, fn);
wrap = EventManager.createListenerWrap(dom, eventName, bind.fn, scope, options);
// 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.
if (!config || (typeof config !== 'function' && !config.fn)) {
Ext.Error.raise('No function passed for event ' + me.$className + '.' + ename);
}
*/
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);
}
if (!fn) {
Ext.Error.raise('No function passed for event ' + me.$className + '.' + 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();
},
purgeListeners : function() {
if (Ext.global.console) {
Ext.global.console.warn('Observable: purgeListeners has been deprecated. Please use clearListeners.');
}
return this.clearListeners.apply(this, arguments);
},
/**
* Removes all managed listeners for this object.
*/
clearManagedListeners : function() {
var managedListeners = this.managedListeners || [],
i = 0,
len = managedListeners.length;
for (; i < len; i++) {
this.removeManagedListenerItem(true, managedListeners[i]);
}
this.managedListeners = [];
},
/**
* Remove a single managed listener item
* @private
* @param {Boolean} isClear True if this is being called during a clear
* @param {Object} managedListener The managed listener item
* See removeManagedListener for other args
*/
removeManagedListenerItem: function(isClear, managedListener, item, ename, fn, scope){
if (isClear || (managedListener.item === item && managedListener.ename === ename && (!fn || managedListener.fn === fn) && (!scope || managedListener.scope === scope))) {
managedListener.item.un(managedListener.ename, managedListener.fn, managedListener.scope);
if (!isClear) {
Ext.Array.remove(this.managedListeners, managedListener);
}
}
},
purgeManagedListeners : function() {
if (Ext.global.console) {
Ext.global.console.warn('Observable: purgeManagedListeners has been deprecated. Please use clearManagedListeners.');
}
return this.clearManagedListeners.apply(this, arguments);
},
/**
* Adds the specified events to the list of events which this Observable may fire.
*
* @param {Object/String...} eventNames Either an object with event names as properties with
* a value of `true`. For example:
*
* this.addEvents({
* storeloaded: true,
* storecleared: true
* });
*
* Or any number of event names as separate parameters. For example:
*
* this.addEvents('storeloaded', 'storecleared');
*
*/
addEvents: function(o) {
var me = this,
events = me.events || (me.events = {}),
arg, args, i;
if (typeof o == 'string') {
for (args = arguments, i = args.length; i--; ) {
arg = args[i];
if (!events[arg]) {
events[arg] = true;
}
}
} else {
Ext.applyIf(me.events, o);
}
},
/**
* Checks to see if this object has any listeners for a specified event, or whether the event bubbles. The answer
* indicates whether the event needs firing or not.
*
* @param {String} eventName The name of the event to check for
* @return {Boolean} `true` if the event is being listened for or bubbles, else `false`
*/
hasListener: function(ename) {
return !!this.hasListeners[ename.toLowerCase()];
},
/**
* Suspends the firing of all events. (see {@link #resumeEvents})
*
* @param {Boolean} queueSuspended Pass as true to queue up suspended events to be fired
* after the {@link #resumeEvents} call instead of discarding all suspended events.
*/
suspendEvents: function(queueSuspended) {
this.eventsSuspended += 1;
if (queueSuspended && !this.eventQueue) {
this.eventQueue = [];
}
},
/**
* 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) {
Ext.classSystemMonitor && Ext.classSystemMonitor('extend mixin', arguments);
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. Provides a registry of all Components (instances of {@link Ext.Component} or any subclass
* thereof) on a page so that they can be easily accessed by {@link Ext.Component component}
* {@link Ext.Component#id id} (see {@link #get}, or the convenience method {@link Ext#getCmp Ext.getCmp}). This object also provides a registry of available Component classes
* indexed by a mnemonic code known as the Component's {@link Ext.Component#xtype xtype}.
* The A child Component may be specified simply as a config object
* as long as the correct For a list of all available Filters the objects in this collection by a set of {@link Ext.util.Filter Filter}s, or by a single
* property/value pair with optional parameters for substring matching and case sensitivity. See
* {@link Ext.util.Filter Filter} for an example of using Filter objects (preferred). Alternatively,
* MixedCollection can be easily filtered by property like this: Abstract base class for state provider implementations. The provider is responsible
* for setting values and extracting values to/from the underlying storage source. The
* storage source can vary and the details should be implemented in a subclass. For example
* a provider could use a server side database or the browser localstorage where supported. This class provides methods for encoding and decoding typed variables including
* dates and defines the Provider interface. By default these methods put the value and the
* type information into a delimited string that can be stored. These should be overridden in
* a subclass if you want to change the format of the encoded value and subsequent decoding. See {@link #stateful} for an explanation of saving and restoring state. An array of events that, when fired, should trigger this object to
* save its state. Defaults to none. See {desc} {msg} To view this page ensure that Adobe Flash Player version 11.1.0 or greater is installed, and that the FlashPlugin.swf file was correctly placed in the /resources directory.
* 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) {
Ext.Error.raise({
sourceClass: 'Ext.util.Positionable',
sourceMethod: 'getAlignToXY',
msg: 'Attempted to align an element that doesn\'t exist'
});
}
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);
if (!alignMatch) {
Ext.Error.raise({
sourceClass: 'Ext.util.Positionable',
sourceMethod: 'getAlignToXY',
el: alignToEl,
position: posSpec,
offset: offset,
msg: 'Attemmpted to align an element with an invalid position: "' + posSpec + '"'
});
}
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 {
throw new Error("[Ext.select] Invalid selector specified: " + selector);
}
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;
/**
* Represents a collection of a set of key and value pairs. Each key in the HashMap
* must be unique, the same key cannot exist twice. Access to items is provided via
* the key only. Sample usage:
*
* var map = new Ext.util.HashMap();
* map.add('key1', 1);
* map.add('key2', 2);
* map.add('key3', 3);
*
* map.each(function(key, value, length){
* console.log(key, value, length);
* });
*
* The HashMap is an unordered class,
* there is no guarantee when iterating over the items that they will be in any particular
* order. If this is required, then use a {@link Ext.util.MixedCollection}.
*/
Ext.define('Ext.util.HashMap', {
mixins: {
observable: Ext.util.Observable
},
/**
* @private Mutation counter which is incremented upon add and remove.
*/
generation: 0,
/**
* @cfg {Function} keyFn A function that is used to retrieve a default key for a passed object.
* A default is provided that returns the `id` property on the object. This function is only used
* if the `add` method is called with a single argument.
*/
/**
* Creates new HashMap.
* @param {Object} config (optional) Config object.
*/
constructor: function(config) {
config = config || {};
var me = this,
keyFn = config.keyFn;
me.initialConfig = config;
me.addEvents(
/**
* @event add
* Fires when a new item is added to the hash.
* @param {Ext.util.HashMap} this
* @param {String} key The key of the added item.
* @param {Object} value The value of the added item.
*/
'add',
/**
* @event clear
* Fires when the hash is cleared.
* @param {Ext.util.HashMap} this
*/
'clear',
/**
* @event remove
* Fires when an item is removed from the hash.
* @param {Ext.util.HashMap} this
* @param {String} key The key of the removed item.
* @param {Object} value The value of the removed item.
*/
'remove',
/**
* @event replace
* Fires when an item is replaced in the hash.
* @param {Ext.util.HashMap} this
* @param {String} key The key of the replaced item.
* @param {Object} value The new value for the item.
* @param {Object} old The old value for the item.
*/
'replace'
);
me.mixins.observable.constructor.call(me, config);
me.clear(true);
if (keyFn) {
me.getKey = keyFn;
}
},
/**
* Gets the number of items in the hash.
* @return {Number} The number of items in the hash.
*/
getCount: function() {
return this.length;
},
/**
* Implementation for being able to extract the key from an object if only
* a single argument is passed.
* @private
* @param {String} key The key
* @param {Object} value The value
* @return {Array} [key, value]
*/
getData: function(key, value) {
// if we have no value, it means we need to get the key from the object
if (value === undefined) {
value = key;
key = this.getKey(value);
}
return [key, value];
},
/**
* Extracts the key from an object. This is a default implementation, it may be overridden
* @param {Object} o The object to get the key from
* @return {String} The key to use.
*/
getKey: function(o) {
return o.id;
},
/**
* Adds an item to the collection. Fires the {@link #event-add} event when complete.
*
* @param {String/Object} key The key to associate with the item, or the new item.
*
* If a {@link #getKey} implementation was specified for this HashMap,
* or if the key of the stored items is in a property called `id`,
* the HashMap will be able to *derive* the key for the new item.
* In this case just pass the new item in this parameter.
*
* @param {Object} [o] The item to add.
*
* @return {Object} The item added.
*/
add: function(key, value) {
var me = this;
// Need to check arguments length here, since we could have called:
// map.add('foo', undefined);
if (arguments.length === 1) {
value = key;
key = me.getKey(value);
}
if (me.containsKey(key)) {
return me.replace(key, value);
}
me.map[key] = value;
++me.length;
me.generation++;
if (me.hasListeners.add) {
me.fireEvent('add', me, key, value);
}
return value;
},
/**
* Replaces an item in the hash. If the key doesn't exist, the
* {@link #method-add} method will be used.
* @param {String} key The key of the item.
* @param {Object} value The new value for the item.
* @return {Object} The new value of the item.
*/
replace: function(key, value) {
var me = this,
map = me.map,
old;
// Need to check arguments length here, since we could have called:
// map.replace('foo', undefined);
if (arguments.length === 1) {
value = key;
key = me.getKey(value);
}
if (!me.containsKey(key)) {
me.add(key, value);
}
old = map[key];
map[key] = value;
me.generation++;
if (me.hasListeners.replace) {
me.fireEvent('replace', me, key, value, old);
}
return value;
},
/**
* Remove an item from the hash.
* @param {Object} o The value of the item to remove.
* @return {Boolean} True if the item was successfully removed.
*/
remove: function(o) {
var key = this.findKey(o);
if (key !== undefined) {
return this.removeAtKey(key);
}
return false;
},
/**
* Remove an item from the hash.
* @param {String} key The key to remove.
* @return {Boolean} True if the item was successfully removed.
*/
removeAtKey: function(key) {
var me = this,
value;
if (me.containsKey(key)) {
value = me.map[key];
delete me.map[key];
--me.length;
me.generation++;
if (me.hasListeners.remove) {
me.fireEvent('remove', me, key, value);
}
return true;
}
return false;
},
/**
* Retrieves an item with a particular key.
* @param {String} key The key to lookup.
* @return {Object} The value at that key. If it doesn't exist, `undefined` is returned.
*/
get: function(key) {
var map = this.map;
return map.hasOwnProperty(key) ? map[key] : undefined;
},
/**
* Removes all items from the hash.
* @return {Ext.util.HashMap} this
*/
clear: function(/* private */ initial) {
var me = this;
// Only clear if it has ever had any content
if (initial || me.generation) {
me.map = {};
me.length = 0;
me.generation = initial ? 0 : me.generation + 1;
}
if (initial !== true && me.hasListeners.clear) {
me.fireEvent('clear', me);
}
return me;
},
/**
* Checks whether a key exists in the hash.
* @param {String} key The key to check for.
* @return {Boolean} True if they key exists in the hash.
*/
containsKey: function(key) {
var map = this.map;
return map.hasOwnProperty(key) && map[key] !== undefined;
},
/**
* Checks whether a value exists in the hash.
* @param {Object} value The value to check for.
* @return {Boolean} True if the value exists in the dictionary.
*/
contains: function(value) {
return this.containsKey(this.findKey(value));
},
/**
* Return all of the keys in the hash.
* @return {Array} An array of keys.
*/
getKeys: function() {
return this.getArray(true);
},
/**
* Return all of the values in the hash.
* @return {Array} An array of values.
*/
getValues: function() {
return this.getArray(false);
},
/**
* Gets either the keys/values in an array from the hash.
* @private
* @param {Boolean} isKey True to extract the keys, otherwise, the value
* @return {Array} An array of either keys/values from the hash.
*/
getArray: function(isKey) {
var arr = [],
key,
map = this.map;
for (key in map) {
if (map.hasOwnProperty(key)) {
arr.push(isKey ? key: map[key]);
}
}
return arr;
},
/**
* Executes the specified function once for each item in the hash.
* Returning false from the function will cease iteration.
*
* @param {Function} fn The function to execute.
* @param {String} fn.key The key of the item.
* @param {Number} fn.value The value of the item.
* @param {Number} fn.length The total number of items in the hash.
* @param {Object} [scope] The scope to execute in. Defaults to this.
* @return {Ext.util.HashMap} this
*/
each: function(fn, scope) {
// copy items so they may be removed during iteration.
var items = Ext.apply({}, this.map),
key,
length = this.length;
scope = scope || this;
for (key in items) {
if (items.hasOwnProperty(key)) {
if (fn.call(scope, key, items[key], length) === false) {
break;
}
}
}
return this;
},
/**
* Performs a shallow copy on this hash.
* @return {Ext.util.HashMap} The new hash object.
*/
clone: function() {
var hash = new this.self(this.initialConfig),
map = this.map,
key;
hash.suspendEvents();
for (key in map) {
if (map.hasOwnProperty(key)) {
hash.add(key, map[key]);
}
}
hash.resumeEvents();
return hash;
},
/**
* @private
* Find the key for a value.
* @param {Object} value The value to find.
* @return {Object} The value of the item. Returns undefined if not found.
*/
findKey: function(value) {
var key,
map = this.map;
for (key in map) {
if (map.hasOwnProperty(key) && map[key] === value) {
return key;
}
}
return undefined;
}
});
/**
* Base Manager class
*/
Ext.define('Ext.AbstractManager', {
/* Begin Definitions */
/* End Definitions */
typeName: 'type',
constructor: function(config) {
Ext.apply(this, config || {});
/**
* @property {Ext.util.HashMap} all
* Contains all of the items currently managed
*/
this.all = new Ext.util.HashMap();
this.types = {};
},
/**
* Returns an item by id.
* For additional details see {@link Ext.util.HashMap#get}.
* @param {String} id The id of the item
* @return {Object} The item, undefined if not found.
*/
get : function(id) {
return this.all.get(id);
},
/**
* Registers an item to be managed
* @param {Object} item The item to register
*/
register: function(item) {
var all = this.all,
key = all.getKey(item);
if (all.containsKey(key)) {
Ext.Error.raise('Registering duplicate id "' + key + '" with this manager');
}
this.all.add(item);
},
/**
* Unregisters an item by removing it from this manager
* @param {Object} item The item to unregister
*/
unregister: function(item) {
this.all.remove(item);
},
/**
* Registers a new item constructor, keyed by a type key.
* @param {String} type The mnemonic string by which the class may be looked up.
* @param {Function} cls The new instance class.
*/
registerType : function(type, cls) {
this.types[type] = cls;
cls[this.typeName] = type;
},
/**
* Checks if an item type is registered.
* @param {String} type The mnemonic string by which the class may be looked up
* @return {Boolean} Whether the type is registered.
*/
isRegistered : function(type){
return this.types[type] !== undefined;
},
/**
* Creates and returns an instance of whatever this manager manages, based on the supplied type and
* config object.
* @param {Object} config The config object
* @param {String} defaultType If no type is discovered in the config object, we fall back to this type
* @return {Object} The instance of whatever this manager is managing
*/
create: function(config, defaultType) {
var type = config[this.typeName] || config.type || defaultType,
Constructor = this.types[type];
if (Constructor === undefined) {
Ext.Error.raise("The '" + type + "' type has not been registered with this manager");
}
return new Constructor(config);
},
/**
* Registers a function that will be called when an item with the specified id is added to the manager.
* This will happen on instantiation.
* @param {String} id The item id
* @param {Function} fn The callback function. Called with a single parameter, the item.
* @param {Object} scope The scope (this reference) in which the callback is executed.
* Defaults to the item.
*/
onAvailable : function(id, fn, scope){
var all = this.all,
item,
callback;
if (all.containsKey(id)) {
item = all.get(id);
fn.call(scope || item, item);
} else {
callback = function(map, key, item){
if (key == id) {
fn.call(scope || item, item);
all.un('add', callback);
}
};
all.on('add', callback);
}
},
/**
* Executes the specified function once for each item in the collection.
* @param {Function} fn The function to execute.
* @param {String} fn.key The key of the item
* @param {Number} fn.value The value of the item
* @param {Number} fn.length The total number of items in the collection
* @param {Boolean} fn.return False to cease iteration.
* @param {Object} scope The scope to execute in. Defaults to `this`.
*/
each: function(fn, scope){
this.all.each(fn, scope || this);
},
/**
* Gets the number of items in the collection.
* @return {Number} The number of items in the collection.
*/
getCount: function(){
return this.all.getCount();
}
});
/**
* @class Ext.ComponentManager
*
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);
xtype provides a way to avoid instantiating child Components
* when creating a full, nested config object for a complete Ext page.{@link Ext.Component#xtype xtype} is specified so that if and when the Component
* needs rendering, the correct type can be looked up for lazy instantiation.{@link Ext.Component#xtype xtypes}, see {@link Ext.Component}.xtype. (Optional if the config contains a xtype).
* @return {Ext.Component} The newly instantiated Component.
*/
create: function(component, defaultType){
if (typeof component == 'string') {
return Ext.widget(component);
}
if (component.isComponent) {
return component;
}
return Ext.widget(component.xtype || defaultType, component);
},
registerType: function(type, cls) {
this.types[type] = cls;
cls[this.typeName] = type;
cls.prototype[this.typeName] = type;
}
},
function () {
/**
* This is shorthand reference to {@link Ext.ComponentManager#get}.
* Looks up an existing {@link Ext.Component Component} by {@link Ext.Component#id id}
*
* @param {String} id The component {@link Ext.Component#id id}
* @return Ext.Component The Component, `undefined` if not found, or `null` if a
* Class was found.
* @member Ext
*/
Ext.getCmp = function(id) {
return Ext.ComponentManager.get(id);
};
});
/**
* Provides searching of Components within Ext.ComponentManager (globally) or a specific
* Ext.container.Container on the document with a similar syntax to a CSS selector.
* Returns Array of matching Components, or empty Array.
*
* ## Basic Component lookup
*
* Components can be retrieved by using their {@link Ext.Component xtype}:
*
* - `component`
* - `gridpanel`
*
* Matching by `xtype` matches inherited types, so in the following code, the previous field
* *of any type which inherits from `TextField`* will be found:
*
* prevField = myField.previousNode('textfield');
*
* To match only the exact type, pass the "shallow" flag by adding `(true)` to xtype
* (See AbstractComponent's {@link Ext.AbstractComponent#isXType isXType} method):
*
* prevTextField = myField.previousNode('textfield(true)');
*
* You can search Components by their `id` or `itemId` property, prefixed with a #:
*
* #myContainer
*
* Component `xtype` and `id` or `itemId` can be used together to avoid possible
* id collisions between Components of different types:
*
* panel#myPanel
*
* ## Traversing Component tree
*
* Components can be found by their relation to other Components. There are several
* relationship operators, mostly taken from CSS selectors:
*
* - **`E F`** All descendant Components of E that match F
* - **`E > F`** All direct children Components of E that match F
* - **`E ^ F`** All parent Components of E that match F
*
* Expressions between relationship operators are matched left to right, i.e. leftmost
* selector is applied first, then if one or more matches are found, relationship operator
* itself is applied, then next selector expression, etc. It is possible to combine
* relationship operators in complex selectors:
*
* window[title="Input form"] textfield[name=login] ^ form > button[action=submit]
*
* That selector can be read this way: Find a window with title "Input form", in that
* window find a TextField with name "login" at any depth (including subpanels and/or
* FieldSets), then find an `Ext.form.Panel` that is a parent of the TextField, and in
* that form find a direct child that is a button with custom property `action` set to
* value "submit".
*
* Whitespace on both sides of `^` and `>` operators is non-significant, i.e. can be
* omitted, but usually is used for clarity.
*
* ## Searching by Component attributes
*
* Components can be searched by their object property values (attributes). To do that,
* use attribute matching expression in square brackets:
*
* - `component[autoScroll]` - matches any Component that has `autoScroll` property with
* any truthy (non-empty, not `false`) value.
* - `panel[title="Test"]` - matches any Component that has `title` property set to
* "Test". Note that if the value does not contain spaces, the quotes are optional.
*
* Attributes can use any of the operators in {@link Ext.dom.Query DomQuery}'s
* {@link Ext.dom.Query#operators operators} to compare values.
*
* Prefixing the attribute name with an at sign `@` means that the property must be
* the object's `ownProperty`, not a property from the prototype chain.
*
* Specifications like `[propName]` check that the property is a truthy value. To check
* that the object has an `ownProperty` of a certain name, regardless of the value use
* the form `[?propName]`.
*
* The specified value is coerced to match the type of the property found in the
* candidate Component using {@link Ext#coerce}.
*
* If you need to find Components by their `itemId` property, use `#id` form; it will
* do the same but is easier to read.
*
* ## Attribute matching operators
*
* The '=' operator will return the results that **exactly** match the
* specified object property (attribute):
*
* Ext.ComponentQuery.query('panel[cls=my-cls]');
*
* Will match the following Component:
*
* Ext.create('Ext.window.Window', {
* cls: 'my-cls'
* });
*
* But will not match the following Component, because 'my-cls' is one value
* among others:
*
* Ext.create('Ext.panel.Panel', {
* cls: 'foo-cls my-cls bar-cls'
* });
*
* You can use the '~=' operator instead, it will return Components with
* the property that **exactly** matches one of the whitespace-separated
* values. This is also true for properties that only have *one* value:
*
* Ext.ComponentQuery.query('panel[cls~=my-cls]');
*
* Will match both Components:
*
* Ext.create('Ext.panel.Panel', {
* cls: 'foo-cls my-cls bar-cls'
* });
*
* Ext.create('Ext.window.Window', {
* cls: 'my-cls'
* });
*
* Generally, '=' operator is more suited for object properties other than
* CSS classes, while '~=' operator will work best with properties that
* hold lists of whitespace-separated CSS classes.
*
* The '^=' operator will return Components with specified attribute that
* start with the passed value:
*
* Ext.ComponentQuery.query('panel[title^=Sales]');
*
* Will match the following Component:
*
* Ext.create('Ext.panel.Panel', {
* title: 'Sales estimate for Q4'
* });
*
* The '$=' operator will return Components with specified properties that
* end with the passed value:
*
* Ext.ComponentQuery.query('field[fieldLabel$=name]');
*
* Will match the following Component:
*
* Ext.create('Ext.form.field.Text', {
* fieldLabel: 'Enter your name'
* });
*
* The following test will find panels with their `ownProperty` collapsed being equal to
* `false`. It will **not** match a collapsed property from the prototype chain.
*
* Ext.ComponentQuery.query('panel[@collapsed=false]');
*
* Member expressions from candidate Components may be tested. If the expression returns
* a *truthy* value, the candidate Component will be included in the query:
*
* var disabledFields = myFormPanel.query("{isDisabled()}");
*
* Such expressions are executed in Component's context, and the above expression is
* similar to running this snippet for every Component in your application:
*
* if (component.isDisabled()) {
* matches.push(component);
* }
*
* It is important to use only methods that are available in **every** Component instance
* to avoid run time exceptions. If you need to match your Components with a custom
* condition formula, you can augment `Ext.Component` to provide custom matcher that
* will return `false` by default, and override it in your custom classes:
*
* Ext.define('My.Component', {
* override: 'Ext.Component',
* myMatcher: function() { return false; }
* });
*
* Ext.define('My.Panel', {
* extend: 'Ext.panel.Panel',
* requires: ['My.Component'], // Ensure that Component override is applied
* myMatcher: function(selector) {
* return selector === 'myPanel';
* }
* });
*
* After that you can use a selector with your custom matcher to find all instances
* of `My.Panel`:
*
* Ext.ComponentQuery.query("{myMatcher('myPanel')}");
*
* However if you really need to use a custom matcher, you may find it easier to implement
* a custom Pseudo class instead (see below).
*
* ## Conditional matching
*
* Attribute matchers can be combined to select only Components that match **all**
* conditions (logical AND operator):
*
* Ext.ComponentQuery.query('panel[cls~=my-cls][floating=true][title$="sales data"]');
*
* E.g., the query above will match only a Panel-descended Component that has 'my-cls'
* CSS class *and* is floating *and* with a title that ends with "sales data".
*
* Expressions separated with commas will match any Component that satisfies
* *either* expression (logical OR operator):
*
* Ext.ComponentQuery.query('field[fieldLabel^=User], field[fieldLabel*=password]');
*
* E.g., the query above will match any field with field label starting with "User",
* *or* any field that has "password" in its label.
*
* ## Pseudo classes
*
* Pseudo classes may be used to filter results in the same way as in
* {@link Ext.dom.Query}. There are five default pseudo classes:
*
* * `not` Negates a selector.
* * `first` Filters out all except the first matching item for a selector.
* * `last` Filters out all except the last matching item for a selector.
* * `focusable` Filters out all except Components which are currently able to recieve
* focus.
* * `nth-child` Filters Components by ordinal position in the selection.
*
* These pseudo classes can be used with other matchers or without them:
*
* // Select first direct child button in any panel
* Ext.ComponentQuery.query('panel > button:first');
*
* // Select last field in Profile form
* Ext.ComponentQuery.query('form[title=Profile] field:last');
*
* // Find first focusable Component in a panel and focus it
* panel.down(':focusable').focus();
*
* // Select any field that is not hidden in a form
* form.query('field:not(hiddenfield)');
*
* Pseudo class `nth-child` can be used to find any child Component by its
* position relative to its siblings. This class' handler takes one argument
* that specifies the selection formula as `Xn` or `Xn+Y`:
*
* // Find every odd field in a form
* form.query('field:nth-child(2n+1)'); // or use shortcut: :nth-child(odd)
*
* // Find every even field in a form
* form.query('field:nth-child(2n)'); // or use shortcut: :nth-child(even)
*
* // Find every 3rd field in a form
* form.query('field:nth-child(3n)');
*
* Pseudo classes can be combined to further filter the results, e.g., in the
* form example above we can modify the query to exclude hidden fields:
*
* // Find every 3rd non-hidden field in a form
* form.query('field:not(hiddenfield):nth-child(3n)');
*
* Note that when combining pseudo classes, whitespace is significant, i.e.
* there should be no spaces between pseudo classes. This is a common mistake;
* if you accidentally type a space between `field` and `:not`, the query
* will not return any result because it will mean "find *field's children
* Components* that are not hidden fields...".
*
* ## Custom pseudo classes
*
* It is possible to define your own custom pseudo classes. In fact, a
* pseudo class is just a property in `Ext.ComponentQuery.pseudos` object
* that defines pseudo class name (property name) and pseudo class handler
* (property value):
*
* // Function receives array and returns a filtered array.
* Ext.ComponentQuery.pseudos.invalid = function(items) {
* var i = 0, l = items.length, c, result = [];
* for (; i < l; i++) {
* if (!(c = items[i]).isValid()) {
* result.push(c);
* }
* }
* return result;
* };
*
* var invalidFields = myFormPanel.query('field:invalid');
* if (invalidFields.length) {
* invalidFields[0].getEl().scrollIntoView(myFormPanel.body);
* for (var i = 0, l = invalidFields.length; i < l; i++) {
* invalidFields[i].getEl().frame("red");
* }
* }
*
* Pseudo class handlers can be even more flexible, with a selector
* argument used to define the logic:
*
* // Handler receives array of itmes and selector in parentheses
* Ext.ComponentQuery.pseudos.titleRegex = function(components, selector) {
* var i = 0, l = components.length, c, result = [], regex = new RegExp(selector);
* for (; i < l; i++) {
* c = components[i];
* if (c.title && regex.test(c.title)) {
* result.push(c);
* }
* }
* return result;
* }
*
* var salesTabs = tabPanel.query('panel:titleRegex("sales\\s+for\\s+201[123]")');
*
* Be careful when using custom pseudo classes with MVC Controllers: when
* you use a pseudo class in Controller's `control` or `listen` component
* selectors, the pseudo class' handler function will be called very often
* and may slow down your application significantly. A good rule of thumb
* is to always specify Component xtype with the pseudo class so that the
* handlers are only called on Components that you need, and try to make
* the condition checks as cheap in terms of execution time as possible.
* Note how in the example above, handler function checks that Component
* *has* a title first, before running regex test on it.
*
* ## Query examples
*
* Queries return an array of Components. Here are some example queries:
*
* // retrieve all Ext.Panels in the document by xtype
* var panelsArray = Ext.ComponentQuery.query('panel');
*
* // retrieve all Ext.Panels within the container with an id myCt
* var panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel');
*
* // retrieve all direct children which are Ext.Panels within myCt
* var directChildPanel = Ext.ComponentQuery.query('#myCt > panel');
*
* // retrieve all grids or trees
* var gridsAndTrees = Ext.ComponentQuery.query('gridpanel, treepanel');
*
* // Focus first Component
* myFormPanel.child(':focusable').focus();
*
* // Retrieve every odd text field in a form
* myFormPanel.query('textfield:nth-child(odd)');
*
* // Retrieve every even field in a form, excluding hidden fields
* myFormPanel.query('field:not(hiddenfield):nth-child(even)');
*
* For easy access to queries based from a particular Container see the
* {@link Ext.container.Container#query}, {@link Ext.container.Container#down} and
* {@link Ext.container.Container#child} methods. Also see
* {@link Ext.Component#up}.
*/
Ext.define('Ext.ComponentQuery', {
singleton: true
}, function() {
var cq = this,
domQueryOperators = Ext.dom.Query.operators,
nthRe = /(\d*)n\+?(\d*)/,
nthRe2 = /\D/,
// A function source code pattern with a placeholder which accepts an expression which yields a truth value when applied
// as a member on each item in the passed array.
filterFnPattern = [
'var r = [],',
'i = 0,',
'it = items,',
'l = it.length,',
'c;',
'for (; i < l; i++) {',
'c = it[i];',
'if (c.{0}) {',
'r.push(c);',
'}',
'}',
'return r;'
].join(''),
filterItems = function(items, operation) {
// Argument list for the operation is [ itemsArray, operationArg1, operationArg2...]
// The operation's method loops over each item in the candidate array and
// returns an array of items which match its criteria
return operation.method.apply(this, [ items ].concat(operation.args));
},
getItems = function(items, mode) {
var result = [],
i = 0,
length = items.length,
candidate,
deep = mode !== '>';
for (; i < length; i++) {
candidate = items[i];
if (candidate.getRefItems) {
result = result.concat(candidate.getRefItems(deep));
}
}
return result;
},
getAncestors = function(items) {
var result = [],
i = 0,
length = items.length,
candidate;
for (; i < length; i++) {
candidate = items[i];
while (!!(candidate = candidate.getRefOwner())) {
result.push(candidate);
}
}
return result;
},
// Filters the passed candidate array and returns only items which match the passed xtype
filterByXType = function(items, xtype, shallow) {
if (xtype === '*') {
return items.slice();
}
else {
var result = [],
i = 0,
length = items.length,
candidate;
for (; i < length; i++) {
candidate = items[i];
if (candidate.isXType(xtype, shallow)) {
result.push(candidate);
}
}
return result;
}
},
// Filters the passed candidate array and returns only items which have the passed className
filterByClassName = function(items, className) {
var result = [],
i = 0,
length = items.length,
candidate;
for (; i < length; i++) {
candidate = items[i];
if (candidate.hasCls(className)) {
result.push(candidate);
}
}
return result;
},
// Filters the passed candidate array and returns only items which have the specified property match
filterByAttribute = function(items, property, operator, compareTo) {
var result = [],
i = 0,
length = items.length,
mustBeOwnProperty,
presenceOnly,
candidate, propValue,
j, propLen;
// Prefixing property name with an @ means that the property must be in the candidate, not in its prototype
if (property.charAt(0) === '@') {
mustBeOwnProperty = true;
property = property.substr(1);
}
if (property.charAt(0) === '?') {
mustBeOwnProperty = true;
presenceOnly = true;
property = property.substr(1);
}
for (; i < length; i++) {
candidate = items[i];
// Check candidate hasOwnProperty is propName prefixed with a bang.
if (!mustBeOwnProperty || candidate.hasOwnProperty(property)) {
// pull out property value to test
propValue = candidate[property];
if (presenceOnly) {
result.push(candidate);
}
// implies property is an array, and we must compare value against each element.
else if (operator === '~=') {
if (propValue) {
//We need an array
if (!Ext.isArray(propValue)) {
propValue = propValue.split(' ');
}
for (j = 0, propLen = propValue.length; j < propLen; j++) {
if (domQueryOperators[operator](Ext.coerce(propValue[j], compareTo), compareTo)) {
result.push(candidate);
break;
}
}
}
} else if (!compareTo ? !!candidate[property] : domQueryOperators[operator](Ext.coerce(propValue, compareTo), compareTo)) {
result.push(candidate);
}
}
}
return result;
},
// Filters the passed candidate array and returns only items which have the specified itemId or id
filterById = function(items, id) {
var result = [],
i = 0,
length = items.length,
candidate;
for (; i < length; i++) {
candidate = items[i];
if (candidate.getItemId() === id) {
result.push(candidate);
}
}
return result;
},
// Filters the passed candidate array and returns only items which the named pseudo class matcher filters in
filterByPseudo = function(items, name, value) {
return cq.pseudos[name](items, value);
},
// Determines leading mode
// > for direct child, and ^ to switch to ownerCt axis
modeRe = /^(\s?([>\^])\s?|\s|$)/,
// Matches a token with possibly (true|false) appended for the "shallow" parameter
tokenRe = /^(#)?([\w\-]+|\*)(?:\((true|false)\))?/,
matchers = [{
// Checks for .xtype with possibly (true|false) appended for the "shallow" parameter
re: /^\.([\w\-]+)(?:\((true|false)\))?/,
method: filterByXType
}, {
// checks for [attribute=value], [attribute^=value], [attribute$=value], [attribute*=value], [attribute~=value], [attribute%=value], [attribute!=value]
// Allow [@attribute] to check truthy ownProperty
// Allow [?attribute] to check for presence of ownProperty
re: /^(?:\[((?:@|\?)?[\w\-\$]*[^\^\$\*~%!])\s?(?:(=|.=)\s?['"]?(.*?)["']?)?\])/,
method: filterByAttribute
}, {
// checks for #cmpItemId
re: /^#([\w\-]+)/,
method: filterById
}, {
// checks for :true if the {@link #addAll}
* function should add function references to the collection. Defaults to
* false.
* @since 3.4.0
*/
allowFunctions : false,
/**
* Adds an item to the collection. Fires the {@link #event-add} event when complete.
*
* @param {String/Object} key The key to associate with the item, or the new item.
*
* If a {@link #getKey} implementation was specified for this MixedCollection,
* or if the key of the stored items is in a property called `id`,
* the MixedCollection will be able to *derive* the key for the new item.
* In this case just pass the new item in this parameter.
*
* @param {Object} [obj] The item to add.
*
* @return {Object} The item added.
* @since 1.1.0
*/
add : function(key, obj) {
var len = this.length,
out;
if (arguments.length === 1) {
out = this.insert(len, key);
} else {
out = this.insert(len, key, obj);
}
return out;
},
/**
* A function which will be called, passing a newly added object
* when the object is added without a separate id. The function
* should yield the key by which that object will be indexed.
*
* If no key is yielded, then the object will be added, but it
* cannot be accessed or removed quickly. Finding it in this
* collection for interrogation or removal will require a linear
* scan of this collection's items.
*
* The default implementation simply returns `item.id` but you can
* provide your own implementation to return a different value as
* in the following examples:
*
* // normal way
* var mc = new Ext.util.MixedCollection();
* mc.add(someEl.dom.id, someEl);
* mc.add(otherEl.dom.id, otherEl);
* //and so on
*
* // using getKey
* var mc = new Ext.util.MixedCollection({
* getKey: function(el){
* return el.dom.id;
* }
* });
* mc.add(someEl);
* mc.add(otherEl);
*
* @param {Object} item The item for which to find the key.
* @return {Object} The key for the passed item.
* @since 1.1.0
* @template
*/
getKey : function(o) {
return o.id;
},
/**
* Replaces an item in the collection. Fires the {@link #event-replace} event when complete.
* @param {String} key The key associated with the item to replace, or the replacement item.
*
* If you supplied a {@link #getKey} implementation for this MixedCollection, or if the key
* of your stored items is in a property called *`id`*, then the MixedCollection
* will be able to derive the key of the replacement item. If you want to replace an item
* with one having the same key value, then just pass the replacement item in this parameter.
*
* @param o {Object} o (optional) If the first parameter passed was a key, the item to associate
* with that key.
* @return {Object} The new item.
* @since 1.1.0
*/
replace : function(key, o) {
var me = this,
old,
index;
if (arguments.length == 1) {
o = arguments[0];
key = me.getKey(o);
}
old = me.map[key];
if (typeof key == 'undefined' || key === null || typeof old == 'undefined') {
return me.add(key, o);
}
me.generation++;
index = me.indexOfKey(key);
me.items[index] = o;
me.map[key] = o;
if (me.hasListeners.replace) {
me.fireEvent('replace', key, old, o);
}
return o;
},
/**
* Change the key for an existing item in the collection. If the old key
* does not exist this is a no-op.
* @param {Object} oldKey The old key
* @param {Object} newKey The new key
*/
updateKey: function(oldKey, newKey) {
var me = this,
map = me.map,
indexMap = me.indexMap,
index = me.indexOfKey(oldKey),
item;
if (index > -1) {
item = map[oldKey];
delete map[oldKey];
delete indexMap[oldKey];
map[newKey] = item;
indexMap[newKey] = index;
me.keys[index] = newKey;
me.generation++;
}
},
/**
* Adds all elements of an Array or an Object to the collection.
* @param {Object/Array} objs An Object containing properties which will be added
* to the collection, or an Array of values, each of which are added to the collection.
* Functions references will be added to the collection if `{@link #allowFunctions}`
* has been set to `true`.
* @since 1.1.0
*/
addAll : function(objs) {
var me = this,
key;
if (arguments.length > 1 || Ext.isArray(objs)) {
me.insert(me.length, arguments.length > 1 ? arguments : objs);
} else {
for (key in objs) {
if (objs.hasOwnProperty(key)) {
if (me.allowFunctions || typeof objs[key] != 'function') {
me.add(key, objs[key]);
}
}
}
}
},
/**
* Executes the specified function once for every item in the collection.
* The function should return a boolean value.
* Returning false from the function will stop the iteration.
*
* @param {Function} fn The function to execute for each item.
* @param {Mixed} fn.item The collection item.
* @param {Number} fn.index The index of item.
* @param {Number} fn.len Total length of collection.
* @param {Object} scope (optional) The scope (this reference)
* in which the function is executed. Defaults to the current item in the iteration.
*
* @since 1.1.0
*/
each : function(fn, scope){
var items = Ext.Array.push([], this.items), // each safe for removal
i = 0,
len = items.length,
item;
for (; i < len; i++) {
item = items[i];
if (fn.call(scope || item, item, i, len) === false) {
break;
}
}
},
/**
* Executes the specified function once for every key in the collection, passing each
* key, and its associated item as the first two parameters.
* @param {Function} fn The function to execute for each item.
* @param {String} fn.key The key of collection item.
* @param {Mixed} fn.item The collection item.
* @param {Number} fn.index The index of item.
* @param {Number} fn.len Total length of collection.
* @param {Object} scope (optional) The scope (this reference) in which the
* function is executed. Defaults to the browser window.
*
* @since 1.1.0
*/
eachKey : function(fn, scope){
var keys = this.keys,
items = this.items,
i = 0,
len = keys.length;
for (; i < len; i++) {
fn.call(scope || window, keys[i], items[i], i, len);
}
},
/**
* Returns the first item in the collection which elicits a true return value from the
* passed selection function.
* @param {Function} fn The selection function to execute for each item.
* @param {Mixed} fn.item The collection item.
* @param {String} fn.key The key of collection item.
* @param {Object} scope (optional) The scope (this reference) in which the
* function is executed. Defaults to the browser window.
* @return {Object} The first item in the collection which returned true from the selection
* function, or null if none was found.
*/
findBy : function(fn, scope) {
var keys = this.keys,
items = this.items,
i = 0,
len = items.length;
for (; i < len; i++) {
if (fn.call(scope || window, items[i], keys[i])) {
return items[i];
}
}
return null;
},
/**
* Returns the first item in the collection which elicits a true return value from the passed selection function.
* @deprecated 4.0 Use {@link #findBy} instead.
* @since 1.1.0
*/
find : function() {
if (Ext.isDefined(Ext.global.console)) {
Ext.global.console.warn('Ext.util.MixedCollection: find has been deprecated. Use findBy instead.');
}
return this.findBy.apply(this, arguments);
},
/**
* Inserts an item at the specified index in the collection. Fires the {@link #event-add} event when complete.
* @param {Number} index The index to insert the item at.
* @param {String/Object/String[]/Object[]} key The key to associate with the new item, or the item itself.
* May also be an array of either to insert multiple items at once.
* @param {Object/Object[]} o (optional) If the second parameter was a key, the new item.
* May also be an array to insert multiple items at once.
* @return {Object} The item inserted or an array of items inserted.
* @since 1.1.0
*/
insert : function(index, key, obj) {
var out;
if (Ext.isIterable(key)) {
out = this.doInsert(index, key, obj);
} else {
if (arguments.length > 2) {
out = this.doInsert(index, [key], [obj]);
} else {
out = this.doInsert(index, [key]);
}
out = out[0];
}
return out;
},
// Private multi insert implementation.
doInsert : function(index, keys, objects) {
var me = this,
itemKey,
removeIndex,
i, len = keys.length,
deDupedLen = len,
fireAdd = me.hasListeners.add,
syncIndices,
newKeys = {},
passedDuplicates,
oldKeys, oldObjects;
// External key(s) passed. We cannot reliably find an object's index using the key extraction fn.
// Set a flag for use by contains, indexOf and remove
if (objects != null) {
me.useLinearSearch = true;
}
// No external keys: calculate keys array if not passed
else {
objects = keys;
keys = new Array(len);
for (i = 0; i < len; i++) {
keys[i] = this.getKey(objects[i]);
}
}
// First, remove duplicates of the keys. If a removal point is less than insertion index, decr insertion index
me.suspendEvents();
for (i = 0; i < len; i++) {
itemKey = keys[i];
// Must use indexOf - map might be out of sync
removeIndex = me.indexOfKey(itemKey);
if (removeIndex !== -1) {
if (removeIndex < index) {
index--;
}
me.removeAt(removeIndex);
}
if (itemKey != null) {
// If a previous new item used this key, we will have to rebuild the input arrays from the newKeys map.
if (newKeys[itemKey] != null) {
passedDuplicates = true;
deDupedLen--;
}
newKeys[itemKey] = i;
}
}
me.resumeEvents();
// Duplicate keys were detected - rebuild the objects and keys arrays from the last values associated with each unique key
if (passedDuplicates) {
oldKeys = keys;
oldObjects = objects;
keys = new Array(deDupedLen);
objects = new Array(deDupedLen);
i = 0;
// Loop through unique key hash, properties of which point to last encountered index for that key.
// Rebuild deduped objects and keys arrays.
for (itemKey in newKeys) {
keys[i] = oldKeys[newKeys[itemKey]];
objects[i] = oldObjects[newKeys[itemKey]];
i++;
}
len = deDupedLen;
}
// If we are appending and the indices are in sync, its cheap to kep them that way
syncIndices = index === me.length && me.indexGeneration === me.generation;
// Insert the new items and new keys in at the insertion point
Ext.Array.insert(me.items, index, objects);
Ext.Array.insert(me.keys, index, keys);
me.length += len;
me.generation++;
if (syncIndices) {
me.indexGeneration = me.generation;
}
for (i = 0; i < len; i++, index++) {
itemKey = keys[i];
if (itemKey != null) {
me.map[itemKey] = objects[i];
// If the index is still in sync, keep it that way
if (syncIndices) {
me.indexMap[itemKey] = index;
}
}
if (fireAdd) {
me.fireEvent('add', index, objects[i], itemKey);
}
}
return objects;
},
/**
* Remove an item from the collection.
* @param {Object} o The item to remove.
* @return {Object} The item removed or false if no item was removed.
* @since 1.1.0
*/
remove : function(o) {
var me = this,
removeKey,
index;
// If
// We have not been forced into using linear lookup by a usage of the 2 arg form of add
// and
// The key extraction function yields a key
// Then use indexOfKey. This will use the indexMap - rebuilding it if necessary.
if (!me.useLinearSearch && (removeKey = me.getKey(o))) {
index = me.indexOfKey(removeKey);
}
// Otherwise we have to do it the slow way with a linear search.
else {
index = Ext.Array.indexOf(me.items, o);
}
return (index === -1) ? false : me.removeAt(index);
},
/**
* Remove all items in the collection. Can also be used
* to remove only the items in the passed array.
* @param {Array} [items] An array of items to be removed.
* @return {Ext.util.MixedCollection} this object
*/
removeAll : function(items) {
var me = this,
i;
if (items || me.hasListeners.remove) {
// Only perform expensive item-by-item removal if there's a listener or specific items
if (items) {
for (i = items.length - 1; i >= 0; --i) {
me.remove(items[i]);
}
} else {
while (me.length) {
me.removeAt(0);
}
}
} else {
me.length = me.items.length = me.keys.length = 0;
me.map = {};
me.indexMap = {};
me.generation++;
me.indexGeneration = me.generation;
}
},
/**
* Remove an item from a specified index in the collection. Fires the {@link #event-remove} event when complete.
* @param {Number} index The index within the collection of the item to remove.
* @return {Object} The item removed or false if no item was removed.
* @since 1.1.0
*/
removeAt : function(index) {
var me = this,
o,
key;
if (index < me.length && index >= 0) {
me.length--;
o = me.items[index];
Ext.Array.erase(me.items, index, 1);
key = me.keys[index];
if (typeof key != 'undefined') {
delete me.map[key];
}
Ext.Array.erase(me.keys, index, 1);
if (me.hasListeners.remove) {
me.fireEvent('remove', o, key);
}
me.generation++;
return o;
}
return false;
},
/**
* Remove a range of items starting at a specified index in the collection.
* Does not fire the remove event.
* @param {Number} index The index within the collection of the item to remove.
* @param {Number} [removeCount=1] The nuber of items to remove beginning at the specified index.
* @return {Object} The last item removed or false if no item was removed.
*/
removeRange : function(index, removeCount) {
var me = this,
o,
key,
i,
limit,
syncIndices,
trimming;
if (index < me.length && index >= 0) {
if (!removeCount) {
removeCount = 1;
}
limit = Math.min(index + removeCount, me.length);
removeCount = limit - index;
// If we are removing from end and the indices are in sync, its cheap to kep them that way
trimming = limit === me.length;
syncIndices = trimming && me.indexGeneration === me.generation;
// Loop through the to remove indices deleting from the key hashes
for (i = index; i < limit; i++) {
key = me.keys[i];
if (key != null) {
delete me.map[key];
if (syncIndices) {
delete me.indexMap[key];
}
}
}
// Last item encountered
o = me.items[i - 1];
me.length -= removeCount;
me.generation++;
if (syncIndices) {
me.indexGeneration = me.generation;
}
// Chop items and keys arrays.
// If trimming the trailing end, we can just truncate the 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/
if (trimming) {
me.items.length = me.keys.length = me.length;
} else {
me.items.splice(index, removeCount);
me.keys.splice(index, removeCount);
}
// Return last object removed
return o;
}
return false;
},
/**
* Removes an item associated with the passed key fom the collection.
* @param {String} key The key of the item to remove. If `null` is passed,
* all objects which yielded no key from the configured {@link #getKey} function are removed.
* @return {Object} Only returned if removing at a specified key. The item removed or false if no item was removed.
*/
removeAtKey : function(key) {
var me = this,
keys = me.keys,
i;
// Remove objects which yielded no key from our configured getKey function
if (key == null) {
for (i = keys.length - 1; i >=0; i--) {
if (keys[i] == null) {
me.removeAt(i);
}
}
}
// Remove object at the passed key
else {
return me.removeAt(me.indexOfKey(key));
}
},
/**
* Returns the number of items in the collection.
* @return {Number} the number of items in the collection.
* @since 1.1.0
*/
getCount : function() {
return this.length;
},
/**
* Returns index within the collection of the passed Object.
* @param {Object} o The item to find the index of.
* @return {Number} index of the item. Returns -1 if not found.
* @since 1.1.0
*/
indexOf : function(o) {
var me = this,
key;
if (o != null) {
// If
// We have not been forced into using linear lookup by a usage of the 2 arg form of add
// and
// The key extraction function yields a key
// Then use indexOfKey. This will use the indexMap - rebuilding it if necessary.
if (!me.useLinearSearch && (key = me.getKey(o))) {
return this.indexOfKey(key);
}
// Fallback: Use linear search
return Ext.Array.indexOf(me.items, o);
}
// No object passed
return -1;
},
/**
* Returns index within the collection of the passed key.
* @param {String} key The key to find the index of.
* @return {Number} index of the key.
* @since 1.1.0
*/
indexOfKey : function(key) {
if (!this.map.hasOwnProperty(key)) {
return -1;
}
if (this.indexGeneration !== this.generation) {
this.rebuildIndexMap();
}
return this.indexMap[key];
},
rebuildIndexMap: function() {
var me = this,
indexMap = me.indexMap = {},
keys = me.keys,
len = keys.length,
i;
for (i = 0; i < len; i++) {
indexMap[keys[i]] = i;
}
me.indexGeneration = me.generation;
},
/**
* Returns the item associated with the passed key OR index.
* Key has priority over index. This is the equivalent
* of calling {@link #getByKey} first, then if nothing matched calling {@link #getAt}.
* @param {String/Number} key The key or index of the item.
* @return {Object} If the item is found, returns the item. If the item was not found, returns undefined.
* If an item was found, but is a Class, returns null.
* @since 1.1.0
*/
get : function(key) {
var me = this,
mk = me.map[key],
item = mk !== undefined ? mk : (typeof key == 'number') ? me.items[key] : undefined;
return typeof item != 'function' || me.allowFunctions ? item : null; // for prototype!
},
/**
* Returns the item at the specified index.
* @param {Number} index The index of the item.
* @return {Object} The item at the specified index.
*/
getAt : function(index) {
return this.items[index];
},
/**
* Returns the item associated with the passed key.
* @param {String/Number} key The key of the item.
* @return {Object} The item associated with the passed key.
*/
getByKey : function(key) {
return this.map[key];
},
/**
* Returns true if the collection contains the passed Object as an item.
* @param {Object} o The Object to look for in the collection.
* @return {Boolean} True if the collection contains the Object as an item.
* @since 1.1.0
*/
contains : function(o) {
var me = this,
key;
if (o != null) {
// If
// We have not been forced into using linear lookup by a usage of the 2 arg form of add
// and
// The key extraction function yields a key
// Then use the map to determine object presence.
if (!me.useLinearSearch && (key = me.getKey(o))) {
return this.map[key] != null;
}
// Fallback: Use linear search
return Ext.Array.indexOf(this.items, o) !== -1;
}
return false;
},
/**
* Returns true if the collection contains the passed Object as a key.
* @param {String} key The key to look for in the collection.
* @return {Boolean} True if the collection contains the Object as a key.
* @since 1.1.0
*/
containsKey : function(key) {
return this.map.hasOwnProperty(key);
},
/**
* Removes all items from the collection. Fires the {@link #event-clear} event when complete.
* @since 1.1.0
*/
clear : function() {
var me = this;
// Only clear if it has ever had any content
if (me.generation) {
me.length = 0;
me.items = [];
me.keys = [];
me.map = {};
me.indexMap = {};
me.generation++;
me.indexGeneration = me.generation;
}
if (me.hasListeners.clear) {
me.fireEvent('clear');
}
},
/**
* Returns the first item in the collection.
* @return {Object} the first item in the collection..
* @since 1.1.0
*/
first : function() {
return this.items[0];
},
/**
* Returns the last item in the collection.
* @return {Object} the last item in the collection..
* @since 1.1.0
*/
last : function() {
return this.items[this.length - 1];
},
/**
* Collects all of the values of the given property and returns their sum
* @param {String} property The property to sum by
* @param {String} [root] 'root' property to extract the first argument from. This is used mainly when
* summing fields in records, where the fields are all stored inside the 'data' object
* @param {Number} [start=0] The record index to start at
* @param {Number} [end=-1] The record index to end at
* @return {Number} The total
*/
sum: function(property, root, start, end) {
var values = this.extractValues(property, root),
length = values.length,
sum = 0,
i;
start = start || 0;
end = (end || end === 0) ? end : length - 1;
for (i = start; i <= end; i++) {
sum += values[i];
}
return sum;
},
/**
* Collects unique values of a particular property in this MixedCollection
* @param {String} property The property to collect on
* @param {String} root (optional) 'root' property to extract the first argument from. This is used mainly when
* summing fields in records, where the fields are all stored inside the 'data' object
* @param {Boolean} allowBlank (optional) Pass true to allow null, undefined or empty string values
* @return {Array} The unique values
*/
collect: function(property, root, allowNull) {
var values = this.extractValues(property, root),
length = values.length,
hits = {},
unique = [],
value, strValue, i;
for (i = 0; i < length; i++) {
value = values[i];
strValue = String(value);
if ((allowNull || !Ext.isEmpty(value)) && !hits[strValue]) {
hits[strValue] = true;
unique.push(value);
}
}
return unique;
},
/**
* @private
* Extracts all of the given property values from the items in the MC. Mainly used as a supporting method for
* functions like sum and collect.
* @param {String} property The property to extract
* @param {String} root (optional) 'root' property to extract the first argument from. This is used mainly when
* extracting field data from Model instances, where the fields are stored inside the 'data' object
* @return {Array} The extracted values
*/
extractValues: function(property, root) {
var values = this.items;
if (root) {
values = Ext.Array.pluck(values, root);
}
return Ext.Array.pluck(values, property);
},
/**
* @private
* For API parity with Store's PageMap class. Buffered rendering checks if the Store has the range
* required to render. The Store delegates this question to its backing data object which may be an instance
* of its private PageMap class, or a MixedCollection.
*/
hasRange: function(start, end) {
return (end < this.length);
},
/**
* Returns a range of items in this collection
* @param {Number} startIndex (optional) The starting index. Defaults to 0.
* @param {Number} endIndex (optional) The ending index. Defaults to the last item.
* @return {Array} An array of items
* @since 1.1.0
*/
getRange : function(start, end){
var me = this,
items = me.items,
range = [],
len = items.length,
tmp, reverse;
if (len < 1) {
return range;
}
if (start > end) {
reverse = true;
tmp = start;
start = end;
end = tmp;
}
if (start < 0) {
start = 0;
}
if (end == null || end >= len) {
end = len - 1;
}
range = items.slice(start, end + 1);
if (reverse && range.length) {
range.reverse();
}
return range;
},
/**
* this reference) in
* which the function is executed. Defaults to this MixedCollection.
* @return {Ext.util.MixedCollection} The new filtered collection
* @since 1.1.0
*/
filterBy : function(fn, scope) {
var me = this,
newMC = new me.self(me.initialConfig),
keys = me.keys,
items = me.items,
length = items.length,
i;
newMC.getKey = me.getKey;
for (i = 0; i < length; i++) {
if (fn.call(scope || me, items[i], keys[i])) {
newMC.add(keys[i], items[i]);
}
}
return newMC;
},
/**
* Finds the index of the first matching object in this collection by a specific property/value.
* @param {String} property The name of a property on your objects.
* @param {String/RegExp} value A string that the property values
* should start with or a RegExp to test against the property.
* @param {Number} [start=0] The index to start searching at.
* @param {Boolean} [anyMatch=false] True to match any part of the string, not just the beginning.
* @param {Boolean} [caseSensitive=false] True for case sensitive comparison.
* @return {Number} The matched index or -1
* @since 2.3.0
*/
findIndex : function(property, value, start, anyMatch, caseSensitive){
if(Ext.isEmpty(value, false)){
return -1;
}
value = this.createValueMatcher(value, anyMatch, caseSensitive);
return this.findIndexBy(function(o){
return o && value.test(o[property]);
}, null, start);
},
/**
* Find the index of the first matching object in this collection by a function.
* If the function returns true it is considered a match.
* @param {Function} fn The function to be called.
* @param {Mixed} fn.item The collection item.
* @param {String} fn.key The key of collection item.
* @param {Object} [scope] The scope (this reference) in which the function is executed. Defaults to this MixedCollection.
* @param {Number} [start=0] The index to start searching at.
* @return {Number} The matched index or -1
* @since 2.3.0
*/
findIndexBy : function(fn, scope, start){
var me = this,
keys = me.keys,
items = me.items,
i = start || 0,
len = items.length;
for (; i < len; i++) {
if (fn.call(scope || me, items[i], keys[i])) {
return i;
}
}
return -1;
},
/**
* Returns a regular expression based on the given value and matching options. This is used internally for finding and filtering,
* and by Ext.data.Store#filter
* @private
* @param {String} value The value to create the regex for. This is escaped using Ext.escapeRe
* @param {Boolean} anyMatch True to allow any match - no regex start/end line anchors will be added. Defaults to false
* @param {Boolean} caseSensitive True to make the regex case sensitive (adds 'i' switch to regex). Defaults to false.
* @param {Boolean} exactMatch True to force exact match (^ and $ characters added to the regex). Defaults to false. Ignored if anyMatch is true.
* @since 3.4.0
*/
createValueMatcher : function(value, anyMatch, caseSensitive, exactMatch) {
if (!value.exec) { // not a regex
var er = Ext.String.escapeRegex;
value = String(value);
if (anyMatch === true) {
value = er(value);
} else {
value = '^' + er(value);
if (exactMatch === true) {
value += '$';
}
}
value = new RegExp(value, caseSensitive ? '' : 'i');
}
return value;
},
/**
* Creates a shallow copy of this collection
* @return {Ext.util.MixedCollection}
* @since 1.1.0
*/
clone : function() {
var me = this,
copy = new this.self(me.initialConfig);
copy.add(me.keys, me.items);
return copy;
}
});
/**
* Represents a single sorter that can be applied to a Store. The sorter is used
* to compare two values against each other for the purpose of ordering them. Ordering
* is achieved by specifying either:
*
* - {@link #property A sorting property}
* - {@link #sorterFn A sorting function}
*
* As a contrived example, we can specify a custom sorter that sorts by rank:
*
* Ext.define('Person', {
* extend: 'Ext.data.Model',
* fields: ['name', 'rank']
* });
*
* Ext.create('Ext.data.Store', {
* model: 'Person',
* proxy: 'memory',
* sorters: [{
* sorterFn: function(o1, o2){
* var getRank = function(o){
* var name = o.get('rank');
* if (name === 'first') {
* return 1;
* } else if (name === 'second') {
* return 2;
* } else {
* return 3;
* }
* },
* rank1 = getRank(o1),
* rank2 = getRank(o2);
*
* if (rank1 === rank2) {
* return 0;
* }
*
* return rank1 < rank2 ? -1 : 1;
* }
* }],
* data: [{
* name: 'Person1',
* rank: 'second'
* }, {
* name: 'Person2',
* rank: 'third'
* }, {
* name: 'Person3',
* rank: 'first'
* }]
* });
*/
Ext.define('Ext.util.Sorter', {
/**
* @cfg {String} property
* The property to sort by. Required unless {@link #sorterFn} is provided. The property is extracted from the object
* directly and compared for sorting using the built in comparison operators.
*/
/**
* @cfg {Function} sorterFn
* A specific sorter function to execute. Can be passed instead of {@link #property}. This sorter function allows
* for any kind of custom/complex comparisons. The sorterFn receives two arguments, the objects being compared. The
* function should return:
*
* - -1 if o1 is "less than" o2
* - 0 if o1 is "equal" to o2
* - 1 if o1 is "greater than" o2
*/
/**
* @cfg {String} root
* Optional root property. This is mostly useful when sorting a Store, in which case we set the root to 'data' to
* make the filter pull the {@link #property} out of the data object of each item
*/
/**
* @cfg {Function} transform
* A function that will be run on each value before it is compared in the sorter. The function will receive a single
* argument, the value.
*/
/**
* @cfg {String} direction
* The direction to sort by.
*/
direction: "ASC",
constructor: function(config) {
var me = this;
Ext.apply(me, config);
if (me.property === undefined && me.sorterFn === undefined) {
Ext.Error.raise("A Sorter requires either a property or a sorter function");
}
me.updateSortFunction();
},
/**
* @private
* Creates and returns a function which sorts an array by the given property and direction
* @return {Function} A function which sorts by the property/direction combination provided
*/
createSortFunction: function(sorterFn) {
var me = this,
direction = me.direction || "ASC",
modifier = direction.toUpperCase() == "DESC" ? -1 : 1;
//create a comparison function. Takes 2 objects, returns 1 if object 1 is greater,
//-1 if object 2 is greater or 0 if they are equal
return function(o1, o2) {
return modifier * sorterFn.call(me, o1, o2);
};
},
/**
* @private
* Basic default sorter function that just compares the defined property of each object
*/
defaultSorterFn: function(o1, o2) {
var me = this,
transform = me.transform,
v1 = me.getRoot(o1)[me.property],
v2 = me.getRoot(o2)[me.property];
if (transform) {
v1 = transform(v1);
v2 = transform(v2);
}
return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
},
/**
* @private
* Returns the root property of the given item, based on the configured {@link #root} property
* @param {Object} item The item
* @return {Object} The root property of the object
*/
getRoot: function(item) {
return this.root === undefined ? item : item[this.root];
},
/**
* Set the sorting direction for this sorter.
* @param {String} direction The direction to sort in. Should be either 'ASC' or 'DESC'.
*/
setDirection: function(direction) {
var me = this;
me.direction = direction ? direction.toUpperCase() : direction;
me.updateSortFunction();
},
/**
* Toggles the sorting direction for this sorter.
*/
toggle: function() {
var me = this;
me.direction = Ext.String.toggle(me.direction, "ASC", "DESC");
me.updateSortFunction();
},
/**
* Update the sort function for this sorter.
* @param {Function} [fn] A new sorter function for this sorter. If not specified it will use the default
* sorting function.
*/
updateSortFunction: function(fn) {
var me = this;
fn = fn || me.sorterFn || me.defaultSorterFn;
me.sort = me.createSortFunction(fn);
},
serialize: function() {
return {
root: this.root,
property: this.property,
direction: this.direction
};
}
});
/**
* @docauthor Tommy Maintz
*/
constructor: function(config) {
var me = this;
config = Ext.apply(me, config || {});
me.config = config;
me.id = Ext.id(null, 'ext-animator-');
me.addEvents(
/**
* @event beforeanimate
* Fires before the animation starts. A handler can return false to cancel the animation.
* @param {Ext.fx.Animator} this
*/
'beforeanimate',
/**
* @event keyframe
* Fires at each keyframe.
* @param {Ext.fx.Animator} this
* @param {Number} keyframe step number
*/
'keyframe',
/**
* @event afteranimate
* Fires when the animation is complete.
* @param {Ext.fx.Animator} this
* @param {Date} startTime
*/
'afteranimate'
);
me.mixins.observable.constructor.call(me, config);
me.timeline = [];
me.createTimeline(me.keyframes);
if (me.target) {
me.applyAnimator(me.target);
Ext.fx.Manager.addAnim(me);
}
},
/**
* @private
*/
sorter: function (a, b) {
return a.pct - b.pct;
},
/**
* @private
* Takes the given keyframe configuration object and converts it into an ordered array with the passed attributes per keyframe
* or applying the 'to' configuration to all keyframes. Also calculates the proper animation duration per keyframe.
*/
createTimeline: function(keyframes) {
var me = this,
attrs = [],
to = me.to || {},
duration = me.duration,
prevMs, ms, i, ln, pct, attr;
for (pct in keyframes) {
if (keyframes.hasOwnProperty(pct) && me.animKeyFramesRE.test(pct)) {
attr = {attrs: Ext.apply(keyframes[pct], to)};
// CSS3 spec allow for from/to to be specified.
if (pct == "from") {
pct = 0;
}
else if (pct == "to") {
pct = 100;
}
// convert % values into integers
attr.pct = parseInt(pct, 10);
attrs.push(attr);
}
}
// Sort by pct property
Ext.Array.sort(attrs, me.sorter);
// Only an end
//if (attrs[0].pct) {
// attrs.unshift({pct: 0, attrs: element.attrs});
//}
ln = attrs.length;
for (i = 0; i < ln; i++) {
prevMs = (attrs[i - 1]) ? duration * (attrs[i - 1].pct / 100) : 0;
ms = duration * (attrs[i].pct / 100);
me.timeline.push({
duration: ms - prevMs,
attrs: attrs[i].attrs
});
}
},
/**
* Applies animation to the Ext.fx.target
* @private
* @param target
* @type String/Object
*/
applyAnimator: function(target) {
var me = this,
anims = [],
timeline = me.timeline,
ln = timeline.length,
anim, easing, damper, attrs, i;
if (me.fireEvent('beforeanimate', me) !== false) {
for (i = 0; i < ln; i++) {
anim = timeline[i];
attrs = anim.attrs;
easing = attrs.easing || me.easing;
damper = attrs.damper || me.damper;
delete attrs.easing;
delete attrs.damper;
anim = new Ext.fx.Anim({
target: target,
easing: easing,
damper: damper,
duration: anim.duration,
paused: true,
to: attrs
});
anims.push(anim);
}
me.animations = anims;
me.target = anim.target;
for (i = 0; i < ln - 1; i++) {
anim = anims[i];
anim.nextAnim = anims[i + 1];
anim.on('afteranimate', function() {
this.nextAnim.paused = false;
});
anim.on('afteranimate', function() {
this.fireEvent('keyframe', this, ++this.keyframeStep);
}, me);
}
anims[ln - 1].on('afteranimate', function() {
this.lastFrame();
}, me);
}
},
/**
* @private
* Fires beforeanimate and sets the running flag.
*/
start: function(startTime) {
var me = this,
delay = me.delay,
delayStart = me.delayStart,
delayDelta;
if (delay) {
if (!delayStart) {
me.delayStart = startTime;
return;
}
else {
delayDelta = startTime - delayStart;
if (delayDelta < delay) {
return;
}
else {
// Compensate for frame delay;
startTime = new Date(delayStart.getTime() + delay);
}
}
}
if (me.fireEvent('beforeanimate', me) !== false) {
me.startTime = startTime;
me.running = true;
me.animations[me.keyframeStep].paused = false;
}
},
/**
* @private
* Perform lastFrame cleanup and handle iterations
* @returns a hash of the new attributes.
*/
lastFrame: function() {
var me = this,
iter = me.iterations,
iterCount = me.currentIteration;
iterCount++;
if (iterCount < iter) {
me.startTime = new Date();
me.currentIteration = iterCount;
me.keyframeStep = 0;
me.applyAnimator(me.target);
me.animations[me.keyframeStep].paused = false;
}
else {
me.currentIteration = 0;
me.end();
}
},
/**
* Fire afteranimate event and end the animation. Usually called automatically when the
* animation reaches its final frame, but can also be called manually to pre-emptively
* stop and destroy the running animation.
*/
end: function() {
var me = this;
me.fireEvent('afteranimate', me, me.startTime, new Date() - me.startTime);
},
isReady: function() {
return this.paused === false && this.running === false && this.iterations > 0;
},
isRunning: function() {
// Explicitly return false, we don't want to be run continuously by the manager
return false;
}
});
/**
* @private
*/
Ext.define('Ext.fx.CubicBezier', {
/* Begin Definitions */
singleton: true,
/* End Definitions */
cubicBezierAtTime: function(t, p1x, p1y, p2x, p2y, duration) {
var cx = 3 * p1x,
bx = 3 * (p2x - p1x) - cx,
ax = 1 - cx - bx,
cy = 3 * p1y,
by = 3 * (p2y - p1y) - cy,
ay = 1 - cy - by;
function sampleCurveX(t) {
return ((ax * t + bx) * t + cx) * t;
}
function solve(x, epsilon) {
var t = solveCurveX(x, epsilon);
return ((ay * t + by) * t + cy) * t;
}
function solveCurveX(x, epsilon) {
var t0, t1, t2, x2, d2, i;
for (t2 = x, i = 0; i < 8; i++) {
x2 = sampleCurveX(t2) - x;
if (Math.abs(x2) < epsilon) {
return t2;
}
d2 = (3 * ax * t2 + 2 * bx) * t2 + cx;
if (Math.abs(d2) < 1e-6) {
break;
}
t2 = t2 - x2 / d2;
}
t0 = 0;
t1 = 1;
t2 = x;
if (t2 < t0) {
return t0;
}
if (t2 > t1) {
return t1;
}
while (t0 < t1) {
x2 = sampleCurveX(t2);
if (Math.abs(x2 - x) < epsilon) {
return t2;
}
if (x > x2) {
t0 = t2;
} else {
t1 = t2;
}
t2 = (t1 - t0) / 2 + t0;
}
return t2;
}
return solve(t, 1 / (200 * duration));
},
cubicBezier: function(x1, y1, x2, y2) {
var fn = function(pos) {
return Ext.fx.CubicBezier.cubicBezierAtTime(pos, x1, y1, x2, y2, 1);
};
fn.toCSS3 = function() {
return 'cubic-bezier(' + [x1, y1, x2, y2].join(',') + ')';
};
fn.reverse = function() {
return Ext.fx.CubicBezier.cubicBezier(1 - x2, 1 - y2, 1 - x1, 1 - y1);
};
return fn;
}
});
// @define Ext.fx.Easing
/**
* @class Ext.fx.Easing
*
* This class contains a series of function definitions used to modify values during an animation.
* They describe how the intermediate values used during a transition will be calculated. It allows for a transition to change
* speed over its duration. The following options are available:
*
* - linear The default easing type
* - backIn
* - backOut
* - bounceIn
* - bounceOut
* - ease
* - easeIn
* - easeOut
* - easeInOut
* - elasticIn
* - elasticOut
* - cubic-bezier(x1, y1, x2, y2)
*
* Note that cubic-bezier will create a custom easing curve following the CSS3 [transition-timing-function][0]
* specification. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must
* be in the range [0, 1] or the definition is invalid.
*
* [0]: http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag
*
* @singleton
*/
Ext.require('Ext.fx.CubicBezier', function() {
var math = Math,
pi = math.PI,
pow = math.pow,
sin = math.sin,
sqrt = math.sqrt,
abs = math.abs,
backInSeed = 1.70158;
Ext.define('Ext.fx.Easing', {
singleton: true,
linear: Ext.identityFn,
ease: function(n) {
var q = 0.07813 - n / 2,
alpha = -0.25,
Q = sqrt(0.0066 + q * q),
x = Q - q,
X = pow(abs(x), 1/3) * (x < 0 ? -1 : 1),
y = -Q - q,
Y = pow(abs(y), 1/3) * (y < 0 ? -1 : 1),
t = X + Y + 0.25;
return pow(1 - t, 2) * 3 * t * 0.1 + (1 - t) * 3 * t * t + t * t * t;
},
easeIn: function (n) {
return pow(n, 1.7);
},
easeOut: function (n) {
return pow(n, 0.48);
},
easeInOut: function(n) {
var q = 0.48 - n / 1.04,
Q = sqrt(0.1734 + q * q),
x = Q - q,
X = pow(abs(x), 1/3) * (x < 0 ? -1 : 1),
y = -Q - q,
Y = pow(abs(y), 1/3) * (y < 0 ? -1 : 1),
t = X + Y + 0.5;
return (1 - t) * 3 * t * t + t * t * t;
},
backIn: function (n) {
return n * n * ((backInSeed + 1) * n - backInSeed);
},
backOut: function (n) {
n = n - 1;
return n * n * ((backInSeed + 1) * n + backInSeed) + 1;
},
elasticIn: function (n) {
if (n === 0 || n === 1) {
return n;
}
var p = 0.3,
s = p / 4;
return pow(2, -10 * n) * sin((n - s) * (2 * pi) / p) + 1;
},
elasticOut: function (n) {
return 1 - Ext.fx.Easing.elasticIn(1 - n);
},
bounceIn: function (n) {
return 1 - Ext.fx.Easing.bounceOut(1 - n);
},
bounceOut: function (n) {
var s = 7.5625,
p = 2.75,
l;
if (n < (1 / p)) {
l = s * n * n;
} else {
if (n < (2 / p)) {
n -= (1.5 / p);
l = s * n * n + 0.75;
} else {
if (n < (2.5 / p)) {
n -= (2.25 / p);
l = s * n * n + 0.9375;
} else {
n -= (2.625 / p);
l = s * n * n + 0.984375;
}
}
}
return l;
}
}, function(){
var easing = Ext.fx.Easing.self,
proto = easing.prototype;
easing.implement({
'back-in': proto.backIn,
'back-out': proto.backOut,
'ease-in': proto.easeIn,
'ease-out': proto.easeOut,
'elastic-in': proto.elasticIn,
'elastic-out': proto.elasticOut,
'bounce-in': proto.bounceIn,
'bounce-out': proto.bounceOut,
'ease-in-out': proto.easeInOut
});
});
});
/**
* Represents an RGB color and provides helper functions get
* color components in HSL color space.
*/
Ext.define('Ext.draw.Color', {
/* Begin Definitions */
/* End Definitions */
colorToHexRe: /(.*?)rgb\((\d+),\s*(\d+),\s*(\d+)\)/,
rgbRe: /\s*rgb\s*\(\s*([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\s*\)\s*/,
hexRe: /\s*#([0-9a-fA-F][0-9a-fA-F]?)([0-9a-fA-F][0-9a-fA-F]?)([0-9a-fA-F][0-9a-fA-F]?)\s*/,
/**
* @cfg {Number} lightnessFactor
*
* The default factor to compute the lighter or darker color. Defaults to 0.2.
*/
lightnessFactor: 0.2,
/**
* Creates new Color.
* @param {Number} red Red component (0..255)
* @param {Number} green Green component (0..255)
* @param {Number} blue Blue component (0..255)
*/
constructor : function(red, green, blue) {
var me = this,
clamp = Ext.Number.constrain;
me.r = clamp(red, 0, 255);
me.g = clamp(green, 0, 255);
me.b = clamp(blue, 0, 255);
},
/**
* Get the red component of the color, in the range 0..255.
* @return {Number}
*/
getRed: function() {
return this.r;
},
/**
* Get the green component of the color, in the range 0..255.
* @return {Number}
*/
getGreen: function() {
return this.g;
},
/**
* Get the blue component of the color, in the range 0..255.
* @return {Number}
*/
getBlue: function() {
return this.b;
},
/**
* Get the RGB values.
* @return {Number[]}
*/
getRGB: function() {
var me = this;
return [me.r, me.g, me.b];
},
/**
* Get the equivalent HSL components of the color.
* @return {Number[]}
*/
getHSL: function() {
var me = this,
r = me.r / 255,
g = me.g / 255,
b = me.b / 255,
max = Math.max(r, g, b),
min = Math.min(r, g, b),
delta = max - min,
h,
s = 0,
l = 0.5 * (max + min);
// min==max means achromatic (hue is undefined)
if (min != max) {
s = (l < 0.5) ? delta / (max + min) : delta / (2 - max - min);
if (r == max) {
h = 60 * (g - b) / delta;
} else if (g == max) {
h = 120 + 60 * (b - r) / delta;
} else {
h = 240 + 60 * (r - g) / delta;
}
if (h < 0) {
h += 360;
}
if (h >= 360) {
h -= 360;
}
}
return [h, s, l];
},
/**
* Return a new color that is lighter than this color.
* @param {Number} factor Lighter factor (0..1), default to 0.2
* @return Ext.draw.Color
*/
getLighter: function(factor) {
var hsl = this.getHSL();
factor = factor || this.lightnessFactor;
hsl[2] = Ext.Number.constrain(hsl[2] + factor, 0, 1);
return this.fromHSL(hsl[0], hsl[1], hsl[2]);
},
/**
* Return a new color that is darker than this color.
* @param {Number} factor Darker factor (0..1), default to 0.2
* @return Ext.draw.Color
*/
getDarker: function(factor) {
factor = factor || this.lightnessFactor;
return this.getLighter(-factor);
},
/**
* Return the color in the hex format, i.e. '#rrggbb'.
* @return {String}
*/
toString: function() {
var me = this,
round = Math.round,
r = round(me.r).toString(16),
g = round(me.g).toString(16),
b = round(me.b).toString(16);
r = (r.length == 1) ? '0' + r : r;
g = (g.length == 1) ? '0' + g : g;
b = (b.length == 1) ? '0' + b : b;
return ['#', r, g, b].join('');
},
/**
* Convert a color to hexadecimal format.
*
* **Note:** This method is both static and instance.
*
* @param {String/String[]} color The color value (i.e 'rgb(255, 255, 255)', 'color: #ffffff').
* Can also be an Array, in this case the function handles the first member.
* @returns {String} The color in hexadecimal format.
* @static
*/
toHex: function(color) {
if (Ext.isArray(color)) {
color = color[0];
}
if (!Ext.isString(color)) {
return '';
}
if (color.substr(0, 1) === '#') {
return color;
}
var digits = this.colorToHexRe.exec(color),
red,
green,
blue,
rgb;
if (Ext.isArray(digits)) {
red = parseInt(digits[2], 10);
green = parseInt(digits[3], 10);
blue = parseInt(digits[4], 10);
rgb = blue | (green << 8) | (red << 16);
return digits[1] + '#' + ("000000" + rgb.toString(16)).slice(-6);
}
else {
return color;
}
},
/**
* Parse the string and create a new color.
*
* Supported formats: '#rrggbb', '#rgb', and 'rgb(r,g,b)'.
*
* If the string is not recognized, an undefined will be returned instead.
*
* **Note:** This method is both static and instance.
*
* @param {String} str Color in string.
* @returns Ext.draw.Color
* @static
*/
fromString: function(str) {
var values, r, g, b,
parse = parseInt;
if ((str.length == 4 || str.length == 7) && str.substr(0, 1) === '#') {
values = str.match(this.hexRe);
if (values) {
r = parse(values[1], 16) >> 0;
g = parse(values[2], 16) >> 0;
b = parse(values[3], 16) >> 0;
if (str.length == 4) {
r += (r * 16);
g += (g * 16);
b += (b * 16);
}
}
}
else {
values = str.match(this.rgbRe);
if (values) {
r = values[1];
g = values[2];
b = values[3];
}
}
return (typeof r == 'undefined') ? undefined : new Ext.draw.Color(r, g, b);
},
/**
* Returns the gray value (0 to 255) of the color.
*
* The gray value is calculated using the formula r*0.3 + g*0.59 + b*0.11.
*
* @returns {Number}
*/
getGrayscale: function() {
// http://en.wikipedia.org/wiki/Grayscale#Converting_color_to_grayscale
return this.r * 0.3 + this.g * 0.59 + this.b * 0.11;
},
/**
* Create a new color based on the specified HSL values.
*
* **Note:** This method is both static and instance.
*
* @param {Number} h Hue component (0..359)
* @param {Number} s Saturation component (0..1)
* @param {Number} l Lightness component (0..1)
* @returns Ext.draw.Color
* @static
*/
fromHSL: function(h, s, l) {
var C, X, m, i, rgb = [],
abs = Math.abs,
floor = Math.floor;
if (s == 0 || h == null) {
// achromatic
rgb = [l, l, l];
}
else {
// http://en.wikipedia.org/wiki/HSL_and_HSV#From_HSL
// C is the chroma
// X is the second largest component
// m is the lightness adjustment
h /= 60;
C = s * (1 - abs(2 * l - 1));
X = C * (1 - abs(h - 2 * floor(h / 2) - 1));
m = l - C / 2;
switch (floor(h)) {
case 0:
rgb = [C, X, 0];
break;
case 1:
rgb = [X, C, 0];
break;
case 2:
rgb = [0, C, X];
break;
case 3:
rgb = [0, X, C];
break;
case 4:
rgb = [X, 0, C];
break;
case 5:
rgb = [C, 0, X];
break;
}
rgb = [rgb[0] + m, rgb[1] + m, rgb[2] + m];
}
return new Ext.draw.Color(rgb[0] * 255, rgb[1] * 255, rgb[2] * 255);
}
}, function() {
var prototype = this.prototype;
//These functions are both static and instance. TODO: find a more elegant way of copying them
this.addStatics({
fromHSL: function() {
return prototype.fromHSL.apply(prototype, arguments);
},
fromString: function() {
return prototype.fromString.apply(prototype, arguments);
},
toHex: function() {
return prototype.toHex.apply(prototype, arguments);
}
});
});
/**
* @class Ext.draw.Draw
* Base Drawing class. Provides base drawing functions.
* @private
*/
Ext.define('Ext.draw.Draw', {
/* Begin Definitions */
singleton: true,
/* End Definitions */
pathToStringRE: /,?([achlmqrstvxz]),?/gi,
pathCommandRE: /([achlmqstvz])[\s,]*((-?\d*\.?\d*(?:e[-+]?\d+)?\s*,?\s*)+)/ig,
pathValuesRE: /(-?\d*\.?\d*(?:e[-+]?\d+)?)\s*,?\s*/ig,
stopsRE: /^(\d+%?)$/,
radian: Math.PI / 180,
availableAnimAttrs: {
along: "along",
blur: null,
"clip-rect": "csv",
cx: null,
cy: null,
fill: "color",
"fill-opacity": null,
"font-size": null,
height: null,
opacity: null,
path: "path",
r: null,
rotation: "csv",
rx: null,
ry: null,
scale: "csv",
stroke: "color",
"stroke-opacity": null,
"stroke-width": null,
translation: "csv",
width: null,
x: null,
y: null
},
is: function(o, type) {
type = String(type).toLowerCase();
return (type == "object" && o === Object(o)) ||
(type == "undefined" && typeof o == type) ||
(type == "null" && o === null) ||
(type == "array" && Array.isArray && Array.isArray(o)) ||
(Object.prototype.toString.call(o).toLowerCase().slice(8, -1)) == type;
},
ellipsePath: function(sprite) {
var attr = sprite.attr;
return Ext.String.format("M{0},{1}A{2},{3},0,1,1,{0},{4}A{2},{3},0,1,1,{0},{1}z", attr.x, attr.y - attr.ry, attr.rx, attr.ry, attr.y + attr.ry);
},
rectPath: function(sprite) {
var attr = sprite.attr;
if (attr.radius) {
return Ext.String.format("M{0},{1}l{2},0a{3},{3},0,0,1,{3},{3}l0,{5}a{3},{3},0,0,1,{4},{3}l{6},0a{3},{3},0,0,1,{4},{4}l0,{7}a{3},{3},0,0,1,{3},{4}z", attr.x + attr.radius, attr.y, attr.width - attr.radius * 2, attr.radius, -attr.radius, attr.height - attr.radius * 2, attr.radius * 2 - attr.width, attr.radius * 2 - attr.height);
}
else {
return Ext.String.format("M{0},{1}L{2},{1},{2},{3},{0},{3}z", attr.x, attr.y, attr.width + attr.x, attr.height + attr.y);
}
},
// To be deprecated, converts itself (an arrayPath) to a proper SVG path string
path2string: function () {
return this.join(",").replace(Ext.draw.Draw.pathToStringRE, "$1");
},
// Convert the passed arrayPath to a proper SVG path string (d attribute)
pathToString: function(arrayPath) {
return arrayPath.join(",").replace(Ext.draw.Draw.pathToStringRE, "$1");
},
parsePathString: function (pathString) {
if (!pathString) {
return null;
}
var paramCounts = {a: 7, c: 6, h: 1, l: 2, m: 2, q: 4, s: 4, t: 2, v: 1, z: 0},
data = [],
me = this;
if (me.is(pathString, "array") && me.is(pathString[0], "array")) { // rough assumption
data = me.pathClone(pathString);
}
if (!data.length) {
String(pathString).replace(me.pathCommandRE, function (a, b, c) {
var params = [],
name = b.toLowerCase();
c.replace(me.pathValuesRE, function (a, b) {
b && params.push(+b);
});
if (name == "m" && params.length > 2) {
data.push([b].concat(Ext.Array.splice(params, 0, 2)));
name = "l";
b = (b == "m") ? "l" : "L";
}
while (params.length >= paramCounts[name]) {
data.push([b].concat(Ext.Array.splice(params, 0, paramCounts[name])));
if (!paramCounts[name]) {
break;
}
}
});
}
data.toString = me.path2string;
return data;
},
mapPath: function (path, matrix) {
if (!matrix) {
return path;
}
var x, y, i, ii, j, jj, pathi;
path = this.path2curve(path);
for (i = 0, ii = path.length; i < ii; i++) {
pathi = path[i];
for (j = 1, jj = pathi.length; j < jj-1; j += 2) {
x = matrix.x(pathi[j], pathi[j + 1]);
y = matrix.y(pathi[j], pathi[j + 1]);
pathi[j] = x;
pathi[j + 1] = y;
}
}
return path;
},
pathClone: function(pathArray) {
var res = [],
j, jj, i, ii;
if (!this.is(pathArray, "array") || !this.is(pathArray && pathArray[0], "array")) { // rough assumption
pathArray = this.parsePathString(pathArray);
}
for (i = 0, ii = pathArray.length; i < ii; i++) {
res[i] = [];
for (j = 0, jj = pathArray[i].length; j < jj; j++) {
res[i][j] = pathArray[i][j];
}
}
res.toString = this.path2string;
return res;
},
pathToAbsolute: function (pathArray) {
if (!this.is(pathArray, "array") || !this.is(pathArray && pathArray[0], "array")) { // rough assumption
pathArray = this.parsePathString(pathArray);
}
var res = [],
x = 0,
y = 0,
mx = 0,
my = 0,
i = 0,
ln = pathArray.length,
r, pathSegment, j, ln2;
// MoveTo initial x/y position
if (ln && pathArray[0][0] == "M") {
x = +pathArray[0][1];
y = +pathArray[0][2];
mx = x;
my = y;
i++;
res[0] = ["M", x, y];
}
for (; i < ln; i++) {
r = res[i] = [];
pathSegment = pathArray[i];
if (pathSegment[0] != pathSegment[0].toUpperCase()) {
r[0] = pathSegment[0].toUpperCase();
switch (r[0]) {
// Elliptical Arc
case "A":
r[1] = pathSegment[1];
r[2] = pathSegment[2];
r[3] = pathSegment[3];
r[4] = pathSegment[4];
r[5] = pathSegment[5];
r[6] = +(pathSegment[6] + x);
r[7] = +(pathSegment[7] + y);
break;
// Vertical LineTo
case "V":
r[1] = +pathSegment[1] + y;
break;
// Horizontal LineTo
case "H":
r[1] = +pathSegment[1] + x;
break;
case "M":
// MoveTo
mx = +pathSegment[1] + x;
my = +pathSegment[2] + y;
default:
j = 1;
ln2 = pathSegment.length;
for (; j < ln2; j++) {
r[j] = +pathSegment[j] + ((j % 2) ? x : y);
}
}
}
else {
j = 0;
ln2 = pathSegment.length;
for (; j < ln2; j++) {
res[i][j] = pathSegment[j];
}
}
switch (r[0]) {
// ClosePath
case "Z":
x = mx;
y = my;
break;
// Horizontal LineTo
case "H":
x = r[1];
break;
// Vertical LineTo
case "V":
y = r[1];
break;
// MoveTo
case "M":
pathSegment = res[i];
ln2 = pathSegment.length;
mx = pathSegment[ln2 - 2];
my = pathSegment[ln2 - 1];
default:
pathSegment = res[i];
ln2 = pathSegment.length;
x = pathSegment[ln2 - 2];
y = pathSegment[ln2 - 1];
}
}
res.toString = this.path2string;
return res;
},
// TO BE DEPRECATED
pathToRelative: function (pathArray) {
if (!this.is(pathArray, "array") || !this.is(pathArray && pathArray[0], "array")) {
pathArray = this.parsePathString(pathArray);
}
var res = [],
x = 0,
y = 0,
mx = 0,
my = 0,
start = 0,
r,
pa,
i,
j,
k,
len,
ii,
jj,
kk;
if (pathArray[0][0] == "M") {
x = pathArray[0][1];
y = pathArray[0][2];
mx = x;
my = y;
start++;
res.push(["M", x, y]);
}
for (i = start, ii = pathArray.length; i < ii; i++) {
r = res[i] = [];
pa = pathArray[i];
if (pa[0] != pa[0].toLowerCase()) {
r[0] = pa[0].toLowerCase();
switch (r[0]) {
case "a":
r[1] = pa[1];
r[2] = pa[2];
r[3] = pa[3];
r[4] = pa[4];
r[5] = pa[5];
r[6] = +(pa[6] - x).toFixed(3);
r[7] = +(pa[7] - y).toFixed(3);
break;
case "v":
r[1] = +(pa[1] - y).toFixed(3);
break;
case "m":
mx = pa[1];
my = pa[2];
default:
for (j = 1, jj = pa.length; j < jj; j++) {
r[j] = +(pa[j] - ((j % 2) ? x : y)).toFixed(3);
}
}
} else {
r = res[i] = [];
if (pa[0] == "m") {
mx = pa[1] + x;
my = pa[2] + y;
}
for (k = 0, kk = pa.length; k < kk; k++) {
res[i][k] = pa[k];
}
}
len = res[i].length;
switch (res[i][0]) {
case "z":
x = mx;
y = my;
break;
case "h":
x += +res[i][len - 1];
break;
case "v":
y += +res[i][len - 1];
break;
default:
x += +res[i][len - 2];
y += +res[i][len - 1];
}
}
res.toString = this.path2string;
return res;
},
// Returns a path converted to a set of curveto commands
path2curve: function (path) {
var me = this,
points = me.pathToAbsolute(path),
ln = points.length,
attrs = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null},
i, seg, segLn, point;
for (i = 0; i < ln; i++) {
points[i] = me.command2curve(points[i], attrs);
if (points[i].length > 7) {
points[i].shift();
point = points[i];
while (point.length) {
Ext.Array.splice(points, i++, 0, ["C"].concat(Ext.Array.splice(point, 0, 6)));
}
Ext.Array.erase(points, i, 1);
ln = points.length;
i--;
}
seg = points[i];
segLn = seg.length;
attrs.x = seg[segLn - 2];
attrs.y = seg[segLn - 1];
attrs.bx = parseFloat(seg[segLn - 4]) || attrs.x;
attrs.by = parseFloat(seg[segLn - 3]) || attrs.y;
}
return points;
},
interpolatePaths: function (path, path2) {
var me = this,
p = me.pathToAbsolute(path),
p2 = me.pathToAbsolute(path2),
attrs = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null},
attrs2 = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null},
fixArc = function (pp, i) {
if (pp[i].length > 7) {
pp[i].shift();
var pi = pp[i];
while (pi.length) {
Ext.Array.splice(pp, i++, 0, ["C"].concat(Ext.Array.splice(pi, 0, 6)));
}
Ext.Array.erase(pp, i, 1);
ii = Math.max(p.length, p2.length || 0);
}
},
fixM = function (path1, path2, a1, a2, i) {
if (path1 && path2 && path1[i][0] == "M" && path2[i][0] != "M") {
Ext.Array.splice(path2, i, 0, ["M", a2.x, a2.y]);
a1.bx = 0;
a1.by = 0;
a1.x = path1[i][1];
a1.y = path1[i][2];
ii = Math.max(p.length, p2.length || 0);
}
},
i, ii,
seg, seg2, seglen, seg2len;
for (i = 0, ii = Math.max(p.length, p2.length || 0); i < ii; i++) {
p[i] = me.command2curve(p[i], attrs);
fixArc(p, i);
(p2[i] = me.command2curve(p2[i], attrs2));
fixArc(p2, i);
fixM(p, p2, attrs, attrs2, i);
fixM(p2, p, attrs2, attrs, i);
seg = p[i];
seg2 = p2[i];
seglen = seg.length;
seg2len = seg2.length;
attrs.x = seg[seglen - 2];
attrs.y = seg[seglen - 1];
attrs.bx = parseFloat(seg[seglen - 4]) || attrs.x;
attrs.by = parseFloat(seg[seglen - 3]) || attrs.y;
attrs2.bx = (parseFloat(seg2[seg2len - 4]) || attrs2.x);
attrs2.by = (parseFloat(seg2[seg2len - 3]) || attrs2.y);
attrs2.x = seg2[seg2len - 2];
attrs2.y = seg2[seg2len - 1];
}
return [p, p2];
},
//Returns any path command as a curveto command based on the attrs passed
command2curve: function (pathCommand, d) {
var me = this;
if (!pathCommand) {
return ["C", d.x, d.y, d.x, d.y, d.x, d.y];
}
if (pathCommand[0] != "T" && pathCommand[0] != "Q") {
d.qx = d.qy = null;
}
switch (pathCommand[0]) {
case "M":
d.X = pathCommand[1];
d.Y = pathCommand[2];
break;
case "A":
pathCommand = ["C"].concat(me.arc2curve.apply(me, [d.x, d.y].concat(pathCommand.slice(1))));
break;
case "S":
pathCommand = ["C", d.x + (d.x - (d.bx || d.x)), d.y + (d.y - (d.by || d.y))].concat(pathCommand.slice(1));
break;
case "T":
d.qx = d.x + (d.x - (d.qx || d.x));
d.qy = d.y + (d.y - (d.qy || d.y));
pathCommand = ["C"].concat(me.quadratic2curve(d.x, d.y, d.qx, d.qy, pathCommand[1], pathCommand[2]));
break;
case "Q":
d.qx = pathCommand[1];
d.qy = pathCommand[2];
pathCommand = ["C"].concat(me.quadratic2curve(d.x, d.y, pathCommand[1], pathCommand[2], pathCommand[3], pathCommand[4]));
break;
case "L":
pathCommand = ["C"].concat(d.x, d.y, pathCommand[1], pathCommand[2], pathCommand[1], pathCommand[2]);
break;
case "H":
pathCommand = ["C"].concat(d.x, d.y, pathCommand[1], d.y, pathCommand[1], d.y);
break;
case "V":
pathCommand = ["C"].concat(d.x, d.y, d.x, pathCommand[1], d.x, pathCommand[1]);
break;
case "Z":
pathCommand = ["C"].concat(d.x, d.y, d.X, d.Y, d.X, d.Y);
break;
}
return pathCommand;
},
quadratic2curve: function (x1, y1, ax, ay, x2, y2) {
var _13 = 1 / 3,
_23 = 2 / 3;
return [
_13 * x1 + _23 * ax,
_13 * y1 + _23 * ay,
_13 * x2 + _23 * ax,
_13 * y2 + _23 * ay,
x2,
y2
];
},
rotate: function (x, y, rad) {
var cos = Math.cos(rad),
sin = Math.sin(rad),
X = x * cos - y * sin,
Y = x * sin + y * cos;
return {x: X, y: Y};
},
arc2curve: function (x1, y1, rx, ry, angle, large_arc_flag, sweep_flag, x2, y2, recursive) {
// for more information of where this Math came from visit:
// http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
var me = this,
PI = Math.PI,
radian = me.radian,
_120 = PI * 120 / 180,
rad = radian * (+angle || 0),
res = [],
math = Math,
mcos = math.cos,
msin = math.sin,
msqrt = math.sqrt,
mabs = math.abs,
masin = math.asin,
xy, x, y, h, rx2, ry2, k, cx, cy, f1, f2, df, c1, s1, c2, s2,
t, hx, hy, m1, m2, m3, m4, newres, i, ln, f2old, x2old, y2old;
if (!recursive) {
xy = me.rotate(x1, y1, -rad);
x1 = xy.x;
y1 = xy.y;
xy = me.rotate(x2, y2, -rad);
x2 = xy.x;
y2 = xy.y;
x = (x1 - x2) / 2;
y = (y1 - y2) / 2;
h = (x * x) / (rx * rx) + (y * y) / (ry * ry);
if (h > 1) {
h = msqrt(h);
rx = h * rx;
ry = h * ry;
}
rx2 = rx * rx;
ry2 = ry * ry;
k = (large_arc_flag == sweep_flag ? -1 : 1) *
msqrt(mabs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) / (rx2 * y * y + ry2 * x * x)));
cx = k * rx * y / ry + (x1 + x2) / 2;
cy = k * -ry * x / rx + (y1 + y2) / 2;
f1 = masin(((y1 - cy) / ry).toFixed(7));
f2 = masin(((y2 - cy) / ry).toFixed(7));
f1 = x1 < cx ? PI - f1 : f1;
f2 = x2 < cx ? PI - f2 : f2;
if (f1 < 0) {
f1 = PI * 2 + f1;
}
if (f2 < 0) {
f2 = PI * 2 + f2;
}
if (sweep_flag && f1 > f2) {
f1 = f1 - PI * 2;
}
if (!sweep_flag && f2 > f1) {
f2 = f2 - PI * 2;
}
}
else {
f1 = recursive[0];
f2 = recursive[1];
cx = recursive[2];
cy = recursive[3];
}
df = f2 - f1;
if (mabs(df) > _120) {
f2old = f2;
x2old = x2;
y2old = y2;
f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : -1);
x2 = cx + rx * mcos(f2);
y2 = cy + ry * msin(f2);
res = me.arc2curve(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [f2, f2old, cx, cy]);
}
df = f2 - f1;
c1 = mcos(f1);
s1 = msin(f1);
c2 = mcos(f2);
s2 = msin(f2);
t = math.tan(df / 4);
hx = 4 / 3 * rx * t;
hy = 4 / 3 * ry * t;
m1 = [x1, y1];
m2 = [x1 + hx * s1, y1 - hy * c1];
m3 = [x2 + hx * s2, y2 - hy * c2];
m4 = [x2, y2];
m2[0] = 2 * m1[0] - m2[0];
m2[1] = 2 * m1[1] - m2[1];
if (recursive) {
return [m2, m3, m4].concat(res);
}
else {
res = [m2, m3, m4].concat(res).join().split(",");
newres = [];
ln = res.length;
for (i = 0; i < ln; i++) {
newres[i] = i % 2 ? me.rotate(res[i - 1], res[i], rad).y : me.rotate(res[i], res[i + 1], rad).x;
}
return newres;
}
},
// TO BE DEPRECATED
rotateAndTranslatePath: function (sprite) {
var alpha = sprite.rotation.degrees,
cx = sprite.rotation.x,
cy = sprite.rotation.y,
dx = sprite.translation.x,
dy = sprite.translation.y,
path,
i,
p,
xy,
j,
res = [];
if (!alpha && !dx && !dy) {
return this.pathToAbsolute(sprite.attr.path);
}
dx = dx || 0;
dy = dy || 0;
path = this.pathToAbsolute(sprite.attr.path);
for (i = path.length; i--;) {
p = res[i] = path[i].slice();
if (p[0] == "A") {
xy = this.rotatePoint(p[6], p[7], alpha, cx, cy);
p[6] = xy.x + dx;
p[7] = xy.y + dy;
} else {
j = 1;
while (p[j + 1] != null) {
xy = this.rotatePoint(p[j], p[j + 1], alpha, cx, cy);
p[j] = xy.x + dx;
p[j + 1] = xy.y + dy;
j += 2;
}
}
}
return res;
},
// TO BE DEPRECATED
rotatePoint: function (x, y, alpha, cx, cy) {
if (!alpha) {
return {
x: x,
y: y
};
}
cx = cx || 0;
cy = cy || 0;
x = x - cx;
y = y - cy;
alpha = alpha * this.radian;
var cos = Math.cos(alpha),
sin = Math.sin(alpha);
return {
x: x * cos - y * sin + cx,
y: x * sin + y * cos + cy
};
},
pathDimensions: function (path) {
if (!path || !(path + "")) {
return {x: 0, y: 0, width: 0, height: 0};
}
path = this.path2curve(path);
var x = 0,
y = 0,
X = [],
Y = [],
i = 0,
ln = path.length,
p, xmin, ymin, xmax, ymax, dim;
for (; i < ln; i++) {
p = path[i];
if (p[0] == "M") {
x = p[1];
y = p[2];
X.push(x);
Y.push(y);
}
else {
dim = this.curveDim(x, y, p[1], p[2], p[3], p[4], p[5], p[6]);
X = X.concat(dim.min.x, dim.max.x);
Y = Y.concat(dim.min.y, dim.max.y);
x = p[5];
y = p[6];
}
}
xmin = Math.min.apply(0, X);
ymin = Math.min.apply(0, Y);
xmax = Math.max.apply(0, X);
ymax = Math.max.apply(0, Y);
return {
x: Math.round(xmin),
y: Math.round(ymin),
path: path,
width: Math.round(xmax - xmin),
height: Math.round(ymax - ymin)
};
},
intersectInside: function(path, cp1, cp2) {
return (cp2[0] - cp1[0]) * (path[1] - cp1[1]) > (cp2[1] - cp1[1]) * (path[0] - cp1[0]);
},
intersectIntersection: function(s, e, cp1, cp2) {
var p = [],
dcx = cp1[0] - cp2[0],
dcy = cp1[1] - cp2[1],
dpx = s[0] - e[0],
dpy = s[1] - e[1],
n1 = cp1[0] * cp2[1] - cp1[1] * cp2[0],
n2 = s[0] * e[1] - s[1] * e[0],
n3 = 1 / (dcx * dpy - dcy * dpx);
p[0] = (n1 * dpx - n2 * dcx) * n3;
p[1] = (n1 * dpy - n2 * dcy) * n3;
return p;
},
intersect: function(subjectPolygon, clipPolygon) {
var me = this,
i = 0,
ln = clipPolygon.length,
cp1 = clipPolygon[ln - 1],
outputList = subjectPolygon,
cp2, s, e, ln2, inputList, j;
for (; i < ln; ++i) {
cp2 = clipPolygon[i];
inputList = outputList;
outputList = [];
s = inputList[inputList.length - 1];
j = 0;
ln2 = inputList.length;
for (; j < ln2; j++) {
e = inputList[j];
if (me.intersectInside(e, cp1, cp2)) {
if (!me.intersectInside(s, cp1, cp2)) {
outputList.push(me.intersectIntersection(s, e, cp1, cp2));
}
outputList.push(e);
}
else if (me.intersectInside(s, cp1, cp2)) {
outputList.push(me.intersectIntersection(s, e, cp1, cp2));
}
s = e;
}
cp1 = cp2;
}
return outputList;
},
bezier : function (a, b, c, d, x) {
if (x === 0) {
return a;
}
else if (x === 1) {
return d;
}
var du = 1 - x,
d3 = du * du * du,
r = x / du;
return d3 * (a + r * (3 * b + r * (3 * c + d * r)));
},
bezierDim : function (a, b, c, d) {
var points = [], r,
A, top, C, delta, bottom, s,
min, max, i;
// The min and max happens on boundary or b' == 0
if (a + 3 * c == d + 3 * b) {
r = a - b;
r /= 2 * (a - b - b + c);
if ( r < 1 && r > 0) {
points.push(r);
}
} else {
// b'(x) / -3 = (a-3b+3c-d)x^2+ (-2a+4b-2c)x + (a-b)
// delta = -4 (-b^2+a c+b c-c^2-a d+b d)
A = a - 3 * b + 3 * c - d;
top = 2 * (a - b - b + c);
C = a - b;
delta = top * top - 4 * A * C;
bottom = A + A;
if (delta === 0) {
r = top / bottom;
if (r < 1 && r > 0) {
points.push(r);
}
} else if (delta > 0) {
s = Math.sqrt(delta);
r = (s + top) / bottom;
if (r < 1 && r > 0) {
points.push(r);
}
r = (top - s) / bottom;
if (r < 1 && r > 0) {
points.push(r);
}
}
}
min = Math.min(a, d);
max = Math.max(a, d);
for (i = 0; i < points.length; i++) {
min = Math.min(min, this.bezier(a, b, c, d, points[i]));
max = Math.max(max, this.bezier(a, b, c, d, points[i]));
}
return [min, max];
},
curveDim: function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) {
var x = this.bezierDim(p1x, c1x, c2x, p2x),
y = this.bezierDim(p1y, c1y, c2y, p2y);
return {
min: {
x: x[0],
y: y[0]
},
max: {
x: x[1],
y: y[1]
}
};
},
/**
* @private
*
* Calculates bezier curve control anchor points for a particular point in a path, with a
* smoothing curve applied. The smoothness of the curve is controlled by the 'value' parameter.
* Note that this algorithm assumes that the line being smoothed is normalized going from left
* to right; it makes special adjustments assuming this orientation.
*
* @param {Number} prevX X coordinate of the previous point in the path
* @param {Number} prevY Y coordinate of the previous point in the path
* @param {Number} curX X coordinate of the current point in the path
* @param {Number} curY Y coordinate of the current point in the path
* @param {Number} nextX X coordinate of the next point in the path
* @param {Number} nextY Y coordinate of the next point in the path
* @param {Number} value A value to control the smoothness of the curve; this is used to
* divide the distance between points, so a value of 2 corresponds to
* half the distance between points (a very smooth line) while higher values
* result in less smooth curves. Defaults to 4.
* @return {Object} Object containing x1, y1, x2, y2 bezier control anchor points; x1 and y1
* are the control point for the curve toward the previous path point, and
* x2 and y2 are the control point for the curve toward the next path point.
*/
getAnchors: function (prevX, prevY, curX, curY, nextX, nextY, value) {
value = value || 4;
var M = Math,
PI = M.PI,
halfPI = PI / 2,
abs = M.abs,
sin = M.sin,
cos = M.cos,
atan = M.atan,
control1Length, control2Length, control1Angle, control2Angle,
control1X, control1Y, control2X, control2Y, alpha;
// Find the length of each control anchor line, by dividing the horizontal distance
// between points by the value parameter.
control1Length = (curX - prevX) / value;
control2Length = (nextX - curX) / value;
// Determine the angle of each control anchor line. If the middle point is a vertical
// turnaround then we force it to a flat horizontal angle to prevent the curve from
// dipping above or below the middle point. Otherwise we use an angle that points
// toward the previous/next target point.
if ((curY >= prevY && curY >= nextY) || (curY <= prevY && curY <= nextY)) {
control1Angle = control2Angle = halfPI;
} else {
control1Angle = atan((curX - prevX) / abs(curY - prevY));
if (prevY < curY) {
control1Angle = PI - control1Angle;
}
control2Angle = atan((nextX - curX) / abs(curY - nextY));
if (nextY < curY) {
control2Angle = PI - control2Angle;
}
}
// Adjust the calculated angles so they point away from each other on the same line
alpha = halfPI - ((control1Angle + control2Angle) % (PI * 2)) / 2;
if (alpha > halfPI) {
alpha -= PI;
}
control1Angle += alpha;
control2Angle += alpha;
// Find the control anchor points from the angles and length
control1X = curX - control1Length * sin(control1Angle);
control1Y = curY + control1Length * cos(control1Angle);
control2X = curX + control2Length * sin(control2Angle);
control2Y = curY + control2Length * cos(control2Angle);
// One last adjustment, make sure that no control anchor point extends vertically past
// its target prev/next point, as that results in curves dipping above or below and
// bending back strangely. If we find this happening we keep the control angle but
// reduce the length of the control line so it stays within bounds.
if ((curY > prevY && control1Y < prevY) || (curY < prevY && control1Y > prevY)) {
control1X += abs(prevY - control1Y) * (control1X - curX) / (control1Y - curY);
control1Y = prevY;
}
if ((curY > nextY && control2Y < nextY) || (curY < nextY && control2Y > nextY)) {
control2X -= abs(nextY - control2Y) * (control2X - curX) / (control2Y - curY);
control2Y = nextY;
}
return {
x1: control1X,
y1: control1Y,
x2: control2X,
y2: control2Y
};
},
/* Smoothing function for a path. Converts a path into cubic beziers. Value defines the divider of the distance between points.
* Defaults to a value of 4.
*/
smooth: function (originalPath, value) {
var path = this.path2curve(originalPath),
newp = [path[0]],
x = path[0][1],
y = path[0][2],
j,
points,
i = 1,
ii = path.length,
beg = 1,
mx = x,
my = y,
pathi,
pathil,
pathim,
pathiml,
pathip,
pathipl,
begl;
for (; i < ii; i++) {
pathi = path[i];
pathil = pathi.length;
pathim = path[i - 1];
pathiml = pathim.length;
pathip = path[i + 1];
pathipl = pathip && pathip.length;
if (pathi[0] == "M") {
mx = pathi[1];
my = pathi[2];
j = i + 1;
while (path[j][0] != "C") {
j++;
}
newp.push(["M", mx, my]);
beg = newp.length;
x = mx;
y = my;
continue;
}
if (pathi[pathil - 2] == mx && pathi[pathil - 1] == my && (!pathip || pathip[0] == "M")) {
begl = newp[beg].length;
points = this.getAnchors(pathim[pathiml - 2], pathim[pathiml - 1], mx, my, newp[beg][begl - 2], newp[beg][begl - 1], value);
newp[beg][1] = points.x2;
newp[beg][2] = points.y2;
}
else if (!pathip || pathip[0] == "M") {
points = {
x1: pathi[pathil - 2],
y1: pathi[pathil - 1]
};
} else {
points = this.getAnchors(pathim[pathiml - 2], pathim[pathiml - 1], pathi[pathil - 2], pathi[pathil - 1], pathip[pathipl - 2], pathip[pathipl - 1], value);
}
newp.push(["C", x, y, points.x1, points.y1, pathi[pathil - 2], pathi[pathil - 1]]);
x = points.x2;
y = points.y2;
}
return newp;
},
findDotAtSegment: function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
var t1 = 1 - t;
return {
x: Math.pow(t1, 3) * p1x + Math.pow(t1, 2) * 3 * t * c1x + t1 * 3 * t * t * c2x + Math.pow(t, 3) * p2x,
y: Math.pow(t1, 3) * p1y + Math.pow(t1, 2) * 3 * t * c1y + t1 * 3 * t * t * c2y + Math.pow(t, 3) * p2y
};
},
/**
* @private
*/
snapEnds: function (from, to, stepsMax, prettyNumbers) {
if (Ext.isDate(from)) {
return this.snapEndsByDate(from, to, stepsMax);
}
var step = (to - from) / stepsMax,
level = Math.floor(Math.log(step) / Math.LN10) + 1,
m = Math.pow(10, level),
cur,
floor,
modulo = Math.round((step % m) * Math.pow(10, 2 - level)),
interval = [[0, 15], [10, 1], [20, 4], [25, 2], [50, 9], [100, 15]],
stepCount = 0,
value,
weight,
i,
topValue,
topWeight = 1e9,
ln = interval.length;
floor = Math.floor(from / m) * m;
if (from == floor && floor > 0) {
floor = Math.floor((from - (m/10)) / m) * m;
}
if (prettyNumbers) {
for (i = 0; i < ln; i++) {
value = interval[i][0];
weight = (value - modulo) < 0 ? 1e6 : (value - modulo) / interval[i][1];
if (weight < topWeight) {
topValue = value;
topWeight = weight;
}
}
step = Math.floor(step * Math.pow(10, -level)) * Math.pow(10, level) + topValue * Math.pow(10, level - 2);
if (from < 0 && to >= 0) {
cur = 0;
while (cur > from) {
cur -= step;
stepCount++;
}
from = +cur.toFixed(10);
cur = 0;
while (cur < to) {
cur += step;
stepCount++;
}
to = +cur.toFixed(10);
} else {
cur = from = floor;
while (cur < to) {
cur += step;
stepCount++;
}
}
to = +cur.toFixed(10);
} else {
from = floor;
stepCount = stepsMax;
}
return {
from: from,
to: to,
power: level,
step: step,
steps: stepCount
};
},
/**
* snapEndsByDate is a utility method to deduce an appropriate tick configuration for the data set of given
* feature. Refer to {@link #snapEnds}.
*
* @param {Date} from The minimum value in the data
* @param {Date} to The maximum value in the data
* @param {Number} stepsMax The maximum number of ticks
* @param {Boolean} lockEnds If true, the 'from' and 'to' parameters will be used as fixed end values and will not be adjusted
*
* @return {Object} The calculated step and ends info; properties are:
* - from: The result start value, which may be lower than the original start value
* - to: The result end value, which may be higher than the original end value
* - step: The fixed value size of each step, or undefined if the steps are not fixed.
* - steps: The number of steps if the steps are fixed, or an array of step values.
* NOTE: Even when the steps have a fixed value, they may not divide the from/to range perfectly evenly;
* there may be a smaller distance between the last step and the end value than between prior
* steps, particularly when the `endsLocked` param is true. Therefore it is best to not use
* the `steps` result when finding the axis tick points, instead use the `step`, `to`, and
* `from` to find the correct point for each tick.
*/
snapEndsByDate: function (from, to, stepsMax, lockEnds) {
var selectedStep = false,
scales = [
[Ext.Date.MILLI, [1, 2, 5, 10, 20, 50, 100, 200, 250, 500]],
[Ext.Date.SECOND, [1, 2, 5, 10, 15, 30]],
[Ext.Date.MINUTE, [1, 2, 5, 10, 15, 30]],
[Ext.Date.HOUR, [1, 2, 3, 4, 6, 12]],
[Ext.Date.DAY, [1, 2, 7, 14]],
[Ext.Date.MONTH, [1, 2, 3, 6]]
],
sLen = scales.length,
stop = false,
scale, j, yearDiff, s;
// Find the most desirable scale
for (s = 0; s < sLen; s++) {
scale = scales[s];
if (!stop) {
for (j = 0; j < scale[1].length; j++) {
if (to < Ext.Date.add(from, scale[0], scale[1][j] * stepsMax)) {
selectedStep = [scale[0], scale[1][j]];
stop = true;
break;
}
}
}
}
if (!selectedStep) {
yearDiff = this.snapEnds(from.getFullYear(), to.getFullYear() + 1, stepsMax, lockEnds);
selectedStep = [Date.YEAR, Math.round(yearDiff.step)];
}
return this.snapEndsByDateAndStep(from, to, selectedStep, lockEnds);
},
/**
* snapEndsByDateAndStep is a utility method to deduce an appropriate tick configuration for the data set of given
* feature and specific step size.
*
* @param {Date} from The minimum value in the data
* @param {Date} to The maximum value in the data
* @param {Array} step An array with two components: The first is the unit of the step (day, month, year, etc).
* The second is the number of units for the step (1, 2, etc.).
* If the number is an integer, it represents the number of units for the step ([Ext.Date.DAY, 2] means "Every other day").
* If the number is a fraction, it represents the number of steps per unit ([Ext.Date.DAY, 1/2] means "Twice a day").
* If the unit is the month, the steps may be adjusted depending on the month. For instance [Ext.Date.MONTH, 1/3], which means "Three times a month",
* generates steps on the 1st, the 10th and the 20th of every month regardless of whether a month has 28 days or 31 days. The steps are generated
* as follows:
* - [Ext.Date.MONTH, n]: on the current date every 'n' months, maxed to the number of days in the month.
* - [Ext.Date.MONTH, 1/2]: on the 1st and 15th of every month.
* - [Ext.Date.MONTH, 1/3]: on the 1st, 10th and 20th of every month.
* - [Ext.Date.MONTH, 1/4]: on the 1st, 8th, 15th and 22nd of every month.
* @param {Boolean} lockEnds If true, the 'from' and 'to' parameters will be used as fixed end values
* and will not be adjusted
*
* @return {Object} The calculated step and ends info; properties are:
* - from: The result start value, which may be lower than the original start value
* - to: The result end value, which may be higher than the original end value
* - step: The fixed value size of each step, or undefined if the steps are not fixed.
* - steps: The number of steps if the steps are fixed, or an array of step values.
* NOTE: Even when the steps have a fixed value, they may not divide the from/to range perfectly evenly;
* there may be a smaller distance between the last step and the end value than between prior
* steps, particularly when the `endsLocked` param is true. Therefore it is best to not use
* the `steps` result when finding the axis tick points, instead use the `step`, `to`, and
* `from` to find the correct point for each tick.
*/
snapEndsByDateAndStep: function(from, to, step, lockEnds) {
var fromStat = [from.getFullYear(), from.getMonth(), from.getDate(),
from.getHours(), from.getMinutes(), from.getSeconds(), from.getMilliseconds()],
steps, testFrom, testTo, date, year, month, day, fractionalMonth,
stepUnit = step[0], stepValue = step[1];
if (lockEnds) {
testFrom = from;
} else {
switch (stepUnit) {
case Ext.Date.MILLI:
testFrom = new Date(fromStat[0], fromStat[1], fromStat[2], fromStat[3],
fromStat[4], fromStat[5], Math.floor(fromStat[6] / stepValue) * stepValue);
break;
case Ext.Date.SECOND:
testFrom = new Date(fromStat[0], fromStat[1], fromStat[2], fromStat[3],
fromStat[4], Math.floor(fromStat[5] / stepValue) * stepValue, 0);
break;
case Ext.Date.MINUTE:
testFrom = new Date(fromStat[0], fromStat[1], fromStat[2], fromStat[3],
Math.floor(fromStat[4] / stepValue) * stepValue, 0, 0);
break;
case Ext.Date.HOUR:
testFrom = new Date(fromStat[0], fromStat[1], fromStat[2],
Math.floor(fromStat[3] / stepValue) * stepValue, 0, 0, 0);
break;
case Ext.Date.DAY:
testFrom = new Date(fromStat[0], fromStat[1],
Math.floor((fromStat[2] - 1) / stepValue) * stepValue + 1, 0, 0, 0, 0);
break;
case Ext.Date.MONTH:
testFrom = new Date(fromStat[0], Math.floor(fromStat[1] / stepValue) * stepValue, 1, 0, 0, 0, 0);
break;
default: // Ext.Date.YEAR
testFrom = new Date(Math.floor(fromStat[0] / stepValue) * stepValue, 0, 1, 0, 0, 0, 0);
break;
}
}
fractionalMonth = ((stepUnit === Ext.Date.MONTH) && (stepValue == 1/2 || stepValue == 1/3 || stepValue == 1/4));
steps = (fractionalMonth ? [] : 0);
// TODO(zhangbei) : We can do it better somehow...
testTo = new Date(testFrom);
while (testTo < to) {
if (fractionalMonth) {
date = new Date(testTo);
year = date.getFullYear();
month = date.getMonth();
day = date.getDate();
switch(stepValue) {
case 1/2: // the 1st and 15th of every month
if (day >= 15) {
day = 1;
if (++month > 11) {
year++;
}
}
else {
day = 15;
}
break;
case 1/3: // the 1st, 10th and 20th of every month
if (day >= 20) {
day = 1;
if (++month > 11) {
year++;
}
}
else {
if (day >= 10) {
day = 20
}
else {
day = 10;
}
}
break;
case 1/4: // the 1st, 8th, 15th and 22nd of every month
if (day >= 22) {
day = 1;
if (++month > 11) {
year++;
}
}
else {
if (day >= 15) {
day = 22
}
else {
if (day >= 8) {
day = 15
}
else {
day = 8;
}
}
}
break;
}
testTo.setYear(year);
testTo.setMonth(month);
testTo.setDate(day);
steps.push(new Date(testTo));
}
else {
testTo = Ext.Date.add(testTo, stepUnit, stepValue);
steps++;
}
}
if (lockEnds) {
testTo = to;
}
if (fractionalMonth) {
return {
from : +testFrom,
to : +testTo,
steps : steps // array of steps
};
}
else {
return {
from : +testFrom,
to : +testTo,
step : (testTo - testFrom) / steps,
steps : steps // number of steps
};
}
},
sorter: function (a, b) {
return a.offset - b.offset;
},
rad: function(degrees) {
return degrees % 360 * Math.PI / 180;
},
degrees: function(radian) {
return radian * 180 / Math.PI % 360;
},
withinBox: function(x, y, bbox) {
bbox = bbox || {};
return (x >= bbox.x && x <= (bbox.x + bbox.width) && y >= bbox.y && y <= (bbox.y + bbox.height));
},
parseGradient: function(gradient) {
var me = this,
type = gradient.type || 'linear',
angle = gradient.angle || 0,
radian = me.radian,
stops = gradient.stops,
stopsArr = [],
stop,
vector,
max,
stopObj;
if (type == 'linear') {
vector = [0, 0, Math.cos(angle * radian), Math.sin(angle * radian)];
max = 1 / (Math.max(Math.abs(vector[2]), Math.abs(vector[3])) || 1);
vector[2] *= max;
vector[3] *= max;
if (vector[2] < 0) {
vector[0] = -vector[2];
vector[2] = 0;
}
if (vector[3] < 0) {
vector[1] = -vector[3];
vector[3] = 0;
}
}
for (stop in stops) {
if (stops.hasOwnProperty(stop) && me.stopsRE.test(stop)) {
stopObj = {
offset: parseInt(stop, 10),
color: Ext.draw.Color.toHex(stops[stop].color) || '#ffffff',
opacity: stops[stop].opacity || 1
};
stopsArr.push(stopObj);
}
}
// Sort by pct property
Ext.Array.sort(stopsArr, me.sorter);
if (type == 'linear') {
return {
id: gradient.id,
type: type,
vector: vector,
stops: stopsArr
};
}
else {
return {
id: gradient.id,
type: type,
centerX: gradient.centerX,
centerY: gradient.centerY,
focalX: gradient.focalX,
focalY: gradient.focalY,
radius: gradient.radius,
vector: vector,
stops: stopsArr
};
}
}
});
/**
* @private
*/
Ext.define('Ext.fx.PropertyHandler', {
/* Begin Definitions */
statics: {
defaultHandler: {
pixelDefaultsRE: /width|height|top$|bottom$|left$|right$/i,
unitRE: /^(-?\d*\.?\d*){1}(em|ex|px|in|cm|mm|pt|pc|%)*$/,
scrollRE: /^scroll/i,
computeDelta: function(from, end, damper, initial, attr) {
damper = (typeof damper == 'number') ? damper : 1;
var unitRE = this.unitRE,
match = unitRE.exec(from),
start, units;
if (match) {
from = match[1];
units = match[2];
if (!this.scrollRE.test(attr) && !units && this.pixelDefaultsRE.test(attr)) {
units = 'px';
}
}
from = +from || 0;
match = unitRE.exec(end);
if (match) {
end = match[1];
units = match[2] || units;
}
end = +end || 0;
start = (initial != null) ? initial : from;
return {
from: from,
delta: (end - start) * damper,
units: units
};
},
get: function(from, end, damper, initialFrom, attr) {
var ln = from.length,
out = [],
i, initial, res, j, len;
for (i = 0; i < ln; i++) {
if (initialFrom) {
initial = initialFrom[i][1].from;
}
if (Ext.isArray(from[i][1]) && Ext.isArray(end)) {
res = [];
j = 0;
len = from[i][1].length;
for (; j < len; j++) {
res.push(this.computeDelta(from[i][1][j], end[j], damper, initial, attr));
}
out.push([from[i][0], res]);
}
else {
out.push([from[i][0], this.computeDelta(from[i][1], end, damper, initial, attr)]);
}
}
return out;
},
set: function(values, easing) {
var ln = values.length,
out = [],
i, val, res, len, j;
for (i = 0; i < ln; i++) {
val = values[i][1];
if (Ext.isArray(val)) {
res = [];
j = 0;
len = val.length;
for (; j < len; j++) {
res.push(val[j].from + val[j].delta * easing + (val[j].units || 0));
}
out.push([values[i][0], res]);
} else {
out.push([values[i][0], val.from + val.delta * easing + (val.units || 0)]);
}
}
return out;
}
},
stringHandler: {
computeDelta: function(from, end, damper, initial, attr) {
return {
from: from,
delta: end
};
},
get: function(from, end, damper, initialFrom, attr) {
var ln = from.length,
out = [],
i, initial, res, j, len;
for (i = 0; i < ln; i++) {
out.push([from[i][0], this.computeDelta(from[i][1], end, damper, initial, attr)]);
}
return out;
},
set: function(values, easing) {
var ln = values.length,
out = [],
i, val, res, len, j;
for (i = 0; i < ln; i++) {
val = values[i][1];
out.push([values[i][0], val.delta]);
}
return out;
}
},
color: {
rgbRE: /^rgb\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\)$/i,
hexRE: /^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i,
hex3RE: /^#?([0-9A-F]{1})([0-9A-F]{1})([0-9A-F]{1})$/i,
parseColor : function(color, damper) {
damper = (typeof damper == 'number') ? damper : 1;
var out = false,
reList = [this.hexRE, this.rgbRE, this.hex3RE],
length = reList.length,
match, base, re, i;
for (i = 0; i < length; i++) {
re = reList[i];
base = (i % 2 === 0) ? 16 : 10;
match = re.exec(color);
if (match && match.length === 4) {
if (i === 2) {
match[1] += match[1];
match[2] += match[2];
match[3] += match[3];
}
out = {
red: parseInt(match[1], base),
green: parseInt(match[2], base),
blue: parseInt(match[3], base)
};
break;
}
}
return out || color;
},
computeDelta: function(from, end, damper, initial) {
from = this.parseColor(from);
end = this.parseColor(end, damper);
var start = initial ? initial : from,
tfrom = typeof start,
tend = typeof end;
//Extra check for when the color string is not recognized.
if (tfrom == 'string' || tfrom == 'undefined'
|| tend == 'string' || tend == 'undefined') {
return end || start;
}
return {
from: from,
delta: {
red: Math.round((end.red - start.red) * damper),
green: Math.round((end.green - start.green) * damper),
blue: Math.round((end.blue - start.blue) * damper)
}
};
},
get: function(start, end, damper, initialFrom) {
var ln = start.length,
out = [],
i, initial;
for (i = 0; i < ln; i++) {
if (initialFrom) {
initial = initialFrom[i][1].from;
}
out.push([start[i][0], this.computeDelta(start[i][1], end, damper, initial)]);
}
return out;
},
set: function(values, easing) {
var ln = values.length,
out = [],
i, val, parsedString, from, delta;
for (i = 0; i < ln; i++) {
val = values[i][1];
if (val) {
from = val.from;
delta = val.delta;
//multiple checks to reformat the color if it can't recognized by computeDelta.
val = (typeof val == 'object' && 'red' in val)?
'rgb(' + val.red + ', ' + val.green + ', ' + val.blue + ')' : val;
val = (typeof val == 'object' && val.length)? val[0] : val;
if (typeof val == 'undefined') {
return [];
}
parsedString = typeof val == 'string'? val :
'rgb(' + [
(from.red + Math.round(delta.red * easing)) % 256,
(from.green + Math.round(delta.green * easing)) % 256,
(from.blue + Math.round(delta.blue * easing)) % 256
].join(',') + ')';
out.push([
values[i][0],
parsedString
]);
}
}
return out;
}
},
object: {
interpolate: function(prop, damper) {
damper = (typeof damper == 'number') ? damper : 1;
var out = {},
p;
for(p in prop) {
out[p] = parseFloat(prop[p]) * damper;
}
return out;
},
computeDelta: function(from, end, damper, initial) {
from = this.interpolate(from);
end = this.interpolate(end, damper);
var start = initial ? initial : from,
delta = {},
p;
for(p in end) {
delta[p] = end[p] - start[p];
}
return {
from: from,
delta: delta
};
},
get: function(start, end, damper, initialFrom) {
var ln = start.length,
out = [],
i, initial;
for (i = 0; i < ln; i++) {
if (initialFrom) {
initial = initialFrom[i][1].from;
}
out.push([start[i][0], this.computeDelta(start[i][1], end, damper, initial)]);
}
return out;
},
set: function(values, easing) {
var ln = values.length,
out = [],
outObject = {},
i, from, delta, val, p;
for (i = 0; i < ln; i++) {
val = values[i][1];
from = val.from;
delta = val.delta;
for (p in from) {
outObject[p] = from[p] + delta[p] * easing;
}
out.push([
values[i][0],
outObject
]);
}
return out;
}
},
path: {
computeDelta: function(from, end, damper, initial) {
damper = (typeof damper == 'number') ? damper : 1;
var start;
from = +from || 0;
end = +end || 0;
start = (initial != null) ? initial : from;
return {
from: from,
delta: (end - start) * damper
};
},
forcePath: function(path) {
if (!Ext.isArray(path) && !Ext.isArray(path[0])) {
path = Ext.draw.Draw.parsePathString(path);
}
return path;
},
get: function(start, end, damper, initialFrom) {
var endPath = this.forcePath(end),
out = [],
startLn = start.length,
startPathLn, pointsLn, i, deltaPath, initial, j, k, path, startPath;
for (i = 0; i < startLn; i++) {
startPath = this.forcePath(start[i][1]);
deltaPath = Ext.draw.Draw.interpolatePaths(startPath, endPath);
startPath = deltaPath[0];
endPath = deltaPath[1];
startPathLn = startPath.length;
path = [];
for (j = 0; j < startPathLn; j++) {
deltaPath = [startPath[j][0]];
pointsLn = startPath[j].length;
for (k = 1; k < pointsLn; k++) {
initial = initialFrom && initialFrom[0][1][j][k].from;
deltaPath.push(this.computeDelta(startPath[j][k], endPath[j][k], damper, initial));
}
path.push(deltaPath);
}
out.push([start[i][0], path]);
}
return out;
},
set: function(values, easing) {
var ln = values.length,
out = [],
i, j, k, newPath, calcPath, deltaPath, deltaPathLn, pointsLn;
for (i = 0; i < ln; i++) {
deltaPath = values[i][1];
newPath = [];
deltaPathLn = deltaPath.length;
for (j = 0; j < deltaPathLn; j++) {
calcPath = [deltaPath[j][0]];
pointsLn = deltaPath[j].length;
for (k = 1; k < pointsLn; k++) {
calcPath.push(deltaPath[j][k].from + deltaPath[j][k].delta * easing);
}
newPath.push(calcPath.join(','));
}
out.push([values[i][0], newPath.join(',')]);
}
return out;
}
}
/* End Definitions */
}
}, function() {
//set color properties to color interpolator
var props = [
'outlineColor',
'backgroundColor',
'borderColor',
'borderTopColor',
'borderRightColor',
'borderBottomColor',
'borderLeftColor',
'fill',
'stroke'
],
length = props.length,
i = 0,
prop;
for (; i
keyframes : {
'0%': {
left: 100
},
'40%': {
left: 150
},
'60%': {
left: 75
},
'100%': {
left: 100
}
}
',
'
',
'{%this.renderDockedItems(out,values,1);%}'
],
/**
* Allows addition of behavior after rendering is complete. At this stage the Component’s Element
* will have been styled according to the configuration, will have had any configured CSS class
* names added, and will be in the configured visibility and the configured enable state.
*
* @template
* @protected
*/
afterRender : function() {
var me = this,
data = {},
protoEl = me.protoEl,
target = me.el,
item, pre, hide, contentEl;
me.finishRenderChildren();
// We need to do the contentEl here because it depends on the layout items (inner/outerCt)
// to be rendered before we can put it in
if (me.contentEl) {
pre = Ext.baseCSSPrefix;
hide = pre + 'hide-';
contentEl = Ext.get(me.contentEl);
contentEl.removeCls([pre+'hidden', hide+'display', hide+'offsets', hide+'nosize']);
me.getContentTarget().appendChild(contentEl.dom);
}
protoEl.writeTo(data);
// Here we apply any styles that were set on the protoEl during the rendering phase
// A majority of times this will not happen, but we still need to handle it
item = data.removed;
if (item) {
target.removeCls(item);
}
item = data.cls;
if (item.length) {
target.addCls(item);
}
item = data.style;
if (data.style) {
target.setStyle(item);
}
me.protoEl = null;
// If this is the outermost Container, lay it out as soon as it is rendered.
if (!me.ownerCt) {
me.updateLayout();
}
},
afterFirstLayout : function(width, height) {
var me = this,
x = me.x,
y = me.y,
hasX,
hasY,
pos, xy;
// We only have to set absolute position here if there is no ownerlayout which should take responsibility.
// Consider the example of rendered components outside of a viewport - these might need their positions setting.
if (!me.ownerLayout) {
hasX = Ext.isDefined(x);
hasY = Ext.isDefined(y);
}
// For floaters, calculate x and y if they aren't defined by aligning
// the sized element to the center of either the container or the ownerCt
if (me.floating && (!hasX || !hasY)) {
if (me.floatParent) {
pos = me.floatParent.getTargetEl().getViewRegion();
xy = me.el.getAlignToXY(me.floatParent.getTargetEl(), 'c-c');
pos.x = xy[0] - pos.x;
pos.y = xy[1] - pos.y;
} else {
xy = me.el.getAlignToXY(me.container, 'c-c');
pos = me.container.translateXY(xy[0], xy[1]);
}
x = hasX ? x : pos.x;
y = hasY ? y : pos.y;
hasX = hasY = true;
}
if (hasX || hasY) {
me.setPosition(x, y);
}
me.onBoxReady(width, height);
},
/**
* Sets references to elements inside the component. This applies {@link Ext.AbstractComponent#cfg-renderSelectors renderSelectors}
* as well as {@link Ext.AbstractComponent#cfg-childEls childEls}.
* @private
*/
applyRenderSelectors: function() {
var me = this,
selectors = me.renderSelectors,
el = me.el,
dom = el.dom,
selector;
me.applyChildEls(el);
// We still support renderSelectors. There are a few places in the framework that
// need them and they are a documented part of the API. In fact, we support mixing
// childEls and renderSelectors (no reason not to).
if (selectors) {
for (selector in selectors) {
if (selectors.hasOwnProperty(selector) && selectors[selector]) {
me[selector] = Ext.get(Ext.DomQuery.selectNode(selectors[selector], dom));
}
}
}
},
beforeRender: function () {
var me = this,
target = me.getTargetEl(),
overflowEl = me.getOverflowEl(),
layout = me.getComponentLayout(),
// Call the style calculation early which sets the public scrollFlags property
overflowStyle = me.getOverflowStyle();
// Just before rendering, set the frame flag if we are an always-framed component like Window or Tip.
me.frame = me.frame || me.alwaysFramed;
if (!layout.initialized) {
layout.initLayout();
}
// Attempt to set overflow style prior to render if the targetEl can be accessed.
// If the targetEl does not exist yet, this will take place in finishRender
if (overflowEl) {
overflowEl.setStyle(overflowStyle);
me.overflowStyleSet = true;
}
me.setUI(me.ui);
if (me.disabled) {
// pass silent so the event doesn't fire the first time.
me.disable(true);
}
},
/**
* @private
* Called from the selected frame generation template to insert this Component's inner structure inside the framing structure.
*
* When framing is used, a selected frame generation template is used as the primary template of the #getElConfig instead
* of the configured {@link Ext.AbstractComponent#renderTpl renderTpl}. The renderTpl is invoked by this method which is injected into the framing template.
*/
doApplyRenderTpl: function(out, values) {
// Careful! This method is bolted on to the frameTpl so all we get for context is
// the renderData! The "this" pointer is the frameTpl instance!
var me = values.$comp,
tpl;
// Don't do this if the component is already rendered:
if (!me.rendered) {
tpl = me.initRenderTpl();
tpl.applyOut(values.renderData, out);
}
},
/**
* Handles autoRender.
* Floating Components may have an ownerCt. If they are asking to be constrained, constrain them within that
* ownerCt, and have their z-index managed locally. Floating Components are always rendered to document.body
*/
doAutoRender: function() {
var me = this;
if (!me.rendered) {
if (me.floating) {
me.render(document.body);
} else {
me.render(Ext.isBoolean(me.autoRender) ? Ext.getBody() : me.autoRender);
}
}
},
doRenderContent: function (out, renderData) {
// Careful! This method is bolted on to the renderTpl so all we get for context is
// the renderData! The "this" pointer is the renderTpl instance!
var me = renderData.$comp;
if (me.html) {
Ext.DomHelper.generateMarkup(me.html, out);
delete me.html;
}
if (me.tpl) {
// Make sure this.tpl is an instantiated XTemplate
if (!me.tpl.isTemplate) {
me.tpl = new Ext.XTemplate(me.tpl);
}
if (me.data) {
//me.tpl[me.tplWriteMode](target, me.data);
me.tpl.applyOut(me.data, out);
delete me.data;
}
}
},
doRenderFramingDockedItems: function (out, renderData, after) {
// Careful! This method is bolted on to the frameTpl so all we get for context is
// the renderData! The "this" pointer is the frameTpl instance!
var me = renderData.$comp;
// Most components don't have dockedItems, so check for doRenderDockedItems on the
// component (also, don't do this if the component is already rendered):
if (!me.rendered && me.doRenderDockedItems) {
// The "renderData" property is placed in scope for the renderTpl, but we don't
// want to render docked items at that level in addition to the framing level:
renderData.renderData.$skipDockedItems = true;
// doRenderDockedItems requires the $comp property on renderData, but this is
// set on the frameTpl's renderData as well:
me.doRenderDockedItems.call(this, out, renderData, after);
}
},
/**
* This method visits the rendered component tree in a "top-down" order. That is, this
* code runs on a parent component before running on a child. This method calls the
* {@link #onRender} method of each component.
* @param {Number} containerIdx The index into the Container items of this Component.
*
* @private
*/
finishRender: function(containerIdx) {
var me = this,
tpl, data, el;
// We are typically called w/me.el==null as a child of some ownerCt that is being
// rendered. We are also called by render for a normal component (w/o a configured
// me.el). In this case, render sets me.el and me.rendering (indirectly). Lastly
// we are also called on a component (like a Viewport) that has a configured me.el
// (body for a Viewport) when render is called. In this case, it is not flagged as
// "me.rendering" yet becasue it does not produce a renderTree. We use this to know
// not to regen the renderTpl.
if (!me.el || me.$pid) {
if (me.container) {
el = me.container.getById(me.id, true);
} else {
el = Ext.getDom(me.id);
}
if (!me.el) {
// Typical case: we produced the el during render
me.wrapPrimaryEl(el);
} else {
// We were configured with an el and created a proxy, so now we can swap
// the proxy for me.el:
delete me.$pid;
if (!me.el.dom) {
// make sure me.el is an Element
me.wrapPrimaryEl(me.el);
}
el.parentNode.insertBefore(me.el.dom, el);
Ext.removeNode(el); // remove placeholder el
// TODO - what about class/style?
}
} else if (!me.rendering) {
// We were configured with an el and then told to render (e.g., Viewport). We
// need to generate the proper DOM. Insert first because the layout system
// insists that child Component elements indices match the Component indices.
tpl = me.initRenderTpl();
if (tpl) {
data = me.initRenderData();
tpl.insertFirst(me.getTargetEl(), data);
}
}
// else we are rendering
if (!me.container) {
// top-level rendered components will already have me.container set up
me.container = Ext.get(me.el.dom.parentNode);
}
if (me.ctCls) {
me.container.addCls(me.ctCls);
}
// Sets the rendered flag and clears the rendering flag
me.onRender(me.container, containerIdx);
// If we could not access a target protoEl in beforeRender, we have to set the overflow styles here.
if (!me.overflowStyleSet) {
me.getOverflowEl().setStyle(me.getOverflowStyle());
}
// Tell the encapsulating element to hide itself in the way the Component is configured to hide
// This means DISPLAY, VISIBILITY or OFFSETS.
me.el.setVisibilityMode(Ext.Element[me.hideMode.toUpperCase()]);
if (me.overCls) {
me.el.hover(me.addOverCls, me.removeOverCls, me);
}
if (me.hasListeners.render) {
me.fireEvent('render', me);
}
me.afterRender(); // this can cause a layout
if (me.hasListeners.afterrender) {
me.fireEvent('afterrender', me);
}
me.initEvents();
if (me.hidden) {
// Hiding during the render process should not perform any ancillary
// actions that the full hide process does; It is not hiding, it begins in a hidden state.'
// So just make the element hidden according to the configured hideMode
me.el.hide();
}
},
finishRenderChildren: function () {
var layout = this.getComponentLayout();
layout.finishRender();
},
getElConfig : function() {
var me = this,
autoEl = me.autoEl,
frameInfo = me.getFrameInfo(),
config = {
tag: 'div',
tpl: frameInfo ? me.initFramingTpl(frameInfo.table) : me.initRenderTpl()
},
protoEl = me.protoEl,
i, frameElNames, len, suffix, frameGenId, frameData;
me.initStyles(protoEl);
protoEl.writeTo(config);
protoEl.flush();
if (Ext.isString(autoEl)) {
config.tag = autoEl;
} else {
Ext.apply(config, autoEl); // harmless if !autoEl
}
// It's important to assign the id here as an autoEl.id could have been (wrongly) applied and this would get things out of sync
config.id = me.id;
if (config.tpl) {
// Use the framingTpl as the main content creating template. It will call out to this.applyRenderTpl(out, values)
if (frameInfo) {
frameElNames = me.frameElNames;
len = frameElNames.length;
config.tplData = frameData = me.getFrameRenderData();
frameData.renderData = me.initRenderData();
frameGenId = frameData.fgid;
// Add the childEls for each of the frame elements
for (i = 0; i < len; i++) {
suffix = frameElNames[i];
me.addChildEls({ name: 'frame' + suffix, id: frameGenId + suffix });
}
// Panel must have a frameBody
me.addChildEls({
name: 'frameBody',
id: frameGenId + 'MC'
});
} else {
config.tplData = me.initRenderData();
}
}
return config;
},
// Create the framingTpl from the string.
// Poke in a reference to applyRenderTpl(frameInfo, out)
initFramingTpl: function(table) {
var tpl = this.getFrameTpl(table);
if (tpl && !tpl.applyRenderTpl) {
this.setupFramingTpl(tpl);
}
return tpl;
},
/**
* @private
* Inject a reference to the function which applies the render template into the framing template. The framing template
* wraps the content.
*/
setupFramingTpl: function(frameTpl) {
frameTpl.applyRenderTpl = this.doApplyRenderTpl;
frameTpl.renderDockedItems = this.doRenderFramingDockedItems;
},
/**
* This function takes the position argument passed to onRender and returns a
* DOM element that you can use in the insertBefore.
* @param {String/Number/Ext.dom.Element/HTMLElement} position Index, element id or element you want
* to put this component before.
* @return {HTMLElement} DOM element that you can use in the insertBefore
*/
getInsertPosition: function(position) {
// Convert the position to an element to insert before
if (position !== undefined) {
if (Ext.isNumber(position)) {
position = this.container.dom.childNodes[position];
}
else {
position = Ext.getDom(position);
}
}
return position;
},
getRenderTree: function() {
var me = this;
if (!me.hasListeners.beforerender || me.fireEvent('beforerender', me) !== false) {
me.beforeRender();
// Flag to let the layout's finishRenderItems and afterFinishRenderItems
// know which items to process
me.rendering = true;
if (me.el) {
// Since we are producing a render tree, we produce a "proxy el" that will
// sit in the rendered DOM precisely where me.el belongs. We replace the
// proxy el in the finishRender phase.
return {
tag: 'div',
id: (me.$pid = Ext.id())
};
}
return me.getElConfig();
}
return null;
},
initContainer: function(container) {
var me = this;
// If you render a component specifying the el, we get the container
// of the el, and make sure we dont move the el around in the dom
// during the render
if (!container && me.el) {
container = me.el.dom.parentNode;
me.allowDomMove = false;
}
me.container = container.dom ? container : Ext.get(container);
return me.container;
},
/**
* Initialized the renderData to be used when rendering the renderTpl.
* @return {Object} Object with keys and values that are going to be applied to the renderTpl
* @protected
*/
initRenderData: function() {
var me = this;
return Ext.apply({
$comp: me,
id: me.id,
ui: me.ui,
uiCls: me.uiCls,
baseCls: me.baseCls,
componentCls: me.componentCls,
frame: me.frame,
childElCls: '' // overridden in RTL
}, me.renderData);
},
/**
* Initializes the renderTpl.
* @return {Ext.XTemplate} The renderTpl XTemplate instance.
* @private
*/
initRenderTpl: function() {
var tpl = this.getTpl('renderTpl');
if (tpl && !tpl.renderContent) {
this.setupRenderTpl(tpl);
}
return tpl;
},
/**
* Template method called when this Component's DOM structure is created.
*
* At this point, this Component's (and all descendants') DOM structure *exists* but it has not
* been layed out (positioned and sized).
*
* Subclasses which override this to gain access to the structure at render time should
* call the parent class's method before attempting to access any child elements of the Component.
*
* @param {Ext.core.Element} parentNode The parent Element in which this Component's encapsulating element is contained.
* @param {Number} containerIdx The index within the parent Container's child collection of this Component.
*
* @template
* @protected
*/
onRender: function(parentNode, containerIdx) {
var me = this,
x = me.x,
y = me.y,
lastBox = null,
width, height,
el = me.el;
me.applyRenderSelectors();
// Flag set on getRenderTree to flag to the layout's postprocessing routine that
// the Component is in the process of being rendered and needs postprocessing.
me.rendering = null;
me.rendered = true;
// We need to remember these to avoid writing them during the initial layout:
if (x != null) {
lastBox = {x:x};
}
if (y != null) {
(lastBox = lastBox || {}).y = y;
}
// Framed components need their width/height to apply to the frame, which is
// best handled in layout at present.
// If we're using the content box model, we also cannot assign initial sizes since we do not know the border widths to subtract
if (!me.getFrameInfo() && Ext.isBorderBox) {
width = me.width;
height = me.height;
if (typeof width === 'number') {
lastBox = lastBox || {};
lastBox.width = width;
}
if (typeof height === 'number') {
lastBox = lastBox || {};
lastBox.height = height;
}
}
me.lastBox = el.lastBox = lastBox;
},
/**
* Renders the Component into the passed HTML element.
*
* **If you are using a {@link Ext.container.Container Container} object to house this
* Component, then do not use the render method.**
*
* A Container's child Components are rendered by that Container's
* {@link Ext.container.Container#layout layout} manager when the Container is first rendered.
*
* If the Container is already rendered when a new child Component is added, you may need to call
* the Container's {@link Ext.container.Container#doLayout doLayout} to refresh the view which
* causes any unrendered child Components to be rendered. This is required so that you can add
* multiple child components if needed while only refreshing the layout once.
*
* When creating complex UIs, it is important to remember that sizing and positioning
* of child items is the responsibility of the Container's {@link Ext.container.Container#layout layout}
* manager. If you expect child items to be sized in response to user interactions, you must
* configure the Container with a layout manager which creates and manages the type of layout you
* have in mind.
*
* **Omitting the Container's {@link Ext.Container#layout layout} config means that a basic
* layout manager is used which does nothing but render child components sequentially into the
* Container. No sizing or positioning will be performed in this situation.**
*
* @param {Ext.Element/HTMLElement/String} [container] The element this Component should be
* rendered into. If it is being created from existing markup, this should be omitted.
* @param {String/Number} [position] The element ID or DOM node index within the container **before**
* which this component will be inserted (defaults to appending to the end of the container)
*/
render: function(container, position) {
var me = this,
el = me.el && (me.el = Ext.get(me.el)), // ensure me.el is wrapped
vetoed,
tree,
nextSibling;
Ext.suspendLayouts();
container = me.initContainer(container);
nextSibling = me.getInsertPosition(position);
if (!el) {
tree = me.getRenderTree();
if (me.ownerLayout && me.ownerLayout.transformItemRenderTree) {
tree = me.ownerLayout.transformItemRenderTree(tree);
}
// tree will be null if a beforerender listener returns false
if (tree) {
if (nextSibling) {
el = Ext.DomHelper.insertBefore(nextSibling, tree);
} else {
el = Ext.DomHelper.append(container, tree);
}
me.wrapPrimaryEl(el);
}
} else {
if (!me.hasListeners.beforerender || me.fireEvent('beforerender', me) !== false) {
me.beforeRender();
// Set configured styles on pre-rendered Component's element
me.initStyles(el);
if (me.allowDomMove !== false) {
if (nextSibling) {
container.dom.insertBefore(el.dom, nextSibling);
} else {
container.dom.appendChild(el.dom);
}
}
} else {
vetoed = true;
}
}
if (el && !vetoed) {
me.finishRender(position);
}
Ext.resumeLayouts(!me.hidden && !container.isDetachedBody);
},
/**
* Ensures that this component is attached to `document.body`. If the component was
* rendered to {@link Ext#getDetachedBody}, then it will be appended to `document.body`.
* Any configured position is also restored.
* @param {Boolean} [runLayout=false] True to run the component's layout.
*/
ensureAttachedToBody: function (runLayout) {
var comp = this,
body;
while (comp.ownerCt) {
comp = comp.ownerCt;
}
if (comp.container.isDetachedBody) {
comp.container = body = Ext.getBody();
body.appendChild(comp.el.dom);
if (runLayout) {
comp.updateLayout();
}
if (typeof comp.x == 'number' || typeof comp.y == 'number') {
comp.setPosition(comp.x, comp.y);
}
}
},
setupRenderTpl: function (renderTpl) {
renderTpl.renderBody = renderTpl.renderContent = this.doRenderContent;
},
wrapPrimaryEl: function (dom) {
this.el = Ext.get(dom, true);
},
/**
* @private
*/
initFrame : function() {
if (Ext.supports.CSS3BorderRadius || !this.frame) {
return;
}
var me = this,
frameInfo = me.getFrameInfo(),
frameTpl, frameGenId,
frameElNames = me.frameElNames,
len = frameElNames.length,
i, frameData, suffix;
if (frameInfo) {
frameTpl = me.getFrameTpl(frameInfo.table);
frameData = me.getFrameRenderData();
frameGenId = frameData.fgid;
// Here we render the frameTpl to this component. This inserts the 9point div
// or the table framing.
frameTpl.insertFirst(me.el, frameData);
// The frameBody is returned in getTargetEl, so that layouts render items to
// the correct target.
me.frameBody = me.el.down('.' + me.frameCls + '-mc');
// Clean out the childEls for the old frame elements (the majority of the els)
me.removeChildEls(function (c) {
return c.id && me.frameIdRegex.test(c.id);
});
// Grab references to the childEls for each of the new frame elements
for (i = 0; i < len; i++) {
suffix = frameElNames[i];
me['frame' + suffix] = me.el.getById(frameGenId + suffix);
}
}
},
getFrameRenderData: function () {
var me = this,
// we are only called if framing so this has already been determined:
frameInfo = me.frameSize,
frameGenId = (me.frameGenId || 0) + 1;
// since we render id's into the markup and id's NEED to be unique, we have a
// simple strategy for numbering their generations.
me.frameGenId = frameGenId;
return {
$comp: me,
fgid: me.id + '-frame' + frameGenId,
ui: me.ui,
uiCls: me.uiCls,
frameCls: me.frameCls,
baseCls: me.baseCls,
top: !!frameInfo.top,
left: !!frameInfo.left,
right: !!frameInfo.right,
bottom: !!frameInfo.bottom,
// can be optionally set by a subclass or override to be an extra class to
// be applied to all framing elements (used by RTL)
frameElCls: ''
};
},
updateFrame: function() {
if (Ext.supports.CSS3BorderRadius || !this.frame) {
return;
}
var me = this,
wasTable = me.frameSize && me.frameSize.table,
oldFrameTL = me.frameTL,
oldFrameBL = me.frameBL,
oldFrameML = me.frameML,
oldFrameMC = me.frameMC,
newMCClassName;
me.initFrame();
if (oldFrameMC) {
if (me.frame) {
// Store the class names set on the new MC
newMCClassName = me.frameMC.dom.className;
// Framing elements have been selected in initFrame, no need to run applyRenderSelectors
// Replace the new mc with the old mc
oldFrameMC.insertAfter(me.frameMC);
me.frameMC.remove();
// Restore the reference to the old frame mc as the framebody
me.frameBody = me.frameMC = oldFrameMC;
// Apply the new mc classes to the old mc element
oldFrameMC.dom.className = newMCClassName;
// Remove the old framing
if (wasTable) {
me.el.query('> table')[1].remove();
}
else {
if (oldFrameTL) {
oldFrameTL.remove();
}
if (oldFrameBL) {
oldFrameBL.remove();
}
if (oldFrameML) {
oldFrameML.remove();
}
}
}
}
else if (me.frame) {
me.applyRenderSelectors();
}
},
/**
* @private
* On render, reads an encoded style attribute, "filter" from the style of this Component's element.
* This information is memoized based upon the CSS class name of this Component's element.
* Because child Components are rendered as textual HTML as part of the topmost Container, a dummy div is inserted
* into the document to receive the document element's CSS class name, and therefore style attributes.
*/
getFrameInfo: function() {
// If native framing can be used, or this component is not going to be framed, then do not attempt to read CSS framing info.
if (Ext.supports.CSS3BorderRadius || !this.frame) {
return false;
}
var me = this,
frameInfoCache = me.frameInfoCache,
cls = me.getFramingInfoCls() + '-frameInfo',
frameInfo = frameInfoCache[cls],
max = Math.max,
styleEl, match, info, frameTop, frameRight, frameBottom, frameLeft,
borderWidthT, borderWidthR, borderWidthB, borderWidthL,
paddingT, paddingR, paddingB, paddingL,
borderRadiusTL, borderRadiusTR, borderRadiusBR, borderRadiusBL;
if (frameInfo == null) {
// Get the singleton frame style proxy with our el class name stamped into it.
styleEl = Ext.fly(me.getStyleProxy(cls), 'frame-style-el');
info = styleEl.getStyle('font-family');
if (info) {
// The framing data is encoded as
//
// D=div|T=table
// | H=horz|V=vert
// | |
// | |
// [DT][HV]-[T-R-B-L]-[T-R-B-L]-[T-R-B-L]
// / / | | \ \
// / / | | \ \
// / / / \ \ \
// / / border-width \ \
// border-radius padding
//
// The first 2 chars hold the div/table and horizontal/vertical flags.
// The 3 sets of TRBL 4-tuples are the CSS3 values for border-radius,
// border-width and padding, respectively.
//
info = info.split('-');
borderRadiusTL = parseInt(info[1], 10);
borderRadiusTR = parseInt(info[2], 10);
borderRadiusBR = parseInt(info[3], 10);
borderRadiusBL = parseInt(info[4], 10);
borderWidthT = parseInt(info[5], 10);
borderWidthR = parseInt(info[6], 10);
borderWidthB = parseInt(info[7], 10);
borderWidthL = parseInt(info[8], 10);
paddingT = parseInt(info[9], 10);
paddingR = parseInt(info[10], 10);
paddingB = parseInt(info[11], 10);
paddingL = parseInt(info[12], 10);
// This calculation should follow ext-theme-base/etc/mixins/frame.css
// with respect to the CSS3 equivalent formulation:
frameTop = max(borderWidthT, max(borderRadiusTL, borderRadiusTR));
frameRight = max(borderWidthR, max(borderRadiusTR, borderRadiusBR));
frameBottom = max(borderWidthB, max(borderRadiusBL, borderRadiusBR));
frameLeft = max(borderWidthL, max(borderRadiusTL, borderRadiusBL));
frameInfo = {
table: info[0].charAt(0) === 't',
vertical: info[0].charAt(1) === 'v',
top: frameTop,
right: frameRight,
bottom: frameBottom,
left: frameLeft,
width: frameLeft + frameRight,
height: frameTop + frameBottom,
maxWidth: max(frameTop, frameRight, frameBottom, frameLeft),
border: {
top: borderWidthT,
right: borderWidthR,
bottom: borderWidthB,
left: borderWidthL,
width: borderWidthL + borderWidthR,
height: borderWidthT + borderWidthB
},
padding: {
top: paddingT,
right: paddingR,
bottom: paddingB,
left: paddingL,
width: paddingL + paddingR,
height: paddingT + paddingB
},
radius: {
tl: borderRadiusTL,
tr: borderRadiusTR,
br: borderRadiusBR,
bl: borderRadiusBL
}
};
} else {
frameInfo = false;
}
// This happens when you set frame: true explicitly without using the x-frame mixin in sass.
// This way IE can't figure out what sizes to use and thus framing can't work.
if (me.frame === true && !frameInfo) {
Ext.log.error('You have set frame: true explicity on this component (' + me.getXType() + ') and it ' +
'does not have any framing defined in the CSS template. In this case IE cannot figure out ' +
'what sizes to use and thus framing on this component will be disabled.');
}
frameInfoCache[cls] = frameInfo;
}
me.frame = !!frameInfo;
me.frameSize = frameInfo;
return frameInfo;
},
getFramingInfoCls: function(){
return this.baseCls + '-' + this.ui;
},
/**
* @private
* Returns an offscreen div with the same class name as the element this is being rendered.
* This is because child item rendering takes place in a detached div which, being not
* part of the document, has no styling.
*/
getStyleProxy: function(cls) {
var result = this.styleProxyEl || (Ext.AbstractComponent.prototype.styleProxyEl = Ext.getBody().createChild({
style: {
position: 'absolute',
top: '-10000px'
}
}, null, true));
result.className = cls;
return result;
},
/**
* @private
*/
getFrameTpl : function(table) {
return this.getTpl(table ? 'frameTableTpl' : 'frameTpl');
},
// Cache the frame information object so as not to cause style recalculations
frameInfoCache: {}
});
/**
* @class Ext.state.Provider
* ',
' ',
' {parent.baseCls}-{parent.ui}-{.}-tl{frameElCls}" role="presentation"> {parent.baseCls}-{parent.ui}-{.}-tc{frameElCls}" role="presentation"> ',
' {parent.baseCls}-{parent.ui}-{.}-tr{frameElCls}" role="presentation"> ',
' ',
' {parent.baseCls}-{parent.ui}-{.}-ml{frameElCls}" role="presentation"> {parent.baseCls}-{parent.ui}-{.}-mc{frameElCls}" role="presentation">',
'{%this.applyRenderTpl(out, values)%}',
' ',
' {parent.baseCls}-{parent.ui}-{.}-mr{frameElCls}" role="presentation"> ',
' ',
' {parent.baseCls}-{parent.ui}-{.}-bl{frameElCls}" role="presentation"> {parent.baseCls}-{parent.ui}-{.}-bc{frameElCls}" role="presentation"> ',
' {parent.baseCls}-{parent.ui}-{.}-br{frameElCls}" role="presentation">
* This class passes on calls from components to the underlying {@link Ext.state.Provider} so that
* there is a common interface that can be used without needing to refer to a specific provider instance
* in every component.
* @singleton
* @docauthor Evan Trimboli
// in your initialization function
init : function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
}
stateEvents may be any type
* of event supported by this object, including browser or custom events
* (e.g., ['click', 'customerchange']).{@link #stateful} for an explanation of saving and
* restoring object state.{title}
',
* '{title}
',
* '
*
* @private
*/
Ext.define('Ext.data.flash.BinaryXhr', {
statics: {
/**
* Called by the flash plugin once it's installed and open for business.
* @private
*/
flashPluginActivated: function() {
Ext.data.flash.BinaryXhr.flashPluginActive = true;
Ext.data.flash.BinaryXhr.flashPlugin = document.getElementById("ext-flash-polyfill");
Ext.globalEvents.fireEvent("flashready"); // let all pending connections know
},
/**
* Set to trut once the plugin registers and is active.
* @private
*/
flashPluginActive: false,
/**
* Flag to avoid installing the plugin twice.
* @private
*/
flashPluginInjected: false,
/**
* Counts IDs for new connections.
* @private
*/
connectionIndex: 1,
/**
* Plcaeholder for active connections.
* @private
*/
liveConnections: {},
/**
* Reference to the actual plugin, once activated.
* @private
*/
flashPlugin: null,
/**
* Called by the flash plugin once the state of one of the active connections changes.
* @param {Number/number} javascriptId the ID of the connection.
* @param {number} state the state of the connection. Equivalent to readyState numbers in XHR.
* @param {Object} data optional object containing the returned data, error and status codes.
* @private
*/
onFlashStateChange: function(javascriptId, state, data) {
var connection;
// Identify the request this is for
connection = this.liveConnections[Number(javascriptId)]; // Make sure its a native number
if (connection) {
connection.onFlashStateChange(state, data);
}
else {
Ext.warn.log("onFlashStateChange for unknown connection ID: " + javascriptId);
}
},
/**
* Adds the BinaryXhr object to the tracked connection list and assigns it an ID
* @param {Ext.data.flash.BinaryXhr} conn the connection to register
* @return {Number} id
* @private
*/
registerConnection: function(conn) {
var i = this.connectionIndex;
this.conectionIndex = this.connectionIndex + 1;
this.liveConnections[i] = conn;
return i;
},
/**
* Injects the flash polyfill plugin to allow posting binary data.
* This is done in two steps: First we load the javascript loader for flash objects, then we call it to inject the flash object.
* @private
*/
injectFlashPlugin: function() {
var divTag, pTag, aTag, iTag,
me=this,
flashLoaderPath, flashObjectPath;
// Generate the following HTML set of tags:
// + '
Ext.flashPluginPath="/resources/FlashPlugin.swf";
'
//+ '