name and value.
+ * which originally accepts 2 arguments for `name` and `value`.
* The wrapped function then allows "flexible" value setting of either:
*
- * -
- *
nameandvalueas 2 arguments
- * - one single object argument with multiple key - value pairs - *
-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'
-});
- * fn, change this to the provided scope, optionally
+ /**
+ * 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 browser window.
+ * @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
@@ -2091,19 +2350,18 @@ setValue({
*/
bind: function(fn, scope, args, appendArgs) {
var method = fn,
- applyArgs;
+ slice = Array.prototype.slice;
return function() {
var callArgs = args || arguments;
if (appendArgs === true) {
- callArgs = Array.prototype.slice.call(arguments, 0);
+ callArgs = slice.call(arguments, 0);
callArgs = callArgs.concat(args);
}
else if (Ext.isNumber(appendArgs)) {
- callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first
- applyArgs = [appendArgs, 0].concat(args); // create method call params
- Array.prototype.splice.apply(callArgs, applyArgs); // splice them in
+ callArgs = slice.call(arguments, 0); // copy arguments first
+ Ext.Array.insert(callArgs, appendArgs, args);
}
return method.apply(scope || window, callArgs);
@@ -2111,23 +2369,26 @@ setValue({
},
/**
- * Create a new function from the provided fn, the arguments of which are pre-set to `args`.
+ * 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'
-
+ * 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.
+ * @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) {
@@ -2141,8 +2402,8 @@ setValue({
},
/**
- * 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.
+ * 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
@@ -2158,26 +2419,26 @@ setValue({
* 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"
- 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} 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 browser window.**
* @param {Mixed} returnValue (optional) The value to return if the passed function return false (defaults to null).
* @return {Function} The new function
*/
@@ -2198,16 +2459,17 @@ sayHiToFriend('Brian'); // alerts "Hi, Brian"
},
/**
- * 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.
- */
+ * 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);
@@ -2222,27 +2484,30 @@ sayHiToFriend('Brian'); // alerts "Hi, Brian"
/**
* 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);
- this reference) in which the function is executed.
- * If omitted, defaults to the browser window.
+ * @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
@@ -2262,23 +2527,21 @@ Ext.Function.defer(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
- * Creates a delegate function, optionally with a bound scope which, when called, buffers + * 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.
+ * 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
+ * @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.
@@ -2327,16 +2590,16 @@ sayGoodbye('Fred'); // both alerts show
},
/**
- * Creates a throttled version of the passed function which, when called repeatedly and + * 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.
+ * 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.
+ * 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 fn {Function} The function to execute at a regular time interval. - * @param interval {Number} The interval in milliseconds on which the passed function is executed. - * @param scope (optional) The scope (this reference) in which
+ * @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.
*/
@@ -2361,23 +2624,23 @@ sayGoodbye('Fred'); // both alerts show
};
/**
- * Shorthand for {@link Ext.Function#defer}
+ * @method
* @member Ext
- * @method defer
+ * @alias Ext.Function#defer
*/
Ext.defer = Ext.Function.alias(Ext.Function, 'defer');
/**
- * Shorthand for {@link Ext.Function#pass}
+ * @method
* @member Ext
- * @method pass
+ * @alias Ext.Function#pass
*/
Ext.pass = Ext.Function.alias(Ext.Function, 'pass');
/**
- * Shorthand for {@link Ext.Function#bind}
+ * @method
* @member Ext
- * @method bind
+ * @alias Ext.Function#bind
*/
Ext.bind = Ext.Function.alias(Ext.Function, 'bind');
@@ -2597,15 +2860,6 @@ var ExtObject = Ext.Object = {
matchedKeys = name.match(/(\[):?([^\]]*)\]/g);
matchedName = name.match(/^([^\[]+)/);
- if (!matchedName) {
- Ext.Error.raise({
- sourceClass: "Ext.Object",
- sourceMethod: "fromQueryString",
- queryString: queryString,
- recursive: recursive,
- msg: 'Malformed query string given, failed parsing name from "' + part + '"'
- });
- }
name = matchedName[0];
keys = [];
@@ -2826,6 +3080,7 @@ var ExtObject = Ext.Object = {
* @param {Object} object
* @return {Array} An array of keys from the object
+ * @method
*/
getKeys: ('keys' in Object.prototype) ? Object.keys : function(object) {
var keys = [],
@@ -3041,6 +3296,7 @@ Ext.Date = {
/**
* Returns the current timestamp
* @return {Date} The current timestamp
+ * @method
*/
now: Date.now || function() {
return +new Date();
@@ -3322,8 +3578,8 @@ Ext.Date.monthNumbers = {
Dec:11
},
/**
- * The date format string that the {@link #dateRenderer} and {@link #date} functions use. - * see {@link #Date} for details.
+ *The date format string that the {@link Ext.util.Format#dateRenderer} + * and {@link Ext.util.Format#date} functions use. See {@link Ext.Date} for details.
*This defaults to m/d/Y, but may be overridden in a locale file.
Other.awesome.Class
- * will simply be loaded from ./Other/awesome/Class.js
+ * If not being specified, for example, `Other.awesome.Class`
+ * will simply be loaded from `./Other/awesome/Class.js`
*/
paths: {
'Ext': '.'
@@ -6888,30 +7133,30 @@ This process will be automated with Sencha Command, to be released and documente
/**
* Set the configuration for the loader. This should be called right after ext-core.js
- * (or ext-core-debug.js) is included in the page, i.e:
-
-
-
-
- * Refer to {@link Ext.Loader#configs} for the list of possible properties
+ * (or ext-core-debug.js) is included in the page, e.g.:
+ *
+ *
+ *
+ *
+ * Refer to config options of {@link Ext.Loader} for the list of possible properties.
+ *
+ * @param {String/Object} name Name of the value to override, or a config object to override multiple values.
+ * @param {Object} value (optional) The new value to set, needed if first parameter is String.
* @return {Ext.Loader} this
- * @markdown
*/
setConfig: function(name, value) {
if (Ext.isObject(name) && arguments.length === 1) {
@@ -6925,7 +7170,8 @@ This process will be automated with Sencha Command, to be released and documente
},
/**
- * Get the config value corresponding to the specified name. If no name is given, will return the config object
+ * 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/Mixed}
*/
@@ -6938,15 +7184,14 @@ This process will be automated with Sencha Command, to be released and documente
},
/**
- * Sets the path of a namespace.
- * For Example:
-
- Ext.Loader.setPath('Ext', '.');
-
+ * 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
- * @markdown
+ * @method
*/
setPath: flexSetter(function(name, path) {
this.config.paths[name] = path;
@@ -6955,32 +7200,31 @@ This process will be automated with Sencha Command, to be released and documente
}),
/**
- * 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'
-
+ * 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'
-
+ *
+ * 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
- * @markdown
*/
getPath: function(className) {
var path = '',
@@ -7058,7 +7302,7 @@ This process will be automated with Sencha Command, to be released and documente
do {
if (Manager.isCreated(requires[j])) {
// Take out from the queue
- requires.splice(j, 1);
+ Ext.Array.erase(requires, j, 1);
}
else {
j++;
@@ -7066,7 +7310,7 @@ This process will be automated with Sencha Command, to be released and documente
} while (j < requires.length);
if (item.requires.length === 0) {
- this.queue.splice(i, 1);
+ Ext.Array.erase(this.queue, i, 1);
item.callback.call(item.scope);
this.refreshQueue();
break;
@@ -7200,15 +7444,16 @@ This process will be automated with Sencha Command, to be released and documente
/**
* Explicitly exclude files from being loaded. Useful when used in conjunction with a broad include expression.
- * Can be chained with more `require` and `exclude` methods, eg:
-
- Ext.exclude('Ext.data.*').require('*');
-
- Ext.exclude('widget.button*').require('widget.*');
-
- * @param {Array} excludes
+ * Can be chained with more `require` and `exclude` methods, e.g.:
+ *
+ * Ext.exclude('Ext.data.*').require('*');
+ *
+ * Ext.exclude('widget.button*').require('widget.*');
+ *
+ * {@link Ext#exclude Ext.exclude} is alias for {@link Ext.Loader#exclude Ext.Loader.exclude} for convenience.
+ *
+ * @param {String/[String]} excludes
* @return {Object} object contains `require` method for chaining
- * @markdown
*/
exclude: function(excludes) {
var me = this;
@@ -7225,12 +7470,15 @@ This process will be automated with Sencha Command, to be released and documente
},
/**
- * Synchronously loads all classes by the given names and all their direct dependencies; optionally executes the given callback function when finishes, within the optional scope. This method is aliased by {@link Ext#syncRequire} for convenience
- * @param {String/Array} expressions Can either be a string or an array of string
+ * 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 Ext.syncRequire} is alias for {@link Ext.Loader#syncRequire Ext.Loader.syncRequire} for convenience.
+ *
+ * @param {String/[String]} 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
- * @markdown
+ * @param {String/[String]} excludes (Optional) Classes to be excluded, useful when being used with expressions
*/
syncRequire: function() {
this.syncModeEnabled = true;
@@ -7240,13 +7488,15 @@ This process will be automated with Sencha Command, to be released and documente
},
/**
- * Loads all classes by the given names and all their direct dependencies; optionally executes the given callback function when
- * finishes, within the optional scope. This method is aliased by {@link Ext#require Ext.require} for convenience
- * @param {String/Array} expressions Can either be a string or an array of string
+ * 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 Ext.require} is alias for {@link Ext.Loader#require Ext.Loader.require} for convenience.
+ *
+ * @param {String/[String]} 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
- * @markdown
+ * @param {String/[String]} excludes (Optional) Classes to be excluded, useful when being used with expressions
*/
require: function(expressions, fn, scope, excludes) {
var filePath, expression, exclude, className, excluded = {},
@@ -7357,48 +7607,7 @@ This process will be automated with Sencha Command, to be released and documente
this.refreshQueue();
}
- if (this.numPendingFiles <= 1) {
- window.status = "Finished loading all dependencies, onReady fired!";
- }
- else {
- window.status = "Loading dependencies, " + this.numPendingFiles + " files left...";
- }
-
- if (!this.syncModeEnabled && this.numPendingFiles === 0 && this.isLoading && !this.hasFileLoadError) {
- var queue = this.queue,
- requires,
- i, ln, j, subLn, missingClasses = [], missingPaths = [];
-
- for (i = 0, ln = queue.length; i < ln; i++) {
- requires = queue[i].requires;
-
- for (j = 0, subLn = requires.length; j < ln; j++) {
- if (this.isFileLoaded[requires[j]]) {
- missingClasses.push(requires[j]);
- }
- }
- }
-
- if (missingClasses.length < 1) {
- return;
- }
- missingClasses = Ext.Array.filter(missingClasses, function(item) {
- return !this.requiresMap.hasOwnProperty(item);
- }, this);
-
- for (i = 0,ln = missingClasses.length; i < ln; i++) {
- missingPaths.push(this.classNameToFilePathMap[missingClasses[i]]);
- }
-
- Ext.Error.raise({
- sourceClass: "Ext.Loader",
- sourceMethod: "onFileLoaded",
- msg: "The following classes are not declared even if their files have been " +
- "loaded: '" + missingClasses.join("', '") + "'. Please check the source code of their " +
- "corresponding files for possible typos: '" + missingPaths.join("', '") + "'"
- });
- }
},
/**
@@ -7408,13 +7617,6 @@ This process will be automated with Sencha Command, to be released and documente
this.numPendingFiles--;
this.hasFileLoadError = true;
- Ext.Error.raise({
- sourceClass: "Ext.Loader",
- classToLoad: className,
- loadPath: filePath,
- loadingType: isSynchronous ? 'synchronous' : 'async',
- msg: errorMessage
- });
},
/**
@@ -7470,10 +7672,10 @@ This process will be automated with Sencha Command, to be released and documente
},
/**
- * Add a new listener to be executed when all required scripts are fully loaded
+ * Adds 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 {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) {
@@ -7512,36 +7714,49 @@ This process will be automated with Sencha Command, to be released and documente
};
/**
- * Convenient alias of {@link Ext.Loader#require}. Please see the introduction documentation of
- * {@link Ext.Loader} for examples.
* @member Ext
* @method require
+ * @alias Ext.Loader#require
*/
Ext.require = alias(Loader, 'require');
/**
- * Synchronous version of {@link Ext#require}, convenient alias of {@link Ext.Loader#syncRequire}.
- *
* @member Ext
* @method syncRequire
+ * @alias Ext.Loader#syncRequire
*/
Ext.syncRequire = alias(Loader, 'syncRequire');
/**
- * Convenient shortcut to {@link Ext.Loader#exclude}
* @member Ext
* @method exclude
+ * @alias Ext.Loader#exclude
*/
Ext.exclude = alias(Loader, 'exclude');
/**
* @member Ext
* @method onReady
+ * @alias Ext.Loader#onReady
*/
Ext.onReady = function(fn, scope, options) {
Loader.onReady(fn, scope, true, options);
};
+ /**
+ * @cfg {[String]} requires
+ * @member Ext.Class
+ * List of classes that have to be loaded before instanciating this class.
+ * For example:
+ *
+ * Ext.define('Mother', {
+ * requires: ['Child'],
+ * giveBirth: function() {
+ * // we can be sure that child class is available.
+ * return new Child();
+ * }
+ * });
+ */
Class.registerPreprocessor('loader', function(cls, data, continueFn) {
var me = this,
dependencies = [],
@@ -7605,46 +7820,6 @@ This process will be automated with Sencha Command, to be released and documente
return;
}
- var deadlockPath = [],
- requiresMap = Loader.requiresMap,
- detectDeadlock;
-
- /*
- Automatically detect deadlocks before-hand,
- will throw an error with detailed path for ease of debugging. Examples of deadlock cases:
-
- - A extends B, then B extends A
- - A requires B, B requires C, then C requires A
-
- The detectDeadlock function will recursively transverse till the leaf, hence it can detect deadlocks
- no matter how deep the path is.
- */
-
- if (className) {
- requiresMap[className] = dependencies;
-
- detectDeadlock = function(cls) {
- deadlockPath.push(cls);
-
- if (requiresMap[cls]) {
- if (Ext.Array.contains(requiresMap[cls], className)) {
- Ext.Error.raise({
- sourceClass: "Ext.Loader",
- msg: "Deadlock detected while loading dependencies! '" + className + "' and '" +
- deadlockPath[1] + "' " + "mutually require each other. Path: " +
- deadlockPath.join(' -> ') + " -> " + deadlockPath[0]
- });
- }
-
- for (i = 0, ln = requiresMap[cls].length; i < ln; i++) {
- detectDeadlock(requiresMap[cls][i]);
- }
- }
- };
-
- detectDeadlock(className);
- }
-
Loader.require(dependencies, function() {
for (i = 0, ln = dependencyProperties.length; i < ln; i++) {
@@ -7687,6 +7862,23 @@ This process will be automated with Sencha Command, to be released and documente
Class.setDefaultPreprocessorPosition('loader', 'after', 'className');
+ /**
+ * @cfg {[String]} uses
+ * @member Ext.Class
+ * List of classes to load together with this class. These aren't neccessarily loaded before
+ * this class is instanciated. For example:
+ *
+ * Ext.define('Mother', {
+ * uses: ['Child'],
+ * giveBirth: function() {
+ * // This code might, or might not work:
+ * // return new Child();
+ *
+ * // Instead use Ext.create() to load the class at the spot if not loaded already:
+ * return Ext.create('Child');
+ * }
+ * });
+ */
Manager.registerPostprocessor('uses', function(name, cls, data) {
var uses = Ext.Array.from(data.uses),
items = [],
@@ -7715,11 +7907,11 @@ This process will be automated with Sencha Command, to be released and documente
A wrapper class for the native JavaScript Error object that adds a few useful capabilities for handling
errors in an Ext application. When you use Ext.Error to {@link #raise} an error from within any class that
uses the Ext 4 class system, the Error class can automatically add the source class and method from which
-the error was raised. It also includes logic to automatically log the eroor to the console, if available,
+the error was raised. It also includes logic to automatically log the eroor to the console, if available,
with additional metadata about the error. In all cases, the error will always be thrown at the end so that
execution will halt.
-Ext.Error also offers a global error {@link #handle handling} method that can be overridden in order to
+Ext.Error also offers a global error {@link #handle handling} method that can be overridden in order to
handle application-wide errors in a single spot. You can optionally {@link #ignore} errors altogether,
although in a real application it's usually a better idea to override the handling function and perform
logging or some other method of reporting the errors in a way that is meaningful to the application.
@@ -7729,7 +7921,7 @@ At its simplest you can simply raise an error as a simple string from within any
#Example usage:#
Ext.Error.raise('Something bad happened!');
-
+
If raised from plain JavaScript code, the error will be logged to the console (if available) and the message
displayed. In most cases however you'll be raising errors from within a class, and it may often be useful to add
additional metadata about the error being raised. The {@link #raise} method can also take a config object.
@@ -7737,7 +7929,7 @@ In this form the `msg` attribute becomes the error description, and any other da
added to the error object and, if the console is available, logged to the console for inspection.
#Example usage:#
-
+
Ext.define('Ext.Foo', {
doSomething: function(option){
if (someCondition === false) {
@@ -7759,13 +7951,13 @@ If a console is available (that supports the `console.dir` function) you'll see
msg: "You cannot do that!"
sourceClass: "Ext.Foo"
sourceMethod: "doSomething"
-
+
uncaught exception: You cannot do that!
-As you can see, the error will report exactly where it was raised and will include as much information as the
+As you can see, the error will report exactly where it was raised and will include as much information as the
raising code can usefully provide.
-If you want to handle all application errors globally you can simply override the static {@link handle} method
+If you want to handle all application errors globally you can simply override the static {@link #handle} method
and provide whatever handling logic you need. If the method returns true then the error is considered handled
and will not be thrown to the browser. If anything but true is returned then the error will be thrown normally.
@@ -7804,12 +7996,32 @@ be preferable to supply a custom error {@link #handle handling} function instead
ignore: false,
/**
-Raise an error that can include additional data and supports automatic console logging if available.
-You can pass a string error message or an object with the `msg` attribute which will be used as the
-error message. The object can contain any other name-value attributes (or objects) to be logged
+ * @property notify
+Static flag that can be used to globally control error notification to the user. Unlike
+Ex.Error.ignore, this does not effect exceptions. They are still thrown. This value can be
+set to false to disable the alert notification (default is true for IE6 and IE7).
+
+Only the first error will generate an alert. Internally this flag is set to false when the
+first error occurs prior to displaying the alert.
+
+This flag is not used in a release build.
+
+#Example usage:#
+
+ Ext.Error.notify = false;
+
+ * @markdown
+ * @static
+ */
+ //notify: Ext.isIE6 || Ext.isIE7,
+
+ /**
+Raise an error that can include additional data and supports automatic console logging if available.
+You can pass a string error message or an object with the `msg` attribute which will be used as the
+error message. The object can contain any other name-value attributes (or objects) to be logged
along with the error.
-Note that after displaying the error message a JavaScript error will ultimately be thrown so that
+Note that after displaying the error message a JavaScript error will ultimately be thrown so that
execution will halt.
#Example usage:#
@@ -7829,7 +8041,7 @@ execution will halt.
}
}
});
- * @param {String/Object} err The error message string, or an object containing the
+ * @param {String/Object} err The error message string, or an object containing the
* attribute "msg" that will be used as the error message. Any other data included in
* the object will also be logged to the browser console, if available.
* @static
@@ -7853,28 +8065,15 @@ execution will halt.
}
if (Ext.Error.handle(err) !== true) {
- var global = Ext.global,
- con = global.console,
- msg = Ext.Error.prototype.toString.call(err),
- noConsoleMsg = 'An uncaught error was raised: "' + msg +
- '". Use Firebug or Webkit console for additional details.';
-
- if (con) {
- if (con.dir) {
- con.warn('An uncaught error was raised with the following data:');
- con.dir(err);
- }
- else {
- con.warn(noConsoleMsg);
- }
- if (con.error) {
- con.error(msg);
- }
- }
- else if (global.alert){
- global.alert(noConsoleMsg);
- }
-
+ var msg = Ext.Error.prototype.toString.call(err);
+
+ Ext.log({
+ msg: msg,
+ level: 'error',
+ dump: err,
+ stack: true
+ });
+
throw new Ext.Error(err);
}
},
@@ -7905,9 +8104,11 @@ error to the browser, otherwise the error will be thrown and execution will halt
}
},
+ // This is the standard property that is the name of the constructor.
+ name: 'Ext.Error',
+
/**
- * @constructor
- * @param {String/Object} config The error message string, or an object containing the
+ * @param {String/Object} config The error message string, or an object containing the
* attribute "msg" that will be used as the error message. Any other data included in
* the object will be applied to the error instance and logged to the browser console, if available.
*/
@@ -7915,12 +8116,18 @@ error to the browser, otherwise the error will be thrown and execution will halt
if (Ext.isString(config)) {
config = { msg: config };
}
- Ext.apply(this, config);
+
+ var me = this;
+
+ Ext.apply(me, config);
+
+ me.message = me.message || me.msg; // 'message' is standard ('msg' is non-standard)
+ // note: the above does not work in old WebKit (me.message is readonly) (Safari 4)
},
/**
-Provides a custom string representation of the error object. This is an override of the base JavaScript
-`Object.toString` method, which is useful so that when logged to the browser console, an error object will
+Provides a custom string representation of the error object. This is an override of the base JavaScript
+`Object.toString` method, which is useful so that when logged to the browser console, an error object will
be displayed with a useful message instead of `[object Object]`, the default `toString` result.
The default implementation will include the error message along with the raising class and method, if available,
@@ -7940,12 +8147,28 @@ a particular error instance, if you want to provide a custom description that wi
}
});
+/*
+ * This mechanism is used to notify the user of the first error encountered on the page. This
+ * was previously internal to Ext.Error.raise and is a desirable feature since errors often
+ * slip silently under the radar. It cannot live in Ext.Error.raise since there are times
+ * where exceptions are handled in a try/catch.
+ */
+
+
/*
-Ext JS - JavaScript Library
-Copyright (c) 2006-2011, Sencha Inc.
-All rights reserved.
-licensing@sencha.com
+
+This file is part of Ext JS 4
+
+Copyright (c) 2011 Sencha Inc
+
+Contact: http://www.sencha.com/contact
+
+GNU General Public License Usage
+This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
+
+If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
+
*/
/**
* @class Ext.JSON
@@ -8097,7 +8320,7 @@ Ext.JSON = new(function() {
Ext.Error.raise({
sourceClass: "Ext.JSON",
sourceMethod: "decode",
- msg: "You're trying to decode and invalid JSON String: " + json
+ msg: "You're trying to decode an invalid JSON String: " + json
});
}
};
@@ -8145,9 +8368,9 @@ Ext.decode = Ext.JSON.decode;
For more information about how to use the Ext classes, see
-* The Learning Center
-* The FAQ
-* The forums
+- The Learning Center
+- The FAQ
+- The forums
* @singleton
* @markdown
@@ -8186,15 +8409,23 @@ Ext.apply(Ext, {
* @return {String} The generated Id.
*/
id: function(el, prefix) {
+ var me = this,
+ sandboxPrefix = '';
el = Ext.getDom(el, true) || {};
if (el === document) {
- el.id = this.documentId;
+ el.id = me.documentId;
}
else if (el === window) {
- el.id = this.windowId;
+ el.id = me.windowId;
}
if (!el.id) {
- el.id = (prefix || "ext-gen") + (++Ext.idSeed);
+ if (me.isSandboxed) {
+ if (!me.uniqueGlobalNamespace) {
+ me.getUniqueGlobalNamespace();
+ }
+ sandboxPrefix = me.uniqueGlobalNamespace + '-';
+ }
+ el.id = sandboxPrefix + (prefix || "ext-gen") + (++Ext.idSeed);
}
return el.id;
},
@@ -8210,6 +8441,7 @@ Ext.apply(Ext, {
/**
* Returns the current document head as an {@link Ext.core.Element}.
* @return Ext.core.Element The document head
+ * @method
*/
getHead: function() {
var head;
@@ -8282,6 +8514,12 @@ Ext.apply(Ext, {
/**
* Execute a callback function in a particular scope. If no function is passed the call is ignored.
+ *
+ * For example, these lines are equivalent:
+ *
+ * Ext.callback(myFunc, this, [arg1, arg2]);
+ * Ext.isFunction(myFunc) && myFunc.apply(this, [arg1, arg2]);
+ *
* @param {Function} callback The callback to execute
* @param {Object} scope (optional) The scope to execute in
* @param {Array} args (optional) The arguments to pass to the function
@@ -8337,6 +8575,7 @@ Ext.ns = Ext.namespace;
// for old browsers
window.undefined = window.undefined;
+
/**
* @class Ext
* Ext core utilities and functions.
@@ -8369,14 +8608,15 @@ window.undefined = window.undefined;
isWindows = check(/windows|win32/),
isMac = check(/macintosh|mac os x/),
isLinux = check(/linux/),
- scrollWidth = null;
+ scrollbarSize = null,
+ webKitVersion = isWebKit && (/webkit\/(\d+\.\d+)/.exec(Ext.userAgent));
// remove css image flicker
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(e) {}
- Ext.setVersion('extjs', '4.0.0');
+ Ext.setVersion('extjs', '4.0.2');
Ext.apply(Ext, {
/**
* URL to a blank file used by Ext when in secure mode for iframe src and onReady src to prevent
@@ -8470,6 +8710,7 @@ function(el){
* true, then DOM event listeners are also removed from all child nodes. The body node
* will be ignored if passed in.
* @param {HTMLElement} node The node to remove
+ * @method
*/
removeNode : isIE6 || isIE7 ? function() {
var d;
@@ -8622,6 +8863,12 @@ function(el){
*/
isMac : isMac,
+ /**
+ * The current version of WebKit (-1 if the browser does not use WebKit).
+ * @type Float
+ */
+ webKitVersion: webKitVersion ? parseFloat(webKitVersion[1]) : -1,
+
/**
* URL to a 1x1 transparent gif image used by Ext to create inline icons with CSS background images.
* In older versions of IE, this defaults to "http://sencha.com/s.gif" and you should change this to a URL on your server.
@@ -8642,7 +8889,7 @@ function(el){
* @param {Mixed} defaultValue The value to return if the original value is empty
* @param {Boolean} allowBlank (optional) true to allow zero length strings to qualify as non-empty (defaults to false)
* @return {Mixed} value, if non-empty, else defaultValue
- * @deprecated 4.0.0 Use {Ext#valueFrom} instead
+ * @deprecated 4.0.0 Use {@link Ext#valueFrom} instead
*/
value : function(v, defaultValue, allowBlank){
return Ext.isEmpty(v, allowBlank) ? defaultValue : v;
@@ -8700,53 +8947,76 @@ Ext.addBehaviors({
},
/**
- * Utility method for getting the width of the browser scrollbar. This can differ depending on
+ * Returns the size of the browser scrollbars. This can differ depending on
* operating system settings, such as the theme or font size.
* @param {Boolean} force (optional) true to force a recalculation of the value.
- * @return {Number} The width of the scrollbar.
+ * @return {Object} An object containing the width of a vertical scrollbar and the
+ * height of a horizontal scrollbar.
*/
- getScrollBarWidth: function(force){
+ getScrollbarSize: function (force) {
if(!Ext.isReady){
return 0;
}
- if(force === true || scrollWidth === null){
+ if(force === true || scrollbarSize === null){
// BrowserBug: IE9
// When IE9 positions an element offscreen via offsets, the offsetWidth is
// inaccurately reported. For IE9 only, we render on screen before removing.
- var cssClass = Ext.isIE9 ? '' : Ext.baseCSSPrefix + 'hide-offsets';
+ var cssClass = Ext.isIE9 ? '' : Ext.baseCSSPrefix + 'hide-offsets',
// Append our div, do our calculation and then remove it
- var div = Ext.getBody().createChild(''),
- child = div.child('div', true);
- var w1 = child.offsetWidth;
+ div = Ext.getBody().createChild(''),
+ child = div.child('div', true),
+ w1 = child.offsetWidth;
+
div.setStyle('overflow', (Ext.isWebKit || Ext.isGecko) ? 'auto' : 'scroll');
- var w2 = child.offsetWidth;
+
+ var w2 = child.offsetWidth, width = w1 - w2;
div.remove();
- // Need to add 2 to ensure we leave enough space
- scrollWidth = w1 - w2 + 2;
+
+ // We assume width == height for now. TODO: is this always true?
+ scrollbarSize = { width: width, height: width };
}
- return scrollWidth;
+
+ return scrollbarSize;
+ },
+
+ /**
+ * Utility method for getting the width of the browser's vertical scrollbar. This
+ * can differ depending on operating system settings, such as the theme or font size.
+ *
+ * This method is deprected in favor of {@link #getScrollbarSize}.
+ *
+ * @param {Boolean} force (optional) true to force a recalculation of the value.
+ * @return {Number} The width of a vertical scrollbar.
+ * @deprecated
+ */
+ getScrollBarWidth: function(force){
+ var size = Ext.getScrollbarSize(force);
+ return size.width + 2; // legacy fudge factor
},
/**
* Copies a set of named properties fom the source object to the destination object.
- * example:
-ImageComponent = Ext.extend(Ext.Component, {
- initComponent: function() {
- this.autoEl = { tag: 'img' };
- MyComponent.superclass.initComponent.apply(this, arguments);
- this.initialBox = Ext.copyTo({}, this.initialConfig, 'x,y,width,height');
- }
-});
- * 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: @@ -10576,13 +10956,6 @@ Ext.core.DomHelper = function(){ return el[rangeEl]; } } - Ext.Error.raise({ - sourceClass: 'Ext.core.DomHelper', - sourceMethod: 'insertHtml', - htmlToInsert: html, - targetElement: el, - msg: 'Illegal insertion point reached: "' + where + '"' - }); }, /** @@ -10648,6 +11021,7 @@ Ext.core.DomHelper = function(){ * Creates new DOM element(s) without inserting them to the document. * @param {Object/String} o The DOM object spec (and children) or raw HTML blob * @return {HTMLElement} The new uninserted node + * @method */ createDom: createDom, @@ -11169,11 +11543,6 @@ Ext.core.DomQuery = Ext.DomQuery = function(){ } // prevent infinite loop on bad selector if(!matched){ - Ext.Error.raise({ - sourceClass: 'Ext.DomQuery', - sourceMethod: 'compile', - msg: 'Error parsing selector. Parsing failed at "' + path + '"' - }); } } if(modeMatch[1]){ @@ -11190,7 +11559,10 @@ Ext.core.DomQuery = Ext.DomQuery = function(){ }, /** - * Selects a group of elements. + * Selects an array of DOM nodes using JavaScript-only implementation. + * + * Use {@link #select} to take advantage of browsers built-in support for CSS selectors. + * * @param {String} selector The selector/xpath query (can be a comma separated list of selectors) * @param {Node/String} root (optional) The start of the query (defaults to document). * @return {Array} An Array of DOM elements which match the selector. If there are @@ -11213,11 +11585,6 @@ Ext.core.DomQuery = Ext.DomQuery = function(){ if(!cache[subPath]){ cache[subPath] = Ext.DomQuery.compile(subPath); if(!cache[subPath]){ - Ext.Error.raise({ - sourceClass: 'Ext.DomQuery', - sourceMethod: 'jsSelect', - msg: subPath + ' is not a valid selector' - }); } } var result = cache[subPath](root); @@ -11238,7 +11605,23 @@ Ext.core.DomQuery = Ext.DomQuery = function(){ var docEl = (el ? el.ownerDocument || el : 0).documentElement; return docEl ? docEl.nodeName !== "HTML" : false; }, - + + /** + * Selects an array of DOM nodes by CSS/XPath selector. + * + * Uses [document.querySelectorAll][0] if browser supports that, otherwise falls back to + * {@link #jsSelect} to do the work. + * + * Aliased as {@link Ext#query}. + * + * [0]: https://developer.mozilla.org/en/DOM/document.querySelectorAll + * + * @param {String} path The selector/xpath query + * @param {Node} root (optional) The start of the query (defaults to document). + * @return {Array} An array of DOM elements (not a NodeList as returned by `querySelectorAll`). + * Empty array when no matches. + * @method + */ select : document.querySelectorAll ? function(path, root, type) { root = root || document; if (!Ext.DomQuery.isXml(root)) { @@ -12231,9 +12614,6 @@ el.un('click', this.handlerFn); // Otherwise, warn if it's not a valid CSS measurement if (!unitPattern.test(size)) { - if (Ext.isDefined(Ext.global.console)) { - Ext.global.console.warn("Warning, size detected as NaN on Element.addUnits."); - } return size || ''; } return size; @@ -12300,6 +12680,7 @@ el.un('click', this.handlerFn); * @param {String} name The attribute name * @param {String} namespace (optional) The namespace in which to look for the attribute * @return {String} The attribute value + * @method */ getAttribute: (Ext.isIE && !(Ext.isIE9 && document.documentMode === 9)) ? function(name, ns) { @@ -13054,11 +13435,11 @@ Ext.core.Element.addMethods({ cls = [], space = ((me.dom.className.replace(trimRe, '') == '') ? "" : " "), i, len, v; - if (!Ext.isDefined(className)) { + if (className === undefined) { return me; } // Separate case is for speed - if (!Ext.isArray(className)) { + if (Object.prototype.toString.call(className) !== '[object Array]') { if (typeof className === 'string') { className = className.replace(trimRe, '').split(spacesRe); if (className.length === 1) { @@ -13092,10 +13473,10 @@ Ext.core.Element.addMethods({ removeCls : function(className){ var me = this, i, idx, len, cls, elClasses; - if (!Ext.isDefined(className)) { + if (className === undefined) { return me; } - if (!Ext.isArray(className)){ + if (Object.prototype.toString.call(className) !== '[object Array]') { className = className.replace(trimRe, '').split(spacesRe); } if (me.dom && me.dom.className) { @@ -13106,7 +13487,7 @@ Ext.core.Element.addMethods({ cls = cls.replace(trimRe, ''); idx = Ext.Array.indexOf(elClasses, cls); if (idx != -1) { - elClasses.splice(idx, 1); + Ext.Array.erase(elClasses, idx, 1); } } } @@ -13137,6 +13518,7 @@ Ext.core.Element.addMethods({ * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it). * @param {String} className The CSS class to toggle * @return {Ext.core.Element} this + * @method */ toggleCls : Ext.supports.ClassList ? function(className) { @@ -13151,6 +13533,7 @@ Ext.core.Element.addMethods({ * Checks if the specified CSS class exists on this element's DOM node. * @param {String} className The CSS class to check for * @return {Boolean} True if the class exists, else false + * @method */ hasCls : Ext.supports.ClassList ? function(className) { @@ -13189,12 +13572,13 @@ Ext.core.Element.addMethods({ * Normalizes currentStyle and computedStyle. * @param {String} property The style property whose value is returned. * @return {String} The current value of the style property for this element. + * @method */ getStyle : function(){ return view && view.getComputedStyle ? function(prop){ var el = this.dom, - v, cs, out, display; + v, cs, out, display, cleaner; if(el == document){ return null; @@ -13206,10 +13590,12 @@ Ext.core.Element.addMethods({ // Ignore cases when the margin is correctly reported as 0, the bug only shows // numbers larger. if(prop == 'marginRight' && out != '0px' && !supports.RightMargin){ + cleaner = Ext.core.Element.getRightMarginFixCleaner(el); display = this.getStyle('display'); el.style.display = 'inline-block'; out = view.getComputedStyle(el, '').marginRight; el.style.display = display; + cleaner(); } if(prop == 'backgroundColor' && out == 'rgba(0, 0, 0, 0)' && !supports.TransparentColor){ @@ -13283,8 +13669,7 @@ Ext.core.Element.addMethods({ if (!me.dom) { return me; } - - if (!Ext.isObject(prop)) { + if (typeof prop === 'string') { tmp = {}; tmp[prop] = value; prop = tmp; @@ -13754,7 +14139,8 @@ Ext.fly('elId').setHeight(150, { */ setSize : function(width, height, animate){ var me = this; - if (Ext.isObject(width)){ // in case of object from getSize() + if (Ext.isObject(width)) { // in case of object from getSize() + animate = height; height = width.height; width = width.width; } @@ -13765,7 +14151,7 @@ Ext.fly('elId').setHeight(150, { me.dom.style.height = me.addUnits(height); } else { - if (!Ext.isObject(animate)) { + if (animate === true) { animate = {}; } me.animate(Ext.applyIf({ @@ -15144,7 +15530,7 @@ el.fadeOut({ /** * @deprecated 4.0 * Animates the transition of an element's dimensions from a starting height/width - * to an ending height/width. This method is a convenience implementation of {@link shift}. + * to an ending height/width. This method is a convenience implementation of {@link #shift}. * Usage:
// change height and width to 100x100 pixels
@@ -15651,7 +16037,7 @@ Ext.CompositeElementLite.prototype = {
d.parentNode.insertBefore(replacement, d);
Ext.removeNode(d);
}
- this.elements.splice(index, 1, replacement);
+ Ext.Array.splice(this.elements, index, 1, replacement);
}
return this;
},
@@ -15712,13 +16098,6 @@ Ext.core.Element.select = function(selector, root){
}else if(selector.length !== undefined){
els = selector;
}else{
- Ext.Error.raise({
- sourceClass: "Ext.core.Element",
- sourceMethod: "select",
- selector: selector,
- root: root,
- msg: "Invalid selector specified: " + selector
- });
}
return new Ext.CompositeElementLite(els);
};
@@ -15766,7 +16145,7 @@ Ext.select = Ext.core.Element.select;
*
* @constructor The parameters to this constructor serve as defaults and are not required.
* @param {Function} fn (optional) The default function to call.
- * @param {Object} scope The default scope (The this reference) in which the
+ * @param {Object} scope (optional) The default scope (The this reference) in which the
* function is called. If not specified, this will refer to the browser window.
* @param {Array} args (optional) The default Array of arguments.
*/
@@ -15847,13 +16226,6 @@ Ext.require('Ext.util.DelayedTask', function() {
listener;
scope = scope || me.observable;
- if (!fn) {
- Ext.Error.raise({
- sourceClass: Ext.getClassName(this.observable),
- sourceMethod: "addListener",
- msg: "The specified callback function is undefined"
- });
- }
if (!me.isListening(fn, scope)) {
listener = me.createListener(fn, scope, options);
@@ -15945,7 +16317,7 @@ Ext.require('Ext.util.DelayedTask', function() {
}
// remove this listener from the listeners array
- me.listeners.splice(index, 1);
+ Ext.Array.erase(me.listeners, index, 1);
return true;
}
@@ -16305,7 +16677,7 @@ Ext.EventManager = {
*/
addListener: function(element, eventName, fn, scope, options){
// Check if we've been passed a "config style" event.
- if (Ext.isObject(eventName)) {
+ if (typeof eventName !== 'string') {
this.prepareListenerConfig(element, eventName);
return;
}
@@ -16314,24 +16686,6 @@ Ext.EventManager = {
bind,
wrap;
- if (!dom){
- Ext.Error.raise({
- sourceClass: 'Ext.EventManager',
- sourceMethod: 'addListener',
- targetElement: element,
- eventName: eventName,
- msg: 'Error adding "' + eventName + '\" listener for nonexistent element "' + 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 || {};
@@ -16369,7 +16723,7 @@ Ext.EventManager = {
*/
removeListener : function(element, eventName, fn, scope) {
// handle our listener config object syntax
- if (Ext.isObject(eventName)) {
+ if (typeof eventName !== 'string') {
this.prepareListenerConfig(element, eventName, true);
return;
}
@@ -16413,7 +16767,7 @@ Ext.EventManager = {
}
// remove listener from cache
- cache.splice(i, 1);
+ Ext.Array.erase(cache, i, 1);
}
}
},
@@ -16470,74 +16824,79 @@ Ext.EventManager = {
* @param {String} ename The event name
* @param {Function} fn The function to execute
* @param {Object} scope The scope to execute callback in
- * @param {Object} o The options
+ * @param {Object} options The options
+ * @return {Function} the wrapper function
*/
createListenerWrap : function(dom, ename, fn, scope, options) {
- options = !Ext.isObject(options) ? {} : options;
+ options = options || {};
- var f = ['if(!Ext) {return;}'],
- gen;
+ var f, gen;
- if(options.buffer || options.delay || options.freezeEvent) {
- f.push('e = new Ext.EventObjectImpl(e, ' + (options.freezeEvent ? 'true' : 'false' ) + ');');
- } else {
- f.push('e = Ext.EventObject.setEvent(e);');
- }
+ return function wrap(e, args) {
+ // Compile the implementation upon first firing
+ if (!gen) {
+ f = ['if(!Ext) {return;}'];
- if (options.delegate) {
- f.push('var t = e.getTarget("' + options.delegate + '", this);');
- f.push('if(!t) {return;}');
- } else {
- f.push('var t = e.target;');
- }
+ if(options.buffer || options.delay || options.freezeEvent) {
+ f.push('e = new Ext.EventObjectImpl(e, ' + (options.freezeEvent ? 'true' : 'false' ) + ');');
+ } else {
+ f.push('e = Ext.EventObject.setEvent(e);');
+ }
- if (options.target) {
- f.push('if(e.target !== options.target) {return;}');
- }
+ if (options.delegate) {
+ f.push('var t = e.getTarget("' + options.delegate + '", this);');
+ f.push('if(!t) {return;}');
+ } else {
+ f.push('var t = e.target;');
+ }
- if(options.stopEvent) {
- f.push('e.stopEvent();');
- } else {
- if(options.preventDefault) {
- f.push('e.preventDefault();');
- }
- if(options.stopPropagation) {
- f.push('e.stopPropagation();');
- }
- }
+ if (options.target) {
+ f.push('if(e.target !== options.target) {return;}');
+ }
- if(options.normalized === false) {
- f.push('e = e.browserEvent;');
- }
+ if(options.stopEvent) {
+ f.push('e.stopEvent();');
+ } else {
+ if(options.preventDefault) {
+ f.push('e.preventDefault();');
+ }
+ if(options.stopPropagation) {
+ f.push('e.stopPropagation();');
+ }
+ }
- if(options.buffer) {
- f.push('(wrap.task && clearTimeout(wrap.task));');
- f.push('wrap.task = setTimeout(function(){');
- }
+ if(options.normalized === false) {
+ f.push('e = e.browserEvent;');
+ }
- if(options.delay) {
- f.push('wrap.tasks = wrap.tasks || [];');
- f.push('wrap.tasks.push(setTimeout(function(){');
- }
+ if(options.buffer) {
+ f.push('(wrap.task && clearTimeout(wrap.task));');
+ f.push('wrap.task = setTimeout(function(){');
+ }
- // finally call the actual handler fn
- f.push('fn.call(scope || dom, e, t, options);');
+ if(options.delay) {
+ f.push('wrap.tasks = wrap.tasks || [];');
+ f.push('wrap.tasks.push(setTimeout(function(){');
+ }
- if(options.single) {
- f.push('Ext.EventManager.removeListener(dom, ename, fn, scope);');
- }
+ // finally call the actual handler fn
+ f.push('fn.call(scope || dom, e, t, options);');
- if(options.delay) {
- f.push('}, ' + options.delay + '));');
- }
+ if(options.single) {
+ f.push('Ext.EventManager.removeListener(dom, ename, fn, scope);');
+ }
- if(options.buffer) {
- f.push('}, ' + options.buffer + ');');
- }
+ if(options.delay) {
+ f.push('}, ' + options.delay + '));');
+ }
- gen = Ext.functionFactory('e', 'options', 'fn', 'scope', 'ename', 'dom', 'wrap', 'args', f.join('\n'));
+ if(options.buffer) {
+ f.push('}, ' + options.buffer + ');');
+ }
+
+ gen = Ext.functionFactory('e', 'options', 'fn', 'scope', 'ename', 'dom', 'wrap', 'args', f.join('\n'));
+ }
- return function wrap(e, args) {
gen.call(dom, e, options, fn, scope, ename, dom, wrap, args);
};
},
@@ -16550,6 +16909,10 @@ Ext.EventManager = {
* @return {Array} The events for the element
*/
getEventListenerCache : function(element, eventName) {
+ if (!element) {
+ return [];
+ }
+
var eventCache = this.getElementEventCache(element);
return eventCache[eventName] || (eventCache[eventName] = []);
},
@@ -16561,6 +16924,9 @@ Ext.EventManager = {
* @return {Object} The event cache for the object
*/
getElementEventCache : function(element) {
+ if (!element) {
+ return {};
+ }
var elementCache = Ext.cache[this.getId(element)];
return elementCache.events || (elementCache.events = {});
},
@@ -16853,7 +17219,7 @@ Ext.EventManager.un = Ext.EventManager.removeListener;
// find the body element
var bd = document.body || document.getElementsByTagName('body')[0],
baseCSSPrefix = Ext.baseCSSPrefix,
- cls = [],
+ cls = [baseCSSPrefix + 'body'],
htmlCls = [],
html;
@@ -17157,6 +17523,54 @@ Ext.define('Ext.EventObjectImpl', {
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
@@ -17371,19 +17785,68 @@ Ext.define('Ext.EventObjectImpl', {
},
/**
- * Normalizes mouse wheel delta across browsers
- * @return {Number} The delta
+ * Correctly scales a given wheel delta.
+ * @param {Number} delta The delta value.
*/
- getWheelDelta : function(){
- var event = this.browserEvent,
- delta = 0;
+ correctWheelDelta : function (delta) {
+ var scale = this.WHEEL_SCALE,
+ ret = Math.round(delta / scale + 0.5);
- if (event.wheelDelta) { /* IE/Opera. */
- delta = event.wheelDelta / 120;
- } else if (event.detail){ /* Mozilla case. */
- delta = -event.detail / 3;
+ if (!ret && delta) {
+ ret = (delta < 0) ? -1 : 1; // don't allow non-zero deltas to go to zero!
}
- return delta;
+
+ 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;
},
/**
@@ -17573,7 +18036,7 @@ Ext.getBody().on('click', function(e,t){
return target;
}
- }
+ };
} else if (document.createEventObject) { // else if (IE)
var crazyIEButtons = { 0: 1, 1: 4, 2: 2 };
@@ -17701,7 +18164,6 @@ Ext.getBody().on('click', function(e,t){
}
function cannotInject (target, srcEvent) {
- // TODO log something
}
return function (target) {
@@ -17726,6 +18188,7 @@ Ext.EventObject = new Ext.EventObjectImpl();
*/
(function(){
var doc = document,
+ activeElement = null,
isCSS1 = doc.compatMode == "CSS1Compat",
ELEMENT = Ext.core.Element,
fly = function(el){
@@ -17736,6 +18199,28 @@ Ext.EventObject = new Ext.EventObjectImpl();
return _fly;
}, _fly;
+ // If the browser does not support document.activeElement we need some assistance.
+ // This covers old Safari 3.2 (4.0 added activeElement along with just about all
+ // other browsers). We need this support to handle issues with old Safari.
+ if (!('activeElement' in doc) && doc.addEventListener) {
+ doc.addEventListener('focus',
+ function (ev) {
+ if (ev && ev.target) {
+ activeElement = (ev.target == doc) ? null : ev.target;
+ }
+ }, true);
+ }
+
+ /*
+ * Helper function to create the function that will restore the selection.
+ */
+ function makeSelectionRestoreFn (activeEl, start, end) {
+ return function () {
+ activeEl.selectionStart = start;
+ activeEl.selectionEnd = end;
+ };
+ }
+
Ext.apply(ELEMENT, {
isAncestor : function(p, c) {
var ret = false;
@@ -17756,6 +18241,59 @@ Ext.EventObject = new Ext.EventObjectImpl();
return ret;
},
+ /**
+ * Returns the active element in the DOM. If the browser supports activeElement
+ * on the document, this is returned. If not, the focus is tracked and the active
+ * element is maintained internally.
+ * @return {HTMLElement} The active (focused) element in the document.
+ */
+ getActiveElement: function () {
+ return doc.activeElement || activeElement;
+ },
+
+ /**
+ * Creates a function to call to clean up problems with the work-around for the
+ * WebKit RightMargin bug. The work-around is to add "display: 'inline-block'" to
+ * the element before calling getComputedStyle and then to restore its original
+ * display value. The problem with this is that it corrupts the selection of an
+ * INPUT or TEXTAREA element (as in the "I-beam" goes away but ths focus remains).
+ * To cleanup after this, we need to capture the selection of any such element and
+ * then restore it after we have restored the display style.
+ *
+ * @param target {Element} The top-most element being adjusted.
+ * @private
+ */
+ getRightMarginFixCleaner: function (target) {
+ var supports = Ext.supports,
+ hasInputBug = supports.DisplayChangeInputSelectionBug,
+ hasTextAreaBug = supports.DisplayChangeTextAreaSelectionBug;
+
+ if (hasInputBug || hasTextAreaBug) {
+ var activeEl = doc.activeElement || activeElement, // save a call
+ tag = activeEl && activeEl.tagName,
+ start,
+ end;
+
+ if ((hasTextAreaBug && tag == 'TEXTAREA') ||
+ (hasInputBug && tag == 'INPUT' && activeEl.type == 'text')) {
+ if (ELEMENT.isAncestor(target, activeEl)) {
+ start = activeEl.selectionStart;
+ end = activeEl.selectionEnd;
+
+ if (Ext.isNumber(start) && Ext.isNumber(end)) { // to be safe...
+ // We don't create the raw closure here inline because that
+ // will be costly even if we don't want to return it (nested
+ // function decls and exprs are often instantiated on entry
+ // regardless of whether execution ever reaches them):
+ return makeSelectionRestoreFn(activeEl, start, end);
+ }
+ }
+ }
+ }
+
+ return Ext.emptyFn; // avoid special cases, just return a nop
+ },
+
getViewWidth : function(full) {
return full ? ELEMENT.getDocumentWidth() : ELEMENT.getViewportWidth();
},
@@ -17906,7 +18444,7 @@ Ext.EventObject = new Ext.EventObjectImpl();
Ext.each(element.options, function(opt){
if (opt.selected) {
hasValue = opt.hasAttribute ? opt.hasAttribute('value') : opt.getAttributeNode('value').specified;
- data += String.format("{0}={1}&", encoder(name), encoder(hasValue ? opt.value : opt.text));
+ data += Ext.String.format("{0}={1}&", encoder(name), encoder(hasValue ? opt.value : opt.text));
}
});
} else if (!(/file|undefined|reset|button/i.test(type))) {
@@ -18301,11 +18839,6 @@ Ext.core.Element.addMethods({
el = Ext.get(el);
if(!el || !el.dom){
- Ext.Error.raise({
- sourceClass: 'Ext.core.Element',
- sourceMethod: 'getAlignVector',
- msg: 'Attempted to align an element that doesn\'t exist'
- });
}
elRegion = el.getRegion();
@@ -18323,11 +18856,6 @@ Ext.core.Element.addMethods({
el = Ext.get(el);
if(!el || !el.dom){
- Ext.Error.raise({
- sourceClass: 'Ext.core.Element',
- sourceMethod: 'getAlignToXY',
- msg: 'Attempted to align an element that doesn\'t exist'
- });
}
o = o || [0,0];
@@ -18362,14 +18890,6 @@ Ext.core.Element.addMethods({
m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);
if(!m){
- Ext.Error.raise({
- sourceClass: 'Ext.core.Element',
- sourceMethod: 'getAlignToXY',
- el: el,
- position: p,
- offset: o,
- msg: 'Attemmpted to align an element with an invalid position: "' + p + '"'
- });
}
p1 = m[1];
@@ -19574,7 +20094,7 @@ Ext.apply(Ext.CompositeElementLite.prototype, {
Ext.removeNode(el);
}
}
- els.splice(val, 1);
+ Ext.Array.erase(els, val, 1);
}
});
return this;
@@ -19675,14 +20195,6 @@ Ext.core.Element.select = function(selector, unique, root){
}else if(selector.length !== undefined){
els = selector;
}else{
- Ext.Error.raise({
- sourceClass: "Ext.core.Element",
- sourceMethod: "select",
- selector: selector,
- unique: unique,
- root: root,
- msg: "Invalid selector specified: " + selector
- });
}
return (unique === true) ? new Ext.CompositeElement(els) : new Ext.CompositeElementLite(els);
};
@@ -19702,48 +20214,55 @@ Ext.select = Ext.core.Element.select;
/*
-Ext JS - JavaScript Library
-Copyright (c) 2006-2011, Sencha Inc.
-All rights reserved.
-licensing@sencha.com
+
+This file is part of Ext JS 4
+
+Copyright (c) 2011 Sencha Inc
+
+Contact: http://www.sencha.com/contact
+
+GNU General Public License Usage
+This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
+
+If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
+
*/
/**
- * @class Ext.util.Observable
- * 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.
+ * 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:
- *
-Employee = Ext.extend(Ext.util.Observable, {
- constructor: function(config){
- this.name = config.name;
- this.addEvents({
- "fired" : true,
- "quit" : true
- });
-
- // Copy configured listeners into *this* object so that the base class's
- // constructor will add them.
- this.listeners = config.listeners;
-
- // Call our superclass constructor to complete construction process.
- Employee.superclass.constructor.call(this, config)
- }
-});
-
- * 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('Employee', {
+ * extend: 'Ext.util.Observable',
+ * constructor: function(config){
+ * this.name = config.name;
+ * this.addEvents({
+ * "fired" : true,
+ * "quit" : true
+ * });
+ *
+ * // Copy configured listeners into *this* object so that the base class's
+ * // constructor will add them.
+ * this.listeners = config.listeners;
+ *
+ * // Call our superclass constructor to complete construction process.
+ * Employee.superclass.constructor.call(this, config)
+ * }
+ * });
+ *
+ * This could then be used like this:
+ *
+ * var newEmployee = new Employee({
+ * name: employeeName,
+ * listeners: {
+ * quit: function() {
+ * // By default, "this" will be the object that fired the event.
+ * alert(this.name + " has quit!");
+ * }
+ * }
+ * });
*/
-
Ext.define('Ext.util.Observable', {
/* Begin Definitions */
@@ -19752,7 +20271,8 @@ Ext.define('Ext.util.Observable', {
statics: {
/**
- * Removes all added captures from the Observable.
+ * Removes **all** added captures from the Observable.
+ *
* @param {Observable} o The Observable to release
* @static
*/
@@ -19761,13 +20281,14 @@ Ext.define('Ext.util.Observable', {
},
/**
- * 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,
+ * 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 {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.
+ * @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) {
@@ -19775,22 +20296,21 @@ Ext.define('Ext.util.Observable', {
},
/**
-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);
- });
-
+ * 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
- * @markdown
*/
observe: function(cls, listeners) {
if (cls) {
@@ -19809,36 +20329,38 @@ Usage:
/* End Definitions */
/**
- * @cfg {Object} listeners (optional) 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 ExtJs {@link Ext.Component Components}
- *
While some ExtJs 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#click click} 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'); }
- }
- }
-});
-
- *
- */
+ * @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 ExtJS {@link Ext.Component Components}**
+ *
+ * While _some_ ExtJs 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'); }
+ * }
+ * }
+ * });
+ */
// @private
isObservable: true,
@@ -19861,23 +20383,23 @@ new Ext.panel.Panel({
eventOptionsRe : /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate|element|vertical|horizontal)$/,
/**
- * Adds listeners to any Observable object (or Element) which are automatically removed when this Component
- * is destroyed.
+ * Adds listeners to any Observable object (or Element) which are automatically removed when this Component is
+ * destroyed.
+ *
* @param {Observable/Element} item The item to which to add a listener/listeners.
* @param {Object/String} ename The event name, or an object containing event name properties.
- * @param {Function} fn Optional. If the ename parameter was an event name, this
- * is the handler function.
- * @param {Object} scope Optional. If the ename parameter was an event name, this
- * is the scope (this reference) in which the handler function is executed.
- * @param {Object} opt Optional. If the ename parameter was an event name, this
- * is the {@link Ext.util.Observable#addListener addListener} options.
+ * @param {Function} fn (optional) If the `ename` parameter was an event name, this is the handler function.
+ * @param {Object} scope (optional) If the `ename` parameter was an event name, this is the scope (`this` reference)
+ * in which the handler function is executed.
+ * @param {Object} opt (optional) If the `ename` parameter was an event name, this is the
+ * {@link Ext.util.Observable#addListener addListener} options.
*/
addManagedListener : function(item, ename, fn, scope, options) {
var me = this,
managedListeners = me.managedListeners = me.managedListeners || [],
config;
- if (Ext.isObject(ename)) {
+ if (typeof ename !== 'string') {
options = ename;
for (ename in options) {
if (options.hasOwnProperty(ename)) {
@@ -19903,23 +20425,22 @@ new Ext.panel.Panel({
/**
* Removes listeners that were added by the {@link #mon} method.
+ *
* @param {Observable|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.
+ * @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) {
+ removeManagedListener : function(item, ename, fn, scope) {
var me = this,
options,
config,
managedListeners,
- managedListener,
length,
i;
- if (Ext.isObject(ename)) {
+ if (typeof ename !== 'string') {
options = ename;
for (ename in options) {
if (options.hasOwnProperty(ename)) {
@@ -19932,21 +20453,19 @@ new Ext.panel.Panel({
}
managedListeners = me.managedListeners ? me.managedListeners.slice() : [];
- length = managedListeners.length;
- for (i = 0; i < length; i++) {
- managedListener = managedListeners[i];
- if (managedListener.item === item && managedListener.ename === ename && (!fn || managedListener.fn === fn) && (!scope || managedListener.scope === scope)) {
- Ext.Array.remove(me.managedListeners, managedListener);
- item.un(managedListener.ename, managedListener.fn, managedListener.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).
- * An event may be set to bubble up an Observable parent hierarchy (See {@link Ext.Component#getBubbleTarget})
- * by calling {@link #enableBubble}.
+ * 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.
@@ -19964,84 +20483,120 @@ new Ext.panel.Panel({
if (queue) {
queue.push(args);
}
- } else if (event && Ext.isObject(event) && event.bubble) {
- if (event.fire.apply(event, args.slice(1)) === false) {
- return false;
- }
- parent = me.getBubbleTarget && me.getBubbleTarget();
- if (parent && parent.isObservable) {
- if (!parent.events[ename] || !Ext.isObject(parent.events[ename]) || !parent.events[ename].bubble) {
- parent.enableBubble(ename);
+ } else if (event && event !== true) {
+ if (event.bubble) {
+ if (event.fire.apply(event, args.slice(1)) === false) {
+ return false;
}
- return parent.fireEvent.apply(parent, args);
+ parent = me.getBubbleTarget && me.getBubbleTarget();
+ if (parent && parent.isObservable) {
+ if (!parent.events[ename] || parent.events[ename] === true || !parent.events[ename].bubble) {
+ parent.enableBubble(ename);
+ }
+ return parent.fireEvent.apply(parent, args);
+ }
+ }
+ else {
+ args.shift();
+ ret = event.fire.apply(event, args);
}
- } else if (event && Ext.isObject(event)) {
- args.shift();
- ret = event.fire.apply(event, args);
}
return ret;
},
/**
* Appends an event handler to this object.
- * @param {String} eventName The name of the event to listen for. May also be an object who's property names are event names. See
- * @param {Function} handler The method the event invokes.
- * @param {Object} scope (optional) The scope (this reference) in which the handler function is executed.
- * If omitted, defaults to the object which fired the event.
- * @param {Object} options (optional) An object containing handler configuration.
- * properties. This may contain any of the following properties:
- * - scope : ObjectThe scope (
this reference) in which the handler function is executed.
- * If omitted, defaults to the object which fired the event.
- * - delay : NumberThe number of milliseconds to delay the invocation of the handler after the event fires.
- * - single : BooleanTrue to add a handler to handle just the next firing of the event, and then remove itself.
- * - buffer : NumberCauses the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
- * by the specified number of milliseconds. If the event fires again within that time, the original
- * handler is not invoked, but the new handler is scheduled in its place.
- * - target : ObservableOnly call the handler if the event was fired on the target Observable, not
- * if the event was bubbled up from a child Observable.
- * - element : StringThis 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'
- }
-});
-
- * When added in this way, the options available are the options applicable to {@link Ext.core.Element#addListener}
- *
- *
- * Combining Options
- * Using the options argument, it is possible to combine different types of listeners:
- *
+ *
+ * @param {String} eventName The name of the event to listen for. May also be an object who's property names are
+ * event names.
+ * @param {Function} handler The method the event invokes. Will be called with arguments given to
+ * {@link #fireEvent} plus the `options` parameter described below.
+ * @param {Object} scope (optional) The scope (`this` reference) in which the handler function is executed. **If
+ * omitted, defaults to the object which fired the event.**
+ * @param {Object} options (optional) 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:
+ *
+ * - **scope** : Object
+ *
+ * The scope (`this` reference) in which the handler function is executed. **If omitted, defaults to the object
+ * which fired the event.**
+ *
+ * - **delay** : Number
+ *
+ * The number of milliseconds to delay the invocation of the handler after the event fires.
+ *
+ * - **single** : Boolean
+ *
+ * True to add a handler to handle just the next firing of the event, and then remove itself.
+ *
+ * - **buffer** : Number
+ *
+ * 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.
+ *
+ * - **target** : Observable
+ *
+ * Only call the handler if the event was fired on the target Observable, _not_ if the event was bubbled up from a
+ * child Observable.
+ *
+ * - **element** : String
+ *
+ * **This option is only valid for listeners bound to {@link Ext.Component Components}.** The name of a Component
+ * property which references an element to add a listener to.
+ *
+ * This option is useful during Component construction to add DOM event listeners to elements of
+ * {@link Ext.Component Components} which will exist only after the Component is rendered.
+ * For example, to add a click listener to a Panel's body:
+ *
+ * new Ext.panel.Panel({
+ * title: 'The title',
+ * listeners: {
+ * click: this.handlePanelClick,
+ * element: 'body'
+ * }
+ * });
+ *
+ * **Combining Options**
+ *
+ * Using the options argument, it is possible to combine different types of listeners:
+ *
* A delayed, one-time listener.
- *
-myPanel.on('hide', this.handleClick, this, {
-single: true,
-delay: 100
-});
- *
- * Attaching multiple handlers in 1 call
- * 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
-});
-
.
- *
+ *
+ * myPanel.on('hide', this.handleClick, this, {
+ * single: true,
+ * delay: 100
+ * });
+ *
+ * **Attaching multiple handlers in 1 call**
+ *
+ * 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}
+ * });
+ *
*/
addListener: function(ename, fn, scope, options) {
var me = this,
config,
event;
- if (Ext.isObject(ename)) {
+ if (typeof ename !== 'string') {
options = ename;
for (ename in options) {
if (options.hasOwnProperty(ename)) {
@@ -20065,9 +20620,11 @@ myGridPanel.on({
/**
* Removes an event handler.
- * @param {String} eventName The type of event the handler was associated with.
- * @param {Function} handler The handler to remove. This must be a reference to the function passed into the {@link #addListener} call.
- * @param {Object} scope (optional) The scope originally specified for the handler.
+ *
+ * @param {String} eventName The type of event the handler was associated with.
+ * @param {Function} handler The handler to remove. **This must be a reference to the function passed into the
+ * {@link #addListener} call.**
+ * @param {Object} scope (optional) The scope originally specified for the handler.
*/
removeListener: function(ename, fn, scope) {
var me = this,
@@ -20075,7 +20632,7 @@ myGridPanel.on({
event,
options;
- if (Ext.isObject(ename)) {
+ if (typeof ename !== 'string') {
options = ename;
for (ename in options) {
if (options.hasOwnProperty(ename)) {
@@ -20088,7 +20645,7 @@ myGridPanel.on({
} else {
ename = ename.toLowerCase();
event = me.events[ename];
- if (event.isEvent) {
+ if (event && event.isEvent) {
event.removeListener(fn, scope);
}
}
@@ -20114,10 +20671,6 @@ myGridPanel.on({
this.clearManagedListeners();
},
- purgeListeners : function() {
- console.warn('Observable: purgeListeners has been deprecated. Please use clearListeners.');
- return this.clearListeners.apply(this, arguments);
- },
/**
* Removes all managed listeners for this object.
@@ -20125,30 +20678,48 @@ myGridPanel.on({
clearManagedListeners : function() {
var managedListeners = this.managedListeners || [],
i = 0,
- len = managedListeners.length,
- managedListener;
+ len = managedListeners.length;
for (; i < len; i++) {
- managedListener = managedListeners[i];
- managedListener.item.un(managedListener.ename, managedListener.fn, managedListener.scope);
+ this.removeManagedListenerItem(true, managedListeners[i]);
}
this.managedListeners = [];
},
-
- purgeManagedListeners : function() {
- console.warn('Observable: purgeManagedListeners has been deprecated. Please use clearManagedListeners.');
- return this.clearManagedListeners.apply(this, arguments);
+
+ /**
+ * Remove a single managed listener item
+ * @private
+ * @param {Boolean} isClear True if this is being called during a clear
+ * @param {Object} managedListener The managed listener item
+ * See removeManagedListener for other args
+ */
+ removeManagedListenerItem: function(isClear, managedListener, item, ename, fn, scope){
+ if (isClear || (managedListener.item === item && managedListener.ename === ename && (!fn || managedListener.fn === fn) && (!scope || managedListener.scope === scope))) {
+ managedListener.item.un(managedListener.ename, managedListener.fn, managedListener.scope);
+ if (!isClear) {
+ Ext.Array.remove(this.managedListeners, managedListener);
+ }
+ }
},
+
/**
* Adds the specified events to the list of events which this Observable may fire.
- * @param {Object/String} o Either an object with event names as properties with a value of true
- * or the first event name string if multiple event names are being passed as separate parameters.
- * @param {String} [additional] Optional additional event names if multiple event names are being passed as separate parameters.
- * Usage:
-this.addEvents('storeloaded', 'storecleared');
-
+ *
+ * @param {Object/String} o Either an object with event names as properties with a value of `true` or the first
+ * event name string if multiple event names are being passed as separate parameters. Usage:
+ *
+ * this.addEvents({
+ * storeloaded: true,
+ * storecleared: true
+ * });
+ *
+ * @param {String...} more Optional additional event names if multiple event names are being passed as separate
+ * parameters. Usage:
+ *
+ * this.addEvents('storeloaded', 'storecleared');
+ *
*/
addEvents: function(o) {
var me = this,
@@ -20171,6 +20742,7 @@ this.addEvents('storeloaded', 'storecleared');
/**
* Checks to see if this object has any listeners for a specified event
+ *
* @param {String} eventName The name of the event to check for
* @return {Boolean} True if the event is being listened for, else false
*/
@@ -20180,9 +20752,10 @@ this.addEvents('storeloaded', 'storecleared');
},
/**
- * Suspend the firing of all events. (see {@link #resumeEvents})
+ * 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;
+ * after the {@link #resumeEvents} call instead of discarding all suspended events.
*/
suspendEvents: function(queueSuspended) {
this.eventsSuspended = true;
@@ -20192,9 +20765,10 @@ this.addEvents('storeloaded', 'storecleared');
},
/**
- * Resume 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.
+ * 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,
@@ -20210,9 +20784,11 @@ this.addEvents('storeloaded', 'storecleared');
},
/**
- * Relays selected events from the specified Observable as if the events were fired by this.
+ * Relays selected events from the specified Observable as if the events were fired by `this`.
+ *
* @param {Object} origin The Observable whose events this object is to relay.
- * @param {Array} events Array of event names to relay.
+ * @param {[String]} events Array of event names to relay.
+ * @param {Object} prefix
*/
relayEvents : function(origin, events, prefix) {
prefix = prefix || '';
@@ -20244,41 +20820,45 @@ this.addEvents('storeloaded', 'storecleared');
},
/**
- * Enables events fired by this Observable to bubble up an owner hierarchy by calling
- * this.getBubbleTarget() if present. There is no implementation in the Observable base class.
- * This is commonly used by Ext.Components to bubble events to owner Containers. See {@link Ext.Component#getBubbleTarget}. The default
- * implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
- * access the required target more quickly.
- * Example:
-Ext.override(Ext.form.field.Base, {
-// Add functionality to Field's initComponent to enable the change event to bubble
-initComponent : Ext.Function.createSequence(Ext.form.field.Base.prototype.initComponent, function() {
- this.enableBubble('change');
-}),
-
-// We know that we want Field's events to bubble directly to the FormPanel.
-getBubbleTarget : function() {
- if (!this.formPanel) {
- this.formPanel = this.findParentByType('form');
- }
- return this.formPanel;
-}
-});
-
-var myForm = new Ext.formPanel({
-title: 'User Details',
-items: [{
- ...
-}],
-listeners: {
- change: function() {
- // Title goes red if form has been modified.
- myForm.header.setStyle('color', 'red');
- }
-}
-});
-
- * @param {String/Array} events The event name to bubble, or an Array of event names.
+ * Enables events fired by this Observable to bubble up an owner hierarchy by calling `this.getBubbleTarget()` if
+ * present. There is no implementation in the Observable base class.
+ *
+ * This is commonly used by Ext.Components to bubble events to owner Containers.
+ * See {@link Ext.Component#getBubbleTarget}. The default implementation in Ext.Component returns the
+ * Component's immediate owner. But if a known target is required, this can be overridden to access the
+ * required target more quickly.
+ *
+ * Example:
+ *
+ * Ext.override(Ext.form.field.Base, {
+ * // Add functionality to Field's initComponent to enable the change event to bubble
+ * initComponent : Ext.Function.createSequence(Ext.form.field.Base.prototype.initComponent, function() {
+ * this.enableBubble('change');
+ * }),
+ *
+ * // We know that we want Field's events to bubble directly to the FormPanel.
+ * getBubbleTarget : function() {
+ * if (!this.formPanel) {
+ * this.formPanel = this.findParentByType('form');
+ * }
+ * return this.formPanel;
+ * }
+ * });
+ *
+ * var myForm = new Ext.formPanel({
+ * title: 'User Details',
+ * items: [{
+ * ...
+ * }],
+ * listeners: {
+ * change: function() {
+ * // Title goes red if form has been modified.
+ * myForm.header.setStyle('color', 'red');
+ * }
+ * }
+ * });
+ *
+ * @param {String/[String]} events The event name to bubble, or an Array of event names.
*/
enableBubble: function(events) {
var me = this;
@@ -20297,28 +20877,31 @@ listeners: {
}
}
}, function() {
- /**
- * Removes an event handler (shorthand for {@link #removeListener}.)
- * @param {String} eventName The type of event the handler was associated with.
- * @param {Function} handler The handler to remove. This must be a reference to the function passed into the {@link #addListener} call.
- * @param {Object} scope (optional) The scope originally specified for the handler.
- * @method un
- */
-
- /**
- * Appends an event handler to this object (shorthand for {@link #addListener}.)
- * @param {String} eventName The type of event to listen for
- * @param {Function} handler The method the event invokes
- * @param {Object} scope (optional) The scope (this reference) in which the handler function is executed.
- * If omitted, defaults to the object which fired the event.
- * @param {Object} options (optional) An object containing handler configuration.
- * @method on
- */
this.createAlias({
+ /**
+ * @method
+ * Shorthand for {@link #addListener}.
+ * @alias Ext.util.Observable#addListener
+ */
on: 'addListener',
+ /**
+ * @method
+ * Shorthand for {@link #removeListener}.
+ * @alias Ext.util.Observable#removeListener
+ */
un: 'removeListener',
+ /**
+ * @method
+ * Shorthand for {@link #addManagedListener}.
+ * @alias Ext.util.Observable#addManagedListener
+ */
mon: 'addManagedListener',
+ /**
+ * @method
+ * Shorthand for {@link #removeManagedListener}.
+ * @alias Ext.util.Observable#removeManagedListener
+ */
mun: 'removeManagedListener'
});
@@ -20418,13 +21001,13 @@ listeners: {
i, len;
for(i = 0, len = e.before.length; i < len; i++){
if(e.before[i].fn == fn && e.before[i].scope == scope){
- e.before.splice(i, 1);
+ 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){
- e.after.splice(i, 1);
+ Ext.Array.erase(e.after, i, 1);
return;
}
}
@@ -20649,7 +21232,7 @@ Ext.define('Ext.util.Animate', {
/**
* Perform custom animation on this object.
- *
This method is applicable to both the the {@link Ext.Component Component} class and the {@link Ext.core.Element Element} class.
+ *
This method is applicable to both the {@link Ext.Component Component} class and the {@link Ext.core.Element Element} class.
* It performs animated transitions of certain properties of this object over a specified timeline.
* The sole parameter is an object which specifies start property values, end property values, and properties which
* describe the timeline. Of the properties listed below, only to is mandatory.
@@ -20767,48 +21350,53 @@ myWindow.header.el.on('click', function() {
},
/**
+ * @deprecated 4.0 Replaced by {@link #stopAnimation}
* Stops any running effects and clears this object's internal effects queue if it contains
* any additional effects that haven't started yet.
* @return {Ext.core.Element} The Element
+ * @method
*/
stopFx: Ext.Function.alias(Ext.util.Animate, 'stopAnimation'),
/**
- * @deprecated 4.0 Replaced by {@link #stopAnimation}
* Stops any running effects and clears this object's internal effects queue if it contains
* any additional effects that haven't started yet.
* @return {Ext.core.Element} The Element
*/
stopAnimation: function() {
Ext.fx.Manager.stopAnimation(this.id);
+ return this;
},
/**
* Ensures that all effects queued after syncFx is called on this object are
* run concurrently. This is the opposite of {@link #sequenceFx}.
- * @return {Ext.core.Element} The Element
+ * @return {Object} this
*/
syncFx: function() {
Ext.fx.Manager.setFxDefaults(this.id, {
concurrent: true
});
+ return this;
},
/**
* Ensures that all effects queued after sequenceFx is called on this object are
* run in sequence. This is the opposite of {@link #syncFx}.
- * @return {Ext.core.Element} The Element
+ * @return {Object} this
*/
sequenceFx: function() {
Ext.fx.Manager.setFxDefaults(this.id, {
concurrent: false
});
+ return this;
},
/**
* @deprecated 4.0 Replaced by {@link #getActiveAnimation}
* Returns thq current animation if this object has any effects actively running or queued, else returns false.
* @return {Mixed} anim if element has active effects, else false
+ * @method
*/
hasActiveFx: Ext.Function.alias(Ext.util.Animate, 'getActiveAnimation'),
@@ -20819,10 +21407,12 @@ myWindow.header.el.on('click', function() {
getActiveAnimation: function() {
return Ext.fx.Manager.getActiveAnimation(this.id);
}
+}, function(){
+ // Apply Animate mixin manually until Element is defined in the proper 4.x way
+ Ext.applyIf(Ext.core.Element.prototype, this.prototype);
+ // We need to call this again so the animation methods get copied over to CE
+ Ext.CompositeElementLite.importElementMethods();
});
-
-// Apply Animate mixin manually until Element is defined in the proper 4.x way
-Ext.applyIf(Ext.core.Element.prototype, Ext.util.Animate.prototype);
/**
* @class Ext.state.Provider
* Abstract base class for state provider implementations. The provider is responsible
@@ -21017,8 +21607,6 @@ map.each(function(key, value, length){
* 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}.
*
- * @constructor
- * @param {Object} config The configuration options
*/
Ext.define('Ext.util.HashMap', {
@@ -21032,8 +21620,15 @@ Ext.define('Ext.util.HashMap', {
observable: 'Ext.util.Observable'
},
+ /**
+ * Creates new HashMap.
+ * @param {Object} config (optional) Config object.
+ */
constructor: function(config) {
- var me = this;
+ config = config || {};
+
+ var me = this,
+ keyFn = config.keyFn;
me.addEvents(
/**
@@ -21071,6 +21666,10 @@ Ext.define('Ext.util.HashMap', {
me.mixins.observable.constructor.call(me, config);
me.clear(true);
+
+ if (keyFn) {
+ me.getKey = keyFn;
+ }
},
/**
@@ -21101,7 +21700,6 @@ Ext.define('Ext.util.HashMap', {
/**
* Extracts the key from an object. This is a default implementation, it may be overridden
- * @private
* @param {Object} o The object to get the key from
* @return {String} The key to use.
*/
@@ -21459,7 +22057,6 @@ Ext.define('Ext.Template', {
* Returns an HTML fragment of this template with the specified values applied.
* @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
* @return {String} The HTML fragment
- * @hide repeat doc
*/
applyTemplate: function(values) {
var me = this,
@@ -21510,7 +22107,6 @@ Ext.define('Ext.Template', {
/**
* Compiles the template into an internal function, eliminating the RegEx overhead.
* @return {Ext.Template} this
- * @hide repeat doc
*/
compile: function() {
var me = this,
@@ -21625,78 +22221,73 @@ Ext.define('Ext.Template', {
/**
* @class Ext.ComponentQuery
* @extends Object
+ * @singleton
*
* Provides searching of Components within Ext.ComponentManager (globally) or a specific
* Ext.container.Container on the document with a similar syntax to a CSS selector.
*
* Components can be retrieved by using their {@link Ext.Component xtype} with an optional . prefix
-
- - component or .component
- - gridpanel or .gridpanel
-
+ *
+ * - `component` or `.component`
+ * - `gridpanel` or `.gridpanel`
*
* An itemId or id must be prefixed with a #
-
- - #myContainer
-
*
+ * - `#myContainer`
*
* Attributes must be wrapped in brackets
-
- - component[autoScroll]
- - panel[title="Test"]
-
*
- * Member expressions from candidate Components may be tested. If the expression returns a truthy value,
- * the candidate Component will be included in the query:
-var disabledFields = myFormPanel.query("{isDisabled()}");
-
+ * - `component[autoScroll]`
+ * - `panel[title="Test"]`
+ *
+ * Member expressions from candidate Components may be tested. If the expression returns a *truthy* value,
+ * the candidate Component will be included in the query:
+ *
+ * var disabledFields = myFormPanel.query("{isDisabled()}");
+ *
+ * Pseudo classes may be used to filter results in the same way as in {@link Ext.DomQuery DomQuery}:
+ *
+ * // Function receives array and returns a filtered array.
+ * Ext.ComponentQuery.pseudos.invalid = function(items) {
+ * var i = 0, l = items.length, c, result = [];
+ * for (; i < l; i++) {
+ * if (!(c = items[i]).isValid()) {
+ * result.push(c);
+ * }
+ * }
+ * return result;
+ * };
+ *
+ * var invalidFields = myFormPanel.query('field:invalid');
+ * if (invalidFields.length) {
+ * invalidFields[0].getEl().scrollIntoView(myFormPanel.body);
+ * for (var i = 0, l = invalidFields.length; i < l; i++) {
+ * invalidFields[i].getEl().frame("red");
+ * }
+ * }
+ *
+ * Default pseudos include:
*
- * Pseudo classes may be used to filter results in the same way as in {@link Ext.DomQuery DomQuery}:
-// Function receives array and returns a filtered array.
-Ext.ComponentQuery.pseudos.invalid = function(items) {
- var i = 0, l = items.length, c, result = [];
- for (; i < l; i++) {
- if (!(c = items[i]).isValid()) {
- result.push(c);
- }
- }
- return result;
-};
-
-var invalidFields = myFormPanel.query('field:invalid');
-if (invalidFields.length) {
- invalidFields[0].getEl().scrollIntoView(myFormPanel.body);
- for (var i = 0, l = invalidFields.length; i < l; i++) {
- invalidFields[i].getEl().frame("red");
- }
-}
-
- * Default pseudos include:
* - not
- *
*
* 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 gridpanels and listviews
- var gridsAndLists = Ext.ComponentQuery.query('gridpanel, listview');
-
-
-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}.
- * @singleton
+ *
+ * // retrieve all Ext.Panels in the document by xtype
+ * var panelsArray = Ext.ComponentQuery.query('panel');
+ *
+ * // retrieve all Ext.Panels within the container with an id myCt
+ * var panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel');
+ *
+ * // retrieve all direct children which are Ext.Panels within myCt
+ * var directChildPanel = Ext.ComponentQuery.query('#myCt > panel');
+ *
+ * // retrieve all grids and trees
+ * var gridsAndTrees = Ext.ComponentQuery.query('gridpanel, treepanel');
+ *
+ * For easy access to queries based from a particular Container see the {@link Ext.container.Container#query},
+ * {@link Ext.container.Container#down} and {@link Ext.container.Container#child} methods. Also see
+ * {@link Ext.Component#up}.
*/
Ext.define('Ext.ComponentQuery', {
singleton: true,
@@ -21975,17 +22566,21 @@ Ext.define('Ext.ComponentQuery', {
},
/**
- * Returns an array of matched Components from within the passed root object.
- * This method filters returned Components in a similar way to how CSS selector based DOM
- * queries work using a textual selector string.
- * See class summary for details.
- * @param selector The selector string to filter returned Components
- * @param root The Container within which to perform the query. If omitted, all Components
- * within the document are included in the search.
- * This parameter may also be an array of Components to filter according to the selector.
- * @returns {Array} The matched Components.
+ * Returns an array of matched Components from within the passed root object.
+ *
+ * This method filters returned Components in a similar way to how CSS selector based DOM
+ * queries work using a textual selector string.
+ *
+ * See class summary for details.
+ *
+ * @param {String} selector The selector string to filter returned Components
+ * @param {Ext.container.Container} root The Container within which to perform the query.
+ * If omitted, all Components within the document are included in the search.
+ *
+ * This parameter may also be an array of Components to filter according to the selector.
+ * @returns {[Ext.Component]} The matched Components.
+ *
* @member Ext.ComponentQuery
- * @method query
*/
query: function(selector, root) {
var selectors = selector.split(','),
@@ -22023,11 +22618,10 @@ Ext.define('Ext.ComponentQuery', {
/**
* Tests whether the passed Component matches the selector string.
- * @param component The Component to test
- * @param selector The selector string to test against.
+ * @param {Ext.Component} component The Component to test
+ * @param {String} selector The selector string to test against.
* @return {Boolean} True if the Component matches the selector.
* @member Ext.ComponentQuery
- * @method query
*/
is: function(component, selector) {
if (!selector) {
@@ -22117,10 +22711,6 @@ Ext.define('Ext.ComponentQuery', {
selector = selector.replace(selectorMatch[0], '');
break; // Break on match
}
- // Exhausted all matches: It's an error
- if (i === (length - 1)) {
- Ext.Error.raise('Invalid ComponentQuery selector: "' + arguments[0] + '"');
- }
}
}
@@ -22179,8 +22769,6 @@ var longNames = allNames.filter(longNameFilter);
//a new MixedCollection with the 2 people of age 24:
var youngFolk = allNames.filter(ageFilter);
-
+ *
- -1 if o1 is "less than" o2 + *
- 0 if o1 is "equal" to o2 + *
- 1 if o1 is "greater than" o2 + *
A flag which causes the object to attempt to restore the state of
* internal properties from a saved state on startup. The object must have
- * a {@link #stateId} for state to be managed.
- * Auto-generated ids are not guaranteed to be stable across page loads and
+ * a {@link #stateId} for state to be managed.
+ * Auto-generated ids are not guaranteed to be stable across page loads and
* cannot be relied upon to save and restore the same state for a object.
*
For state saving to work, the state manager's provider must have been * set to an implementation of {@link Ext.state.Provider} which overrides the @@ -23346,7 +24020,7 @@ Ext.state.Manager.setProvider(new Ext.state.CookieProvider({ * object hash which represents the restorable state of the object.
*The value yielded by getState is passed to {@link Ext.state.Manager#set}
* which uses the configured {@link Ext.state.Provider} to save the object
- * keyed by the {@link stateId}
{@link #stateId}.
* During construction, a stateful object attempts to restore
* its state by calling {@link Ext.state.Manager#get} passing the
* {@link #stateId}
See {@link #stateful} for an explanation of saving and restoring state.
*/ - + /** * @cfg {Array} stateEvents *An array of events that, when fired, should trigger this object to @@ -23375,18 +24049,18 @@ Ext.state.Manager.setProvider(new Ext.state.CookieProvider({ *
See {@link #stateful} for an explanation of saving and
* restoring object state.
-
- *
- field : String
The name of the field by which the Records are sorted.
- * - direction : String
The sort order, 'ASC' or 'DESC' (case-sensitive).
- *
An abstract base class which provides shared methods for Components across the Sencha product line.
*Please refer to sub class's documentation
- * @constructor */ Ext.define('Ext.AbstractComponent', { @@ -26243,6 +26895,7 @@ Ext.define('Ext.AbstractComponent', { return ++Ext.AbstractComponent.AUTO_ID; }, + /** * @cfg {String} id *The unique id of this component instance (defaults to an {@link #getId auto-assigned id}).
@@ -26290,7 +26943,8 @@ var c = new Ext.panel.Panel({ // p1 = c.{@link Ext.container.Container#getComponent getComponent}('p1'); // not the same as {@link Ext#getCmp Ext.getCmp()} p2 = p1.{@link #ownerCt}.{@link Ext.container.Container#getComponent getComponent}('p2'); // reference via a sibling * - *Also see {@link #id}, {@link #query}, {@link #down} and {@link #child}.
Also see {@link #id}, {@link Ext.container.Container#query},
+ * {@link Ext.container.Container#down} and {@link Ext.container.Container#child}.
Note: to access the container of an item see {@link #ownerCt}.
*/ @@ -26302,6 +26956,26 @@ p2 = p1.{@link #ownerCt}.{@link Ext.container.Container#getComponent getComponen * @property ownerCt */ + /** + * @private + * Flag set by the container layout to which this Component is added. + * If the layout manages this Component's width, it sets the value to 1. + * If it does NOT manage the width, it sets it to 2. + * If the layout MAY affect the width, but only if the owning Container has a fixed width, this is set to 0. + * @type boolean + * @property layoutManagedWidth + */ + + /** + * @private + * Flag set by the container layout to which this Component is added. + * If the layout manages this Component's height, it sets the value to 1. + * If it does NOT manage the height, it sets it to 2. + * If the layout MAY affect the height, but only if the owning Container has a fixed height, this is set to 0. + * @type boolean + * @property layoutManagedHeight + */ + /** * @cfg {Mixed} autoEl *A tag name or {@link Ext.core.DomHelper DomHelper} spec used to create the {@link #getEl Element} which will @@ -26485,14 +27159,14 @@ and a property `descEl` referencing the `div` Element which contains the descrip * A set style for a component. Can be a string or an Array of multiple strings (UIs) */ ui: 'default', - + /** * @cfg {Array} uiCls * An array of of classNames which are currently applied to this component * @private */ uiCls: [], - + /** * @cfg {String} style * A custom style specification to be applied to this component's Element. Should be a valid argument to @@ -26621,7 +27295,7 @@ and a property `descEl` referencing the `div` Element which contains the descrip */ /** - * @cfg {String} styleHtmlContent + * @cfg {Boolean} styleHtmlContent * True to automatically style the html inside the content target of this component (body for panels). * Defaults to false. */ @@ -26704,8 +27378,8 @@ and a property `descEl` referencing the `div` Element which contains the descrip trimRe: /^\s+|\s+$/g, spacesRe: /\s+/, - - + + /** * This is an internal flag that you use when creating custom components. * By default this is set to true which means that every component gets a mask when its disabled. @@ -26713,9 +27387,13 @@ and a property `descEl` referencing the `div` Element which contains the descrip * since they want to implement custom disable logic. * @property maskOnDisable * @type {Boolean} - */ + */ maskOnDisable: true, + /** + * Creates new Component. + * @param {Object} config (optional) Config object. + */ constructor : function(config) { var me = this, i, len; @@ -26871,7 +27549,7 @@ and a property `descEl` referencing the `div` Element which contains the descrip me.plugins[i] = me.constructPlugin(me.plugins[i]); } } - + me.initComponent(); // ititComponent gets a chance to change the id property before registering @@ -26881,6 +27559,9 @@ and a property `descEl` referencing the `div` Element which contains the descrip me.mixins.observable.constructor.call(me); me.mixins.state.constructor.call(me, config); + // Save state on resize. + this.addStateEvents('resize'); + // Move this into Observable? if (me.plugins) { me.plugins = [].concat(me.plugins); @@ -26893,23 +27574,95 @@ and a property `descEl` referencing the `div` Element which contains the descrip if (me.renderTo) { me.render(me.renderTo); + // EXTJSIV-1935 - should be a way to do afterShow or something, but that + // won't work. Likewise, rendering hidden and then showing (w/autoShow) has + // implications to afterRender so we cannot do that. } if (me.autoShow) { me.show(); } - - if (Ext.isDefined(me.disabledClass)) { - if (Ext.isDefined(Ext.global.console)) { - Ext.global.console.warn('Ext.Component: disabledClass has been deprecated. Please use disabledCls.'); - } - me.disabledCls = me.disabledClass; - delete me.disabledClass; - } + }, initComponent: Ext.emptyFn, + /** + *
The supplied default state gathering method for the AbstractComponent class. + * This method returns dimension setings such asflex, anchor, width
+ * and height along with collapsed state.
+ * Subclasses which implement more complex state should call the superclass's implementation, and apply their state + * to the result if this basic state is to be saved.
+ *Note that Component state will only be saved if the Component has a {@link #stateId} and there as a StateProvider + * configured for the document.
+ */ + getState: function() { + var me = this, + layout = me.ownerCt ? (me.shadowOwnerCt || me.ownerCt).getLayout() : null, + state = { + collapsed: me.collapsed + }, + width = me.width, + height = me.height, + cm = me.collapseMemento, + anchors; + + // If a Panel-local collapse has taken place, use remembered values as the dimensions. + // TODO: remove this coupling with Panel's privates! All collapse/expand logic should be refactored into one place. + if (me.collapsed && cm) { + if (Ext.isDefined(cm.data.width)) { + width = cm.width; + } + if (Ext.isDefined(cm.data.height)) { + height = cm.height; + } + } + + // If we have flex, only store the perpendicular dimension. + if (layout && me.flex) { + state.flex = me.flex; + state[layout.perpendicularPrefix] = me['get' + layout.perpendicularPrefixCap](); + } + // If we have anchor, only store dimensions which are *not* being anchored + else if (layout && me.anchor) { + state.anchor = me.anchor; + anchors = me.anchor.split(' ').concat(null); + if (!anchors[0]) { + if (me.width) { + state.width = width; + } + } + if (!anchors[1]) { + if (me.height) { + state.height = height; + } + } + } + // Store dimensions. + else { + if (me.width) { + state.width = width; + } + if (me.height) { + state.height = height; + } + } + + // Don't save dimensions if they are unchanged from the original configuration. + if (state.width == me.initialConfig.width) { + delete state.width; + } + if (state.height == me.initialConfig.height) { + delete state.height; + } + + // If a Box layout was managing the perpendicular dimension, don't save that dimension + if (layout && layout.align && (layout.align.indexOf('stretch') !== -1)) { + delete state[layout.perpendicularPrefix]; + } + return state; + }, + show: Ext.emptyFn, animate: function(animObj) { @@ -26997,7 +27750,6 @@ and a property `descEl` referencing the `div` Element which contains the descrip return plugin; }, - // @private initPlugin : function(plugin) { plugin.init(this); @@ -27075,7 +27827,6 @@ and a property `descEl` referencing the `div` Element which contains the descrip onRender : function(container, position) { var me = this, el = me.el, - cls = me.initCls(), styles = me.initStyles(), renderTpl, renderData, i; @@ -27110,7 +27861,9 @@ and a property `descEl` referencing the `div` Element which contains the descrip } } - el.addCls(cls); + me.setUI(me.ui); + + el.addCls(me.initCls()); el.setStyle(styles); // Here we check if the component has a height set through style or css. @@ -27125,14 +27878,7 @@ and a property `descEl` referencing the `div` Element which contains the descrip // } me.el = el; - - me.rendered = true; - me.addUIToElement(true); - //loop through all exisiting uiCls and update the ui in them - for (i = 0; i < me.uiCls.length; i++) { - me.addUIClsToElement(me.uiCls[i], true); - } - me.rendered = false; + me.initFrame(); renderTpl = me.initRenderTpl(); @@ -27142,10 +27888,8 @@ and a property `descEl` referencing the `div` Element which contains the descrip } me.applyRenderSelectors(); - + me.rendered = true; - - me.setUI(me.ui); }, // @private @@ -27162,7 +27906,7 @@ and a property `descEl` referencing the `div` Element which contains the descrip } // For floaters, calculate x and y if they aren't defined by aligning - // the sized element to the center of either the the container or the ownerCt + // the sized element to the center of either the container or the ownerCt if (me.floating && (me.x === undefined || me.y === undefined)) { if (me.floatParent) { xy = me.el.getAlignToXY(me.floatParent.getTargetEl(), 'c-c'); @@ -27186,6 +27930,18 @@ and a property `descEl` referencing the `div` Element which contains the descrip frameCls: Ext.baseCSSPrefix + 'frame', + frameElementCls: { + tl: [], + tc: [], + tr: [], + ml: [], + mc: [], + mr: [], + bl: [], + bc: [], + br: [] + }, + frameTpl: [ 'Returns the next node in the Component tree in tree traversal order.
*Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will - * walk the tree to attempt to find a match. Contrast with {@link #pnextSibling}.
+ * walk the tree to attempt to find a match. Contrast with {@link #nextSibling}. * @param {String} selector Optional A {@link Ext.ComponentQuery ComponentQuery} selector to filter the following nodes. * @returns The next node (or the next node which matches the selector). Returns null if there is no matching node. */ @@ -28281,12 +29097,12 @@ alert(t.getXTypes()); // alerts 'component/field/textfield' return me; }, - + // @private onEnable: function() { if (this.maskOnDisable) { this.el.unmask(); - } + } }, // @private @@ -28295,7 +29111,7 @@ alert(t.getXTypes()); // alerts 'component/field/textfield' this.el.mask(); } }, - + /** * Method to determine whether this Component is currently disabled. * @return {Boolean} the disabled state of this Component. @@ -28343,7 +29159,7 @@ alert(t.getXTypes()); // alerts 'component/field/textfield' }, /** - * @deprecated 4.0 Replaced by {link:#addCls} + * @deprecated 4.0 Replaced by {@link #addCls} * Adds a CSS class to the top level element representing this component. * @param {String} cls The CSS class name to add * @return {Ext.Component} Returns the Component to allow method chaining. @@ -28376,12 +29192,6 @@ alert(t.getXTypes()); // alerts 'component/field/textfield' return me; }, - removeClass : function() { - if (Ext.isDefined(Ext.global.console)) { - Ext.global.console.warn('Ext.Component: removeClass has been deprecated. Please use removeCls.'); - } - return this.removeCls.apply(this, arguments); - }, addOverCls: function() { var me = this; @@ -28425,14 +29235,35 @@ alert(t.getXTypes()); // alerts 'component/field/textfield' me.mon(me[element], listeners); } else { me.afterRenderEvents = me.afterRenderEvents || {}; - me.afterRenderEvents[element] = listeners; + if (!me.afterRenderEvents[element]) { + me.afterRenderEvents[element] = []; + } + me.afterRenderEvents[element].push(listeners); } } return me.mixins.observable.addListener.apply(me, arguments); }, - // @TODO: implement removelistener to support the dom event stuff + // inherit docs + removeManagedListenerItem: function(isClear, managedListener, item, ename, fn, scope){ + var me = this, + element = managedListener.options ? managedListener.options.element : null; + + if (element) { + element = me[element]; + if (element && element.un) { + if (isClear || (managedListener.item === item && managedListener.ename === ename && (!fn || managedListener.fn === fn) && (!scope || managedListener.scope === scope))) { + element.un(managedListener.ename, managedListener.fn, managedListener.scope); + if (!isClear) { + Ext.Array.remove(me.managedListeners, managedListener); + } + } + } + } else { + return me.mixins.observable.removeManagedListenerItem.apply(me, arguments); + } + }, /** * Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy. @@ -28556,13 +29387,39 @@ alert(t.getXTypes()); // alerts 'component/field/textfield' return me; }, - setCalculatedSize : function(width, height, ownerCt) { + isFixedWidth: function() { + var me = this, + layoutManagedWidth = me.layoutManagedWidth; + + if (Ext.isDefined(me.width) || layoutManagedWidth == 1) { + return true; + } + if (layoutManagedWidth == 2) { + return false; + } + return (me.ownerCt && me.ownerCt.isFixedWidth()); + }, + + isFixedHeight: function() { + var me = this, + layoutManagedHeight = me.layoutManagedHeight; + + if (Ext.isDefined(me.height) || layoutManagedHeight == 1) { + return true; + } + if (layoutManagedHeight == 2) { + return false; + } + return (me.ownerCt && me.ownerCt.isFixedHeight()); + }, + + setCalculatedSize : function(width, height, callingContainer) { var me = this, layoutCollection; // support for standard size objects if (Ext.isObject(width)) { - ownerCt = width.ownerCt; + callingContainer = width.ownerCt; height = width.height; width = width.width; } @@ -28586,11 +29443,11 @@ alert(t.getXTypes()); // alerts 'component/field/textfield' width: width, height: height, isSetSize: false, - ownerCt: ownerCt + ownerCt: callingContainer }; return me; } - me.doComponentLayout(width, height, false, ownerCt); + me.doComponentLayout(width, height, false, callingContainer); return me; }, @@ -28600,26 +29457,51 @@ alert(t.getXTypes()); // alerts 'component/field/textfield' * layout to be recalculated. * @return {Ext.container.Container} this */ - doComponentLayout : function(width, height, isSetSize, ownerCt) { + doComponentLayout : function(width, height, isSetSize, callingContainer) { var me = this, - componentLayout = me.getComponentLayout(); + componentLayout = me.getComponentLayout(), + lastComponentSize = componentLayout.lastComponentSize || { + width: undefined, + height: undefined + }; // collapsed state is not relevant here, so no testing done. // Only Panels have a collapse method, and that just sets the width/height such that only // a single docked Header parallel to the collapseTo side are visible, and the Panel body is hidden. if (me.rendered && componentLayout) { - width = (width !== undefined) ? width : me.width; - height = (height !== undefined) ? height : me.height; + + + // If no width passed, then only insert a value if the Component is NOT ALLOWED to autowidth itself. + if (!Ext.isDefined(width)) { + if (me.isFixedWidth()) { + width = Ext.isDefined(me.width) ? me.width : lastComponentSize.width; + } + } + + // If no height passed, then only insert a value if the Component is NOT ALLOWED to autoheight itself. + if (!Ext.isDefined(height)) { + if (me.isFixedHeight()) { + height = Ext.isDefined(me.height) ? me.height : lastComponentSize.height; + } + } + if (isSetSize) { me.width = width; me.height = height; } - componentLayout.layout(width, height, isSetSize, ownerCt); + componentLayout.layout(width, height, isSetSize, callingContainer); } return me; }, + /** + * Forces this component to redo its componentLayout. + */ + forceComponentLayout: function () { + this.doComponentLayout(); + }, + // @private setComponentLayout : function(layout) { var currentLayout = this.componentLayout; @@ -28643,9 +29525,9 @@ alert(t.getXTypes()); // alerts 'component/field/textfield' * @param {Number} adjWidth The box-adjusted width that was set * @param {Number} adjHeight The box-adjusted height that was set * @param {Boolean} isSetSize Whether or not the height/width are stored on the component permanently - * @param {Ext.Component} layoutOwner Component which sent the layout. Only used when isSetSize is false. + * @param {Ext.Component} callingContainer Container requesting the layout. Only used when isSetSize is false. */ - afterComponentLayout: function(width, height, isSetSize, layoutOwner) { + afterComponentLayout: function(width, height, isSetSize, callingContainer) { this.fireEvent('resize', this, width, height); }, @@ -28655,14 +29537,15 @@ alert(t.getXTypes()); // alerts 'component/field/textfield' * @param {Number} adjWidth The box-adjusted width that was set * @param {Number} adjHeight The box-adjusted height that was set * @param {Boolean} isSetSize Whether or not the height/width are stored on the component permanently - * @param {Ext.Component} layoutOwner Component which sent the layout. Only used when isSetSize is false. + * @param {Ext.Component} callingContainer Container requesting sent the layout. Only used when isSetSize is false. */ - beforeComponentLayout: function(width, height, isSetSize, layoutOwner) { + beforeComponentLayout: function(width, height, isSetSize, callingContainer) { return true; }, /** - * Sets the left and top of the component. To set the page XY position instead, use {@link #setPagePosition}. + * Sets the left and top of the component. To set the page XY position instead, use + * {@link Ext.Component#setPagePosition setPagePosition}. * This method fires the {@link #move} event. * @param {Number} left The new left * @param {Number} top The new top @@ -28852,15 +29735,15 @@ alert(t.getXTypes()); // alerts 'component/field/textfield' me.ownerCt.remove(me, false); } - if (me.rendered) { - me.el.remove(); - } - me.onDestroy(); // Attempt to destroy all plugins Ext.destroy(me.plugins); + if (me.rendered) { + me.el.remove(); + } + Ext.ComponentManager.unregister(me); me.fireEvent('destroy', me); @@ -28888,7 +29771,7 @@ alert(t.getXTypes()); // alerts 'component/field/textfield' } } }, - + /** * Determines whether this component is the descendant of a particular container. * @param {Ext.Container} container @@ -28911,49 +29794,61 @@ alert(t.getXTypes()); // alerts 'component/field/textfield' * @class Ext.AbstractPlugin * @extends Object * - * Plugins are injected + *The AbstractPlugin class is the base class from which user-implemented plugins should inherit.
+ *This class defines the essential API of plugins as used by Components by defining the following methods:
+ *-
+ *
init: The plugin initialization method which the owning Component calls at Component initialization + * time.The Component passes itself as the sole parameter.
Subclasses should set up bidirectional + * links between the plugin and its client Component here.
+ * destroy: The plugin cleanup method which the owning Component calls at Component destruction time.Use + * this method to break links between the plugin and the Component and to free any allocated resources.
+ * enable: The base implementation just sets the plugin'sdisabledflag tofalse
+ * disable: The base implementation just sets the plugin'sdisabledflag totrue
+ *
The init method is invoked after {@link Ext.Component#initComponent initComponent} has been run for the client Component.
+ *The supplied implementation is empty. Subclasses should perform plugin initialization, and set up bidirectional + * links between the plugin and its client Component in their own implementation of this method.
+ * @param {Component} client The client Component which owns this plugin. + * @method */ init: Ext.emptyFn, /** - * The destroy method is invoked by the owning Component at the time the Component is being destroyed. - * Use this method to clean up an resources. + *The destroy method is invoked by the owning Component at the time the Component is being destroyed.
+ *The supplied implementation is empty. Subclasses should perform plugin cleanup in their own implementation of this method.
+ * @method */ destroy: Ext.emptyFn, /** - * Enable the plugin and set the disabled flag to false. + *The base implementation just sets the plugin's disabled flag to false
Plugin subclasses which need more complex processing may implement an overriding implementation.
*/ enable: function() { this.disabled = false; }, /** - * Disable the plugin and set the disabled flag to true. + *The base implementation just sets the plugin's disabled flag to true
Plugin subclasses which need more complex processing may implement an overriding implementation.
*/ disable: function() { this.disabled = true; } }); - /** * @class Ext.data.Connection * The Connection class encapsulates a connection to the page's originating domain, allowing requests to be made either @@ -29003,14 +29898,12 @@ Ext.define('Ext.data.Connection', { /** * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true) - * @type Boolean */ disableCaching: true, /** * @cfg {String} disableCachingParam (Optional) Change the parameter which is sent went disabling caching * through a cache buster. Defaults to '_dc' - * @type String */ disableCachingParam: '_dc', @@ -29020,7 +29913,7 @@ Ext.define('Ext.data.Connection', { timeout : 30000, /** - * @param {Object} extraParams (Optional) Any parameters to be appended to the request. + * @cfg {Object} extraParams (Optional) Any parameters to be appended to the request. */ useDefaultHeader : true, @@ -29394,12 +30287,6 @@ failure: function(response, opts) { url = this.setupUrl(options, url); - if (!url) { - Ext.Error.raise({ - options: options, - msg: 'No URL specified' - }); - } // check for xml or json data, and make sure json data is encoded data = options.rawData || options.xmlData || jsonData || null; @@ -29599,7 +30486,7 @@ failure: function(response, opts) { id; if (request && me.isLoading(request)) { - /** + /* * Clear out the onreadystatechange here, this allows us * greater control, the browser may/may not fire the function * depending on a series of conditions. @@ -29663,9 +30550,20 @@ failure: function(response, opts) { onComplete : function(request) { var me = this, options = request.options, - result = me.parseStatus(request.xhr.status), - success = result.success, + result, + success, response; + + try { + result = me.parseStatus(request.xhr.status); + } catch (e) { + // in some browsers we can't access the status if the readyState is not 4, so the request has failed + result = { + success : false, + isException : false + }; + } + success = result.success; if (success) { response = me.createResponse(request); @@ -29796,7 +30694,7 @@ is used to communicate with your server side code. It can be used as follows: } }); -Default options for all requests can be set be changing a property on the Ext.Ajax class: +Default options for all requests can be set by changing a property on the Ext.Ajax class: Ext.Ajax.timeout = 60000; // 60 seconds @@ -30003,8 +30901,6 @@ Ext.onReady(function(){ }); * * - * @constructor - * @param {Object} config Optional config object */ Ext.define('Ext.data.Association', { /** @@ -30050,13 +30946,16 @@ Ext.define('Ext.data.Association', { // case 'polymorphic': // return Ext.create('Ext.data.PolymorphicAssociation', association); default: - Ext.Error.raise('Unknown Association type: "' + association.type + '"'); } } return association; } }, + /** + * Creates the Association object. + * @param {Object} config (optional) Config object. + */ constructor: function(config) { Ext.apply(this, config); @@ -30067,12 +30966,6 @@ Ext.define('Ext.data.Association', { associatedModel = types[associatedName], ownerProto; - if (ownerModel === undefined) { - Ext.Error.raise("The configured ownerModel was not valid (you tried " + ownerName + ")"); - } - if (associatedModel === undefined) { - Ext.Error.raise("The configured associatedModel was not valid (you tried " + associatedName + ")"); - } this.ownerModel = ownerModel; this.associatedModel = associatedModel; @@ -30280,16 +31173,12 @@ Ext.define('Ext.ModelManager', { * @method regModel */ Ext.regModel = function() { - if (Ext.isDefined(Ext.global.console)) { - Ext.global.console.warn('Ext.regModel has been deprecated. Models can now be created by extending Ext.data.Model: Ext.define("MyModel", {extend: "Ext.data.Model", fields: []});.'); - } return this.ModelManager.registerType.apply(this.ModelManager, arguments); }; }); /** * @class Ext.app.Controller - * @constructor * * Controllers are the glue that binds an application together. All they really do is listen for events (usually from * views) and take some action. Here's how we might create a Controller to manage Users: @@ -30342,28 +31231,28 @@ Ext.define('Ext.ModelManager', { * One of the most useful parts of Controllers is the new ref system. These use the new {@link Ext.ComponentQuery} to * make it really easy to get references to Views on your page. Let's look at an example of this now: * - * Ext.define('MyApp.controller.Users', { - extend: 'Ext.app.Controller', - - refs: [ - { - ref: 'list', - selector: 'grid' - } - ], - - init: function() { - this.control({ - 'button': { - click: this.refreshGrid - } - }); - }, - - refreshGrid: function() { - this.getList().store.load(); - } - }); + * Ext.define('MyApp.controller.Users', { + * extend: 'Ext.app.Controller', + * + * refs: [ + * { + * ref: 'list', + * selector: 'grid' + * } + * ], + * + * init: function() { + * this.control({ + * 'button': { + * click: this.refreshGrid + * } + * }); + * }, + * + * refreshGrid: function() { + * this.getList().store.load(); + * } + * }); * * This example assumes the existence of a {@link Ext.grid.Panel Grid} on the page, which contains a single button to * refresh the Grid when clicked. In our refs array, we set up a reference to the grid. There are two parts to this - @@ -30393,20 +31282,20 @@ Ext.define('Ext.ModelManager', { * Refs aren't the only thing that generate convenient getter methods. Controllers often have to deal with Models and * Stores so the framework offers a couple of easy ways to get access to those too. Let's look at another example: * - * Ext.define('MyApp.controller.Users', { - extend: 'Ext.app.Controller', - - models: ['User'], - stores: ['AllUsers', 'AdminUsers'], - - init: function() { - var User = this.getUserModel(), - allUsers = this.getAllUsersStore(); - - var ed = new User({name: 'Ed'}); - allUsers.add(ed); - } - }); + * Ext.define('MyApp.controller.Users', { + * extend: 'Ext.app.Controller', + * + * models: ['User'], + * stores: ['AllUsers', 'AdminUsers'], + * + * init: function() { + * var User = this.getUserModel(), + * allUsers = this.getAllUsersStore(); + * + * var ed = new User({name: 'Ed'}); + * allUsers.add(ed); + * } + * }); * * By specifying Models and Stores that the Controller cares about, it again dynamically loads them from the appropriate * locations (app/model/User.js, app/store/AllUsers.js and app/store/AdminUsers.js in this case) and creates getter @@ -30416,21 +31305,21 @@ Ext.define('Ext.ModelManager', { * * Further Reading * - * For more information about writing Ext JS 4 applications, please see the - * application architecture guide. Also see the {@link Ext.app.Application} documentation. + * For more information about writing Ext JS 4 applications, please see the + * [application architecture guide](#/guide/application_architecture). Also see the {@link Ext.app.Application} documentation. * - * @markdown * @docauthor Ed Spencer */ Ext.define('Ext.app.Controller', { - /** - * @cfg {Object} id The id of this controller. You can use this id when dispatching. - */ mixins: { observable: 'Ext.util.Observable' }, + /** + * @cfg {String} id The id of this controller. You can use this id when dispatching. + */ + onClassExtended: function(cls, data) { var className = Ext.getClassName(cls), match = className.match(/^(.*)\.controller\./); @@ -30470,6 +31359,10 @@ Ext.define('Ext.app.Controller', { } }, + /** + * Creates new Controller. + * @param {Object} config (optional) Config object. + */ constructor: function(config) { this.mixins.observable.constructor.call(this, config); @@ -30552,22 +31445,65 @@ Ext.define('Ext.app.Controller', { return cached; }, + /** + * Adds listeners to components selected via {@link Ext.ComponentQuery}. Accepts an + * object containing component paths mapped to a hash of listener functions. + * + * In the following example the `updateUser` function is mapped to to the `click` + * event on a button component, which is a child of the `useredit` component. + * + * Ext.define('AM.controller.Users', { + * init: function() { + * this.control({ + * 'useredit button[action=save]': { + * click: this.updateUser + * } + * }); + * }, + * + * updateUser: function(button) { + * console.log('clicked the Save button'); + * } + * }); + * + * See {@link Ext.ComponentQuery} for more information on component selectors. + * + * @param {String|Object} selectors If a String, the second argument is used as the + * listeners, otherwise an object of selectors -> listeners is assumed + * @param {Object} listeners + */ control: function(selectors, listeners) { this.application.control(selectors, listeners, this); }, + /** + * Returns a reference to a {@link Ext.app.Controller controller} with the given name + * @param name {String} + */ getController: function(name) { return this.application.getController(name); }, + /** + * Returns a reference to a {@link Ext.data.Store store} with the given name + * @param name {String} + */ getStore: function(name) { return this.application.getStore(name); }, + /** + * Returns a reference to a {@link Ext.data.Model Model} with the given name + * @param name {String} + */ getModel: function(model) { return this.application.getModel(model); }, + /** + * Returns a reference to a view with the given name + * @param name {String} + */ getView: function(view) { return this.application.getView(view); } @@ -30716,8 +31652,8 @@ var errors = myModel.validate(); errors.isValid(); //false errors.length; //2 -errors.getByField('name'); // [{field: 'name', error: 'must be present'}] -errors.getByField('title'); // [{field: 'title', error: 'is too short'}] +errors.getByField('name'); // [{field: 'name', message: 'must be present'}] +errors.getByField('title'); // [{field: 'title', message: 'is too short'}] */ Ext.define('Ext.data.Errors', { @@ -30763,8 +31699,6 @@ Ext.define('Ext.data.Errors', { * *Several Operations can be batched together in a {@link Ext.data.Batch batch}.
* - * @constructor - * @param {Object} config Optional config object */ Ext.define('Ext.data.Operation', { /** @@ -30858,7 +31792,11 @@ Ext.define('Ext.data.Operation', { * @private */ error: undefined, - + + /** + * Creates new Operation object. + * @param {Object} config (optional) Config object. + */ constructor: function(config) { Ext.apply(this, config || {}); }, @@ -31100,9 +32038,6 @@ Ext.define('Ext.data.validations', { * @extends Object * *Simple wrapper class that represents a set of records returned by a Proxy.
- * - * @constructor - * Creates the new ResultSet */ Ext.define('Ext.data.ResultSet', { /** @@ -31135,6 +32070,10 @@ Ext.define('Ext.data.ResultSet', { * @cfg {Array} records The array of record instances. Required */ + /** + * Creates the resultSet + * @param {Object} config (optional) Config object. + */ constructor: function(config) { Ext.apply(this, config); @@ -31166,9 +32105,6 @@ Ext.define('Ext.data.ResultSet', { * {@link Ext.data.proxy.WebStorage Web Storage proxy} (see {@link Ext.data.proxy.LocalStorage localStorage} * and {@link Ext.data.proxy.SessionStorage sessionStorage}) or just in memory via a * {@link Ext.data.proxy.Memory MemoryProxy}. - * - * @constructor - * @param {Object} config Optional config object */ Ext.define('Ext.data.writer.Writer', { alias: 'writer.base', @@ -31214,6 +32150,10 @@ new Ext.data.writer.Writer({ */ nameProperty: 'name', + /** + * Creates new Writer. + * @param {Object} config (optional) Config object. + */ constructor: function(config) { Ext.apply(this, config); }, @@ -31359,8 +32299,10 @@ Ext.define('Ext.util.Floating', { }, onFloatParentHide: function() { - this.showOnParentShow = this.isVisible(); - this.hide(); + if (this.hideOnParentHide !== false) { + this.showOnParentShow = this.isVisible(); + this.hide(); + } }, onFloatParentShow: function() { @@ -31421,23 +32363,32 @@ Ext.define('Ext.util.Floating', { */ doConstrain: function(constrainTo) { var me = this, - constrainEl, - vector, + vector = me.getConstrainVector(constrainTo), xy; + if (vector) { + xy = me.getPosition(); + xy[0] += vector[0]; + xy[1] += vector[1]; + me.setPosition(xy); + } + }, + + + /** + * Gets the x/y offsets to constrain this float + * @private + * @param {Mixed} constrainTo Optional. The Element or {@link Ext.util.Region Region} into which this Component is to be constrained. + * @return {Array} The x/y constraints + */ + getConstrainVector: function(constrainTo){ + var me = this, + el; + if (me.constrain || me.constrainHeader) { - if (me.constrainHeader) { - constrainEl = me.header.el; - } else { - constrainEl = me.el; - } - vector = constrainEl.getConstrainVector(constrainTo || (me.floatParent && me.floatParent.getTargetEl()) || me.container); - if (vector) { - xy = me.getPosition(); - xy[0] += vector[0]; - xy[1] += vector[1]; - me.setPosition(xy); - } + el = me.constrainHeader ? me.header.el : me.el; + constrainTo = constrainTo || (me.floatParent && me.floatParent.getTargetEl()) || me.container; + return el.getConstrainVector(constrainTo); } }, @@ -31561,13 +32512,6 @@ Ext.define('Ext.layout.container.AbstractContainer', { type: 'container', - fixedLayout: true, - - // @private - managedHeight: true, - // @private - managedWidth: true, - /** * @cfg {Boolean} bindToOwnerCtComponent * Flag to notify the ownerCt Component on afterLayout of a change @@ -31588,37 +32532,6 @@ Ext.define('Ext.layout.container.AbstractContainer', { * */ - isManaged: function(dimension) { - dimension = Ext.String.capitalize(dimension); - var me = this, - child = me, - managed = me['managed' + dimension], - ancestor = me.owner.ownerCt; - - if (ancestor && ancestor.layout) { - while (ancestor && ancestor.layout) { - if (managed === false || ancestor.layout['managed' + dimension] === false) { - managed = false; - break; - } - ancestor = ancestor.ownerCt; - } - } - return managed; - }, - - layout: function() { - var me = this, - owner = me.owner; - if (Ext.isNumber(owner.height) || owner.isViewport) { - me.managedHeight = false; - } - if (Ext.isNumber(owner.width) || owner.isViewport) { - me.managedWidth = false; - } - me.callParent(arguments); - }, - /** * Set the size of an item within the Container. We should always use setCalculatedSize. * @private @@ -31670,7 +32583,6 @@ Ext.define('Ext.layout.container.AbstractContainer', { * (For example a {Ext.view.BoundList BoundList} within an {@link Ext.window.Window Window}, or a {@link Ext.menu.Menu Menu}), * are managed by a ZIndexManager owned by that floating Container. So ComboBox dropdowns within Windows will have managed z-indices * guaranteed to be correct, relative to the Window. - * @constructor */ Ext.define('Ext.ZIndexManager', { @@ -32100,6 +33012,8 @@ Ext.define('Ext.layout.container.boxOverflow.None', { handleOverflow: Ext.emptyFn, clearOverflow: Ext.emptyFn, + + onRemove: Ext.emptyFn, /** * @private @@ -32109,7 +33023,9 @@ Ext.define('Ext.layout.container.boxOverflow.None', { */ getItem: function(item) { return this.layout.owner.getComponent(item); - } + }, + + onRemove: Ext.emptyFn }); /** * @class Ext.util.KeyMap @@ -32152,14 +33068,16 @@ var map = new Ext.util.KeyMap("my-element", [ ]); * Note: A KeyMap starts enabled - * @constructor - * @param {Mixed} el The element to bind to - * @param {Object} binding The binding (see {@link #addBinding}) - * @param {String} eventName (optional) The event to bind to (defaults to "keydown") */ Ext.define('Ext.util.KeyMap', { alternateClassName: 'Ext.KeyMap', - + + /** + * Creates new KeyMap. + * @param {Mixed} el The element to bind to + * @param {Object} binding The binding (see {@link #addBinding}) + * @param {String} eventName (optional) The event to bind to (defaults to "keydown") + */ constructor: function(el, binding, eventName){ var me = this; @@ -32430,14 +33348,15 @@ map.addBinding({ * * Optionally, a CSS class may be applied to the element during the time it is pressed. * - * @constructor - * @param {Mixed} el The element to listen on - * @param {Object} config */ - Ext.define('Ext.util.ClickRepeater', { extend: 'Ext.util.Observable', + /** + * Creates new ClickRepeater. + * @param {Mixed} el The element to listen on + * @param {Object} config (optional) Config object. + */ constructor : function(el, config){ this.el = Ext.get(el); this.el.unselectable(); @@ -32688,6 +33607,8 @@ Ext.define('Ext.layout.component.Button', { ownerEl = owner.el, btnEl = owner.btnEl, btnInnerEl = owner.btnInnerEl, + btnIconEl = owner.btnIconEl, + sizeIconEl = (owner.icon || owner.iconCls) && (owner.iconAlign == "top" || owner.iconAlign == "bottom"), minWidth = owner.minWidth, maxWidth = owner.maxWidth, ownerWidth, btnFrameWidth, metrics; @@ -32708,11 +33629,16 @@ Ext.define('Ext.layout.component.Button', { ownerEl.setWidth(metrics.width + btnFrameWidth + me.adjWidth); btnEl.setWidth(metrics.width + btnFrameWidth); btnInnerEl.setWidth(metrics.width + btnFrameWidth); + + if (sizeIconEl) { + btnIconEl.setWidth(metrics.width + btnFrameWidth); + } } else { // Remove any previous fixed widths ownerEl.setWidth(null); btnEl.setWidth(null); btnInnerEl.setWidth(null); + btnIconEl.setWidth(null); } // Handle maxWidth/minWidth config @@ -32788,19 +33714,16 @@ Ext.define('Ext.layout.component.Button', { } }); /** - * @class Ext.util.TextMetrics - ** Provides precise pixel measurements for blocks of text so that you can determine exactly how high and * wide, in pixels, a given block of text will be. Note that when measuring text, it should be plain text and - * should not contain any HTML, otherwise it may not be measured correctly.
- *The measurement works by copying the relevant CSS styles that can affect the font related display, + * should not contain any HTML, otherwise it may not be measured correctly. + * + * The measurement works by copying the relevant CSS styles that can affect the font related display, * then checking the size of an element that is auto-sized. Note that if the text is multi-lined, you must - * provide a fixed width when doing the measurement.
- * - *+ * provide a **fixed width** when doing the measurement. + * * If multiple measurements are being done on the same element, you create a new instance to initialize * to avoid the overhead of copying the styles to the element repeatedly. - *
*/ Ext.define('Ext.util.TextMetrics', { statics: { @@ -32812,7 +33735,7 @@ Ext.define('Ext.util.TextMetrics', { * @param {String} text The text to measure * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width * in order to accurately measure the text height - * @return {Object} An object containing the text's size {width: (width), height: (height)} + * @return {Object} An object containing the text's size `{width: (width), height: (height)}` */ measure: function(el, text, fixedWidth){ var me = this, @@ -32837,9 +33760,9 @@ Ext.define('Ext.util.TextMetrics', { }, /** - * @constructor + * Creates new TextMetrics. * @param {Mixed} bindTo The element to bind to. - * @param {Number} fixedWidth A fixed width to apply to the measuring element. + * @param {Number} fixedWidth (optional) A fixed width to apply to the measuring element. */ constructor: function(bindTo, fixedWidth){ var measure = this.measure = Ext.getBody().createChild({ @@ -32857,10 +33780,9 @@ Ext.define('Ext.util.TextMetrics', { }, /** - *Only available on the instance returned from {@link #createInstance}, not on the singleton.
* Returns the size of the specified text based on the internal element's style and width properties * @param {String} text The text to measure - * @return {Object} An object containing the text's size {width: (width), height: (height)} + * @return {Object} An object containing the text's size `{width: (width), height: (height)}` */ getSize: function(text){ var measure = this.measure, @@ -32927,10 +33849,10 @@ Ext.define('Ext.util.TextMetrics', { /** * Returns the width in pixels of the passed text, or the width of the text in this Element. * @param {String} text The text to measure. Defaults to the innerHTML of the element. - * @param {Number} min (Optional) The minumum value to return. - * @param {Number} max (Optional) The maximum value to return. + * @param {Number} min (optional) The minumum value to return. + * @param {Number} max (optional) The maximum value to return. * @return {Number} The text width in pixels. - * @member Ext.core.Element getTextWidth + * @member Ext.core.Element */ getTextWidth : function(text, min, max){ return Ext.Number.constrain(Ext.util.TextMetrics.measure(this.dom, Ext.value(text, this.dom.innerHTML, true)).width, min || 0, max || 1000000); @@ -33388,9 +34310,6 @@ Ext.define('Ext.util.Offset', { }, equals: function(offset) { - if(!(offset instanceof this.statics())) { - Ext.Error.raise('Offset must be an instance of Ext.util.Offset'); - } return (this.x == offset.x && this.y == offset.y); }, @@ -33432,9 +34351,6 @@ var nav = new Ext.util.KeyNav("my-element", { scope : this }); - * @constructor - * @param {Mixed} el The element to bind to - * @param {Object} config The config */ Ext.define('Ext.util.KeyNav', { @@ -33460,7 +34376,12 @@ Ext.define('Ext.util.KeyNav', { tab: 9 } }, - + + /** + * Creates new KeyNav. + * @param {Mixed} el The element to bind to + * @param {Object} config The config + */ constructor: function(el, config){ this.setConfig(el, config || {}); }, @@ -33712,20 +34633,22 @@ underlying animation will create the appropriate Ext.fx.target.Target object by the instance to be animated. The following types of objects can be animated: -- {@link #Ext.fx.target.Component Components} -- {@link #Ext.fx.target.Element Elements} -- {@link #Ext.fx.target.Sprite Sprites} + +- {@link Ext.fx.target.Component Components} +- {@link Ext.fx.target.Element Elements} +- {@link Ext.fx.target.Sprite Sprites} * @markdown * @abstract - * @constructor - * @param {Mixed} target The object to be animated */ - Ext.define('Ext.fx.target.Target', { isAnimTarget: true, + /** + * Creates new Target. + * @param {Mixed} target The object to be animated + */ constructor: function(target) { this.target = target; this.id = this.getId(); @@ -34076,9 +34999,6 @@ Ext.define('Ext.fx.CubicBezier', { } }); /** - * @class Ext.draw.Color - * @extends Object - * * Represents an RGB color and provides helper functions get * color components in HSL color space. */ @@ -34100,7 +35020,7 @@ Ext.define('Ext.draw.Color', { lightnessFactor: 0.2, /** - * @constructor + * Creates new Color. * @param {Number} red Red component (0..255) * @param {Number} green Green component (0..255) * @param {Number} blue Blue component (0..255) @@ -34139,7 +35059,7 @@ Ext.define('Ext.draw.Color', { /** * Get the RGB values. - * @return {Array} + * @return {[Number]} */ getRGB: function() { var me = this; @@ -34148,7 +35068,7 @@ Ext.define('Ext.draw.Color', { /** * Get the equivalent HSL components of the color. - * @return {Array} + * @return {[Number]} */ getHSL: function() { var me = this, @@ -34223,9 +35143,12 @@ Ext.define('Ext.draw.Color', { /** * Convert a color to hexadecimal format. * - * @param {String|Array} color The color value (i.e 'rgb(255, 255, 255)', 'color: #ffffff'). + * **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)) { @@ -34258,8 +35181,11 @@ Ext.define('Ext.draw.Color', { * * 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, @@ -34305,10 +35231,13 @@ Ext.define('Ext.draw.Color', { /** * 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 = [], @@ -34373,12 +35302,14 @@ Ext.define('Ext.draw.Color', { * @class Ext.dd.StatusProxy * A specialized drag proxy that supports a drop status icon, {@link Ext.Layer} styles and auto-repair. This is the * default drag proxy used by all Ext.dd components. - * @constructor - * @param {Object} config */ Ext.define('Ext.dd.StatusProxy', { animRepair: false, + /** + * Creates new StatusProxy. + * @param {Object} config (optional) Config object. + */ constructor: function(config){ Ext.apply(this, config); this.id = this.id || Ext.id(); @@ -34555,14 +35486,16 @@ Ext.define('Ext.dd.StatusProxy', { * A custom drag proxy implementation specific to {@link Ext.panel.Panel}s. This class * is primarily used internally for the Panel's drag drop implementation, and * should never need to be created directly. - * @constructor - * @param panel The {@link Ext.panel.Panel} to proxy for - * @param config Configuration options */ Ext.define('Ext.panel.Proxy', { alternateClassName: 'Ext.dd.PanelProxy', - + + /** + * Creates new panel proxy. + * @param {Ext.panel.Panel} panel The {@link Ext.panel.Panel} to proxy for + * @param {Object} config (optional) Config object + */ constructor: function(panel, config){ /** * @property panel @@ -34816,6 +35749,8 @@ Ext.define('Ext.layout.component.AbstractDock', { }, bodyBox: {} }; + // Clear isAutoDock flag + delete layout.isAutoDock; Ext.applyIf(info, me.getTargetInfo()); @@ -34861,6 +35796,8 @@ Ext.define('Ext.layout.component.AbstractDock', { if (layout && layout.isLayout) { // Auto-Sized so have the container layout notify the component layout. layout.bindToOwnerCtComponent = true; + // Set flag so we don't do a redundant container layout + layout.isAutoDock = layout.autoSize !== true; layout.layout(); // If this is an autosized container layout, then we must compensate for a @@ -35094,6 +36031,7 @@ Ext.define('Ext.layout.component.AbstractDock', { */ adjustAutoBox : function (box, index) { var info = this.info, + owner = this.owner, bodyBox = info.bodyBox, size = info.size, boxes = info.boxes, @@ -35124,33 +36062,43 @@ Ext.define('Ext.layout.component.AbstractDock', { box.y = bodyBox.y; if (!box.overlay) { bodyBox.y += box.height; + if (owner.isFixedHeight()) { + bodyBox.height -= box.height; + } else { + size.height += box.height; + } } - size.height += box.height; break; case 'bottom': + if (!box.overlay) { + if (owner.isFixedHeight()) { + bodyBox.height -= box.height; + } else { + size.height += box.height; + } + } box.y = (bodyBox.y + bodyBox.height); - size.height += box.height; break; case 'left': box.x = bodyBox.x; if (!box.overlay) { bodyBox.x += box.width; - if (autoSizedCtLayout) { - size.width += box.width; - } else { + if (owner.isFixedWidth()) { bodyBox.width -= box.width; + } else { + size.width += box.width; } } break; case 'right': if (!box.overlay) { - if (autoSizedCtLayout) { - size.width += box.width; - } else { + if (owner.isFixedWidth()) { bodyBox.width -= box.width; + } else { + size.width += box.width; } } box.x = (bodyBox.x + bodyBox.width); @@ -35369,6 +36317,13 @@ Ext.define('Ext.layout.component.AbstractDock', { */ configureItem : function(item, pos) { this.callParent(arguments); + if (item.dock == 'top' || item.dock == 'bottom') { + item.layoutManagedWidth = 1; + item.layoutManagedHeight = 2; + } else { + item.layoutManagedWidth = 2; + item.layoutManagedHeight = 1; + } item.addCls(Ext.baseCSSPrefix + 'docked'); item.addClsWithUI('docked-' + item.dock); @@ -35387,6 +36342,130 @@ Ext.define('Ext.layout.component.AbstractDock', { this.childrenChanged = true; } }); +/** + * @class Ext.util.Memento + * This class manages a set of captured properties from an object. These captured properties + * can later be restored to an object. + */ +Ext.define('Ext.util.Memento', function () { + + function captureOne (src, target, prop) { + src[prop] = target[prop]; + } + + function removeOne (src, target, prop) { + delete src[prop]; + } + + function restoreOne (src, target, prop) { + var value = src[prop]; + if (value || src.hasOwnProperty(prop)) { + restoreValue(target, prop, value); + } + } + + function restoreValue (target, prop, value) { + if (Ext.isDefined(value)) { + target[prop] = value; + } else { + delete target[prop]; + } + } + + function doMany (doOne, src, target, props) { + if (src) { + if (Ext.isArray(props)) { + Ext.each(props, function (prop) { + doOne(src, target, prop); + }); + } else { + doOne(src, target, props); + } + } + } + + return { + /** + * @property data + * The collection of captured properties. + * @private + */ + data: null, + + /** + * @property target + * The default target object for capture/restore (passed to the constructor). + */ + target: null, + + /** + * Creates a new memento and optionally captures properties from the target object. + * @param {Object} target The target from which to capture properties. If specified in the + * constructor, this target becomes the default target for all other operations. + * @param {String|Array} props The property or array of properties to capture. + */ + constructor: function (target, props) { + if (target) { + this.target = target; + if (props) { + this.capture(props); + } + } + }, + + /** + * Captures the specified properties from the target object in this memento. + * @param {String|Array} props The property or array of properties to capture. + * @param {Object} target The object from which to capture properties. + */ + capture: function (props, target) { + doMany(captureOne, this.data || (this.data = {}), target || this.target, props); + }, + + /** + * Removes the specified properties from this memento. These properties will not be + * restored later without re-capturing their values. + * @param {String|Array} props The property or array of properties to remove. + */ + remove: function (props) { + doMany(removeOne, this.data, null, props); + }, + + /** + * Restores the specified properties from this memento to the target object. + * @param {String|Array} props The property or array of properties to restore. + * @param {Boolean} clear True to remove the restored properties from this memento or + * false to keep them (default is true). + * @param {Object} target The object to which to restore properties. + */ + restore: function (props, clear, target) { + doMany(restoreOne, this.data, target || this.target, props); + if (clear !== false) { + this.remove(props); + } + }, + + /** + * Restores all captured properties in this memento to the target object. + * @param {Boolean} clear True to remove the restored properties from this memento or + * false to keep them (default is true). + * @param {Object} target The object to which to restore properties. + */ + restoreAll: function (clear, target) { + var me = this, + t = target || this.target; + + Ext.Object.each(me.data, function (prop, value) { + restoreValue(t, prop, value); + }); + + if (clear !== false) { + delete me.data; + } + } + }; +}()); + /** * @class Ext.app.EventBus * @private @@ -35436,7 +36515,9 @@ Ext.define('Ext.app.EventBus', { for (i = 0, ln = events.length; i < ln; i++) { event = events[i]; // Fire the event! - return event.fire.apply(event, Array.prototype.slice.call(args, 1)); + if (event.fire.apply(event, Array.prototype.slice.call(args, 1)) === false) { + return false; + }; } } } @@ -35911,7 +36992,7 @@ var myData = [ *(Optional) Used when converting received data into a Date when the {@link #type} is specified as "date".
A format string for the {@link Ext.Date#parse Ext.Date.parse} function, or "timestamp" if the * value provided by the Reader is a UNIX timestamp, or "time" if the value provided by the Reader is a - * javascript millisecond timestamp. See {@link Date}
+ * javascript millisecond timestamp. See {@link Ext.Date} */ dateFormat: null, @@ -36141,8 +37222,6 @@ Order ID: 50, which contains items: 3 orders of iPhone * - * @constructor - * @param {Object} config Optional config object */ Ext.define('Ext.data.reader.Reader', { requires: ['Ext.data.ResultSet'], @@ -36193,6 +37272,10 @@ Ext.define('Ext.data.reader.Reader', { isReader: true, + /** + * Creates new Reader. + * @param {Object} config (optional) Config object. + */ constructor: function(config) { var me = this; @@ -36342,8 +37425,7 @@ Ext.define('Ext.data.reader.Reader', { id = me.getId(node); - record = new Model(values, id); - record.raw = node; + record = new Model(values, id, node); records.push(record); if (me.implicitIncludes) { @@ -36460,7 +37542,6 @@ Ext.define('Ext.data.reader.Reader', { * @return {Object} The useful data from the response */ getResponseData: function(response) { - Ext.Error.raise("getResponseData must be implemented in the Ext.data.reader.Reader subclass"); }, /** @@ -36794,9 +37875,6 @@ Ext.define('Ext.data.reader.Json', { msg: 'Unable to parse the JSON returned by the server: ' + ex.toString() }); } - if (!data) { - Ext.Error.raise('JSON object not found'); - } return data; }, @@ -36873,7 +37951,12 @@ Ext.define('Ext.data.reader.Json', { /** * @class Ext.data.writer.Json * @extends Ext.data.writer.Writer - * @ignore + +This class is used to write {@link Ext.data.Model} data to the server in a JSON format. +The {@link #allowSingle} configuration can be set to false to force the records to always be +encoded in an array, even if there is only a single record being sent. + + * @markdown */ Ext.define('Ext.data.writer.Json', { extend: 'Ext.data.writer.Writer', @@ -36931,7 +38014,6 @@ Ext.define('Ext.data.writer.Json', { // sending as a param, need to encode request.params[root] = Ext.encode(data); } else { - Ext.Error.raise('Must specify a root when using encode'); } } else { // send as jsonData @@ -36982,9 +38064,6 @@ Ext.define('Ext.data.writer.Json', { * *Proxies also support batching of Operations via a {@link Ext.data.Batch batch} object, invoked by the {@link #batch} method.
* - * @constructor - * Creates the Proxy - * @param {Object} config Optional config object */ Ext.define('Ext.data.proxy.Proxy', { alias: 'proxy.proxy', @@ -37034,6 +38113,10 @@ Ext.define('Ext.data.proxy.Proxy', { isProxy: true, + /** + * Creates the Proxy + * @param {Object} config (optional) Config object. + */ constructor: function(config) { config = config || {}; @@ -37155,6 +38238,7 @@ Ext.define('Ext.data.proxy.Proxy', { * @param {Ext.data.Operation} operation The Operation to perform * @param {Function} callback Callback function to be called when the Operation has completed (whether successful or not) * @param {Object} scope Scope to execute the callback function in + * @method */ create: Ext.emptyFn, @@ -37163,6 +38247,7 @@ Ext.define('Ext.data.proxy.Proxy', { * @param {Ext.data.Operation} operation The Operation to perform * @param {Function} callback Callback function to be called when the Operation has completed (whether successful or not) * @param {Object} scope Scope to execute the callback function in + * @method */ read: Ext.emptyFn, @@ -37171,6 +38256,7 @@ Ext.define('Ext.data.proxy.Proxy', { * @param {Ext.data.Operation} operation The Operation to perform * @param {Function} callback Callback function to be called when the Operation has completed (whether successful or not) * @param {Object} scope Scope to execute the callback function in + * @method */ update: Ext.emptyFn, @@ -37179,6 +38265,7 @@ Ext.define('Ext.data.proxy.Proxy', { * @param {Ext.data.Operation} operation The Operation to perform * @param {Function} callback Callback function to be called when the Operation has completed (whether successful or not) * @param {Object} scope Scope to execute the callback function in + * @method */ destroy: Ext.emptyFn, @@ -37331,30 +38418,31 @@ Ext.define('Ext.data.proxy.Server', { cacheString: "_dc", /** - * @cfg {Number} timeout (optional) The number of milliseconds to wait for a response. Defaults to 30 seconds. + * @cfg {Number} timeout (optional) The number of milliseconds to wait for a response. + * Defaults to 30000 milliseconds (30 seconds). */ timeout : 30000, /** * @cfg {Object} api - * Specific urls to call on CRUD action methods "read", "create", "update" and "destroy". + * Specific urls to call on CRUD action methods "create", "read", "update" and "destroy". * Defaults to:
api: {
- read : undefined,
create : undefined,
+ read : undefined,
update : undefined,
destroy : undefined
}
* The url is built based upon the action being executed [load|create|save|destroy] + *
The url is built based upon the action being executed [create|read|update|destroy] * using the commensurate {@link #api} property, or if undefined default to the * configured {@link Ext.data.Store}.{@link Ext.data.proxy.Server#url url}.
*
For example:
*
api: {
- load : '/controller/load',
- create : '/controller/new',
- save : '/controller/update',
+ create : '/controller/new',
+ read : '/controller/load',
+ update : '/controller/update',
destroy : '/controller/destroy_action'
}
* The Component above creates its encapsulating div upon render, and use the configured HTML as content. More complex
* internal structure may be created using the {@link #renderTpl} configuration, although to display database-derived mass
- * data, it is recommended that an ExtJS data-backed Component such as a {Ext.view.DataView DataView}, or {Ext.grid.Panel GridPanel},
- * or {@link Ext.tree.Panel TreePanel} be used.
-
*
- an element :
@@ -39338,7 +40445,9 @@ Ext.define('Ext.Component', {
DIRECTION_TOP: 'top',
DIRECTION_RIGHT: 'right',
DIRECTION_BOTTOM: 'bottom',
- DIRECTION_LEFT: 'left'
+ DIRECTION_LEFT: 'left',
+
+ VERTICAL_DIRECTION: /^(?:top|bottom)$/
},
/* End Definitions */
@@ -39520,7 +40629,9 @@ new Ext.Component({
me.el.setVisibilityMode(Ext.core.Element[me.hideMode.toUpperCase()]);
}
- me.setAutoScroll(me.autoScroll);
+ if (Ext.isDefined(me.autoScroll)) {
+ me.setAutoScroll(me.autoScroll);
+ }
me.callParent();
if (!(me.x && me.y) && (me.pageX || me.pageY)) {
@@ -39833,9 +40944,9 @@ new Ext.Component({
},
/**
- *
Shows this Component, rendering it first if {@link #autoRender} or {{@link "floating} are
+ *true.Shows this Component, rendering it first if {@link #autoRender} or {@link #floating} are
*true.After being shown, a {@link #floating} Component (such as a {@link Ext.window.Window}), is activated it and brought to the front of - * its {@link #ZIndexManager z-index stack}.
+ * its {@link #zIndexManager z-index stack}. * @param {String/Element} animateTarget Optional, and only valid for {@link #floating} Components such as * {@link Ext.window.Window Window}s or {@link Ext.tip.ToolTip ToolTip}s, or regular Components which have been configured * withfloating: true. The target from which the Component should @@ -40027,6 +41138,7 @@ new Ext.Component({ me.container.remove(); } } + delete me.focusTask; me.callParent(); }, @@ -40050,7 +41162,10 @@ new Ext.Component({ focusEl; if (delay) { - me.focusTask.delay(Ext.isNumber(delay) ? delay: 10, null, me, [selectText, false]); + if (!me.focusTask) { + me.focusTask = Ext.create('Ext.util.DelayedTask', me.focus); + } + me.focusTask.delay(Ext.isNumber(delay) ? delay : 10, null, me, [selectText, false]); return me; } @@ -40215,17 +41330,11 @@ alert(t.getXType()); // alerts 'textfield' return this.proxy; } -}, function() { - - // A single focus delayer for all Components. - this.prototype.focusTask = Ext.create('Ext.util.DelayedTask', this.prototype.focus); - }); /** * @class Ext.layout.container.Container * @extends Ext.layout.container.AbstractContainer -* @private *This class is intended to be extended or created via the {@link Ext.container.Container#layout layout} * configuration property. See {@link Ext.container.Container#layout} for additional details.
*/ @@ -40275,11 +41384,6 @@ Ext.define('Ext.layout.container.Container', { } }, - afterLayout: function() { - this.owner.afterLayout(arguments); - this.callParent(arguments); - }, - /** * @protected * Returns all items that are rendered @@ -40367,8 +41471,6 @@ Ext.define('Ext.layout.container.Auto', { type: 'autocontainer', - fixedLayout: false, - bindToOwnerCtComponent: true, // @private @@ -40395,6 +41497,18 @@ Ext.define('Ext.layout.container.Auto', { me.setItemSize(items[i]); } } + }, + + configureItem: function(item) { + + // Auto layout does not manage any dimensions. + // We have to check our type, because this could be called as a superclass method in a subclass + if (this.type === 'autocontainer') { + item.layoutManagedHeight = 2; + item.layoutManagedWidth = 2; + } + + this.callParent(arguments); } }); /** @@ -40728,7 +41842,7 @@ items: [ if (me.rendered && layout && !me.suspendLayout) { // If either dimension is being auto-set, then it requires a ComponentLayout to be run. - if ((!Ext.isNumber(me.width) || !Ext.isNumber(me.height)) && me.componentLayout.type !== 'autocomponent') { + if (!me.isFixedWidth() || !me.isFixedHeight()) { // Only run the ComponentLayout if it is not already in progress if (me.componentLayout.layoutBusy !== true) { me.doComponentLayout(); @@ -40737,7 +41851,7 @@ items: [ } } } - // Both dimensions defined, run a ContainerLayout + // Both dimensions set, either by configuration, or by an owning layout, run a ContainerLayout else { // Only run the ContainerLayout if it is not already in progress if (layout.layoutBusy !== true) { @@ -40885,9 +41999,6 @@ for more details. for (i = 0, ln = items.length; i < ln; i++) { item = items[i]; - if (!item) { - Ext.Error.raise("Trying to add a null item as a child of Container with itemId/id: " + me.getItemId()); - } if (index != -1) { item = me.add(index + i, item); @@ -41005,9 +42116,6 @@ for more details. remove : function(comp, autoDestroy) { var me = this, c = me.getComponent(comp); - if (Ext.isDefined(Ext.global.console) && !c) { - console.warn("Attempted to remove a component that does not exist. Ext.container.Container: remove takes an argument of the component to remove. cmp.remove() is incorrect usage."); - } if (c && me.fireEvent('beforeremove', me, c) !== false) { me.doRemove(c, autoDestroy); @@ -41070,9 +42178,11 @@ for more details. } } - // Resume Layouts now that all items have been removed and do a single layout + // Resume Layouts now that all items have been removed and do a single layout (if we removed anything!) me.suspendLayout = false; - me.doLayout(); + if (len) { + me.doLayout(); + } return items; }, @@ -41425,8 +42535,6 @@ Ext.Ajax.request({ *Note: since the code above is generated by a server script, the
- * - * @xtype container */ Ext.define('Ext.container.Container', { extend: 'Ext.container.AbstractContainer', @@ -41460,27 +42568,26 @@ Ext.define('Ext.container.Container', { /** * @class Ext.toolbar.Fill * @extends Ext.Component + * * A non-rendering placeholder item which instructs the Toolbar's Layout to begin using * the right-justified button container. * * {@img Ext.toolbar.Fill/Ext.toolbar.Fill.png Toolbar Fill} - * Example usage: -autoLoadparams for * the Store, the user's preferred date format, the metadata to allow generation of the Model layout, and the ColumnModel * can all be generated into the code since these are all known on the server.
- * @constructor - * Creates a new Fill - * @xtype tbfill + * + * ## Example + * + * Ext.create('Ext.panel.Panel', { + * title: 'Toolbar Fill Example', + * width: 300, + * height: 200, + * tbar : [ + * 'Item 1', + * {xtype: 'tbfill'}, // or '->' + * 'Item 2' + * ], + * renderTo: Ext.getBody() + * }); + * */ Ext.define('Ext.toolbar.Fill', { extend: 'Ext.Component', @@ -41494,10 +42601,6 @@ Ext.define('Ext.toolbar.Fill', { * @extends Ext.Component * The base class that other non-interacting Toolbar Item classes should extend in order to * get some basic common toolbar item functionality. - * @constructor - * Creates a new Item - * @param {HTMLElement} el - * @xtype tbitem */ Ext.define('Ext.toolbar.Item', { extend: 'Ext.Component', @@ -41515,24 +42618,23 @@ Ext.define('Ext.toolbar.Item', { * @extends Ext.toolbar.Item * A simple class that adds a vertical separator bar between toolbar items * (css class:'x-toolbar-separator'). + * * {@img Ext.toolbar.Separator/Ext.toolbar.Separator.png Toolbar Separator} - * Example usage: - *- Ext.create('Ext.panel.Panel', { - title: 'Toolbar Fill Example', - width: 300, - height: 200, - tbar : [ - 'Item 1', - {xtype: 'tbfill'}, // or '->' - 'Item 2' - ], - renderTo: Ext.getBody() - }); -
- * @constructor - * Creates a new Separator - * @xtype tbseparator + * + * ## Example + * + * Ext.create('Ext.panel.Panel', { + * title: 'Toolbar Seperator Example', + * width: 300, + * height: 200, + * tbar : [ + * 'Item 1', + * {xtype: 'tbseparator'}, // or '-' + * 'Item 2' + * ], + * renderTo: Ext.getBody() + * }); + * */ Ext.define('Ext.toolbar.Separator', { extend: 'Ext.toolbar.Item', @@ -41756,11 +42858,11 @@ Ext.define('Ext.menu.Manager', { * @class Ext.button.Button * @extends Ext.Component -Create simple buttons with this component. Customisations include {@link #config-iconAlign aligned} -{@link #config-iconCls icons}, {@link #config-menu dropdown menus}, {@link #config-tooltip tooltips} -and {@link #config-scale sizing options}. Specify a {@link #config-handler handler} to run code when -a user clicks the button, or use {@link #config-listeners listeners} for other events such as -{@link #events-mouseover mouseover}. +Create simple buttons with this component. Customisations include {@link #iconAlign aligned} +{@link #iconCls icons}, {@link #menu dropdown menus}, {@link #tooltip tooltips} +and {@link #scale sizing options}. Specify a {@link #handler handler} to run code when +a user clicks the button, or use {@link #listeners listeners} for other events such as +{@link #mouseover mouseover}. {@img Ext.button.Button/Ext.button.Button1.png Ext.button.Button component} Example usage: @@ -41879,10 +42981,6 @@ Example usage: } }); - * @constructor - * Create a new button - * @param {Object} config The config object - * @xtype button * @markdown * @docauthor Robert Dougan- Ext.create('Ext.panel.Panel', { - title: 'Toolbar Seperator Example', - width: 300, - height: 200, - tbar : [ - 'Item 1', - {xtype: 'tbseparator'}, // or '-' - 'Item 2' - ], - renderTo: Ext.getBody() - }); -' + ' tabIndex="{tabIndex}" role="link">' + - '{text}' + + '' + + '{text}' + + '' + + '' + '' + '' + '' + @@ -42092,7 +43204,10 @@ Ext.define('Ext.button.Button', { // the autocomplete="off" is required to prevent Firefox from remembering // the button's disabled state between page reloads. ' ' + '' , @@ -42340,7 +43455,8 @@ Ext.define('Ext.button.Button', { Ext.applyIf(me.renderSelectors, { btnEl : me.href ? 'a' : 'button', btnWrap: 'em', - btnInnerEl: '.' + me.baseCls + '-inner' + btnInnerEl: '.' + me.baseCls + '-inner', + btnIconEl: '.'+ me.baseCls + '-icon' }); if (me.scale) { @@ -42466,17 +43582,21 @@ Ext.define('Ext.button.Button', { * @returns The href string with parameters appended. */ getHref: function() { - var me = this; - return me.href ? Ext.urlAppend(me.href, me.params + Ext.Object.toQueryString(Ext.apply(Ext.apply({}, me.baseParams)))) : false; + var me = this, + params = Ext.apply({}, me.baseParams); + + // write baseParams first, then write any params + params = Ext.apply(params, me.params); + return me.href ? Ext.urlAppend(me.href, Ext.Object.toQueryString(params)) : false; }, /** *tabIndex="{tabIndex}" role="button" autocomplete="off">' + - '{text}' + + '' + + '{text}' + + '' + + '' + '' + 'Only valid if the Button was originally configured with a {@link #url}
*Sets the href of the link dynamically according to the params passed, and any {@link #baseParams} configured.
- * @param {Object} Parameters to use in the href URL. + * @param {Object} params Parameters to use in the href URL. */ - setParams: function(p) { - this.params = p; + setParams: function(params) { + this.params = params; this.btnEl.dom.href = this.getHref(); }, @@ -42502,11 +43622,11 @@ Ext.define('Ext.button.Button', { */ setIconCls: function(cls) { var me = this, - btnInnerEl = me.btnInnerEl; - if (btnInnerEl) { + btnIconEl = me.btnIconEl; + if (btnIconEl) { // Remove the previous iconCls from the button - btnInnerEl.removeCls(me.iconCls); - btnInnerEl.addCls(cls || ''); + btnIconEl.removeCls(me.iconCls); + btnIconEl.addCls(cls || ''); me.setButtonCls(); } me.iconCls = cls; @@ -43117,6 +44237,10 @@ Ext.define('Ext.layout.container.boxOverflow.Menu', { */ me.menuItems = []; }, + + onRemove: function(comp){ + Ext.Array.remove(this.menuItems, comp); + }, handleOverflow: function(calculations, targetSize) { var me = this, @@ -43177,7 +44301,7 @@ Ext.define('Ext.layout.container.boxOverflow.Menu', { * @private */ hideTrigger: function() { - if (this.menuTrigger != undefined) { + if (this.menuTrigger !== undefined) { this.menuTrigger.hide(); } }, @@ -43331,7 +44455,6 @@ Ext.define('Ext.layout.container.boxOverflow.Menu', { * because the container is currently not large enough. */ me.menu = Ext.create('Ext.menu.Menu', { - hideMode: 'offsets', listeners: { scope: me, beforeshow: me.beforeMenuShow @@ -43395,8 +44518,9 @@ Ext.define('Ext.layout.container.boxOverflow.Menu', { * @class Ext.util.Region * @extends Object * - * Represents a rectangular region and provides a number of utility methods - * to compare regions. + *This class represents a rectangular region in X,Y space, and performs geometric + * transformations or tests upon the region.
+ *This class may be used to compare the document regions occupied by elements.
*/ Ext.define('Ext.util.Region', { @@ -43408,10 +44532,9 @@ Ext.define('Ext.util.Region', { statics: { /** * @static - * @param {Mixed} el A string, DomElement or Ext.core.Element representing an element - * on the page. - * @returns {Ext.util.Region} region * Retrieves an Ext.util.Region for a particular element. + * @param {Mixed} el An element ID, htmlElement or Ext.core.Element representing an element in the document. + * @returns {Ext.util.Region} region */ getRegion: function(el) { return Ext.fly(el).getPageBox(true); @@ -43419,8 +44542,9 @@ Ext.define('Ext.util.Region', { /** * @static - * @param {Object} o An object with top, right, bottom, left properties - * @return {Ext.util.Region} region The region constructed based on the passed object + * Creates a Region from a "box" Object which contains four numeric propertiestop,right,bottomandleft. + * @param {Object} o An object withtop,right,bottomandleftproperties. + * @return {Ext.util.Region} region The Region constructed based on the passed object */ from: function(o) { return new this(o.top, o.right, o.bottom, o.left); @@ -43430,11 +44554,11 @@ Ext.define('Ext.util.Region', { /* End Definitions */ /** - * @constructor - * @param {Number} top Top - * @param {Number} right Right - * @param {Number} bottom Bottom - * @param {Number} left Left + * Creates a region from the bounding sides. + * @param {Number} top Top The topmost pixel of the Region. + * @param {Number} right Right The rightmost pixel of the Region. + * @param {Number} bottom Bottom The bottom pixel of the Region. + * @param {Number} left Left The leftmost pixel of the Region. */ constructor : function(t, r, b, l) { var me = this; @@ -43698,7 +44822,7 @@ Ext.define('Ext.util.Region', { }, /** - * Copy a new instance + * Create a copy of this Region. * @return {Ext.util.Region} */ copy: function() { @@ -43708,7 +44832,7 @@ Ext.define('Ext.util.Region', { /** * Copy the values of another Region to this Region * @param {Region} The region to copy from. - * @return {Ext.util.Point} this This point + * @return {Ext.util.Region} This Region */ copyFrom: function(p) { var me = this; @@ -43720,7 +44844,7 @@ Ext.define('Ext.util.Region', { return this; }, - /** + /* * Dump this to an eye-friendly string, great for debugging * @return {String} */ @@ -43728,7 +44852,6 @@ Ext.define('Ext.util.Region', { return "Region[" + this.top + "," + this.right + "," + this.bottom + "," + this.left + "]"; }, - /** * Translate this region by the given offset amount * @param {Ext.util.Offset/Object} offset Object containing thexandyproperties. @@ -45201,8 +46324,6 @@ Ext.define('Ext.layout.container.Box', { bindToOwnerCtContainer: true, - fixedLayout: false, - // availableSpaceOffset is used to adjust the availableWidth, typically used // to reserve space for a scrollbar availableSpaceOffset: 0, @@ -45251,11 +46372,12 @@ Ext.define('Ext.layout.container.Box', { */ getChildBox: function(child) { child = child.el || this.owner.getComponent(child).el; + var size = child.getBox(false, true); return { - left: child.getLeft(true), - top: child.getTop(true), - width: child.getWidth(), - height: child.getHeight() + left: size.left, + top: size.top, + width: size.width, + height: size.height }; }, @@ -45312,6 +46434,8 @@ Ext.define('Ext.layout.container.Box', { paddingPerpendicular = perpendicularOffset + padding[me.perpendicularRightBottom], availPerpendicularSize = mmax(0, perpendicularSize - paddingPerpendicular), + innerCtBorderWidth = me.innerCt.getBorderWidth(me.perpendicularLT + me.perpendicularRB), + isStart = me.pack == 'start', isCenter = me.pack == 'center', isEnd = me.pack == 'end', @@ -45537,7 +46661,7 @@ Ext.define('Ext.layout.container.Box', { // When calculating a centered position within the content box of the innerCt, the width of the borders must be subtracted from // the size to yield the space available to center within. // The updateInnerCtSize method explicitly adds the border widths to the set size of the innerCt. - diff = mmax(availPerpendicularSize, maxSize) - me.innerCt.getBorderWidth(me.perpendicularLT + me.perpendicularRB) - calcs[perpendicularPrefix]; + diff = mmax(availPerpendicularSize, maxSize) - innerCtBorderWidth - calcs[perpendicularPrefix]; if (diff > 0) { calcs[me.perpendicularLeftTop] = perpendicularOffset + Math.round(diff / 2); } @@ -45560,6 +46684,13 @@ Ext.define('Ext.layout.container.Box', { } }; }, + + onRemove: function(comp){ + this.callParent(arguments); + if (this.overflowHandler) { + this.overflowHandler.onRemove(comp); + } + }, /** * @private @@ -45574,7 +46705,7 @@ Ext.define('Ext.layout.container.Box', { } var handlerType = 'None'; - if (handler && handler.type != undefined) { + if (handler && handler.type !== undefined) { handlerType = handler.type; } @@ -45623,7 +46754,7 @@ Ext.define('Ext.layout.container.Box', { } if (results.recalculate) { - items = me.getVisibleItems(owner); + items = me.getVisibleItems(); calcs = me.calculateChildBoxes(items, targetSize); boxes = calcs.boxes; } @@ -46006,7 +47137,21 @@ Ext.define('Ext.layout.container.HBox', { perpendicularRB: 'b', perpendicularLeftTop: 'top', perpendicularRightBottom: 'bottom', - perpendicularPosition: 'y' + perpendicularPosition: 'y', + configureItem: function(item) { + if (item.flex) { + item.layoutManagedWidth = 1; + } else { + item.layoutManagedWidth = 2; + } + + if (this.align === 'stretch' || this.align === 'stretchmax') { + item.layoutManagedHeight = 1; + } else { + item.layoutManagedHeight = 2; + } + this.callParent(arguments); + } }); /** * @class Ext.layout.container.VBox @@ -46096,7 +47241,21 @@ Ext.define('Ext.layout.container.VBox', { perpendicularRB: 'r', perpendicularLeftTop: 'left', perpendicularRightBottom: 'right', - perpendicularPosition: 'x' + perpendicularPosition: 'x', + configureItem: function(item) { + if (item.flex) { + item.layoutManagedHeight = 1; + } else { + item.layoutManagedHeight = 2; + } + + if (this.align === 'stretch' || this.align === 'stretchmax') { + item.layoutManagedWidth = 1; + } else { + item.layoutManagedWidth = 2; + } + this.callParent(arguments); + } }); /** * @class Ext.FocusManager @@ -46520,10 +47679,14 @@ Ext.define('Ext.FocusManager', { if (!me.focusedCmp || !(parent = me.focusedCmp.up(':focusable'))) { me.focusEl.focus(); - return; + } else { + parent.focus(); } - parent.focus(); + // In some browsers (Chrome) FocusManager can handle this before other + // handlers. Ext Windows have their own Esc key handling, so we need to + // return true here to allow the event to bubble. + return true; }, navigateSiblings: function(e, source, parent) { @@ -46976,7 +48139,7 @@ __Some items have shortcut strings for creation:__ {@img Ext.toolbar.Toolbar/Ext.toolbar.Toolbar1.png Toolbar component} Example usage: - Ext.create('Ext.toolbar.Toolbar", { + Ext.create('Ext.toolbar.Toolbar', { renderTo: document.body, width : 500, items: [ @@ -47149,7 +48312,6 @@ Example usage: * @constructor * Creates a new Toolbar * @param {Object/Array} config A config object or an array of buttons to{@link #add}- * @xtype toolbar * @docauthor Robert DouganA base class which provides methods common to Panel classes across the Sencha product range.
*Please refer to sub class's documentation
- * @constructor - * @param {Object} config The config object */ Ext.define('Ext.panel.AbstractPanel', { @@ -47410,7 +48571,7 @@ Ext.define('Ext.panel.AbstractPanel', { * A shortcut to add or remove the border on the body of a panel. This only applies to a panel which has the {@link #frame} configuration set to `true`. * Defaults toundefined. */ - + /** * @cfg {String/Object/Function} bodyStyle * Custom CSS styles to be applied to the panel's body element, which can be supplied as a valid CSS style string, @@ -47424,7 +48585,7 @@ bodyStyle: { } * */ - + /** * @cfg {String/Array} bodyCls * A CSS class, space-delimited string of classes, or array of classes to be applied to the panel's body element. @@ -47439,6 +48600,36 @@ bodyCls: ['foo', 'bar'] componentLayout: 'dock', + /** + * @cfg {Object} defaultDockWeights + * This object holds the default weights applied to dockedItems that have no weight. These start with a + * weight of 1, to allow negative weights to insert before top items and are odd numbers + * so that even weights can be used to get between different dock orders. + * + * To make default docking order match border layout, do this: + *
+ * Changing these defaults as above or individually on this object will effect all Panels. + * To change the defaults on a single panel, you should replace the entire object: + *+Ext.panel.AbstractPanel.prototype.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };
+ * + * To change only one of the default values, you do this: + *+initComponent: function () { + // NOTE: Don't change members of defaultDockWeights since the object is shared. + this.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 }; + + this.callParent(); +}
+ */ + defaultDockWeights: { top: 1, left: 3, right: 5, bottom: 7 }, + renderTpl: ['+initComponent: function () { + // NOTE: Don't change members of defaultDockWeights since the object is shared. + this.defaultDockWeights = Ext.applyIf({ top: 10 }, this.defaultDockWeights); + + this.callParent(); +}{bodyCls} {baseCls}-body-{ui}'], // TODO: Move code examples into product-specific files. The code snippet below is Touch only. @@ -47459,12 +48650,12 @@ var panel = new Ext.panel.Panel({ }] }); */ - + border: true, initComponent : function() { var me = this; - + me.addEvents( /** * @event bodyresize @@ -47483,17 +48674,17 @@ var panel = new Ext.panel.Panel({ Ext.applyIf(me.renderSelectors, { body: '.' + me.baseCls + '-body' }); - - //!frame + + //!frame //!border - + if (me.frame && me.border && me.bodyBorder === undefined) { me.bodyBorder = false; } if (me.frame && me.border && (me.bodyBorder === false || me.bodyBorder === 0)) { me.manageBodyBorders = true; } - + me.callParent(); }, @@ -47501,7 +48692,7 @@ var panel = new Ext.panel.Panel({ initItems : function() { var me = this, items = me.dockedItems; - + me.callParent(); me.dockedItems = Ext.create('Ext.util.MixedCollection', false, me.getComponentId); if (items) { @@ -47575,9 +48766,9 @@ var panel = new Ext.panel.Panel({ delete me.bodyStyle; return styles.length ? styles.join(';') : undefined; }, - + /** - * Parse the {@link bodyCls} config if available to create a comma-delimited string of + * Parse the {@link bodyCls} config if available to create a comma-delimited string of * CSS classes to be applied to the body element. * @return {String} The CSS class(es) * @private @@ -47586,7 +48777,7 @@ var panel = new Ext.panel.Panel({ var me = this, cls = '', bodyCls = me.bodyCls; - + if (bodyCls) { Ext.each(bodyCls, function(v) { cls += " " + v; @@ -47595,7 +48786,7 @@ var panel = new Ext.panel.Panel({ } return cls.length > 0 ? cls : undefined; }, - + /** * 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 @@ -47641,7 +48832,10 @@ var panel = new Ext.panel.Panel({ item.onAdded(me, i); me.onDockedAdd(item); } - if (me.rendered) { + + // Set flag which means that beforeLayout will not veto the layout due to the size not changing + me.componentLayout.childrenChanged = true; + if (me.rendered && !me.suspendLayout) { me.doComponentLayout(); } return items; @@ -47671,7 +48865,7 @@ var panel = new Ext.panel.Panel({ var me = this, layout, hasLayout; - + if (!me.dockedItems.contains(item)) { return item; } @@ -47694,8 +48888,11 @@ var panel = new Ext.panel.Panel({ if (hasLayout && !autoDestroy) { layout.afterRemove(item); } - - if (!this.destroying) { + + + // Set flag which means that beforeLayout will not veto the layout due to the size not changing + me.componentLayout.childrenChanged = true; + if (!me.destroying && !me.suspendLayout) { me.doComponentLayout(); } @@ -47709,9 +48906,7 @@ var panel = new Ext.panel.Panel({ */ getDockedItems : function(cqSelector) { var me = this, - // Start with a weight of 1, so users can provide <= 0 to come before top items - // Odd numbers, so users can provide a weight to come in between if desired - defaultWeight = { top: 1, left: 3, right: 5, bottom: 7 }, + defaultWeight = me.defaultDockWeights, dockedItems; if (me.dockedItems && me.dockedItems.items.length) { @@ -47724,7 +48919,6 @@ var panel = new Ext.panel.Panel({ Ext.Array.sort(dockedItems, function(a, b) { // Docked items are ordered by their visual representation by default (t,l,r,b) - // TODO: Enforce position ordering, and have weights be sub-ordering within positions? var aw = a.weight || defaultWeight[a.dock], bw = b.weight || defaultWeight[b.dock]; if (Ext.isNumber(aw) && Ext.isNumber(bw)) { @@ -47732,57 +48926,123 @@ var panel = new Ext.panel.Panel({ } return 0; }); - + return dockedItems; } return []; }, - + // inherit docs addUIClsToElement: function(cls, force) { - var me = this; - - me.callParent(arguments); - + var me = this, + result = me.callParent(arguments), + classes = [Ext.baseCSSPrefix + cls, me.baseCls + '-body-' + cls, me.baseCls + '-body-' + me.ui + '-' + cls], + array, i; + if (!force && me.rendered) { - me.body.addCls(Ext.baseCSSPrefix + cls); - me.body.addCls(me.baseCls + '-body-' + cls); - me.body.addCls(me.baseCls + '-body-' + me.ui + '-' + cls); + if (me.bodyCls) { + me.body.addCls(me.bodyCls); + } else { + me.body.addCls(classes); + } + } else { + if (me.bodyCls) { + array = me.bodyCls.split(' '); + + for (i = 0; i < classes.length; i++) { + if (!Ext.Array.contains(array, classes[i])) { + array.push(classes[i]); + } + } + + me.bodyCls = array.join(' '); + } else { + me.bodyCls = classes.join(' '); + } } + + return result; }, - + // inherit docs removeUIClsFromElement: function(cls, force) { - var me = this; - - me.callParent(arguments); - + var me = this, + result = me.callParent(arguments), + classes = [Ext.baseCSSPrefix + cls, me.baseCls + '-body-' + cls, me.baseCls + '-body-' + me.ui + '-' + cls], + array, i; + if (!force && me.rendered) { - me.body.removeCls(Ext.baseCSSPrefix + cls); - me.body.removeCls(me.baseCls + '-body-' + cls); - me.body.removeCls(me.baseCls + '-body-' + me.ui + '-' + cls); + if (me.bodyCls) { + me.body.removeCls(me.bodyCls); + } else { + me.body.removeCls(classes); + } + } else { + if (me.bodyCls) { + array = me.bodyCls.split(' '); + + for (i = 0; i < classes.length; i++) { + Ext.Array.remove(array, classes[i]); + } + + me.bodyCls = array.join(' '); + } } + + return result; }, - + // inherit docs addUIToElement: function(force) { - var me = this; - + var me = this, + cls = me.baseCls + '-body-' + me.ui, + array; + me.callParent(arguments); - + if (!force && me.rendered) { - me.body.addCls(me.baseCls + '-body-' + me.ui); + if (me.bodyCls) { + me.body.addCls(me.bodyCls); + } else { + me.body.addCls(cls); + } + } else { + if (me.bodyCls) { + array = me.bodyCls.split(' '); + + if (!Ext.Array.contains(array, cls)) { + array.push(cls); + } + + me.bodyCls = array.join(' '); + } else { + me.bodyCls = cls; + } } }, - + // inherit docs removeUIFromElement: function() { - var me = this; - + var me = this, + cls = me.baseCls + '-body-' + me.ui, + array; + me.callParent(arguments); - + if (me.rendered) { - me.body.removeCls(me.baseCls + '-body-' + me.ui); + if (me.bodyCls) { + me.body.removeCls(me.bodyCls); + } else { + me.body.removeCls(cls); + } + } else { + if (me.bodyCls) { + array = me.bodyCls.split(' '); + Ext.Array.remove(array, cls); + me.bodyCls = array.join(' '); + } else { + me.bodyCls = cls; + } } }, @@ -47798,7 +49058,7 @@ var panel = new Ext.panel.Panel({ ln = dockedItems.length, i = 0, item; - + // Find the index where we go from top/left docked items to right/bottom docked items for (; i < ln; i++) { item = dockedItems[i]; @@ -47806,11 +49066,11 @@ var panel = new Ext.panel.Panel({ break; } } - + // Return docked items in the top/left position before our container items, and // return right/bottom positioned items after our container items. // See AbstractDock.renderItems() for more information. - return dockedItems.splice(0, i).concat(items).concat(dockedItems); + return Ext.Array.splice(dockedItems, 0, i).concat(items).concat(dockedItems); }, beforeDestroy: function(){ @@ -47824,7 +49084,7 @@ var panel = new Ext.panel.Panel({ } this.callParent(); }, - + setBorder: function(border) { var me = this; me.border = (border !== undefined) ? border : true; @@ -47837,7 +49097,6 @@ var panel = new Ext.panel.Panel({ * @class Ext.panel.Header * @extends Ext.container.Container * Simple header class which is used for on {@link Ext.panel.Panel} and {@link Ext.window.Window} - * @xtype header */ Ext.define('Ext.panel.Header', { extend: 'Ext.container.Container', @@ -47923,6 +49182,7 @@ Ext.define('Ext.panel.Header', { ariaRole : 'heading', focusable: false, viewBox: false, + flex : 1, autoSize: true, margins: '5 0 0 0', items: [ me.textConfig ], @@ -47941,6 +49201,7 @@ Ext.define('Ext.panel.Header', { xtype : 'component', ariaRole : 'heading', focusable: false, + flex : 1, renderTpl : ['{title}'], renderData: { title: me.title, @@ -47954,14 +49215,6 @@ Ext.define('Ext.panel.Header', { } me.items.push(me.titleCmp); - // Spacer -> - me.items.push({ - xtype: 'component', - html : ' ', - flex : 1, - focusable: false - }); - // Add Tools me.items = me.items.concat(me.tools); this.callParent(); @@ -48010,36 +49263,90 @@ Ext.define('Ext.panel.Header', { // inherit docs addUIClsToElement: function(cls, force) { - var me = this; - - me.callParent(arguments); + var me = this, + result = me.callParent(arguments), + classes = [me.baseCls + '-body-' + cls, me.baseCls + '-body-' + me.ui + '-' + cls], + array, i; if (!force && me.rendered) { - me.body.addCls(me.baseCls + '-body-' + cls); - me.body.addCls(me.baseCls + '-body-' + me.ui + '-' + cls); + if (me.bodyCls) { + me.body.addCls(me.bodyCls); + } else { + me.body.addCls(classes); + } + } else { + if (me.bodyCls) { + array = me.bodyCls.split(' '); + + for (i = 0; i < classes.length; i++) { + if (!Ext.Array.contains(array, classes[i])) { + array.push(classes[i]); + } + } + + me.bodyCls = array.join(' '); + } else { + me.bodyCls = classes.join(' '); + } } + + return result; }, // inherit docs removeUIClsFromElement: function(cls, force) { - var me = this; - - me.callParent(arguments); + var me = this, + result = me.callParent(arguments), + classes = [me.baseCls + '-body-' + cls, me.baseCls + '-body-' + me.ui + '-' + cls], + array, i; if (!force && me.rendered) { - me.body.removeCls(me.baseCls + '-body-' + cls); - me.body.removeCls(me.baseCls + '-body-' + me.ui + '-' + cls); + if (me.bodyCls) { + me.body.removeCls(me.bodyCls); + } else { + me.body.removeCls(classes); + } + } else { + if (me.bodyCls) { + array = me.bodyCls.split(' '); + + for (i = 0; i < classes.length; i++) { + Ext.Array.remove(array, classes[i]); + } + + me.bodyCls = array.join(' '); + } } + + return result; }, // inherit docs addUIToElement: function(force) { - var me = this; + var me = this, + array, cls; me.callParent(arguments); + cls = me.baseCls + '-body-' + me.ui; if (!force && me.rendered) { - me.body.addCls(me.baseCls + '-body-' + me.ui); + if (me.bodyCls) { + me.body.addCls(me.bodyCls); + } else { + me.body.addCls(cls); + } + } else { + if (me.bodyCls) { + array = me.bodyCls.split(' '); + + if (!Ext.Array.contains(array, cls)) { + array.push(cls); + } + + me.bodyCls = array.join(' '); + } else { + me.bodyCls = cls; + } } if (!force && me.titleCmp && me.titleCmp.rendered && me.titleCmp.textEl) { @@ -48049,12 +49356,26 @@ Ext.define('Ext.panel.Header', { // inherit docs removeUIFromElement: function() { - var me = this; + var me = this, + array, cls; me.callParent(arguments); + cls = me.baseCls + '-body-' + me.ui; if (me.rendered) { - me.body.removeCls(me.baseCls + '-body-' + me.ui); + if (me.bodyCls) { + me.body.removeCls(me.bodyCls); + } else { + me.body.removeCls(cls); + } + } else { + if (me.bodyCls) { + array = me.bodyCls.split(' '); + Ext.Array.remove(array, cls); + me.bodyCls = array.join(' '); + } else { + me.bodyCls = cls; + } } if (me.titleCmp && me.titleCmp.rendered && me.titleCmp.textEl) { @@ -48605,7 +49926,7 @@ __Using Keyframes__ The {@link #keyframes} option is the most important part of specifying an animation when using this class. A key frame is a point in a particular animation. We represent this as a percentage of the total animation duration. At each key frame, we can specify the target values at that time. Note that -you *must* specify the values at 0% and 100%, the start and ending values. There is also a {@link keyframe} +you *must* specify the values at 0% and 100%, the start and ending values. There is also a {@link #keyframe} event that fires after each key frame is reached. __Example Usage__ @@ -48703,8 +50024,11 @@ speed over its duration. - elasticOut - cubic-bezier(x1, y1, x2, y2) -Note that cubic-bezier will create a custom easing curve following the CSS3 transition-timing-function specification `{@link http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag}`. 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. +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 * @markdown */ @@ -49009,8 +50333,12 @@ speed over its duration. The following options are available: - elasticOut - cubic-bezier(x1, y1, x2, y2) -Note that cubic-bezier will create a custom easing curve following the CSS3 transition-timing-function specification `{@link http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag}`. 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. +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 + * @markdown * @singleton */ @@ -49122,11 +50450,11 @@ Ext.require('Ext.fx.CubicBezier', function() { 'ease-in-out': Ext.fx.Easing.easeInOut }); }); -/* +/** * @class Ext.draw.Draw * Base Drawing class. Provides base drawing functions. + * @private */ - Ext.define('Ext.draw.Draw', { /* Begin Definitions */ @@ -49192,10 +50520,16 @@ Ext.define('Ext.draw.Draw', { } }, + // 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; @@ -49214,12 +50548,12 @@ Ext.define('Ext.draw.Draw', { b && params.push(+b); }); if (name == "m" && params.length > 2) { - data.push([b].concat(params.splice(0, 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(params.splice(0, paramCounts[name]))); + data.push([b].concat(Ext.Array.splice(params, 0, paramCounts[name]))); if (!paramCounts[name]) { break; } @@ -49250,10 +50584,7 @@ Ext.define('Ext.draw.Draw', { pathClone: function(pathArray) { var res = [], - j, - jj, - i, - ii; + j, jj, i, ii; if (!this.is(pathArray, "array") || !this.is(pathArray && pathArray[0], "array")) { // rough assumption pathArray = this.parsePathString(pathArray); } @@ -49276,80 +50607,93 @@ Ext.define('Ext.draw.Draw', { y = 0, mx = 0, my = 0, - start = 0, - i, - ii, - r, - pa, - j, - jj, - k, - kk; - if (pathArray[0][0] == "M") { + 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; - start++; + i++; res[0] = ["M", x, y]; } - for (i = start, ii = pathArray.length; i < ii; i++) { + for (; i < ln; i++) { r = res[i] = []; - pa = pathArray[i]; - if (pa[0] != pa[0].toUpperCase()) { - r[0] = pa[0].toUpperCase(); + pathSegment = pathArray[i]; + if (pathSegment[0] != pathSegment[0].toUpperCase()) { + r[0] = pathSegment[0].toUpperCase(); switch (r[0]) { + // Elliptical Arc 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); - r[7] = +(pa[7] + y); + 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] = +pa[1] + y; + r[1] = +pathSegment[1] + y; break; + // Horizontal LineTo case "H": - r[1] = +pa[1] + x; + r[1] = +pathSegment[1] + x; break; case "M": - mx = +pa[1] + x; - my = +pa[2] + y; + // MoveTo + mx = +pathSegment[1] + x; + my = +pathSegment[2] + y; default: - for (j = 1, jj = pa.length; j < jj; j++) { - r[j] = +pa[j] + ((j % 2) ? x : y); + j = 1; + ln2 = pathSegment.length; + for (; j < ln2; j++) { + r[j] = +pathSegment[j] + ((j % 2) ? x : y); } } - } else { - for (k = 0, kk = pa.length; k < kk; k++) { - res[i][k] = pa[k]; + } + 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": - mx = res[i][res[i].length - 2]; - my = res[i][res[i].length - 1]; + pathSegment = res[i]; + ln2 = pathSegment.length; + mx = pathSegment[ln2 - 2]; + my = pathSegment[ln2 - 1]; default: - x = res[i][res[i].length - 2]; - y = res[i][res[i].length - 1]; + 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); @@ -49425,7 +50769,7 @@ Ext.define('Ext.draw.Draw', { return res; }, - //Returns a path converted to a set of curveto commands + // Returns a path converted to a set of curveto commands path2curve: function (path) { var me = this, points = me.pathToAbsolute(path), @@ -49439,9 +50783,9 @@ Ext.define('Ext.draw.Draw', { points[i].shift(); point = points[i]; while (point.length) { - points.splice(i++, 0, ["C"].concat(point.splice(0, 6))); + Ext.Array.splice(points, i++, 0, ["C"].concat(Ext.Array.splice(point, 0, 6))); } - points.splice(i, 1); + Ext.Array.erase(points, i, 1); ln = points.length; } seg = points[i]; @@ -49465,15 +50809,15 @@ Ext.define('Ext.draw.Draw', { pp[i].shift(); var pi = pp[i]; while (pi.length) { - pp.splice(i++, 0, ["C"].concat(pi.splice(0, 6))); + Ext.Array.splice(pp, i++, 0, ["C"].concat(Ext.Array.splice(pi, 0, 6))); } - pp.splice(i, 1); + 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") { - path2.splice(i, 0, ["M", a2.x, a2.y]); + Ext.Array.splice(path2, i, 0, ["M", a2.x, a2.y]); a1.bx = 0; a1.by = 0; a1.x = path1[i][1]; @@ -49672,27 +51016,8 @@ Ext.define('Ext.draw.Draw', { return newres; } }, - - 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 - }; - }, + // TO BE DEPRECATED rotateAndTranslatePath: function (sprite) { var alpha = sprite.rotation.degrees, cx = sprite.rotation.x, @@ -49729,7 +51054,28 @@ Ext.define('Ext.draw.Draw', { } 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}; @@ -49739,13 +51085,10 @@ Ext.define('Ext.draw.Draw', { y = 0, X = [], Y = [], - p, - i, - ii, - xmin, - ymin, - dim; - for (i = 0, ii = path.length; i < ii; i++) { + i = 0, + ln = path.length, + p, xmin, ymin, dim; + for (; i < ln; i++) { p = path[i]; if (p[0] == "M") { x = p[1]; @@ -49771,42 +51114,50 @@ Ext.define('Ext.draw.Draw', { height: Math.max.apply(0, Y) - 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 cp1, cp2, s, e, point; - var inside = function(p) { - return (cp2[0]-cp1[0]) * (p[1]-cp1[1]) > (cp2[1]-cp1[1]) * (p[0]-cp1[0]); - }; - var intersection = function() { - var p = []; - var 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; - }; - var outputList = subjectPolygon; - cp1 = clipPolygon[clipPolygon.length -1]; - for (var i = 0, l = clipPolygon.length; i < l; ++i) { + var me = this, + i = 0, + ln = clipPolygon.length, + cp1 = clipPolygon[ln - 1], + outputList = subjectPolygon, + cp2, s, e, point, ln2, inputList, j; + for (; i < ln; ++i) { cp2 = clipPolygon[i]; - var inputList = outputList; + inputList = outputList; outputList = []; - s = inputList[inputList.length -1]; - for (var j = 0, ln = inputList.length; j < ln; j++) { + s = inputList[inputList.length - 1]; + j = 0; + ln2 = inputList.length; + for (; j < ln2; j++) { e = inputList[j]; - if (inside(e)) { - if (!inside(s)) { - outputList.push(intersection()); + 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 (inside(s)) { - outputList.push(intersection()); + } + else if (me.intersectInside(s, cp1, cp2)) { + outputList.push(me.intersectIntersection(s, e, cp1, cp2)); } s = e; } @@ -49814,7 +51165,7 @@ Ext.define('Ext.draw.Draw', { } return outputList; }, - + curveDim: function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) { var a = (c2x - 2 * c1x + p1x) - (p2x - 2 * c2x + c1x), b = 2 * (c1x - p1x) - 2 * (c2x - c1x), @@ -49867,27 +51218,95 @@ Ext.define('Ext.draw.Draw', { }; }, - getAnchors: function (p1x, p1y, p2x, p2y, p3x, p3y, value) { + /** + * @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 l = Math.min(Math.sqrt(Math.pow(p1x - p2x, 2) + Math.pow(p1y - p2y, 2)) / value, Math.sqrt(Math.pow(p3x - p2x, 2) + Math.pow(p3y - p2y, 2)) / value), - a = Math.atan((p2x - p1x) / Math.abs(p2y - p1y)), - b = Math.atan((p3x - p2x) / Math.abs(p2y - p3y)), - pi = Math.PI; - a = p1y < p2y ? pi - a : a; - b = p3y < p2y ? pi - b : b; - var alpha = pi / 2 - ((a + b) % (pi * 2)) / 2; - alpha > pi / 2 && (alpha -= pi); - var dx1 = l * Math.sin(alpha + a), - dy1 = l * Math.cos(alpha + a), - dx2 = l * Math.sin(alpha + b), - dy2 = l * Math.cos(alpha + b), - out = { - x1: p2x - dx1, - y1: p2y + dy1, - x2: p2x + dx2, - y2: p2y + dy2 - }; - return out; + 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. @@ -50088,23 +51507,25 @@ Ext.define('Ext.fx.PropertyHandler', { statics: { defaultHandler: { - pixelDefaults: ['width', 'height', 'top', 'left'], + 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 match = this.unitRE.exec(from), + var unitRE = this.unitRE, + match = unitRE.exec(from), start, units; if (match) { from = match[1]; units = match[2]; - if (!units && Ext.Array.contains(this.pixelDefaults, attr)) { + if (!this.scrollRE.test(attr) && !units && this.pixelDefaultsRE.test(attr)) { units = 'px'; } } from = +from || 0; - match = this.unitRE.exec(end); + match = unitRE.exec(end); if (match) { end = match[1]; units = match[2] || units; @@ -50501,8 +51922,12 @@ speed over its duration. -elasticOut -cubic-bezier(x1, y1, x2, y2) -Note that cubic-bezier will create a custom easing curve following the CSS3 transition-timing-function specification `{@link http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag}`. 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. +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 + * @markdown */ easing: 'ease', @@ -50850,52 +52275,58 @@ Ext.enableFx = true; /** - * @class Ext.dd.DragDrop * Defines the interface and base operation of items that that can be * dragged or can be drop targets. It was designed to be extended, overriding * the event handlers for startDrag, onDrag, onDragOver and onDragOut. * Up to three html elements can be associated with a DragDrop instance: - *{parent.baseCls}-body-{parent.ui}-{.} style="{bodyStyle}" >-
- *
- linked element: the element that is passed into the constructor. - * This is the element which defines the boundaries for interaction with - * other DragDrop objects. - *
- handle element(s): The drag operation only occurs if the element that - * was clicked matches a handle element. By default this is the linked - * element, but there are times that you will want only a portion of the - * linked element to initiate the drag operation, and the setHandleElId() - * method provides a way to define this. - *
- drag element: this represents the element that would be moved along - * with the cursor during a drag operation. By default, this is the linked - * element itself as in {@link Ext.dd.DD}. setDragElId() lets you define - * a separate element that would be moved, as in {@link Ext.dd.DDProxy}. - * - *
- * dd = new Ext.dd.DragDrop("div1", "group1"); - *+ * + * dd = new Ext.dd.DragDrop("div1", "group1"); + * * Since none of the event handlers have been implemented, nothing would * actually happen if you were to run the code above. Normally you would * override this class or one of the default implementations, but you can * also override the methods you want on an instance of the class... - *- * dd.onDragDrop = function(e, id) { - * alert("dd was dropped on " + id); - * } - *- * @constructor - * @param {String} id of the element that is linked to this instance - * @param {String} sGroup the group of related DragDrop objects - * @param {object} config an object containing configurable attributes - * Valid properties for DragDrop: - * padding, isTarget, maintainOffset, primaryButtonOnly + * + * dd.onDragDrop = function(e, id) { + * alert("dd was dropped on " + id); + * } + * */ - Ext.define('Ext.dd.DragDrop', { requires: ['Ext.dd.DragDropManager'], + + /** + * Creates new DragDrop. + * @param {String} id of the element that is linked to this instance + * @param {String} sGroup the group of related DragDrop objects + * @param {object} config an object containing configurable attributes. + * Valid properties for DragDrop: + * + * - padding + * - isTarget + * - maintainOffset + * - primaryButtonOnly + */ constructor: function(id, sGroup, config) { if(id) { this.init(id, sGroup, config); @@ -51017,8 +52448,7 @@ Ext.define('Ext.dd.DragDrop', { locked: false, /** - * Lock this instance - * @method lock + * Locks this instance */ lock: function() { this.locked = true; @@ -51033,8 +52463,7 @@ Ext.define('Ext.dd.DragDrop', { moveOnly: false, /** - * Unlock this instace - * @method unlock + * Unlocks this instace */ unlock: function() { this.locked = false; @@ -51051,8 +52480,8 @@ Ext.define('Ext.dd.DragDrop', { /** * The padding configured for this drag and drop object for calculating * the drop zone intersection with this object. - * @property padding - * @type int[] An array containing the 4 padding values: [top, right, bottom, left] + * An array containing the 4 padding values: [top, right, bottom, left] + * @property {[int]} padding */ padding: null, @@ -51132,8 +52561,7 @@ Ext.define('Ext.dd.DragDrop', { * Array of pixel locations the element will snap to if we specified a * horizontal graduation/interval. This array is generated automatically * when you define a tick interval. - * @property xTicks - * @type int[] + * @property {[int]} xTicks */ xTicks: null, @@ -51141,8 +52569,7 @@ Ext.define('Ext.dd.DragDrop', { * Array of pixel locations the element will snap to if we specified a * vertical graduation/interval. This array is generated automatically * when you define a tick interval. - * @property yTicks - * @type int[] + * @property {[int]} yTicks */ yTicks: null, @@ -51168,17 +52595,15 @@ Ext.define('Ext.dd.DragDrop', { * region the linked element is. This is done in part to work around a * bug in some browsers that mis-report the mousedown if the previous * mouseup happened outside of the window. This property is set to true - * if outer handles are defined. + * if outer handles are defined. Defaults to false. * * @property hasOuterHandles * @type boolean - * @default false */ hasOuterHandles: false, /** * Code that executes immediately before the startDrag event - * @method b4StartDrag * @private */ b4StartDrag: function(x, y) { }, @@ -51186,7 +52611,6 @@ Ext.define('Ext.dd.DragDrop', { /** * Abstract method called after a drag/drop object is clicked * and the drag or mousedown time thresholds have beeen met. - * @method startDrag * @param {int} X click location * @param {int} Y click location */ @@ -51194,7 +52618,6 @@ Ext.define('Ext.dd.DragDrop', { /** * Code that executes immediately before the onDrag event - * @method b4Drag * @private */ b4Drag: function(e) { }, @@ -51202,7 +52625,6 @@ Ext.define('Ext.dd.DragDrop', { /** * Abstract method called during the onMouseMove event while dragging an * object. - * @method onDrag * @param {Event} e the mousemove event */ onDrag: function(e) { /* override this */ }, @@ -51210,9 +52632,8 @@ Ext.define('Ext.dd.DragDrop', { /** * Abstract method called when this element fist begins hovering over * another DragDrop obj - * @method onDragEnter * @param {Event} e the mousemove event - * @param {String|DragDrop[]} id In POINT mode, the element + * @param {String/[DragDrop]} id In POINT mode, the element * id this is hovering over. In INTERSECT mode, an array of one or more * dragdrop items being hovered over. */ @@ -51220,7 +52641,6 @@ Ext.define('Ext.dd.DragDrop', { /** * Code that executes immediately before the onDragOver event - * @method b4DragOver * @private */ b4DragOver: function(e) { }, @@ -51228,7 +52648,6 @@ Ext.define('Ext.dd.DragDrop', { /** * Abstract method called when this element is hovering over another * DragDrop obj - * @method onDragOver * @param {Event} e the mousemove event * @param {String|DragDrop[]} id In POINT mode, the element * id this is hovering over. In INTERSECT mode, an array of dd items @@ -51238,16 +52657,14 @@ Ext.define('Ext.dd.DragDrop', { /** * Code that executes immediately before the onDragOut event - * @method b4DragOut * @private */ b4DragOut: function(e) { }, /** * Abstract method called when we are no longer hovering over an element - * @method onDragOut * @param {Event} e the mousemove event - * @param {String|DragDrop[]} id In POINT mode, the element + * @param {String/[DragDrop]} id In POINT mode, the element * id this was hovering over. In INTERSECT mode, an array of dd items * that the mouse is no longer over. */ @@ -51255,7 +52672,6 @@ Ext.define('Ext.dd.DragDrop', { /** * Code that executes immediately before the onDragDrop event - * @method b4DragDrop * @private */ b4DragDrop: function(e) { }, @@ -51263,9 +52679,8 @@ Ext.define('Ext.dd.DragDrop', { /** * Abstract method called when this item is dropped on another DragDrop * obj - * @method onDragDrop * @param {Event} e the mouseup event - * @param {String|DragDrop[]} id In POINT mode, the element + * @param {String/[DragDrop]} id In POINT mode, the element * id this was dropped on. In INTERSECT mode, an array of dd items this * was dropped on. */ @@ -51274,43 +52689,37 @@ Ext.define('Ext.dd.DragDrop', { /** * Abstract method called when this item is dropped on an area with no * drop target - * @method onInvalidDrop * @param {Event} e the mouseup event */ onInvalidDrop: function(e) { /* override this */ }, /** * Code that executes immediately before the endDrag event - * @method b4EndDrag * @private */ b4EndDrag: function(e) { }, /** - * Fired when we are done dragging the object - * @method endDrag + * Called when we are done dragging the object * @param {Event} e the mouseup event */ endDrag: function(e) { /* override this */ }, /** * Code executed immediately before the onMouseDown event - * @method b4MouseDown * @param {Event} e the mousedown event * @private */ b4MouseDown: function(e) { }, /** - * Event handler that fires when a drag/drop obj gets a mousedown - * @method onMouseDown + * Called when a drag/drop obj gets a mousedown * @param {Event} e the mousedown event */ onMouseDown: function(e) { /* override this */ }, /** - * Event handler that fires when a drag/drop obj gets a mouseup - * @method onMouseUp + * Called when a drag/drop obj gets a mouseup * @param {Event} e the mouseup event */ onMouseUp: function(e) { /* override this */ }, @@ -51318,13 +52727,12 @@ Ext.define('Ext.dd.DragDrop', { /** * Override the onAvailable method to do what is needed after the initial * position was determined. - * @method onAvailable */ onAvailable: function () { }, /** - * Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}). + * Provides default constraint padding to "constrainTo" elements (defaults to `{left:0, right:0, top:0, bottom:0}`). * @type Object */ defaultPadding: { @@ -51336,27 +52744,27 @@ Ext.define('Ext.dd.DragDrop', { /** * Initializes the drag drop object's constraints to restrict movement to a certain element. - * - * Usage: -
- * Or you can initalize it using the {@link Ext.core.Element} object: -- var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest", - { dragElId: "existingProxyDiv" }); - dd.startDrag = function(){ - this.constrainTo("parent-id"); - }; -
+ * + * Usage: + * + * var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest", + * { dragElId: "existingProxyDiv" }); + * dd.startDrag = function(){ + * this.constrainTo("parent-id"); + * }; + * + * Or you can initalize it using the {@link Ext.core.Element} object: + * + * Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, { + * startDrag : function(){ + * this.constrainTo("parent-id"); + * } + * }); + * * @param {Mixed} constrainTo The element to constrain to. * @param {Object/Number} pad (optional) Pad provides a way to specify "padding" of the constraints, - * and can be either a number for symmetrical padding (4 would be equal to {left:4, right:4, top:4, bottom:4}) or - * an object containing the sides to pad. For example: {right:10, bottom:10} + * and can be either a number for symmetrical padding (4 would be equal to `{left:4, right:4, top:4, bottom:4}`) or + * an object containing the sides to pad. For example: `{right:10, bottom:10}` * @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders) */ constrainTo : function(constrainTo, pad, inContent){ @@ -51393,7 +52801,6 @@ Ext.define('Ext.dd.DragDrop', { /** * Returns a reference to the linked element - * @method getEl * @return {HTMLElement} the html element */ getEl: function() { @@ -51408,7 +52815,6 @@ Ext.define('Ext.dd.DragDrop', { * Returns a reference to the actual element to drag. By default this is * the same as the html element, but it can be assigned to another * element. An example of this can be found in Ext.dd.DDProxy - * @method getDragEl * @return {HTMLElement} the html element */ getDragEl: function() { @@ -51418,10 +52824,9 @@ Ext.define('Ext.dd.DragDrop', { /** * Sets up the DragDrop object. Must be called in the constructor of any * Ext.dd.DragDrop subclass - * @method init - * @param id the id of the linked element + * @param {String} id the id of the linked element * @param {String} sGroup the group of related items - * @param {object} config configuration attributes + * @param {Object} config configuration attributes */ init: function(id, sGroup, config) { this.initTarget(id, sGroup, config); @@ -51432,13 +52837,11 @@ Ext.define('Ext.dd.DragDrop', { /** * Initializes Targeting functionality only... the object does not * get a mousedown handler. - * @method initTarget - * @param id the id of the linked element + * @param {String} id the id of the linked element * @param {String} sGroup the group of related items - * @param {object} config configuration attributes + * @param {Object} config configuration attributes */ initTarget: function(id, sGroup, config) { - // configuration attributes this.config = config || {}; @@ -51482,7 +52885,6 @@ Ext.define('Ext.dd.DragDrop', { * a DDProxy implentation will execute apply config on DDProxy, DD, and * DragDrop in order to get all of the parameters that are available in * each object. - * @method applyConfig */ applyConfig: function() { @@ -51497,7 +52899,6 @@ Ext.define('Ext.dd.DragDrop', { /** * Executed when the linked element is available - * @method handleOnAvailable * @private */ handleOnAvailable: function() { @@ -51506,13 +52907,12 @@ Ext.define('Ext.dd.DragDrop', { this.onAvailable(); }, - /** + /** * Configures the padding for the target zone in px. Effectively expands * (or reduces) the virtual object size for targeting calculations. * Supports css-style shorthand; if only one parameter is passed, all sides * will have that padding, and if only two are passed, the top and bottom * will have the first param, the left and right the second. - * @method setPadding * @param {int} iTop Top pad * @param {int} iRight Right pad * @param {int} iBot Bot pad @@ -51531,7 +52931,6 @@ Ext.define('Ext.dd.DragDrop', { /** * Stores the initial placement of the linked element. - * @method setInitPosition * @param {int} diffX the X offset, default 0 * @param {int} diffY the Y offset, default 0 */ @@ -51559,7 +52958,6 @@ Ext.define('Ext.dd.DragDrop', { /** * Sets the start position of the element. This is set when the obj * is initialized, the reset when a drag is started. - * @method setStartPosition * @param pos current position (from previous lookup) * @private */ @@ -51572,11 +52970,10 @@ Ext.define('Ext.dd.DragDrop', { }, /** - * Add this instance to a group of related drag/drop objects. All + * Adds this instance to a group of related drag/drop objects. All * instances belong to at least one group, and can belong to as many * groups as needed. - * @method addToGroup - * @param sGroup {string} the name of the group + * @param {String} sGroup the name of the group */ addToGroup: function(sGroup) { this.groups[sGroup] = true; @@ -51584,9 +52981,8 @@ Ext.define('Ext.dd.DragDrop', { }, /** - * Remove's this instance from the supplied interaction group - * @method removeFromGroup - * @param {string} sGroup The group to drop + * Removes this instance from the supplied interaction group + * @param {String} sGroup The group to drop */ removeFromGroup: function(sGroup) { if (this.groups[sGroup]) { @@ -51599,8 +52995,7 @@ Ext.define('Ext.dd.DragDrop', { /** * Allows you to specify that an element other than the linked element * will be moved with the cursor during a drag - * @method setDragElId - * @param id {string} the id of the element that will be used to initiate the drag + * @param {String} id the id of the element that will be used to initiate the drag */ setDragElId: function(id) { this.dragElId = id; @@ -51613,8 +53008,7 @@ Ext.define('Ext.dd.DragDrop', { * content area would normally start the drag operation. Use this method * to specify that an element inside of the content div is the element * that starts the drag operation. - * @method setHandleElId - * @param id {string} the id of the element that will be used to + * @param {String} id the id of the element that will be used to * initiate the drag. */ setHandleElId: function(id) { @@ -51628,8 +53022,7 @@ Ext.define('Ext.dd.DragDrop', { /** * Allows you to set an element outside of the linked element as a drag * handle - * @method setOuterHandleElId - * @param id the id of the element that will be used to initiate the drag + * @param {String} id the id of the element that will be used to initiate the drag */ setOuterHandleElId: function(id) { if (typeof id !== "string") { @@ -51642,8 +53035,7 @@ Ext.define('Ext.dd.DragDrop', { }, /** - * Remove all drag and drop hooks for this element - * @method unreg + * Removes all drag and drop hooks for this element */ unreg: function() { Ext.EventManager.un(this.id, "mousedown", this.handleMouseDown, this); @@ -51658,8 +53050,7 @@ Ext.define('Ext.dd.DragDrop', { /** * Returns true if this instance is locked, or the drag drop mgr is locked * (meaning that all drag/drop is disabled on the page.) - * @method isLocked - * @return {boolean} true if this obj or all drag/drop is locked, else + * @return {Boolean} true if this obj or all drag/drop is locked, else * false */ isLocked: function() { @@ -51667,8 +53058,7 @@ Ext.define('Ext.dd.DragDrop', { }, /** - * Fired when this object is clicked - * @method handleMouseDown + * Called when this object is clicked * @param {Event} e * @param {Ext.dd.DragDrop} oDD the clicked dd object (this dd obj) * @private @@ -51715,7 +53105,7 @@ Ext.define('Ext.dd.DragDrop', { * when clicked. This is designed to facilitate embedding links within a * drag handle that do something other than start the drag. * @method addInvalidHandleType - * @param {string} tagName the type of element to exclude + * @param {String} tagName the type of element to exclude */ addInvalidHandleType: function(tagName) { var type = tagName.toUpperCase(); @@ -51726,7 +53116,7 @@ Ext.define('Ext.dd.DragDrop', { * Lets you to specify an element id for a child of a drag handle * that should not initiate a drag * @method addInvalidHandleId - * @param {string} id the element id of the element you wish to ignore + * @param {String} id the element id of the element you wish to ignore */ addInvalidHandleId: function(id) { if (typeof id !== "string") { @@ -51737,8 +53127,7 @@ Ext.define('Ext.dd.DragDrop', { /** * Lets you specify a css class of elements that will not initiate a drag - * @method addInvalidHandleClass - * @param {string} cssClass the class of the elements you wish to ignore + * @param {String} cssClass the class of the elements you wish to ignore */ addInvalidHandleClass: function(cssClass) { this.invalidHandleClasses.push(cssClass); @@ -51746,8 +53135,7 @@ Ext.define('Ext.dd.DragDrop', { /** * Unsets an excluded tag name set by addInvalidHandleType - * @method removeInvalidHandleType - * @param {string} tagName the type of element to unexclude + * @param {String} tagName the type of element to unexclude */ removeInvalidHandleType: function(tagName) { var type = tagName.toUpperCase(); @@ -51757,8 +53145,7 @@ Ext.define('Ext.dd.DragDrop', { /** * Unsets an invalid handle id - * @method removeInvalidHandleId - * @param {string} id the id of the element to re-enable + * @param {String} id the id of the element to re-enable */ removeInvalidHandleId: function(id) { if (typeof id !== "string") { @@ -51769,8 +53156,7 @@ Ext.define('Ext.dd.DragDrop', { /** * Unsets an invalid css class - * @method removeInvalidHandleClass - * @param {string} cssClass the class of the element(s) you wish to + * @param {String} cssClass the class of the element(s) you wish to * re-enable */ removeInvalidHandleClass: function(cssClass) { @@ -51783,9 +53169,8 @@ Ext.define('Ext.dd.DragDrop', { /** * Checks the tag exclusion list to see if this click should be ignored - * @method isValidHandleChild * @param {HTMLElement} node the HTMLElement to evaluate - * @return {boolean} true if this is a valid tag type, false if not + * @return {Boolean} true if this is a valid tag type, false if not */ isValidHandleChild: function(node) { @@ -51810,9 +53195,8 @@ Ext.define('Ext.dd.DragDrop', { }, /** - * Create the array of horizontal tick marks if an interval was specified + * Creates the array of horizontal tick marks if an interval was specified * in setXConstraint(). - * @method setXTicks * @private */ setXTicks: function(iStartX, iTickSize) { @@ -51839,9 +53223,8 @@ Ext.define('Ext.dd.DragDrop', { }, /** - * Create the array of vertical tick marks if an interval was specified in + * Creates the array of vertical tick marks if an interval was specified in * setYConstraint(). - * @method setYTicks * @private */ setYTicks: function(iStartY, iTickSize) { @@ -51871,13 +53254,11 @@ Ext.define('Ext.dd.DragDrop', { * By default, the element can be dragged any place on the screen. Use * this method to limit the horizontal travel of the element. Pass in * 0,0 for the parameters if you want to lock the drag to the y axis. - * @method setXConstraint * @param {int} iLeft the number of pixels the element can move to the left * @param {int} iRight the number of pixels the element can move to the * right * @param {int} iTickSize optional parameter for specifying that the - * element - * should move iTickSize pixels at a time. + * element should move iTickSize pixels at a time. */ setXConstraint: function(iLeft, iRight, iTickSize) { this.leftConstraint = iLeft; @@ -51893,7 +53274,6 @@ Ext.define('Ext.dd.DragDrop', { /** * Clears any constraints applied to this instance. Also clears ticks * since they can't exist independent of a constraint at this time. - * @method clearConstraints */ clearConstraints: function() { this.constrainX = false; @@ -51903,7 +53283,6 @@ Ext.define('Ext.dd.DragDrop', { /** * Clears any tick interval defined for this instance - * @method clearTicks */ clearTicks: function() { this.xTicks = null; @@ -51916,7 +53295,6 @@ Ext.define('Ext.dd.DragDrop', { * By default, the element can be dragged any place on the screen. Set * this to limit the vertical travel of the element. Pass in 0,0 for the * parameters if you want to lock the drag to the x axis. - * @method setYConstraint * @param {int} iUp the number of pixels the element can move up * @param {int} iDown the number of pixels the element can move down * @param {int} iTickSize optional parameter for specifying that the @@ -51935,8 +53313,7 @@ Ext.define('Ext.dd.DragDrop', { }, /** - * resetConstraints must be called if you manually reposition a dd element. - * @method resetConstraints + * Must be called if you manually reposition a dd element. * @param {boolean} maintainOffset */ resetConstraints: function() { @@ -51970,7 +53347,6 @@ Ext.define('Ext.dd.DragDrop', { * Normally the drag element is moved pixel by pixel, but we can specify * that it move a number of pixels at a time. This method resolves the * location when we have it set up like this. - * @method getTick * @param {int} val where we want to place the object * @param {int[]} tickArray sorted array of valid points * @return {int} the closest tick @@ -52003,7 +53379,6 @@ Ext.define('Ext.dd.DragDrop', { /** * toString method - * @method toString * @return {string} string representation of the dd obj */ toString: function() { @@ -52011,6 +53386,7 @@ Ext.define('Ext.dd.DragDrop', { } }); + /* * This is a derivative of the similarly named class in the YUI Library. * The original license: @@ -52025,17 +53401,18 @@ Ext.define('Ext.dd.DragDrop', { * A DragDrop implementation where the linked element follows the * mouse cursor during a drag. * @extends Ext.dd.DragDrop - * @constructor - * @param {String} id the id of the linked element - * @param {String} sGroup the group of related DragDrop items - * @param {object} config an object containing configurable attributes - * Valid properties for DD: - * scroll */ - Ext.define('Ext.dd.DD', { extend: 'Ext.dd.DragDrop', requires: ['Ext.dd.DragDropManager'], + + /** + * Creates new DD instance. + * @param {String} id the id of the linked element + * @param {String} sGroup the group of related DragDrop items + * @param {object} config an object containing configurable attributes. + * Valid properties for DD: scroll + */ constructor: function(id, sGroup, config) { if (id) { this.init(id, sGroup, config); @@ -52338,6 +53715,7 @@ Ext.define('Ext.dd.DD', { /** * @class Ext.dd.DDProxy + * @extends Ext.dd.DD * A DragDrop implementation that inserts an empty, bordered div into * the document that follows the cursor during drag operations. At the time of * the click, the frame div is resized to the dimensions of the linked html @@ -52346,14 +53724,6 @@ Ext.define('Ext.dd.DD', { * References to the "frame" element refer to the single proxy element that * was created to be dragged in place of all DDProxy elements on the * page. - * - * @extends Ext.dd.DD - * @constructor - * @param {String} id the id of the linked html element - * @param {String} sGroup the group of related DragDrop objects - * @param {object} config an object containing configurable attributes - * Valid properties for DDProxy in addition to those in DragDrop: - * resizeFrame, centerFrame, dragElId */ Ext.define('Ext.dd.DDProxy', { extend: 'Ext.dd.DD', @@ -52361,13 +53731,22 @@ Ext.define('Ext.dd.DDProxy', { statics: { /** * The default drag frame div id - * @property Ext.dd.DDProxy.dragElId - * @type String * @static */ dragElId: "ygddfdiv" }, + /** + * Creates new DDProxy. + * @param {String} id the id of the linked html element + * @param {String} sGroup the group of related DragDrop objects + * @param {object} config an object containing configurable attributes. + * Valid properties for DDProxy in addition to those in DragDrop: + * + * - resizeFrame + * - centerFrame + * - dragElId + */ constructor: function(id, sGroup, config) { if (id) { this.init(id, sGroup, config); @@ -52541,9 +53920,6 @@ Ext.define('Ext.dd.DDProxy', { * @class Ext.dd.DragSource * @extends Ext.dd.DDProxy * A simple class that provides the basic implementation needed to make any element draggable. - * @constructor - * @param {Mixed} el The container element - * @param {Object} config */ Ext.define('Ext.dd.DragSource', { extend: 'Ext.dd.DDProxy', @@ -52583,6 +53959,12 @@ Ext.define('Ext.dd.DragSource', { */ repairHighlightColor: 'c3daf9', + /** + * Creates new drag-source. + * @constructor + * @param {Mixed} el The container element + * @param {Object} config (optional) Config object. + */ constructor: function(el, config) { this.el = Ext.get(el); if(!this.dragData){ @@ -52859,6 +54241,7 @@ Ext.define('Ext.dd.DragSource', { * drag event has begun. The drag cannot be canceled from this function. * @param {Number} x The x position of the click on the dragged object * @param {Number} y The y position of the click on the dragged object + * @method */ onStartDrag: Ext.emptyFn, @@ -53083,9 +54466,6 @@ var resultsPanel = Ext.create('Ext.panel.Panel', { * content area. *- Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, { - startDrag : function(){ - this.constrainTo("parent-id"); - } - }); -Using these techniques, as long as the layout is chosen and configured correctly, an application may have any level of * nested containment, all dynamically sized according to configuration, the user's preference and available browser size.
- * @constructor - * @param {Object} config The config object - * @xtype panel */ Ext.define('Ext.panel.Panel', { extend: 'Ext.panel.AbstractPanel', @@ -53095,7 +54475,8 @@ Ext.define('Ext.panel.Panel', { 'Ext.util.KeyMap', 'Ext.panel.DD', 'Ext.XTemplate', - 'Ext.layout.component.Dock' + 'Ext.layout.component.Dock', + 'Ext.util.Memento' ], alias: 'widget.panel', alternateClassName: 'Ext.Panel', @@ -53185,6 +54566,12 @@ Ext.define('Ext.panel.Panel', { */ floatable: true, + /** + * @cfg {Mixed} overlapHeader + * True to overlap the header in a panel over the framing of the panel itself. This is needed when frame:true (and is done automatically for you). Otherwise it is undefined. + * If you manually add rounded corners to a panel header which does not have frame:true, this will need to be set to true. + */ + /** * @cfg {Boolean} collapsible *True to make the panel collapsible and have an expand/collapse toggle Tool added into @@ -53299,36 +54686,81 @@ tools:[{ */ + /** + * @cfg {String} title + * The title text to be used to display in the {@link Ext.panel.Header panel header} (defaults to ''). + * When a `title` is specified the {@link Ext.panel.Header} will automatically be created and displayed unless + * {@link #preventHeader} is set to `true`. + */ initComponent: function() { var me = this, cls; me.addEvents( - /** - * @event titlechange - * Fires after the Panel title has been set or changed. - * @param {Ext.panel.Panel} p the Panel which has been resized. - * @param {String} newTitle The new title. - * @param {String} oldTitle The previous panel title. - */ + /** + * @event beforeexpand + * Fires before this panel is expanded. Return false to prevent the expand. + * @param {Ext.panel.Panel} p The Panel being expanded. + * @param {Boolean} animate True if the expand is animated, else false. + */ + "beforeexpand", + + /** + * @event beforecollapse + * Fires before this panel is collapsed. Return false to prevent the collapse. + * @param {Ext.panel.Panel} p The Panel being collapsed. + * @param {String} direction. The direction of the collapse. One of
-
+ *
- Ext.Component.DIRECTION_TOP + *
- Ext.Component.DIRECTION_RIGHT + *
- Ext.Component.DIRECTION_BOTTOM + *
- Ext.Component.DIRECTION_LEFT
The alignment of any buttons added to this panel. Valid values are 'right', + * 'left' and 'center' (defaults to 'right' for buttons/fbar, 'left' for other toolbar types).
+ *NOTE: The newer way to specify toolbars is to use the dockedItems config, and + * instead of buttonAlign you would add the layout: { pack: 'start' | 'center' | 'end' } + * option to the dockedItem config.
+ */ /** * @cfg {Object/Array} tbar @@ -53502,7 +54951,7 @@ is equivalent to /** * @cfg {Object/Array} buttons -Convenience method used for adding buttons docked to the bottom right of the panel. This is a +Convenience method used for adding buttons docked to the bottom of the panel. This is a synonym for the {@link #fbar} config. buttons: [ @@ -53514,6 +54963,7 @@ is equivalent to dockedItems: [{ xtype: 'toolbar', dock: 'bottom', + ui: 'footer', defaults: {minWidth: {@link #minButtonWidth}}, items: [ { xtype: 'component', flex: 1 }, @@ -53534,7 +54984,7 @@ each of the buttons in the buttons toolbar. /** * @cfg {Object/Array} fbar -Convenience method used for adding items to the bottom right of the panel. Short for Footer Bar. +Convenience method used for adding items to the bottom of the panel. Short for Footer Bar. fbar: [ { type: 'button', text: 'Button 1' } @@ -53545,6 +54995,7 @@ is equivalent to dockedItems: [{ xtype: 'toolbar', dock: 'bottom', + ui: 'footer', defaults: {minWidth: {@link #minButtonWidth}}, items: [ { xtype: 'component', flex: 1 }, @@ -53558,7 +55009,7 @@ each of the buttons in the fbar. * @markdown */ if (me.fbar) { - fbar = initToolbar(me.fbar, 'bottom'); + fbar = initToolbar(me.fbar, 'bottom', true); // only we useButtonAlign fbar.ui = 'footer'; // Apply the minButtonWidth config to buttons in the toolbar @@ -53574,12 +55025,7 @@ each of the buttons in the fbar. }; } - fbar = me.addDocked(fbar)[0]; - fbar.insert(0, { - flex: 1, - xtype: 'component', - focusable: false - }); + me.addDocked(fbar); me.fbar = null; } @@ -53588,19 +55034,19 @@ each of the buttons in the fbar. * * Convenience method. Short for 'Left Bar' (left-docked, vertical toolbar). * - * lbar: [ - * { xtype: 'button', text: 'Button 1' } - * ] + * lbar: [ + * { xtype: 'button', text: 'Button 1' } + * ] * * is equivalent to * - * dockedItems: [{ - * xtype: 'toolbar', - * dock: 'left', - * items: [ - * { xtype: 'button', text: 'Button 1' } - * ] - * }] + * dockedItems: [{ + * xtype: 'toolbar', + * dock: 'left', + * items: [ + * { xtype: 'button', text: 'Button 1' } + * ] + * }] * * @markdown */ @@ -53614,19 +55060,19 @@ each of the buttons in the fbar. * * Convenience method. Short for 'Right Bar' (right-docked, vertical toolbar). * - * rbar: [ - * { xtype: 'button', text: 'Button 1' } - * ] + * rbar: [ + * { xtype: 'button', text: 'Button 1' } + * ] * * is equivalent to * - * dockedItems: [{ - * xtype: 'toolbar', - * dock: 'right', - * items: [ - * { xtype: 'button', text: 'Button 1' } - * ] - * }] + * dockedItems: [{ + * xtype: 'toolbar', + * dock: 'right', + * items: [ + * { xtype: 'button', text: 'Button 1' } + * ] + * }] * * @markdown */ @@ -53719,35 +55165,23 @@ each of the buttons in the fbar. // Dock the header/title me.updateHeader(); - // If initially collapsed, collapsed flag must indicate true current state at this point. - // Do collapse after the first time the Panel's structure has been laid out. + // Call to super after adding the header, to prevent an unnecessary re-layout + me.callParent(arguments); + }, + + afterRender: function() { + var me = this; + me.callParent(arguments); if (me.collapsed) { me.collapsed = false; - topContainer = me.findLayoutController(); - if (!me.hidden && topContainer) { - topContainer.on({ - afterlayout: function() { - me.collapse(null, false, true); - }, - single: true - }); - } else { - me.afterComponentLayout = function() { - delete me.afterComponentLayout; - Ext.getClass(me).prototype.afterComponentLayout.apply(me, arguments); - me.collapse(null, false, true); - }; - } + me.collapse(null, false, true); } - - // Call to super after adding the header, to prevent an unnecessary re-layout - me.callParent(arguments); }, /** * Create, hide, or show the header component as appropriate based on the current config. * @private - * @param {Boolean} force True to force the the header to be created + * @param {Boolean} force True to force the header to be created */ updateHeader: function(force) { var me = this, @@ -53836,7 +55270,7 @@ each of the buttons in the fbar. * Collapses the panel body so that the body becomes hidden. Docked Components parallel to the * border towards which the collapse takes place will remain visible. Fires the {@link #beforecollapse} event which will * cancel the collapse action if it returns false. - * @param {Number} direction. The direction to collapse towards. Must be one of-
+ * @param {String} direction. The direction to collapse towards. Must be one of
- Ext.Component.DIRECTION_TOP *
- Ext.Component.DIRECTION_RIGHT *
- Ext.Component.DIRECTION_BOTTOM @@ -53984,13 +55418,13 @@ each of the buttons in the fbar. } frameInfo = reExpander.getFrameInfo(); - + //get the size newSize = reExpander[getDimension]() + (frameInfo ? frameInfo[direction] : 0); //and remove reExpander.removeClsWithUI(me.collapsedCls); - reExpander.removeClsWithUI(me.collapsedCls + '-' + reExpander.dock); + reExpander.removeClsWithUI(me.collapsedCls + '-' + reExpander.dock); if (me.border && (!me.frame || (me.frame && Ext.supports.CSS3BorderRadius))) { reExpander.removeClsWithUI(me.collapsedCls + '-border-' + reExpander.dock); } @@ -54013,12 +55447,14 @@ each of the buttons in the fbar. cls: me.baseCls + '-collapsed-placeholder ' + ' ' + Ext.baseCSSPrefix + 'docked ' + me.baseCls + '-' + me.ui + '-collapsed', renderTo: me.el }; - reExpander[(reExpander.orientation == 'horizontal') ? 'tools' : 'items'] = [{ - xtype: 'tool', - type: 'expand-' + me.expandDirection, - handler: me.toggleCollapse, - scope: me - }]; + if (!me.hideCollapseTool) { + reExpander[(reExpander.orientation == 'horizontal') ? 'tools' : 'items'] = [{ + xtype: 'tool', + type: 'expand-' + me.expandDirection, + handler: me.toggleCollapse, + scope: me + }]; + } // Capture the size of the re-expander. // For vertical headers in IE6 and IE7, this will be sized by a CSS rule in _panel.scss @@ -54047,10 +55483,18 @@ each of the buttons in the fbar. // Animate to the new size anim.to[collapseDimension] = newSize; + // When we collapse a panel, the panel is in control of one dimension (depending on + // collapse direction) and sets that on the component. We must restore the user's + // original value (including non-existance) when we expand. Using this technique, we + // mimic setCalculatedSize for the dimension we do not control and setSize for the + // one we do (only while collapsed). + if (!me.collapseMemento) { + me.collapseMemento = new Ext.util.Memento(me); + } + me.collapseMemento.capture(['width', 'height', 'minWidth', 'minHeight']); + // Remove any flex config before we attempt to collapse. me.savedFlex = me.flex; - me.savedMinWidth = me.minWidth; - me.savedMinHeight = me.minHeight; me.minWidth = 0; me.minHeight = 0; delete me.flex; @@ -54072,8 +55516,7 @@ each of the buttons in the fbar. i = 0, l = me.hiddenDocked.length; - me.minWidth = me.savedMinWidth; - me.minHeight = me.savedMinHeight; + me.collapseMemento.restore(['minWidth', 'minHeight']); me.body.hide(); for (; i < l; i++) { @@ -54093,6 +55536,13 @@ each of the buttons in the fbar. me.resizer.disable(); } + // Now we can restore the dimension we don't control to its original state + if (Ext.Component.VERTICAL_DIRECTION.test(me.expandDirection)) { + me.collapseMemento.restore('width'); + } else { + me.collapseMemento.restore('height'); + } + // If me Panel was configured with a collapse tool in its header, flip it's type if (me.collapseTool) { me.collapseTool.setType('expand-' + me.expandDirection); @@ -54115,16 +55565,17 @@ each of the buttons in the fbar. * @return {Ext.panel.Panel} this */ expand: function(animate) { - if (!this.collapsed || this.fireEvent('beforeexpand', this, animate) === false) { + var me = this; + if (!me.collapsed || me.fireEvent('beforeexpand', me, animate) === false) { return false; } - var me = this, - i = 0, + + var i = 0, l = me.hiddenDocked.length, direction = me.expandDirection, height = me.getHeight(), width = me.getWidth(), - pos, anim, satisfyJSLint; + pos, anim; // Disable toggle tool during animated expand if (animate && me.collapseTool) { @@ -54241,7 +55692,7 @@ each of the buttons in the fbar. if (animate) { me.animate(anim); } else { - me.setSize(anim.to.width, anim.to.height); + me.setCalculatedSize(anim.to.width, anim.to.height); if (anim.to.x) { me.setLeft(anim.to.x); } @@ -54256,6 +55707,14 @@ each of the buttons in the fbar. afterExpand: function(animated) { var me = this; + + if (me.collapseMemento) { + // collapse has to use setSize (since it takes control of the component's size in + // collapsed mode) and so we restore the original size now that the component has + // been expanded. + me.collapseMemento.restoreAll(); + } + me.setAutoScroll(me.initialConfig.autoScroll); // Restored to a calculated flex. Delete the set width and height properties so that flex works from now on. @@ -54269,7 +55728,9 @@ each of the buttons in the fbar. // Reinstate layout out after Panel has re-expanded delete me.suspendLayout; if (animated && me.ownerCt) { - me.ownerCt.doLayout(); + // IE 6 has an intermittent repaint issue in this case so give + // it a little extra time to catch up before laying out. + Ext.defer(me.ownerCt.doLayout, Ext.isIE6 ? 1 : 0, me); } if (me.resizer) { @@ -54493,9 +55954,6 @@ Ext.define('Ext.layout.component.Tip', { * This is the base class for {@link Ext.tip.QuickTip} and {@link Ext.tip.ToolTip} that provides the basic layout and * positioning that all tip-based classes require. This class can be used directly for simple, statically-positioned * tips that are displayed programmatically, or it can be extended to provide custom tip implementations. - * @constructor - * Create a new Tip - * @param {Object} config The configuration options * @xtype tip */ Ext.define('Ext.tip.Tip', { @@ -54552,6 +56010,23 @@ Ext.define('Ext.tip.Tip', { focusOnToFront: false, componentLayout: 'tip', + /** + * @cfg {String} closeAction + *
'{@link #destroy}':+ * {@link #destroy remove} the window from the DOM and {@link Ext.Component#destroy destroy} + * it and all descendant Components. The window will not be available to be + * redisplayed via the {@link #show} method. + *
+ * '{@link #hide}': Default+ * {@link #hide} the window by setting visibility to hidden and applying negative offsets. + * The window will be available to be redisplayed via the {@link #show} method. + *
+ * - dismissDelay - *
- hideDelay - *
- maxWidth - *
- minWidth - *
- showDelay - *
- trackMouse
- autoHide - *
- cls - *
- dismissDelay (overrides singleton value) - *
- target (required) - *
- text (required) - *
- title - *
- width
- hide: Specifying "user" is equivalent to setting autoHide = false. Any other value will be the - * same as autoHide = true. - *
- qclass: A CSS class to be applied to the quick tip (equivalent to the 'cls' target element config). - *
- qtip (required): The quick tip text (equivalent to the 'text' target element config). - *
- qtitle: The quick tip title (equivalent to the 'title' target element config). - *
- qwidth: The quick tip width (equivalent to the 'width' target element config).
- {@link Ext.data.reader.Reader Reader} - used by any subclass of {@link Ext.data.proxy.Server ServerProxy} to read a response *
-
*
The action to take when the close header tool is clicked: + *
+ *-
+ *
Note: This behavior has changed! setting *does* affect the {@link #close} method + * which will invoke the approriate closeAction. + */ closeAction: 'hide', ariaRole: 'tooltip', @@ -54625,9 +56100,6 @@ tip.showBy('my-el', 'tl-tr'); }); /** - * @class Ext.tip.ToolTip - * @extends Ext.tip.Tip - * * ToolTip is a {@link Ext.tip.Tip} implementation that handles the common case of displaying a * tooltip when hovering over a certain element or elements on the page. It allows fine-grained * control over the tooltip's alignment relative to the target element or mouse, and the timing @@ -54640,7 +56112,7 @@ tip.showBy('my-el', 'tl-tr'); * convenient way of automatically populating and configuring a tooltip based on specific DOM * attributes of each target element. * - * ## Basic Example + * # Basic Example * * var tip = Ext.create('Ext.tip.ToolTip', { * target: 'clearButton', @@ -54649,7 +56121,7 @@ tip.showBy('my-el', 'tl-tr'); * * {@img Ext.tip.ToolTip/Ext.tip.ToolTip1.png Basic Ext.tip.ToolTip} * - * ## Delegation + * # Delegation * * In addition to attaching a ToolTip to a single element, you can also use delegation to attach * one ToolTip to many elements under a common parent. This is more efficient than creating many @@ -54661,15 +56133,43 @@ tip.showBy('my-el', 'tl-tr'); * of the ToolTip based on each delegate element; you can do this by implementing a custom * listener for the {@link #beforeshow} event. Example: * - * var myGrid = Ext.create('Ext.grid.GridPanel', gridConfig); - * myGrid.on('render', function(grid) { - * var view = grid.getView(); // Capture the grid's view. - * grid.tip = Ext.create('Ext.tip.ToolTip', { - * target: view.el, // The overall target element. - * delegate: view.itemSelector, // Each grid row causes its own seperate show and hide. - * trackMouse: true, // Moving within the row should not hide the tip. - * renderTo: Ext.getBody(), // Render immediately so that tip.body can be referenced prior to the first show. - * listeners: { // Change content dynamically depending on which element triggered the show. + * var store = Ext.create('Ext.data.ArrayStore', { + * fields: ['company', 'price', 'change'], + * data: [ + * ['3m Co', 71.72, 0.02], + * ['Alcoa Inc', 29.01, 0.42], + * ['Altria Group Inc', 83.81, 0.28], + * ['American Express Company', 52.55, 0.01], + * ['American International Group, Inc.', 64.13, 0.31], + * ['AT&T Inc.', 31.61, -0.48] + * ] + * }); + * + * var grid = Ext.create('Ext.grid.Panel', { + * title: 'Array Grid', + * store: store, + * columns: [ + * {text: 'Company', flex: 1, dataIndex: 'company'}, + * {text: 'Price', width: 75, dataIndex: 'price'}, + * {text: 'Change', width: 75, dataIndex: 'change'} + * ], + * height: 200, + * width: 400, + * renderTo: Ext.getBody() + * }); + * + * grid.getView().on('render', function(view) { + * view.tip = Ext.create('Ext.tip.ToolTip', { + * // The overall target element. + * target: view.el, + * // Each grid row causes its own seperate show and hide. + * delegate: view.itemSelector, + * // Moving within the row should not hide the tip. + * trackMouse: true, + * // Render immediately so that tip.body can be referenced prior to the first show. + * renderTo: Ext.getBody(), + * listeners: { + * // Change content dynamically depending on which element triggered the show. * beforeshow: function updateTipBody(tip) { * tip.update('Over company "' + view.getRecord(tip.triggerElement).get('company') + '"'); * } @@ -54679,32 +56179,27 @@ tip.showBy('my-el', 'tl-tr'); * * {@img Ext.tip.ToolTip/Ext.tip.ToolTip2.png Ext.tip.ToolTip with delegation} * - * ## Alignment + * # Alignment * * The following configuration properties allow control over how the ToolTip is aligned relative to * the target element and/or mouse pointer: * - * - {@link #anchor} - * - {@link #anchorToTarget} - * - {@link #anchorOffset} - * - {@link #trackMouse} - * - {@link #mouseOffset} + * - {@link #anchor} + * - {@link #anchorToTarget} + * - {@link #anchorOffset} + * - {@link #trackMouse} + * - {@link #mouseOffset} * - * ## Showing/Hiding + * # Showing/Hiding * * The following configuration properties allow control over how and when the ToolTip is automatically * shown and hidden: * - * - {@link #autoHide} - * - {@link #showDelay} - * - {@link #hideDelay} - * - {@link #dismissDelay} + * - {@link #autoHide} + * - {@link #showDelay} + * - {@link #hideDelay} + * - {@link #dismissDelay} * - * @constructor - * Create a new ToolTip instance - * @param {Object} config The configuration options - * @xtype tooltip - * @markdown * @docauthor Jason Johnston
* - * TODO: Update these docs to explain about the sortable and filterable mixins. - *{@link #delegate}- * option to cause selected child elements of the{@link #target}+ * When a ToolTip is configured with the `{@link #delegate}` + * option to cause selected child elements of the `{@link #target}` * Element to each trigger a seperate show event, this property is set to * the DOM element which triggered the show. * @type DOMElement @@ -54725,8 +56220,8 @@ Ext.define('Ext.tip.ToolTip', { */ /** * @cfg {Boolean} autoHide True to automatically hide the tooltip after the - * mouse exits the target element or after the{@link #dismissDelay}- * has expired if set (defaults to true). If{@link #closable} = true+ * mouse exits the target element or after the `{@link #dismissDelay}` + * has expired if set (defaults to true). If `{@link #closable} = true` * a close tool button will be rendered into the tooltip header. */ /** @@ -54765,48 +56260,35 @@ Ext.define('Ext.tip.ToolTip', { /** * @cfg {Boolean} anchorToTarget True to anchor the tooltip to the target * element, false to anchor it relative to the mouse coordinates (defaults - * to true). WhenanchorToTargetis true, use - *{@link #defaultAlign}to control tooltip alignment to the - * target element. WhenanchorToTargetis false, use - *{@link #anchorPosition}instead to control alignment. + * to true). When `anchorToTarget` is true, use + * `{@link #defaultAlign}` to control tooltip alignment to the + * target element. When `anchorToTarget` is false, use + * `{@link #anchorPosition}` instead to control alignment. */ anchorToTarget: true, /** * @cfg {Number} anchorOffset A numeric pixel value used to offset the * default position of the anchor arrow (defaults to 0). When the anchor - * position is on the top or bottom of the tooltip,anchorOffset+ * position is on the top or bottom of the tooltip, `anchorOffset` * will be used as a horizontal offset. Likewise, when the anchor position - * is on the left or right side,anchorOffsetwill be used as + * is on the left or right side, `anchorOffset` will be used as * a vertical offset. */ anchorOffset: 0, /** - * @cfg {String} delegateOptional. A {@link Ext.DomQuery DomQuery} - * selector which allows selection of individual elements within the - *
- *{@link #target}element to trigger showing and hiding the - * ToolTip as the mouse moves within the target.When specified, the child element of the target which caused a show - * event is placed into the
- *{@link #triggerElement}property - * before the ToolTip is shown.This may be useful when a Component has regular, repeating elements - * in it, each of which need a ToolTip which contains information specific - * to that element. For example:
+ * @cfg {String} delegate + * + * A {@link Ext.DomQuery DomQuery} selector which allows selection of individual elements within the + * `{@link #target}` element to trigger showing and hiding the ToolTip as the mouse moves within the + * target. + * + * When specified, the child element of the target which caused a show event is placed into the + * `{@link #triggerElement}` property before the ToolTip is shown. + * + * This may be useful when a Component has regular, repeating elements in it, each of which need a + * ToolTip which contains information specific to that element. + * + * See the delegate example in class documentation of {@link Ext.tip.ToolTip}. */ // private @@ -54996,9 +56478,6 @@ myGrid.on('render', function(grid) { me.tipAnchor = me.anchor.charAt(0); } else { m = me.defaultAlign.match(/^([a-z]+)-([a-z]+)(\?)?$/); - if (!m) { - Ext.Error.raise('The AnchorTip.defaultAlign value "' + me.defaultAlign + '" is invalid.'); - } me.tipAnchor = m[1].charAt(0); } @@ -55311,9 +56790,6 @@ myGrid.on('render', function(grid) { * @extends Ext.tip.ToolTip * A specialized tooltip class for tooltips that can be specified in markup and automatically managed by the global * {@link Ext.tip.QuickTipManager} instance. See the QuickTipManager class header for additional usage details and examples. - * @constructor - * Create a new Tip - * @param {Object} config The configuration options * @xtype quicktip */ Ext.define('Ext.tip.QuickTip', { @@ -55574,84 +57050,95 @@ Ext.define('Ext.tip.QuickTip', { /** * @class Ext.tip.QuickTipManager - *-var myGrid = Ext.create('Ext.grid.GridPanel', gridConfig); -myGrid.on('render', function(grid) { - var view = grid.getView(); // Capture the grid's view. - grid.tip = Ext.create('Ext.tip.ToolTip', { - target: view.el, // The overall target element. - delegate: view.itemSelector, // Each grid row causes its own seperate show and hide. - trackMouse: true, // Moving within the row should not hide the tip. - renderTo: Ext.getBody(), // Render immediately so that tip.body can be referenced prior to the first show. - listeners: { // Change content dynamically depending on which element triggered the show. - beforeshow: function(tip) { - tip.update('Over Record ID ' + view.getRecord(tip.triggerElement).id); - } - } - }); -}); - *Provides attractive and customizable tooltips for any element. The QuickTips + * + * Provides attractive and customizable tooltips for any element. The QuickTips * singleton is used to configure and manage tooltips globally for multiple elements * in a generic manner. To create individual tooltips with maximum customizability, - * you should consider either {@link Ext.tip.Tip} or {@link Ext.tip.ToolTip}.
- *Quicktips can be configured via tag attributes directly in markup, or by - * registering quick tips programmatically via the {@link #register} method.
- *The singleton's instance of {@link Ext.tip.QuickTip} is available via + * you should consider either {@link Ext.tip.Tip} or {@link Ext.tip.ToolTip}. + * + * Quicktips can be configured via tag attributes directly in markup, or by + * registering quick tips programmatically via the {@link #register} method. + * + * The singleton's instance of {@link Ext.tip.QuickTip} is available via * {@link #getQuickTip}, and supports all the methods, and all the all the * configuration properties of Ext.tip.QuickTip. These settings will apply to all - * tooltips shown by the singleton.
- *Below is the summary of the configuration properties which can be used. - * For detailed descriptions see the config options for the {@link Ext.tip.QuickTip QuickTip} class
- *QuickTips singleton configs (all are optional)
- *- *Target element configs (optional unless otherwise noted)
- *- *Here is an example showing how some of these config options could be used:
+ * tooltips shown by the singleton. + * + * Below is the summary of the configuration properties which can be used. + * For detailed descriptions see the config options for the {@link Ext.tip.QuickTip QuickTip} class + * + * ## QuickTips singleton configs (all are optional) + * + * - `dismissDelay` + * - `hideDelay` + * - `maxWidth` + * - `minWidth` + * - `showDelay` + * - `trackMouse` + * + * ## Target element configs (optional unless otherwise noted) + * + * - `autoHide` + * - `cls` + * - `dismissDelay` (overrides singleton value) + * - `target` (required) + * - `text` (required) + * - `title` + * - `width` + * + * Here is an example showing how some of these config options could be used: * * {@img Ext.tip.QuickTipManager/Ext.tip.QuickTipManager.png Ext.tip.QuickTipManager component} * * ## Code - * // Init the singleton. Any tag-based quick tips will start working. - * Ext.tip.QuickTipManager.init(); - * - * // Apply a set of config properties to the singleton - * Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), { - * maxWidth: 200, - * minWidth: 100, - * showDelay: 50 // Show 50ms after entering target - * }); - * - * // Create a small panel to add a quick tip to - * Ext.create('Ext.container.Container', { - * id: 'quickTipContainer', - * width: 200, - * height: 150, - * style: { - * backgroundColor:'#000000' - * }, - * renderTo: Ext.getBody() - * }); * - * - * // Manually register a quick tip for a specific element - * Ext.tip.QuickTipManager.register({ - * target: 'quickTipContainer', - * title: 'My Tooltip', - * text: 'This tooltip was added in code', - * width: 100, - * dismissDelay: 10000 // Hide after 10 seconds hover - * }); - - *To register a quick tip in markup, you simply add one or more of the valid QuickTip attributes prefixed with - * the ext: namespace. The HTML element itself is automatically set as the quick tip target. Here is the summary - * of supported attributes (optional unless otherwise noted):
- *Here is an example of configuring an HTML element to display a tooltip from markup:
- *
+ * // Init the singleton. Any tag-based quick tips will start working. + * Ext.tip.QuickTipManager.init(); + * + * // Apply a set of config properties to the singleton + * Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), { + * maxWidth: 200, + * minWidth: 100, + * showDelay: 50 // Show 50ms after entering target + * }); + * + * // Create a small panel to add a quick tip to + * Ext.create('Ext.container.Container', { + * id: 'quickTipContainer', + * width: 200, + * height: 150, + * style: { + * backgroundColor:'#000000' + * }, + * renderTo: Ext.getBody() + * }); + * + * + * // Manually register a quick tip for a specific element + * Ext.tip.QuickTipManager.register({ + * target: 'quickTipContainer', + * title: 'My Tooltip', + * text: 'This tooltip was added in code', + * width: 100, + * dismissDelay: 10000 // Hide after 10 seconds hover + * }); + * + * To register a quick tip in markup, you simply add one or more of the valid QuickTip attributes prefixed with + * the **data-** namespace. The HTML element itself is automatically set as the quick tip target. Here is the summary + * of supported attributes (optional unless otherwise noted): + * + * - `hide`: Specifying "user" is equivalent to setting autoHide = false. Any other value will be the same as autoHide = true. + * - `qclass`: A CSS class to be applied to the quick tip (equivalent to the 'cls' target element config). + * - `qtip (required)`: The quick tip text (equivalent to the 'text' target element config). + * - `qtitle`: The quick tip title (equivalent to the 'title' target element config). + * - `qwidth`: The quick tip width (equivalent to the 'width' target element config). + * + * Here is an example of configuring an HTML element to display a tooltip from markup: + * + * // Add a quick tip to an HTML button + * + * * @singleton */ Ext.define('Ext.tip.QuickTipManager', function() { @@ -55662,11 +57149,17 @@ Ext.define('Ext.tip.QuickTipManager', function() { requires: ['Ext.tip.QuickTip'], singleton: true, alternateClassName: 'Ext.QuickTips', + /** * Initialize the global QuickTips instance and prepare any quick tips. - * @param {Boolean} autoRender True to render the QuickTips container immediately to preload images. (Defaults to true) + * @param {Boolean} autoRender True to render the QuickTips container immediately to + * preload images. (Defaults to true) + * @param {Object} config An optional config object for the created QuickTip. By + * default, the {@link Ext.tip.QuickTip QuickTip} class is instantiated, but this can + * be changed by supplying an xtype property or a className property in this object. + * All other properties on this object are configuration for the created component. */ - init : function(autoRender){ + init : function (autoRender, config) { if (!tip) { if (!Ext.isReady) { Ext.onReady(function(){ @@ -55674,10 +57167,24 @@ Ext.define('Ext.tip.QuickTipManager', function() { }); return; } - tip = Ext.create('Ext.tip.QuickTip', { - disabled: disabled, - renderTo: autoRender !== false ? document.body : undefined - }); + + var tipConfig = Ext.apply({ disabled: disabled }, config), + className = tipConfig.className, + xtype = tipConfig.xtype; + + if (className) { + delete tipConfig.className; + } else if (xtype) { + className = 'widget.' + xtype; + delete tipConfig.xtype; + } + + if (autoRender !== false) { + tipConfig.renderTo = document.body; + + } + + tip = Ext.create(className || 'Ext.tip.QuickTip', tipConfig); } }, @@ -55772,21 +57279,21 @@ Ext.define('Ext.tip.QuickTipManager', function() { }()); /** * @class Ext.app.Application - * @constructor + * @extend Ext.app.Controller * * Represents an Ext JS 4 application, which is typically a single page app using a {@link Ext.container.Viewport Viewport}. * A typical Ext.app.Application might look like this: * - * Ext.application({ - name: 'MyApp', - launch: function() { - Ext.create('Ext.container.Viewport', { - items: { - html: 'My App' - } - }); - } - }); + * Ext.application({ + * name: 'MyApp', + * launch: function() { + * Ext.create('Ext.container.Viewport', { + * items: { + * html: 'My App' + * } + * }); + * } + * }); * * This does several things. First it creates a global variable called 'MyApp' - all of your Application's classes (such * as its Models, Views and Controllers) will reside under this single namespace, which drastically lowers the chances @@ -55803,15 +57310,15 @@ Ext.define('Ext.tip.QuickTipManager', function() { * might have Models and Controllers for Posts and Comments, and Views for listing, adding and editing Posts and Comments. * Here's how we'd tell our Application about all these things: * - * Ext.application({ - name: 'Blog', - models: ['Post', 'Comment'], - controllers: ['Posts', 'Comments'], - - launch: function() { - ... - } - }); + * Ext.application({ + * name: 'Blog', + * models: ['Post', 'Comment'], + * controllers: ['Posts', 'Comments'], + * + * launch: function() { + * ... + * } + * }); * * Note that we didn't actually list the Views directly in the Application itself. This is because Views are managed by * Controllers, so it makes sense to keep those dependencies there. The Application will load each of the specified @@ -55820,22 +57327,21 @@ Ext.define('Ext.tip.QuickTipManager', function() { * app/controller/Comments.js. In turn, each Controller simply needs to list the Views it uses and they will be * automatically loaded. Here's how our Posts controller like be defined: * - * Ext.define('MyApp.controller.Posts', { - extend: 'Ext.app.Controller', - views: ['posts.List', 'posts.Edit'], - - //the rest of the Controller here - }); + * Ext.define('MyApp.controller.Posts', { + * extend: 'Ext.app.Controller', + * views: ['posts.List', 'posts.Edit'], + * + * //the rest of the Controller here + * }); * * Because we told our Application about our Models and Controllers, and our Controllers about their Views, Ext JS will * automatically load all of our app files for us. This means we don't have to manually add script tags into our html * files whenever we add a new class, but more importantly it enables us to create a minimized build of our entire * application using the Ext JS 4 SDK Tools. * - * For more information about writing Ext JS 4 applications, please see the - * application architecture guide. + * For more information about writing Ext JS 4 applications, please see the + * [application architecture guide](#/guide/application_architecture). * - * @markdown * @docauthor Ed Spencer */ Ext.define('Ext.app.Application', { @@ -55851,7 +57357,7 @@ Ext.define('Ext.app.Application', { ], /** - * @cfg {Object} name The name of your application. This will also be the namespace for your views, controllers + * @cfg {String} name The name of your application. This will also be the namespace for your views, controllers * models and stores. Don't use spaces or special characters in the name. */ @@ -55878,10 +57384,15 @@ Ext.define('Ext.app.Application', { appFolder: 'app', /** - * @cfg {Boolean} autoCreateViewport Automatically loads and instantiates AppName.view.Viewport before firing the launch function. + * @cfg {Boolean} autoCreateViewport True to automatically load and instantiate AppName.view.Viewport + * before firing the launch function (defaults to false). */ - autoCreateViewport: true, + autoCreateViewport: false, + /** + * Creates new Application. + * @param {Object} config (optional) Config object. + */ constructor: function(config) { config = config || {}; Ext.apply(this, config); @@ -55900,8 +57411,8 @@ Ext.define('Ext.app.Application', { this.eventbus = Ext.create('Ext.app.EventBus'); - var controllers = this.controllers, - ln = controllers.length, + var controllers = Ext.Array.from(this.controllers), + ln = controllers && controllers.length, i, controller; this.controllers = Ext.create('Ext.util.MixedCollection'); @@ -56014,7 +57525,7 @@ Ext.define('Ext.app.Application', { /** * @class Ext.chart.Callout - * @ignore + * A mixin providing callout functionality for Ext.chart.series.Series. */ Ext.define('Ext.chart.Callout', { @@ -56329,13 +57840,13 @@ Ext.define('Ext.draw.CompositeSprite', { * Hides all sprites. If the first parameter of the method is true * then a redraw will be forced for each sprite. */ - hide: function(attrs) { + hide: function(redraw) { var i = 0, items = this.items, len = this.length; for (; i < len; i++) { - items[i].hide(); + items[i].hide(redraw); } return this; }, @@ -56344,13 +57855,13 @@ Ext.define('Ext.draw.CompositeSprite', { * Shows all sprites. If the first parameter of the method is true * then a redraw will be forced for each sprite. */ - show: function(attrs) { + show: function(redraw) { var i = 0, items = this.items, len = this.length; for (; i < len; i++) { - items[i].show(); + items[i].show(redraw); } return this; }, @@ -56469,7 +57980,10 @@ Ext.define('Ext.layout.component.Draw', { }); /** * @class Ext.chart.theme.Theme - * @ignore + * + * Provides chart theming. + * + * Used as mixins by Ext.chart.Chart. */ Ext.define('Ext.chart.theme.Theme', { @@ -56503,7 +58017,6 @@ Ext.define('Ext.chart.theme.Theme', { return; } } - Ext.Error.raise('No theme found named "' + theme + '"'); } } }, @@ -56749,9 +58262,12 @@ function() { * a handle to a mask instance from the chart object. The `chart.mask` element is a * `Ext.Panel`. * - * @constructor */ Ext.define('Ext.chart.Mask', { + /** + * Creates new Mask. + * @param {Object} config (optional) Config object. + */ constructor: function(config) { var me = this; @@ -56939,7 +58455,7 @@ Ext.define('Ext.chart.Mask', { * * Handles panning and zooming capabilities. * - * @ignore + * Used as mixin by Ext.chart.Chart. */ Ext.define('Ext.chart.Navigation', { @@ -57097,9 +58613,6 @@ Ext.define('Ext.chart.Shape', { } }); /** - * @class Ext.draw.Surface - * @extends Object - * * A Surface is an interface to render methods inside a draw {@link Ext.draw.Component}. * A Surface contains methods to render sprites, get bounding boxes of sprites, add * sprites to the canvas, initialize other graphic components, etc. One of the most used @@ -57121,7 +58634,7 @@ Ext.define('Ext.chart.Shape', { * The configuration object passed in the `add` method is the same as described in the {@link Ext.draw.Sprite} * class documentation. * - * ### Listeners + * # Listeners * * You can also add event listeners to the surface using the `Observable` listener syntax. Supported events are: * @@ -57136,11 +58649,90 @@ Ext.define('Ext.chart.Shape', { * * For example: * - drawComponent.surface.on({ - 'mousemove': function() { - console.log('moving the mouse over the surface'); - } - }); + * drawComponent.surface.on({ + * 'mousemove': function() { + * console.log('moving the mouse over the surface'); + * } + * }); + * + * # Example + * + * var drawComponent = Ext.create('Ext.draw.Component', { + * width: 800, + * height: 600, + * renderTo: document.body + * }), surface = drawComponent.surface; + * + * surface.add([{ + * type: 'circle', + * radius: 10, + * fill: '#f00', + * x: 10, + * y: 10, + * group: 'circles' + * }, { + * type: 'circle', + * radius: 10, + * fill: '#0f0', + * x: 50, + * y: 50, + * group: 'circles' + * }, { + * type: 'circle', + * radius: 10, + * fill: '#00f', + * x: 100, + * y: 100, + * group: 'circles' + * }, { + * type: 'rect', + * width: 20, + * height: 20, + * fill: '#f00', + * x: 10, + * y: 10, + * group: 'rectangles' + * }, { + * type: 'rect', + * width: 20, + * height: 20, + * fill: '#0f0', + * x: 50, + * y: 50, + * group: 'rectangles' + * }, { + * type: 'rect', + * width: 20, + * height: 20, + * fill: '#00f', + * x: 100, + * y: 100, + * group: 'rectangles' + * }]); + * + * // Get references to my groups + * circles = surface.getGroup('circles'); + * rectangles = surface.getGroup('rectangles'); + * + * // Animate the circles down + * circles.animate({ + * duration: 1000, + * to: { + * translate: { + * y: 200 + * } + * } + * }); + * + * // Animate the rectangles across + * rectangles.animate({ + * duration: 1000, + * to: { + * translate: { + * x: 200 + * } + * } + * }); */ Ext.define('Ext.draw.Surface', { @@ -57157,11 +58749,12 @@ Ext.define('Ext.draw.Surface', { statics: { /** - * Create and return a new concrete Surface instance appropriate for the current environment. + * Creates and returns a new concrete Surface instance appropriate for the current environment. * @param {Object} config Initial configuration for the Surface instance - * @param {Array} enginePriority Optional order of implementations to use; the first one that is - * available in the current environment will be used. Defaults to - *-// Add a quick tip to an HTML button -<input type="button" value="OK" ext:qtitle="OK Button" ext:qwidth="100" - data-qtip="This is a quick tip from markup!"></input> -['Svg', 'Vml']. + * @param {[String]} enginePriority Optional order of implementations to use; the first one that is + * available in the current environment will be used. Defaults to `['Svg', 'Vml']`. + * @return {Object} The created Surface or false. + * @static */ create: function(config, enginePriority) { enginePriority = enginePriority || ['Svg', 'Vml']; @@ -57224,22 +58817,27 @@ Ext.define('Ext.draw.Surface', { zIndex: 0 }, - /** - * @cfg {Number} height - * The height of this component in pixels (defaults to auto). - * Note to express this dimension as a percentage or offset see {@link Ext.Component#anchor}. - */ - /** - * @cfg {Number} width - * The width of this component in pixels (defaults to auto). - * Note to express this dimension as a percentage or offset see {@link Ext.Component#anchor}. - */ + /** + * @cfg {Number} height + * The height of this component in pixels (defaults to auto). + * **Note** to express this dimension as a percentage or offset see {@link Ext.Component#anchor}. + */ + /** + * @cfg {Number} width + * The width of this component in pixels (defaults to auto). + * **Note** to express this dimension as a percentage or offset see {@link Ext.Component#anchor}. + */ + container: undefined, height: 352, width: 512, x: 0, y: 0, + /** + * Creates new Surface. + * @param {Object} config (optional) Config object. + */ constructor: function(config) { var me = this; config = config || {}; @@ -57291,10 +58889,11 @@ Ext.define('Ext.draw.Surface', { * * For example: * - * drawComponent.surface.addCls(sprite, 'x-visible'); - * + * drawComponent.surface.addCls(sprite, 'x-visible'); + * * @param {Object} sprite The sprite to add the class to. - * @param {String/Array} className The CSS class to add, or an array of classes + * @param {String/[String]} className The CSS class to add, or an array of classes + * @method */ addCls: Ext.emptyFn, @@ -57303,10 +58902,11 @@ Ext.define('Ext.draw.Surface', { * * For example: * - * drawComponent.surface.removeCls(sprite, 'x-visible'); - * + * drawComponent.surface.removeCls(sprite, 'x-visible'); + * * @param {Object} sprite The sprite to remove the class from. - * @param {String/Array} className The CSS class to remove, or an array of classes + * @param {String/[String]} className The CSS class to remove, or an array of classes + * @method */ removeCls: Ext.emptyFn, @@ -57315,12 +58915,13 @@ Ext.define('Ext.draw.Surface', { * * For example: * - * drawComponent.surface.setStyle(sprite, { - * 'cursor': 'pointer' - * }); - * + * drawComponent.surface.setStyle(sprite, { + * 'cursor': 'pointer' + * }); + * * @param {Object} sprite The sprite to add, or an array of classes to * @param {Object} styles An Object with CSS styles. + * @method */ setStyle: Ext.emptyFn, @@ -57344,17 +58945,16 @@ Ext.define('Ext.draw.Surface', { // @private initBackground: function(config) { - var gradientId, - gradient, - backgroundSprite, - width = this.width, - height = this.height; + var me = this, + width = me.width, + height = me.height, + gradientId, gradient, backgroundSprite; if (config) { if (config.gradient) { gradient = config.gradient; gradientId = gradient.id; - this.addGradient(gradient); - this.background = this.add({ + me.addGradient(gradient); + me.background = me.add({ type: 'rect', x: 0, y: 0, @@ -57363,7 +58963,7 @@ Ext.define('Ext.draw.Surface', { fill: 'url(#' + gradientId + ')' }); } else if (config.fill) { - this.background = this.add({ + me.background = me.add({ type: 'rect', x: 0, y: 0, @@ -57372,7 +58972,7 @@ Ext.define('Ext.draw.Surface', { fill: config.fill }); } else if (config.image) { - this.background = this.add({ + me.background = me.add({ type: 'image', x: 0, y: 0, @@ -57389,7 +58989,7 @@ Ext.define('Ext.draw.Surface', { * * For example: * - * drawComponent.surface.setSize(500, 500); + * drawComponent.surface.setSize(500, 500); * * This method is generally called when also setting the size of the draw Component. * @@ -57464,7 +59064,7 @@ Ext.define('Ext.draw.Surface', { onMouseLeave: Ext.emptyFn, /** - * Add a gradient definition to the Surface. Note that in some surface engines, adding + * Adds a gradient definition to the Surface. Note that in some surface engines, adding * a gradient via this method will not take effect if the surface has already been rendered. * Therefore, it is preferred to pass the gradients as an item to the surface config, rather * than calling this method, especially if the surface is rendered immediately (e.g. due to @@ -57473,30 +59073,32 @@ Ext.define('Ext.draw.Surface', { * * The gradient object to be passed into this method is composed by: * - * - * - **id** - string - The unique name of the gradient. - * - **angle** - number, optional - The angle of the gradient in degrees. - * - **stops** - object - An object with numbers as keys (from 0 to 100) and style objects as values. - * + * - **id** - string - The unique name of the gradient. + * - **angle** - number, optional - The angle of the gradient in degrees. + * - **stops** - object - An object with numbers as keys (from 0 to 100) and style objects as values. * - For example: - drawComponent.surface.addGradient({ - id: 'gradientId', - angle: 45, - stops: { - 0: { - color: '#555' - }, - 100: { - color: '#ddd' - } - } - }); + * For example: + * + * drawComponent.surface.addGradient({ + * id: 'gradientId', + * angle: 45, + * stops: { + * 0: { + * color: '#555' + * }, + * 100: { + * color: '#ddd' + * } + * } + * }); + * + * @method */ addGradient: Ext.emptyFn, /** - * Add a Sprite to the surface. See {@link Ext.draw.Sprite} for the configuration object to be passed into this method. + * Adds a Sprite to the surface. See {@link Ext.draw.Sprite} for the configuration object to be + * passed into this method. * * For example: * @@ -57508,7 +59110,7 @@ Ext.define('Ext.draw.Surface', { * y: 100 * }); * - */ + */ add: function() { var args = Array.prototype.slice.call(arguments), sprite, @@ -57536,7 +59138,7 @@ Ext.define('Ext.draw.Surface', { /** * @private - * Insert or move a given sprite into the correct position in the items + * Inserts or moves a given sprite into the correct position in the items * MixedCollection, according to its zIndex. Will be inserted at the end of * an existing series of sprites with the same or lower zIndex. If the sprite * is already positioned within an appropriate zIndex group, it will not be moved. @@ -57583,15 +59185,15 @@ Ext.define('Ext.draw.Surface', { }, /** - * Remove a given sprite from the surface, optionally destroying the sprite in the process. + * Removes a given sprite from the surface, optionally destroying the sprite in the process. * You can also call the sprite own `remove` method. * * For example: * - * drawComponent.surface.remove(sprite); - * //or... - * sprite.remove(); - * + * drawComponent.surface.remove(sprite); + * //or... + * sprite.remove(); + * * @param {Ext.draw.Sprite} sprite * @param {Boolean} destroySprite * @return {Number} the sprite's new index in the list @@ -57610,12 +59212,12 @@ Ext.define('Ext.draw.Surface', { }, /** - * Remove all sprites from the surface, optionally destroying the sprites in the process. + * Removes all sprites from the surface, optionally destroying the sprites in the process. * * For example: * - * drawComponent.surface.removeAll(); - * + * drawComponent.surface.removeAll(); + * * @param {Boolean} destroySprites Whether to destroy all sprites when removing them. * @return {Number} The sprite's new index in the list. */ @@ -57742,7 +59344,9 @@ Ext.define('Ext.draw.Surface', { // @private getPathellipse: function (el) { var a = el.attr; - return this.ellipsePath(a.x, a.y, a.radiusX, a.radiusY); + return this.ellipsePath(a.x, a.y, + a.radiusX || (a.width / 2) || 0, + a.radiusY || (a.height / 2) || 0); }, // @private @@ -57781,8 +59385,8 @@ Ext.define('Ext.draw.Surface', { * * For example: * - * var spriteGroup = drawComponent.surface.getGroup('someGroupId'); - * + * var spriteGroup = drawComponent.surface.getGroup('someGroupId'); + * * @param {String} id The unique identifier of the group. * @return {Object} The {@link Ext.draw.CompositeSprite}. */ @@ -57822,10 +59426,11 @@ Ext.define('Ext.draw.Surface', { * * For example: * - * var spriteGroup = drawComponent.surface.setText(sprite, 'my new text'); - * + * var spriteGroup = drawComponent.surface.setText(sprite, 'my new text'); + * * @param {Object} sprite The Sprite to change the text. * @param {String} text The new text to be set. + * @method */ setText: Ext.emptyFn, @@ -58054,6 +59659,7 @@ Ext.define('Ext.draw.Component', { }, true); if (me.rendered) { me.setSize(width, height); + me.surface.setSize(width, height); } else { me.surface.setSize(width, height); @@ -58115,7 +59721,6 @@ Ext.define('Ext.draw.Component', { * @class Ext.chart.LegendItem * @extends Ext.draw.CompositeSprite * A single item of a legend (marker plus label) - * @constructor */ Ext.define('Ext.chart.LegendItem', { @@ -58404,7 +60009,6 @@ Ext.define('Ext.chart.LegendItem', { }); * - * @constructor */ Ext.define('Ext.chart.Legend', { @@ -58489,6 +60093,10 @@ Ext.define('Ext.chart.Legend', { */ boxZIndex: 100, + /** + * Creates new Legend. + * @param {Object} config (optional) Config object. + */ constructor: function(config) { var me = this; if (config) { @@ -58726,10 +60334,7 @@ Ext.define('Ext.chart.Legend', { * select a color theme `Category1` for coloring the series, set the legend to the right part of the chart and * then tell the chart to render itself in the body element of the document. For more information about the axes and * series configurations please check the documentation of each series (Line, Bar, Pie, etc). - * - * @xtype chart */ - Ext.define('Ext.chart.Chart', { /* Begin Definitions */ @@ -59454,7 +61059,7 @@ Ext.define('Ext.chart.Chart', { /** * @class Ext.chart.Highlight - * @ignore + * A mixin providing highlight functionality for Ext.chart.series.Series. */ Ext.define('Ext.chart.Highlight', { @@ -59503,10 +61108,7 @@ Ext.define('Ext.chart.Highlight', { opts = me.highlightCfg, surface = me.chart.surface, animate = me.chart.animate, - p, - from, - to, - pi; + p, from, to, pi; if (!me.highlight || !sprite || sprite._highlighted) { return; @@ -59516,8 +61118,7 @@ Ext.define('Ext.chart.Highlight', { } sprite._highlighted = true; if (!sprite._defaults) { - sprite._defaults = Ext.apply(sprite._defaults || {}, - sprite.attr); + sprite._defaults = Ext.apply({}, sprite.attr); from = {}; to = {}; for (p in opts) { @@ -59547,6 +61148,7 @@ Ext.define('Ext.chart.Highlight', { } sprite._from = from; sprite._to = to; + sprite._endStyle = to; } if (animate) { sprite._anim = Ext.create('Ext.fx.Anim', { @@ -59574,9 +61176,7 @@ Ext.define('Ext.chart.Highlight', { opts = me.highlightCfg, animate = me.chart.animate, i = 0, - obj, - p, - sprite; + obj, p, sprite; for (; i < len; i++) { if (!items[i]) { @@ -59598,6 +61198,8 @@ Ext.define('Ext.chart.Highlight', { } } if (animate) { + //sprite._to = obj; + sprite._endStyle = obj; sprite._anim = Ext.create('Ext.fx.Anim', { target: sprite, to: obj, @@ -59740,7 +61342,6 @@ Ext.define('Ext.chart.Label', { var me = this, chart = me.chart, gradients = chart.gradients, - gradient, items = me.items, animate = chart.animate, config = me.label, @@ -59750,24 +61351,28 @@ Ext.define('Ext.chart.Label', { group = me.labelsGroup, store = me.chart.store, len = store.getCount(), - ratio = items.length / len, - i, count, j, - k, gradientsCount = (gradients || 0) && gradients.length, - colorStopTotal, colorStopIndex, colorStop, - item, label, storeItem, - sprite, spriteColor, spriteBrightness, labelColor, + itemLength = (items || 0) && items.length, + ratio = itemLength / len, + gradientsCount = (gradients || 0) && gradients.length, Color = Ext.draw.Color, - colorString; + gradient, i, count, index, j, k, colorStopTotal, colorStopIndex, colorStop, item, label, + storeItem, sprite, spriteColor, spriteBrightness, labelColor, colorString; if (display == 'none') { return; } for (i = 0, count = 0; i < len; i++) { + index = 0; for (j = 0; j < ratio; j++) { item = items[count]; label = group.getAt(count); storeItem = store.getAt(i); + + //check the excludes + while(this.__excludes && this.__excludes[index]) { + index++; + } if (!item && label) { label.hide(true); @@ -59775,14 +61380,25 @@ Ext.define('Ext.chart.Label', { if (item && field[j]) { if (!label) { - label = me.onCreateLabel(storeItem, item, i, display, j, count); + label = me.onCreateLabel(storeItem, item, i, display, j, index); } - me.onPlaceLabel(label, storeItem, item, i, display, animate, j, count); + me.onPlaceLabel(label, storeItem, item, i, display, animate, j, index); //set contrast if (config.contrast && item.sprite) { sprite = item.sprite; - colorString = sprite._to && sprite._to.fill || sprite.attr.fill; + //set the color string to the color to be set. + if (sprite._endStyle) { + colorString = sprite._endStyle.fill; + } + else if (sprite._to) { + colorString = sprite._to.fill; + } + else { + colorString = sprite.attr.fill; + } + colorString = colorString || sprite.attr.fill; + spriteColor = Color.fromString(colorString); //color wasn't parsed property maybe because it's a gradient id if (colorString && !spriteColor) { @@ -59804,15 +61420,18 @@ Ext.define('Ext.chart.Label', { else { spriteBrightness = spriteColor.getGrayscale() / 255; } + if (label.isOutside) { + spriteBrightness = 1; + } labelColor = Color.fromString(label.attr.color || label.attr.fill).getHSL(); - - labelColor[2] = spriteBrightness > 0.5? 0.2 : 0.8; + labelColor[2] = spriteBrightness > 0.5 ? 0.2 : 0.8; label.setAttributes({ fill: String(Color.fromHSL.apply({}, labelColor)) }, true); } } count++; + index++; } } me.hideLabels(count); @@ -59920,7 +61539,7 @@ Ext.define('Ext.chart.TipSurface', { /** * @class Ext.chart.Tip - * @ignore + * Provides tips for Ext.chart.series.Series. */ Ext.define('Ext.chart.Tip', { @@ -60005,7 +61624,7 @@ Ext.define('Ext.chart.Tip', { }); /** * @class Ext.chart.axis.Abstract - * @ignore + * Base class for all axis classes. */ Ext.define('Ext.chart.axis.Abstract', { @@ -60015,6 +61634,10 @@ Ext.define('Ext.chart.axis.Abstract', { /* End Definitions */ + /** + * Creates new Axis. + * @param {Object} config (optional) Config options. + */ constructor: function(config) { config = config || {}; @@ -60068,35 +61691,33 @@ Ext.define('Ext.chart.axis.Abstract', { * to create a Chart please check the Chart class documentation. Here's an example for the axes part: * An example of axis for a series (in this case for an area chart that has multiple layers of yFields) could be: * -
+ * axes: [{ + * type: 'Numeric', + * grid: true, + * position: 'left', + * fields: ['data1', 'data2', 'data3'], + * title: 'Number of Hits', + * grid: { + * odd: { + * opacity: 1, + * fill: '#ddd', + * stroke: '#bbb', + * 'stroke-width': 1 + * } + * }, + * minimum: 0 + * }, { + * type: 'Category', + * position: 'bottom', + * fields: ['name'], + * title: 'Month of the Year', + * grid: true, + * label: { + * rotate: { + * degrees: 315 + * } + * } + * }] * * In this case we use a `Numeric` axis for displaying the values of the Area series and a `Category` axis for displaying the names of * the store elements. The numeric axis is placed on the left of the screen, while the category axis is placed at the bottom of the chart. @@ -60115,6 +61736,47 @@ Ext.define('Ext.chart.axis.Axis', { /* End Definitions */ + /** + * @cfg {Boolean | Object} grid + * The grid configuration enables you to set a background grid for an axis. + * If set to *true* on a vertical axis, vertical lines will be drawn. + * If set to *true* on a horizontal axis, horizontal lines will be drawn. + * If both are set, a proper grid with horizontal and vertical lines will be drawn. + * + * You can set specific options for the grid configuration for odd and/or even lines/rows. + * Since the rows being drawn are rectangle sprites, you can set to an odd or even property + * all styles that apply to {@link Ext.draw.Sprite}. For more information on all the style + * properties you can set please take a look at {@link Ext.draw.Sprite}. Some useful style properties are `opacity`, `fill`, `stroke`, `stroke-width`, etc. + * + * The possible values for a grid option are then *true*, *false*, or an object with `{ odd, even }` properties + * where each property contains a sprite style descriptor object that is defined in {@link Ext.draw.Sprite}. + * + * For example: + * + * axes: [{ + * type: 'Numeric', + * grid: true, + * position: 'left', + * fields: ['data1', 'data2', 'data3'], + * title: 'Number of Hits', + * grid: { + * odd: { + * opacity: 1, + * fill: '#ddd', + * stroke: '#bbb', + * 'stroke-width': 1 + * } + * } + * }, { + * type: 'Category', + * position: 'bottom', + * fields: ['name'], + * title: 'Month of the Year', + * grid: true + * }] + * + */ + /** * @cfg {Number} majorTickSteps * If `minimum` and `maximum` are specified it forces the number of major ticks to the specified value. @@ -60124,7 +61786,10 @@ Ext.define('Ext.chart.axis.Axis', { * @cfg {Number} minorTickSteps * The number of small ticks between two major ticks. Default is zero. */ - + + //@private force min/max values from store + forceMinMax: false, + /** * @cfg {Number} dashSize * The size of the dash marker. Default's 3. @@ -60222,6 +61887,14 @@ Ext.define('Ext.chart.axis.Axis', { out = Ext.draw.Draw.snapEnds(min, max, me.majorTickSteps !== false ? (me.majorTickSteps +1) : me.steps); outfrom = out.from; outto = out.to; + if (me.forceMinMax) { + if (!isNaN(max)) { + out.to = max; + } + if (!isNaN(min)) { + out.from = min; + } + } if (!isNaN(me.maximum)) { //TODO(nico) users are responsible for their own minimum/maximum values set. //Clipping should be added to remove lines in the chart which are below the axis. @@ -60830,67 +62503,67 @@ Ext.define('Ext.chart.axis.Axis', { * axis are more suitable. * * As with other axis you can set the position of the axis and its title. For example: + * * {@img Ext.chart.axis.Category/Ext.chart.axis.Category.png Ext.chart.axis.Category chart axis} -- axes: [{ - type: 'Numeric', - grid: true, - position: 'left', - fields: ['data1', 'data2', 'data3'], - title: 'Number of Hits', - grid: { - odd: { - opacity: 1, - fill: '#ddd', - stroke: '#bbb', - 'stroke-width': 1 - } - }, - minimum: 0 - }, { - type: 'Category', - position: 'bottom', - fields: ['name'], - title: 'Month of the Year', - grid: true, - label: { - rotate: { - degrees: 315 - } - } - }] -
- - In this example with set the category axis to the bottom of the surface, bound the axis to - the name property and set as title Month of the Year. + * + * var store = Ext.create('Ext.data.JsonStore', { + * fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], + * data: [ + * {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13}, + * {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3}, + * {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7}, + * {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23}, + * {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33} + * ] + * }); + * + * Ext.create('Ext.chart.Chart', { + * renderTo: Ext.getBody(), + * width: 500, + * height: 300, + * store: store, + * axes: [{ + * type: 'Numeric', + * grid: true, + * position: 'left', + * fields: ['data1', 'data2', 'data3', 'data4', 'data5'], + * title: 'Sample Values', + * grid: { + * odd: { + * opacity: 1, + * fill: '#ddd', + * stroke: '#bbb', + * 'stroke-width': 1 + * } + * }, + * minimum: 0, + * adjustMinimumByMajorUnit: 0 + * }, { + * type: 'Category', + * position: 'bottom', + * fields: ['name'], + * title: 'Sample Metrics', + * grid: true, + * label: { + * rotate: { + * degrees: 315 + * } + * } + * }], + * series: [{ + * type: 'area', + * highlight: false, + * axis: 'left', + * xField: 'name', + * yField: ['data1', 'data2', 'data3', 'data4', 'data5'], + * style: { + * opacity: 0.93 + * } + * }] + * }); + * + * In this example with set the category axis to the bottom of the surface, bound the axis to + * the name property and set as title Month of the Year. */ Ext.define('Ext.chart.axis.Category', { @@ -60965,15 +62638,14 @@ Ext.define('Ext.chart.axis.Category', { * * A possible configuration for this axis would look like: * - axes: [{ - type: 'gauge', - position: 'gauge', - minimum: 0, - maximum: 100, - steps: 10, - margin: 7 - }], - * + * axes: [{ + * type: 'gauge', + * position: 'gauge', + * minimum: 0, + * maximum: 100, + * steps: 10, + * margin: 7 + * }], */ Ext.define('Ext.chart.axis.Gauge', { @@ -61157,67 +62829,66 @@ Ext.define('Ext.chart.axis.Gauge', { * opposed to the category axis. You can set mininum and maximum values to the * axis so that the values are bound to that. If no values are set, then the * scale will auto-adjust to the values. + * * {@img Ext.chart.axis.Numeric/Ext.chart.axis.Numeric.png Ext.chart.axis.Numeric chart axis} + * * For example: - -- var store = Ext.create('Ext.data.JsonStore', { - fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], - data: [ - {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13}, - {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3}, - {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7}, - {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23}, - {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33} - ] - }); - - Ext.create('Ext.chart.Chart', { - renderTo: Ext.getBody(), - width: 500, - height: 300, - store: store, - axes: [{ - type: 'Numeric', - grid: true, - position: 'left', - fields: ['data1', 'data2', 'data3', 'data4', 'data5'], - title: 'Sample Values', - grid: { - odd: { - opacity: 1, - fill: '#ddd', - stroke: '#bbb', - 'stroke-width': 1 - } - }, - minimum: 0, - adjustMinimumByMajorUnit: 0 - }, { - type: 'Category', - position: 'bottom', - fields: ['name'], - title: 'Sample Metrics', - grid: true, - label: { - rotate: { - degrees: 315 - } - } - }], - series: [{ - type: 'area', - highlight: false, - axis: 'left', - xField: 'name', - yField: ['data1', 'data2', 'data3', 'data4', 'data5'], - style: { - opacity: 0.93 - } - }] - }); -
- + * + * var store = Ext.create('Ext.data.JsonStore', { + * fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], + * data: [ + * {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13}, + * {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3}, + * {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7}, + * {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23}, + * {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33} + * ] + * }); + * + * Ext.create('Ext.chart.Chart', { + * renderTo: Ext.getBody(), + * width: 500, + * height: 300, + * store: store, + * axes: [{ + * type: 'Numeric', + * grid: true, + * position: 'left', + * fields: ['data1', 'data2', 'data3', 'data4', 'data5'], + * title: 'Sample Values', + * grid: { + * odd: { + * opacity: 1, + * fill: '#ddd', + * stroke: '#bbb', + * 'stroke-width': 1 + * } + * }, + * minimum: 0, + * adjustMinimumByMajorUnit: 0 + * }, { + * type: 'Category', + * position: 'bottom', + * fields: ['name'], + * title: 'Sample Metrics', + * grid: true, + * label: { + * rotate: { + * degrees: 315 + * } + * } + * }], + * series: [{ + * type: 'area', + * highlight: false, + * axis: 'left', + * xField: 'name', + * yField: ['data1', 'data2', 'data3', 'data4', 'data5'], + * style: { + * opacity: 0.93 + * } + * }] + * }); * * In this example we create an axis of Numeric type. We set a minimum value so that * even if all series have values greater than zero, the grid starts at zero. We bind @@ -61227,8 +62898,6 @@ Ext.define('Ext.chart.axis.Gauge', { * We use a grid configuration to set odd background rows to a certain style and even rows * to be transparent/ignored. * - * - * @constructor */ Ext.define('Ext.chart.axis.Numeric', { @@ -61245,22 +62914,20 @@ Ext.define('Ext.chart.axis.Numeric', { alias: 'axis.numeric', constructor: function(config) { - var me = this, label, f; + var me = this, + hasLabel = !!(config.label && config.label.renderer), + label; + me.callParent([config]); label = me.label; if (me.roundToDecimal === false) { return; } - if (label.renderer) { - f = label.renderer; - label.renderer = function(v) { - return me.roundToDecimal( f(v), me.decimals ); - }; - } else { + if (!hasLabel) { label.renderer = function(v) { return me.roundToDecimal(v, me.decimals); }; - } + } }, roundToDecimal: function(v, dec) { @@ -61558,11 +63225,9 @@ Ext.define('Ext.chart.axis.Radial', { * in {@link Ext.data.Store} the data is saved as a flat {@link Ext.util.MixedCollection MixedCollection}, whereas in * {@link Ext.data.TreeStore TreeStore} we use a {@link Ext.data.Tree} to maintain the data's hierarchy.- var store = Ext.create('Ext.data.JsonStore', { - fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], - data: [ - {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13}, - {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3}, - {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7}, - {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23}, - {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33} - ] - }); - - Ext.create('Ext.chart.Chart', { - renderTo: Ext.getBody(), - width: 500, - height: 300, - store: store, - axes: [{ - type: 'Numeric', - grid: true, - position: 'left', - fields: ['data1', 'data2', 'data3', 'data4', 'data5'], - title: 'Sample Values', - grid: { - odd: { - opacity: 1, - fill: '#ddd', - stroke: '#bbb', - 'stroke-width': 1 - } - }, - minimum: 0, - adjustMinimumByMajorUnit: 0 - }, { - type: 'Category', - position: 'bottom', - fields: ['name'], - title: 'Sample Metrics', - grid: true, - label: { - rotate: { - degrees: 315 - } - } - }], - series: [{ - type: 'area', - highlight: false, - axis: 'left', - xField: 'name', - yField: ['data1', 'data2', 'data3', 'data4', 'data5'], - style: { - opacity: 0.93 - } - }] - }); -Finally, AbstractStore provides an API for sorting and filtering data via its {@link #sorters} and {@link #filters} - * {@link Ext.util.MixedCollection MixedCollections}. Although this functionality is provided by AbstractStore, there's a - * good description of how to use it in the introduction of {@link Ext.data.Store}. - * + * The store provides filtering and sorting support. This sorting/filtering can happen on the client side + * or can be completed on the server. This is controlled by the {@link #remoteSort} and (@link #remoteFilter{ config + * options. For more information see the {@link #sort} and {@link #filter} methods. */ Ext.define('Ext.data.AbstractStore', { requires: ['Ext.util.MixedCollection', 'Ext.data.Operation', 'Ext.util.Filter'], @@ -61675,7 +63340,8 @@ Ext.define('Ext.data.AbstractStore', { //documented above constructor: function(config) { - var me = this; + var me = this, + filters; me.addEvents( /** @@ -61750,6 +63416,7 @@ Ext.define('Ext.data.AbstractStore', { ); Ext.apply(me, config); + // don't use *config* anymore from here on... use *me* instead... /** * Temporary cache in which removed model instances are kept until successfully synchronised with a Proxy, @@ -61761,7 +63428,7 @@ Ext.define('Ext.data.AbstractStore', { me.removed = []; me.mixins.observable.constructor.apply(me, arguments); - me.model = Ext.ModelManager.getModel(config.model || me.model); + me.model = Ext.ModelManager.getModel(me.model); /** * @property modelDefaults @@ -61789,7 +63456,7 @@ Ext.define('Ext.data.AbstractStore', { } //ensures that the Proxy is instantiated correctly - me.setProxy(config.proxy || me.proxy || me.model.getProxy()); + me.setProxy(me.proxy || me.model.getProxy()); if (me.id && !me.storeId) { me.storeId = me.id; @@ -61807,8 +63474,9 @@ Ext.define('Ext.data.AbstractStore', { * @property filters * @type Ext.util.MixedCollection */ + filters = me.decodeFilters(me.filters); me.filters = Ext.create('Ext.util.MixedCollection'); - me.filters.addAll(me.decodeFilters(config.filters)); + me.filters.addAll(filters); }, /** @@ -62011,7 +63679,10 @@ Ext.define('Ext.data.AbstractStore', { return item.dirty === true && item.phantom !== true && item.isValid(); }, - //returns any records that have been removed from the store but not yet destroyed on the proxy + /** + * Returns any records that have been removed from the store but not yet destroyed on the proxy. + * @return {Array} The removed Model instances + */ getRemovedRecords: function() { return this.removed; }, @@ -62241,6 +63912,7 @@ Ext.define('Ext.data.AbstractStore', { * Removes all records from the store. This method does a "fast remove", * individual remove events are not called. The {@link #clear} event is * fired upon completion. + * @method */ removeAll: Ext.emptyFn, // individual substores should implement a "fast" remove @@ -62258,6 +63930,11 @@ Ext.define('Ext.data.AbstractStore', { /** * @class Ext.util.Grouper * @extends Ext.util.Sorter + +Represents a single grouper that can be applied to a Store. The grouper works +in the same fashion as the {@link Ext.util.Sorter}. + + * @markdown */ Ext.define('Ext.util.Grouper', { @@ -62269,7 +63946,7 @@ Ext.define('Ext.util.Grouper', { /* End Definitions */ /** - * Function description + * Returns the value for grouping to be used. * @param {Ext.data.Model} instance The Model instance * @return {String} The group string for this model */ @@ -62486,8 +64163,6 @@ new Ext.view.View({ *
An object literal of this form could also be used as the {@link #data} config option.
* - * @constructor - * @param {Object} config * @xtype jsonstore */ Ext.define('Ext.data.JsonStore', { @@ -64504,31 +66161,28 @@ Ext.define('Ext.data.JsonStore', { * * For example: * -
+ * axes: [{ + * type: 'Time', + * position: 'bottom', + * fields: 'date', + * title: 'Day', + * dateFormat: 'M d', + * groupBy: 'year,month,day', + * aggregateOp: 'sum', + * + * constrain: true, + * fromDate: new Date('1/1/11'), + * toDate: new Date('1/7/11') + * }] * - * In this example we're creating a time axis that has as title Day. - * The field the axis is bound to is date. - * The date format to use to display the text for the axis labels is M d + * In this example we're creating a time axis that has as title *Day*. + * The field the axis is bound to is `date`. + * The date format to use to display the text for the axis labels is `M d` * which is a three letter month abbreviation followed by the day number. - * The time axis will show values for dates betwee fromDate and toDate. - * Since constrain is set to true all other values for other dates not between + * The time axis will show values for dates between `fromDate` and `toDate`. + * Since `constrain` is set to true all other values for other dates not between * the fromDate and toDate will not be displayed. * - * @constructor */ Ext.define('Ext.chart.axis.Time', { @@ -65232,7 +66886,6 @@ Ext.define('Ext.chart.series.Series', { * * Common base class for series implementations which plot values using x/y coordinates. * - * @constructor */ Ext.define('Ext.chart.series.Cartesian', { @@ -66606,7 +68259,7 @@ Ext.define('Ext.chart.series.Bar', { }, // @private callback used when placing a label. - onPlaceLabel: function(label, storeItem, item, i, display, animate, index) { + onPlaceLabel: function(label, storeItem, item, i, display, animate, j, index) { // Determine the label's final position. Starts with the configured preferred value but // may get flipped from inside to outside or vice-versa depending on space. var me = this, @@ -66640,6 +68293,7 @@ Ext.define('Ext.chart.series.Bar', { text: text }); + label.isOutside = false; if (column) { if (display == outside) { if (height + offsetY + attr.height > (yValue >= 0 ? zero - chartBBox.y : chartBBox.y + chartBBox.height - zero)) { @@ -66648,6 +68302,7 @@ Ext.define('Ext.chart.series.Bar', { } else { if (height + offsetY > attr.height) { display = outside; + label.isOutside = true; } } x = attr.x + groupBarWidth / 2; @@ -66665,6 +68320,7 @@ Ext.define('Ext.chart.series.Bar', { else { if (width + offsetX > attr.width) { display = outside; + label.isOutside = true; } } x = display == insideStart ? @@ -66800,103 +68456,121 @@ Ext.define('Ext.chart.series.Bar', { * @param index */ getLegendColor: function(index) { - var me = this; - return me.colorArrayStyle[index % me.colorArrayStyle.length]; + var me = this, + colorLength = me.colorArrayStyle.length; + + if (me.style && me.style.fill) { + return me.style.fill; + } else { + return me.colorArrayStyle[index % colorLength]; + } + }, + + highlightItem: function(item) { + this.callParent(arguments); + this.renderLabels(); + }, + + unHighlightItem: function() { + this.callParent(arguments); + this.renderLabels(); + }, + + cleanHighlights: function() { + this.callParent(arguments); + this.renderLabels(); } }); /** * @class Ext.chart.series.Column * @extends Ext.chart.series.Bar * -- axes: [{ - type: 'Time', - position: 'bottom', - fields: 'date', - title: 'Day', - dateFormat: 'M d', - groupBy: 'year,month,day', - aggregateOp: 'sum', - - constrain: true, - fromDate: new Date('1/1/11'), - toDate: new Date('1/7/11') - }] -- Creates a Column Chart. Much of the methods are inherited from Bar. A Column Chart is a useful visualization technique to display quantitative information for different - categories that can show some progression (or regression) in the data set. - As with all other series, the Column Series must be appended in the *series* Chart array configuration. See the Chart - documentation for more information. A typical configuration object for the column series could be: -
-{@img Ext.chart.series.Column/Ext.chart.series.Column.png Ext.chart.series.Column chart series -
- -- var store = Ext.create('Ext.data.JsonStore', { - fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], - data: [ - {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13}, - {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3}, - {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7}, - {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23}, - {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33} - ] - }); - - Ext.create('Ext.chart.Chart', { - renderTo: Ext.getBody(), - width: 500, - height: 300, - animate: true, - store: store, - axes: [{ - type: 'Numeric', - position: 'bottom', - fields: ['data1'], - label: { - renderer: Ext.util.Format.numberRenderer('0,0') - }, - title: 'Sample Values', - grid: true, - minimum: 0 - }, { - type: 'Category', - position: 'left', - fields: ['name'], - title: 'Sample Metrics' - }], - axes: [{ - type: 'Numeric', - position: 'left', - fields: ['data1'], - label: { - renderer: Ext.util.Format.numberRenderer('0,0') - }, - title: 'Sample Values', - grid: true, - minimum: 0 - }, { - type: 'Category', - position: 'bottom', - fields: ['name'], - title: 'Sample Metrics' - }], - series: [{ - type: 'column', - axis: 'left', - highlight: true, - tips: { - trackMouse: true, - width: 140, - height: 28, - renderer: function(storeItem, item) { - this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $'); - } - }, - label: { - display: 'insideEnd', - 'text-anchor': 'middle', - field: 'data1', - renderer: Ext.util.Format.numberRenderer('0'), - orientation: 'vertical', - color: '#333' - }, - xField: 'name', - yField: 'data1' - }] - }); -- In this configuration we set `column` as the series type, bind the values of the bars to the bottom axis, set `highlight` to true so that bars are smoothly highlighted - when hovered and bind the `xField` or category field to the data store `name` property and the `yField` as the data1 property of a store element. -
+ * Creates a Column Chart. Much of the methods are inherited from Bar. A Column Chart is a useful visualization technique to display quantitative information for different + * categories that can show some progression (or regression) in the data set. + * As with all other series, the Column Series must be appended in the *series* Chart array configuration. See the Chart + * documentation for more information. A typical configuration object for the column series could be: + * + * {@img Ext.chart.series.Column/Ext.chart.series.Column.png Ext.chart.series.Column chart series} + * + * ## Example + * + * var store = Ext.create('Ext.data.JsonStore', { + * fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], + * data: [ + * {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13}, + * {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3}, + * {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7}, + * {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23}, + * {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33} + * ] + * }); + * + * Ext.create('Ext.chart.Chart', { + * renderTo: Ext.getBody(), + * width: 500, + * height: 300, + * animate: true, + * store: store, + * axes: [{ + * type: 'Numeric', + * position: 'bottom', + * fields: ['data1'], + * label: { + * renderer: Ext.util.Format.numberRenderer('0,0') + * }, + * title: 'Sample Values', + * grid: true, + * minimum: 0 + * }, { + * type: 'Category', + * position: 'left', + * fields: ['name'], + * title: 'Sample Metrics' + * }], + * axes: [{ + * type: 'Numeric', + * position: 'left', + * fields: ['data1'], + * label: { + * renderer: Ext.util.Format.numberRenderer('0,0') + * }, + * title: 'Sample Values', + * grid: true, + * minimum: 0 + * }, { + * type: 'Category', + * position: 'bottom', + * fields: ['name'], + * title: 'Sample Metrics' + * }], + * series: [{ + * type: 'column', + * axis: 'left', + * highlight: true, + * tips: { + * trackMouse: true, + * width: 140, + * height: 28, + * renderer: function(storeItem, item) { + * this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $'); + * } + * }, + * label: { + * display: 'insideEnd', + * 'text-anchor': 'middle', + * field: 'data1', + * renderer: Ext.util.Format.numberRenderer('0'), + * orientation: 'vertical', + * color: '#333' + * }, + * xField: 'name', + * yField: 'data1' + * }] + * }); + * + * In this configuration we set `column` as the series type, bind the values of the bars to the bottom axis, set `highlight` to true so that bars are smoothly highlighted + * when hovered and bind the `xField` or category field to the data store `name` property and the `yField` as the data1 property of a store element. */ - Ext.define('Ext.chart.series.Column', { /* Begin Definitions */ @@ -67383,90 +69057,92 @@ Ext.define('Ext.chart.series.Gauge', { * @class Ext.chart.series.Line * @extends Ext.chart.series.Cartesian * -- Creates a Line Chart. A Line Chart is a useful visualization technique to display quantitative information for different - categories or other real values (as opposed to the bar chart), that can show some progression (or regression) in the dataset. - As with all other series, the Line Series must be appended in the *series* Chart array configuration. See the Chart - documentation for more information. A typical configuration object for the line series could be: -
-{@img Ext.chart.series.Line/Ext.chart.series.Line.png Ext.chart.series.Line chart series} -
- -- var store = Ext.create('Ext.data.JsonStore', { - fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], - data: [ - {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13}, - {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3}, - {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7}, - {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23}, - {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33} - ] - }); - - Ext.create('Ext.chart.Chart', { - renderTo: Ext.getBody(), - width: 500, - height: 300, - animate: true, - store: store, - axes: [{ - type: 'Numeric', - position: 'bottom', - fields: ['data1'], - label: { - renderer: Ext.util.Format.numberRenderer('0,0') - }, - title: 'Sample Values', - grid: true, - minimum: 0 - }, { - type: 'Category', - position: 'left', - fields: ['name'], - title: 'Sample Metrics' - }], - series: [{ - type: 'line', - highlight: { - size: 7, - radius: 7 - }, - axis: 'left', - xField: 'name', - yField: 'data1', - markerCfg: { - type: 'cross', - size: 4, - radius: 4, - 'stroke-width': 0 - } - }, { - type: 'line', - highlight: { - size: 7, - radius: 7 - }, - axis: 'left', - fill: true, - xField: 'name', - yField: 'data3', - markerCfg: { - type: 'circle', - size: 4, - radius: 4, - 'stroke-width': 0 - } - }] - }); -- In this configuration we're adding two series (or lines), one bound to the `data1` property of the store and the other to `data3`. The type for both configurations is - `line`. The `xField` for both series is the same, the name propert of the store. Both line series share the same axis, the left axis. You can set particular marker - configuration by adding properties onto the markerConfig object. Both series have an object as highlight so that markers animate smoothly to the properties in highlight - when hovered. The second series has `fill=true` which means that the line will also have an area below it of the same color. -
+ * Creates a Line Chart. A Line Chart is a useful visualization technique to display quantitative information for different + * categories or other real values (as opposed to the bar chart), that can show some progression (or regression) in the dataset. + * As with all other series, the Line Series must be appended in the *series* Chart array configuration. See the Chart + * documentation for more information. A typical configuration object for the line series could be: + * + * {@img Ext.chart.series.Line/Ext.chart.series.Line.png Ext.chart.series.Line chart series} + * + * var store = Ext.create('Ext.data.JsonStore', { + * fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], + * data: [ + * {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13}, + * {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3}, + * {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7}, + * {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23}, + * {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33} + * ] + * }); + * + * Ext.create('Ext.chart.Chart', { + * renderTo: Ext.getBody(), + * width: 500, + * height: 300, + * animate: true, + * store: store, + * axes: [{ + * type: 'Numeric', + * position: 'bottom', + * fields: ['data1'], + * label: { + * renderer: Ext.util.Format.numberRenderer('0,0') + * }, + * title: 'Sample Values', + * grid: true, + * minimum: 0 + * }, { + * type: 'Category', + * position: 'left', + * fields: ['name'], + * title: 'Sample Metrics' + * }], + * series: [{ + * type: 'line', + * highlight: { + * size: 7, + * radius: 7 + * }, + * axis: 'left', + * xField: 'name', + * yField: 'data1', + * markerCfg: { + * type: 'cross', + * size: 4, + * radius: 4, + * 'stroke-width': 0 + * } + * }, { + * type: 'line', + * highlight: { + * size: 7, + * radius: 7 + * }, + * axis: 'left', + * fill: true, + * xField: 'name', + * yField: 'data3', + * markerCfg: { + * type: 'circle', + * size: 4, + * radius: 4, + * 'stroke-width': 0 + * } + * }] + * }); + * + * In this configuration we're adding two series (or lines), one bound to the `data1` + * property of the store and the other to `data3`. The type for both configurations is + * `line`. The `xField` for both series is the same, the name propert of the store. + * Both line series share the same axis, the left axis. You can set particular marker + * configuration by adding properties onto the markerConfig object. Both series have + * an object as highlight so that markers animate smoothly to the properties in highlight + * when hovered. The second series has `fill=true` which means that the line will also + * have an area below it of the same color. + * + * **Note:** In the series definition remember to explicitly set the axis to bind the + * values of the line series to. This can be done by using the `axis` configuration property. */ - Ext.define('Ext.chart.series.Line', { /* Begin Definitions */ @@ -67482,6 +69158,13 @@ Ext.define('Ext.chart.series.Line', { type: 'line', alias: 'series.line', + + /** + * @cfg {String} axis + * The position of the axis to bind the values to. Possible values are 'left', 'bottom', 'top' and 'right'. + * You must explicitly set this value to bind the values of the line series to the ones in the axis, otherwise a + * relative scale will be used. + */ /** * @cfg {Number} selectionTolerance @@ -67522,12 +69205,22 @@ Ext.define('Ext.chart.series.Line', { style: {}, /** - * @cfg {Boolean} smooth - * If true, the line will be smoothed/rounded around its points, otherwise straight line - * segments will be drawn. Defaults to false. + * @cfg {Boolean/Number} smooth + * If set to `true` or a non-zero number, the line will be smoothed/rounded around its points; otherwise + * straight line segments will be drawn. + * + * A numeric value is interpreted as a divisor of the horizontal distance between consecutive points in + * the line; larger numbers result in sharper curves while smaller numbers result in smoother curves. + * + * If set to `true` then a default numeric value of 3 will be used. Defaults to `false`. */ smooth: false, + /** + * @private Default numeric smoothing value to be used when {@link #smooth} = true. + */ + defaultSmoothness: 3, + /** * @cfg {Boolean} fill * If true, the area below the line will be filled in using the {@link #style.eefill} and @@ -67626,7 +69319,8 @@ Ext.define('Ext.chart.series.Line', { markerGroup = me.markerGroup, enableShadows = chart.shadow, shadowGroups = me.shadowGroups, - shadowAttributes = this.shadowAttributes, + shadowAttributes = me.shadowAttributes, + smooth = me.smooth, lnsh = shadowGroups.length, dummyPath = ["M"], path = ["M"], @@ -67636,16 +69330,26 @@ Ext.define('Ext.chart.series.Line', { shadowBarAttr, xValues = [], yValues = [], + storeIndices = [], + numericAxis = true, + axisCount = 0, onbreak = false, markerStyle = me.markerStyle, seriesStyle = me.seriesStyle, seriesLabelStyle = me.seriesLabelStyle, colorArrayStyle = me.colorArrayStyle, colorArrayLength = colorArrayStyle && colorArrayStyle.length || 0, + posHash = { + 'left': 'right', + 'right': 'left', + 'top': 'bottom', + 'bottom': 'top' + }, + isNumber = Ext.isNumber, seriesIdx = me.seriesIdx, shadows, shadow, shindex, fromPath, fill, fillPath, rendererAttributes, x, y, prevX, prevY, firstY, markerCount, i, j, ln, axis, ends, marker, markerAux, item, xValue, yValue, coords, xScale, yScale, minX, maxX, minY, maxY, line, animation, endMarkerStyle, - endLineStyle, type, props, firstMarker; + endLineStyle, type, props, firstMarker, count, smoothPath, renderPath; //if store is empty then there's nothing to draw. if (!store || !store.getCount()) { @@ -67689,48 +69393,89 @@ Ext.define('Ext.chart.series.Line', { me.clipRect = [bbox.x, bbox.y, bbox.width, bbox.height]; - for (i = 0, ln = axes.length; i < ln; i++) { - axis = chart.axes.get(axes[i]); - if (axis) { - ends = axis.calcEnds(); - if (axis.position == 'top' || axis.position == 'bottom') { - minX = ends.from; - maxX = ends.to; + chart.axes.each(function(axis) { + //only apply position calculations to axes that affect this series + //this means the axis in the position referred by this series and also + //the axis in the other coordinate for this series. For example: (left, top|bottom), + //or (top, left|right), etc. + if (axis.position == me.axis || axis.position != posHash[me.axis]) { + axisCount++; + if (axis.type != 'Numeric') { + numericAxis = false; + return; } - else { - minY = ends.from; - maxY = ends.to; + numericAxis = (numericAxis && axis.type == 'Numeric'); + if (axis) { + ends = axis.calcEnds(); + if (axis.position == 'top' || axis.position == 'bottom') { + minX = ends.from; + maxX = ends.to; + } + else { + minY = ends.from; + maxY = ends.to; + } } } + }); + + //If there's only one axis specified for a series, then we set the default type of the other + //axis to a category axis. So in this case numericAxis, which would be true if both axes affecting + //the series are numeric should be false. + if (numericAxis && axisCount == 1) { + numericAxis = false; } + // If a field was specified without a corresponding axis, create one to get bounds //only do this for the axis where real values are bound (that's why we check for //me.axis) - if (me.xField && !Ext.isNumber(minX) - && (me.axis == 'bottom' || me.axis == 'top')) { - axis = Ext.create('Ext.chart.axis.Axis', { - chart: chart, - fields: [].concat(me.xField) - }).calcEnds(); - minX = axis.from; - maxX = axis.to; - } - if (me.yField && !Ext.isNumber(minY) - && (me.axis == 'right' || me.axis == 'left')) { - axis = Ext.create('Ext.chart.axis.Axis', { - chart: chart, - fields: [].concat(me.yField) - }).calcEnds(); - minY = axis.from; - maxY = axis.to; + if (me.xField && !isNumber(minX)) { + if (me.axis == 'bottom' || me.axis == 'top') { + axis = Ext.create('Ext.chart.axis.Axis', { + chart: chart, + fields: [].concat(me.xField) + }).calcEnds(); + minX = axis.from; + maxX = axis.to; + } else if (numericAxis) { + axis = Ext.create('Ext.chart.axis.Axis', { + chart: chart, + fields: [].concat(me.xField), + forceMinMax: true + }).calcEnds(); + minX = axis.from; + maxX = axis.to; + } + } + + if (me.yField && !isNumber(minY)) { + if (me.axis == 'right' || me.axis == 'left') { + axis = Ext.create('Ext.chart.axis.Axis', { + chart: chart, + fields: [].concat(me.yField) + }).calcEnds(); + minY = axis.from; + maxY = axis.to; + } else if (numericAxis) { + axis = Ext.create('Ext.chart.axis.Axis', { + chart: chart, + fields: [].concat(me.yField), + forceMinMax: true + }).calcEnds(); + minY = axis.from; + maxY = axis.to; + } } - + if (isNaN(minX)) { minX = 0; xScale = bbox.width / (store.getCount() - 1); } else { - xScale = bbox.width / (maxX - minX); + //In case some person decides to set an axis' minimum and maximum + //configuration properties to the same value, then fallback the + //denominator to a > 0 value. + xScale = bbox.width / ((maxX - minX) || (store.getCount() - 1)); } if (isNaN(minY)) { @@ -67738,30 +69483,31 @@ Ext.define('Ext.chart.series.Line', { yScale = bbox.height / (store.getCount() - 1); } else { - yScale = bbox.height / (maxY - minY); + //In case some person decides to set an axis' minimum and maximum + //configuration properties to the same value, then fallback the + //denominator to a > 0 value. + yScale = bbox.height / ((maxY - minY) || (store.getCount() - 1)); } - + store.each(function(record, i) { xValue = record.get(me.xField); yValue = record.get(me.yField); //skip undefined values if (typeof yValue == 'undefined' || (typeof yValue == 'string' && !yValue)) { - if (Ext.isDefined(Ext.global.console)) { - Ext.global.console.warn("[Ext.chart.series.Line] Skipping a store element with an undefined value at ", record, xValue, yValue); - } return; } // Ensure a value if (typeof xValue == 'string' || typeof xValue == 'object' //set as uniform distribution if the axis is a category axis. - || (me.axis != 'top' && me.axis != 'bottom')) { + || (me.axis != 'top' && me.axis != 'bottom' && !numericAxis)) { xValue = i; } if (typeof yValue == 'string' || typeof yValue == 'object' //set as uniform distribution if the axis is a category axis. - || (me.axis != 'left' && me.axis != 'right')) { + || (me.axis != 'left' && me.axis != 'right' && !numericAxis)) { yValue = i; } + storeIndices.push(i); xValues.push(xValue); yValues.push(yValue); }, me); @@ -67775,6 +69521,7 @@ Ext.define('Ext.chart.series.Line', { me.items = []; + count = 0; ln = xValues.length; for (i = 0; i < ln; i++) { xValue = xValues[i]; @@ -67825,7 +69572,7 @@ Ext.define('Ext.chart.series.Line', { } } if (showMarkers) { - marker = markerGroup.getAt(i); + marker = markerGroup.getAt(count++); if (!marker) { marker = Ext.chart.Shape[type](surface, Ext.apply({ group: [group, markerGroup], @@ -67855,12 +69602,13 @@ Ext.define('Ext.chart.series.Line', { }; } } + me.items.push({ series: me, value: [xValue, yValue], point: [x, y], sprite: marker, - storeItem: store.getAt(i) + storeItem: store.getAt(storeIndices[i]) }); prevX = x; prevY = y; @@ -67870,19 +69618,23 @@ Ext.define('Ext.chart.series.Line', { //nothing to be rendered return; } - - if (me.smooth) { - path = Ext.draw.Draw.smooth(path, 6); + + if (smooth) { + smoothPath = Ext.draw.Draw.smooth(path, isNumber(smooth) ? smooth : me.defaultSmoothness); } + renderPath = smooth ? smoothPath : path; + //Correct path if we're animating timeAxis intervals if (chart.markerIndex && me.previousPath) { fromPath = me.previousPath; - fromPath.splice(1, 2); + if (!smooth) { + Ext.Array.erase(fromPath, 1, 2); + } } else { fromPath = path; } - + // Only create a line if one doesn't exist. if (!me.line) { me.line = surface.add(Ext.apply({ @@ -67915,7 +69667,7 @@ Ext.define('Ext.chart.series.Line', { } } if (me.fill) { - fillPath = path.concat([ + fillPath = renderPath.concat([ ["L", x, bbox.y + bbox.height], ["L", bbox.x, bbox.y + bbox.height], ["L", bbox.x, firstY] @@ -67925,7 +69677,7 @@ Ext.define('Ext.chart.series.Line', { group: group, type: 'path', opacity: endLineStyle.opacity || 0.3, - fill: colorArrayStyle[seriesIdx % colorArrayLength] || endLineStyle.fill, + fill: endLineStyle.fill || colorArrayStyle[seriesIdx % colorArrayLength], path: dummyPath }); } @@ -67935,7 +69687,7 @@ Ext.define('Ext.chart.series.Line', { fill = me.fill; line = me.line; //Add renderer to line. There is not unique record associated with this. - rendererAttributes = me.renderer(line, false, { path: path }, i, store); + rendererAttributes = me.renderer(line, false, { path: renderPath }, i, store); Ext.apply(rendererAttributes, endLineStyle || {}, { stroke: endLineStyle.stroke || endLineStyle.fill }); @@ -67959,12 +69711,12 @@ Ext.define('Ext.chart.series.Line', { for(j = 0; j < lnsh; j++) { if (chart.markerIndex && me.previousPath) { me.onAnimate(shadows[j], { - to: { path: path }, + to: { path: renderPath }, from: { path: fromPath } }); } else { me.onAnimate(shadows[j], { - to: { path: path } + to: { path: renderPath } }); } } @@ -67974,38 +69726,31 @@ Ext.define('Ext.chart.series.Line', { me.onAnimate(me.fillPath, { to: Ext.apply({}, { path: fillPath, - fill: colorArrayStyle[seriesIdx % colorArrayLength] || endLineStyle.fill + fill: endLineStyle.fill || colorArrayStyle[seriesIdx % colorArrayLength] }, endLineStyle || {}) }); } //animate markers if (showMarkers) { + count = 0; for(i = 0; i < ln; i++) { - item = markerGroup.getAt(i); - if (item) { - if (me.items[i]) { + if (me.items[i]) { + item = markerGroup.getAt(count++); + if (item) { rendererAttributes = me.renderer(item, store.getAt(i), item._to, i, store); me.onAnimate(item, { to: Ext.apply(rendererAttributes, endMarkerStyle || {}) }); - } else { - item.setAttributes(Ext.apply({ - hidden: true - }, item._to), true); } - } + } } - for(; i < markerCount; i++) { - item = markerGroup.getAt(i); + for(; count < markerCount; count++) { + item = markerGroup.getAt(count); item.hide(true); } -// for(i = 0; i < (chart.markerIndex || 0)-1; i++) { -// item = markerGroup.getAt(i); -// item.hide(true); -// } } } else { - rendererAttributes = me.renderer(me.line, false, { path: path, hidden: false }, i, store); + rendererAttributes = me.renderer(me.line, false, { path: renderPath, hidden: false }, i, store); Ext.apply(rendererAttributes, endLineStyle || {}, { stroke: endLineStyle.stroke || endLineStyle.fill }); @@ -68017,7 +69762,7 @@ Ext.define('Ext.chart.series.Line', { shadows = me.line.shadows; for(j = 0; j < lnsh; j++) { shadows[j].setAttributes({ - path: path + path: renderPath }, true); } } @@ -68027,26 +69772,29 @@ Ext.define('Ext.chart.series.Line', { }, true); } if (showMarkers) { + count = 0; for(i = 0; i < ln; i++) { - item = markerGroup.getAt(i); - if (item) { - if (me.items[i]) { + if (me.items[i]) { + item = markerGroup.getAt(count++); + if (item) { rendererAttributes = me.renderer(item, store.getAt(i), item._to, i, store); item.setAttributes(Ext.apply(endMarkerStyle || {}, rendererAttributes || {}), true); - } else { - item.hide(true); } - } + } } - for(; i < markerCount; i++) { - item = markerGroup.getAt(i); + for(; count < markerCount; count++) { + item = markerGroup.getAt(count); item.hide(true); } } } if (chart.markerIndex) { - path.splice(1, 0, path[1], path[2]); + if (me.smooth) { + Ext.Array.erase(path, 1, 2); + } else { + Ext.Array.splice(path, 1, 0, path[1], path[2]); + } me.previousPath = path; } me.renderLabels(); @@ -68380,58 +70128,56 @@ Ext.define('Ext.chart.series.Line', { * As with all other series, the Pie Series must be appended in the *series* Chart array configuration. See the Chart * documentation for more information. A typical configuration object for the pie series could be: * -{@img Ext.chart.series.Pie/Ext.chart.series.Pie.png Ext.chart.series.Pie chart series} -
- + * {@img Ext.chart.series.Pie/Ext.chart.series.Pie.png Ext.chart.series.Pie chart series} + * + * var store = Ext.create('Ext.data.JsonStore', { + * fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], + * data: [ + * {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13}, + * {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3}, + * {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7}, + * {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23}, + * {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33} + * ] + * }); + * + * Ext.create('Ext.chart.Chart', { + * renderTo: Ext.getBody(), + * width: 500, + * height: 300, + * animate: true, + * store: store, + * theme: 'Base:gradients', + * series: [{ + * type: 'pie', + * field: 'data1', + * showInLegend: true, + * tips: { + * trackMouse: true, + * width: 140, + * height: 28, + * renderer: function(storeItem, item) { + * //calculate and display percentage on hover + * var total = 0; + * store.each(function(rec) { + * total += rec.get('data1'); + * }); + * this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%'); + * } + * }, + * highlight: { + * segment: { + * margin: 20 + * } + * }, + * label: { + * field: 'name', + * display: 'rotate', + * contrast: true, + * font: '18px Arial' + * } + * }] + * }); * * In this configuration we set `pie` as the type for the series, set an object with specific style properties for highlighting options * (triggered when hovering elements). We also set true to `showInLegend` so all the pie slices can be represented by a legend item. @@ -68441,7 +70187,6 @@ Ext.define('Ext.chart.series.Line', { * and size through the `font` parameter. * * @xtype pie - * */ Ext.define('Ext.chart.series.Pie', { @@ -68833,25 +70578,22 @@ Ext.define('Ext.chart.series.Pie', { shadowAttr = shadowAttributes[shindex]; shadow = shadowGroups[shindex].getAt(i); if (!shadow) { - shadow = chart.surface.add(Ext.apply({}, - { + shadow = chart.surface.add(Ext.apply({}, { type: 'path', group: shadowGroups[shindex], strokeLinejoin: "round" - }, - rendererAttributes, shadowAttr)); + }, rendererAttributes, shadowAttr)); } if (animate) { - rendererAttributes = me.renderer(shadow, store.getAt(i), Ext.apply({}, - rendererAttributes, shadowAttr), i, store); + shadowAttr = me.renderer(shadow, store.getAt(i), Ext.apply({}, rendererAttributes, shadowAttr), i, store); me.onAnimate(shadow, { - to: rendererAttributes + to: shadowAttr }); } else { - rendererAttributes = me.renderer(shadow, store.getAt(i), Ext.apply(shadowAttr, { + shadowAttr = me.renderer(shadow, store.getAt(i), Ext.apply(shadowAttr, { hidden: false }), i, store); - shadow.setAttributes(rendererAttributes, true); + shadow.setAttributes(shadowAttr, true); } shadows.push(shadow); } @@ -69391,7 +71133,7 @@ Ext.define('Ext.chart.series.Pie', { */ getLegendColor: function(index) { var me = this; - return me.colorArrayStyle[index % me.colorArrayStyle.length]; + return (me.colorSet && me.colorSet[index % me.colorSet.length]) || me.colorArrayStyle[index % me.colorArrayStyle.length]; } }); @@ -69405,85 +71147,83 @@ Ext.define('Ext.chart.series.Pie', { * As with all other series, the Radar series must be appended in the *series* Chart array configuration. See the Chart * documentation for more information. A typical configuration object for the radar series could be: * - {@img Ext.chart.series.Radar/Ext.chart.series.Radar.png Ext.chart.series.Radar chart series} -- var store = Ext.create('Ext.data.JsonStore', { - fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], - data: [ - {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13}, - {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3}, - {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7}, - {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23}, - {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33} - ] - }); - - Ext.create('Ext.chart.Chart', { - renderTo: Ext.getBody(), - width: 500, - height: 300, - animate: true, - store: store, - theme: 'Base:gradients', - series: [{ - type: 'pie', - field: 'data1', - showInLegend: true, - tips: { - trackMouse: true, - width: 140, - height: 28, - renderer: function(storeItem, item) { - //calculate and display percentage on hover - var total = 0; - store.each(function(rec) { - total += rec.get('data1'); - }); - this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%'); - } - }, - highlight: { - segment: { - margin: 20 - } - }, - label: { - field: 'name', - display: 'rotate', - contrast: true, - font: '18px Arial' - } - }] - }); -
+ * {@img Ext.chart.series.Radar/Ext.chart.series.Radar.png Ext.chart.series.Radar chart series} + * + * var store = Ext.create('Ext.data.JsonStore', { + * fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], + * data: [ + * {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13}, + * {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3}, + * {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7}, + * {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23}, + * {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33} + * ] + * }); + * + * Ext.create('Ext.chart.Chart', { + * renderTo: Ext.getBody(), + * width: 500, + * height: 300, + * animate: true, + * theme:'Category2', + * store: store, + * axes: [{ + * type: 'Radial', + * position: 'radial', + * label: { + * display: true + * } + * }], + * series: [{ + * type: 'radar', + * xField: 'name', + * yField: 'data3', + * showInLegend: true, + * showMarkers: true, + * markerConfig: { + * radius: 5, + * size: 5 + * }, + * style: { + * 'stroke-width': 2, + * fill: 'none' + * } + * },{ + * type: 'radar', + * xField: 'name', + * yField: 'data2', + * showMarkers: true, + * showInLegend: true, + * markerConfig: { + * radius: 5, + * size: 5 + * }, + * style: { + * 'stroke-width': 2, + * fill: 'none' + * } + * },{ + * type: 'radar', + * xField: 'name', + * yField: 'data5', + * showMarkers: true, + * showInLegend: true, + * markerConfig: { + * radius: 5, + * size: 5 + * }, + * style: { + * 'stroke-width': 2, + * fill: 'none' + * } + * }] + * }); * * In this configuration we add three series to the chart. Each of these series is bound to the same categories field, `name` but bound to different properties for each category, * `data1`, `data2` and `data3` respectively. All series display markers by having `showMarkers` enabled. The configuration for the markers of each series can be set by adding properties onto * the markerConfig object. Finally we override some theme styling properties by adding properties to the `style` object. * * @xtype radar - * */ Ext.define('Ext.chart.series.Radar', { @@ -69826,61 +71566,59 @@ Ext.define('Ext.chart.series.Radar', { * As with all other series, the Scatter Series must be appended in the *series* Chart array configuration. See the Chart * documentation for more information on creating charts. A typical configuration object for the scatter could be: * -{@img Ext.chart.series.Scatter/Ext.chart.series.Scatter.png Ext.chart.series.Scatter chart series} -- var store = Ext.create('Ext.data.JsonStore', { - fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], - data: [ - {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13}, - {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3}, - {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7}, - {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23}, - {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33} - ] - }); - - Ext.create('Ext.chart.Chart', { - renderTo: Ext.getBody(), - width: 500, - height: 300, - animate: true, - theme:'Category2', - store: store, - axes: [{ - type: 'Radial', - position: 'radial', - label: { - display: true - } - }], - series: [{ - type: 'radar', - xField: 'name', - yField: 'data3', - showInLegend: true, - showMarkers: true, - markerConfig: { - radius: 5, - size: 5 - }, - style: { - 'stroke-width': 2, - fill: 'none' - } - },{ - type: 'radar', - xField: 'name', - yField: 'data2', - showMarkers: true, - showInLegend: true, - markerConfig: { - radius: 5, - size: 5 - }, - style: { - 'stroke-width': 2, - fill: 'none' - } - },{ - type: 'radar', - xField: 'name', - yField: 'data5', - showMarkers: true, - showInLegend: true, - markerConfig: { - radius: 5, - size: 5 - }, - style: { - 'stroke-width': 2, - fill: 'none' - } - }] - }); -
- + * {@img Ext.chart.series.Scatter/Ext.chart.series.Scatter.png Ext.chart.series.Scatter chart series} + * + * var store = Ext.create('Ext.data.JsonStore', { + * fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], + * data: [ + * {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13}, + * {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3}, + * {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7}, + * {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23}, + * {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33} + * ] + * }); + * + * Ext.create('Ext.chart.Chart', { + * renderTo: Ext.getBody(), + * width: 500, + * height: 300, + * animate: true, + * theme:'Category2', + * store: store, + * axes: [{ + * type: 'Numeric', + * position: 'bottom', + * fields: ['data1', 'data2', 'data3'], + * title: 'Sample Values', + * grid: true, + * minimum: 0 + * }, { + * type: 'Category', + * position: 'left', + * fields: ['name'], + * title: 'Sample Metrics' + * }], + * series: [{ + * type: 'scatter', + * markerConfig: { + * radius: 5, + * size: 5 + * }, + * axis: 'left', + * xField: 'name', + * yField: 'data2' + * }, { + * type: 'scatter', + * markerConfig: { + * radius: 5, + * size: 5 + * }, + * axis: 'left', + * xField: 'name', + * yField: 'data3' + * }] + * }); * * In this configuration we add three different categories of scatter series. Each of them is bound to a different field of the same data store, * `data1`, `data2` and `data3` respectively. All x-fields for the series must be the same field, in this case `name`. @@ -69888,7 +71626,6 @@ Ext.define('Ext.chart.series.Radar', { * axis to show the current values of the elements. * * @xtype scatter - * */ Ext.define('Ext.chart.series.Scatter', { @@ -70038,9 +71775,6 @@ Ext.define('Ext.chart.series.Scatter', { yValue = record.get(me.yField); //skip undefined values if (typeof yValue == 'undefined' || (typeof yValue == 'string' && !yValue)) { - if (Ext.isDefined(Ext.global.console)) { - Ext.global.console.warn("[Ext.chart.series.Scatter] Skipping a store element with an undefined value at ", record, xValue, yValue); - } return; } // Ensure a value @@ -70630,58 +72364,47 @@ Ext.define('Ext.chart.theme.Base', { /** * @author Ed Spencer - * @class Ext.data.ArrayStore - * @extends Ext.data.Store - * @ignore * - *- var store = Ext.create('Ext.data.JsonStore', { - fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], - data: [ - {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13}, - {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3}, - {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7}, - {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23}, - {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33} - ] - }); - - Ext.create('Ext.chart.Chart', { - renderTo: Ext.getBody(), - width: 500, - height: 300, - animate: true, - theme:'Category2', - store: store, - axes: [{ - type: 'Numeric', - position: 'bottom', - fields: ['data1', 'data2', 'data3'], - title: 'Sample Values', - grid: true, - minimum: 0 - }, { - type: 'Category', - position: 'left', - fields: ['name'], - title: 'Sample Metrics' - }], - series: [{ - type: 'scatter', - markerConfig: { - radius: 5, - size: 5 - }, - axis: 'left', - xField: 'name', - yField: 'data2' - }, { - type: 'scatter', - markerConfig: { - radius: 5, - size: 5 - }, - axis: 'left', - xField: 'name', - yField: 'data3' - }] - }); -Small helper class to make creating {@link Ext.data.Store}s from Array data easier. - * An ArrayStore will be automatically configured with a {@link Ext.data.reader.Array}.
+ * Small helper class to make creating {@link Ext.data.Store}s from Array data easier. An ArrayStore will be + * automatically configured with a {@link Ext.data.reader.Array}. * - *A store configuration would be something like:
-
- *-var store = new Ext.data.ArrayStore({ - // store configs - autoDestroy: true, - storeId: 'myStore', - // reader configs - idIndex: 0, - fields: [ - 'company', - {name: 'price', type: 'float'}, - {name: 'change', type: 'float'}, - {name: 'pctChange', type: 'float'}, - {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} - ] -}); -This store is configured to consume a returned object of the form: -
-* - *-var myData = [ - ['3m Co',71.72,0.02,0.03,'9/1 12:00am'], - ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'], - ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'], - ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'], - ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'] -]; -An object literal of this form could also be used as the {@link #data} config option.
+ * A store configuration would be something like: * - **Note: Although not listed here, this class accepts all of the configuration options of - * {@link Ext.data.reader.Array ArrayReader}.
+ * var store = Ext.create('Ext.data.ArrayStore', { + * // store configs + * autoDestroy: true, + * storeId: 'myStore', + * // reader configs + * idIndex: 0, + * fields: [ + * 'company', + * {name: 'price', type: 'float'}, + * {name: 'change', type: 'float'}, + * {name: 'pctChange', type: 'float'}, + * {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} + * ] + * }); * - * @constructor - * @param {Object} config - * @xtype arraystore + * This store is configured to consume a returned object of the form: + * + * var myData = [ + * ['3m Co',71.72,0.02,0.03,'9/1 12:00am'], + * ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'], + * ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'], + * ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'], + * ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'] + * ]; + * + * An object literal of this form could also be used as the {@link #data} config option. + * + * **Note:** Although not listed here, this class accepts all of the configuration options of + * **{@link Ext.data.reader.Array ArrayReader}**. */ Ext.define('Ext.data.ArrayStore', { extend: 'Ext.data.Store', alias: 'store.array', uses: ['Ext.data.reader.Array'], - /** - * @cfg {Ext.data.DataReader} reader @hide - */ constructor: function(config) { config = config || {}; @@ -70726,8 +72449,6 @@ Ext.define('Ext.data.ArrayStore', { * *Usually these are only used internally by {@link Ext.data.proxy.Proxy} classes
* - * @constructor - * @param {Object} config Optional config object */ Ext.define('Ext.data.Batch', { mixins: { @@ -70783,6 +72504,10 @@ Ext.define('Ext.data.Batch', { */ pauseOnException: true, + /** + * Creates new Batch object. + * @param {Object} config (optional) Config object + */ constructor: function(config) { var me = this; @@ -71138,38 +72863,37 @@ associations: [{ return function(options, scope) { options = options || {}; - var foreignKeyId = this.get(foreignKey), - instance, callbackFn; + var model = this, + foreignKeyId = model.get(foreignKey), + instance, + args; - if (this[instanceName] === undefined) { + if (model[instanceName] === undefined) { instance = Ext.ModelManager.create({}, associatedName); instance.set(primaryKey, foreignKeyId); if (typeof options == 'function') { options = { callback: options, - scope: scope || this + scope: scope || model }; } associatedModel.load(foreignKeyId, options); + model[instanceName] = associatedModel; + return associatedModel; } else { - instance = this[instanceName]; - + instance = model[instanceName]; + args = [instance]; + scope = scope || model; + //TODO: We're duplicating the callback invokation code that the instance.load() call above //makes here - ought to be able to normalize this - perhaps by caching at the Model.load layer //instead of the association layer. - if (typeof options == 'function') { - options.call(scope || this, instance); - } - - if (options.success) { - options.success.call(scope || this, instance); - } - - if (options.callback) { - options.callback.call(scope || this, instance); - } + Ext.callback(options, scope, args); + Ext.callback(options.success, scope, args); + Ext.callback(options.failure, scope, args); + Ext.callback(options.callback, scope, args); return instance; } @@ -71234,7 +72958,7 @@ Ext.define('Ext.data.BufferStore', { *
A provider does not need to be invoked directly, providers are added via - * {@link Ext.direct.Manager}.{@link Ext.direct.Manager#add add}.
+ * {@link Ext.direct.Manager}.{@link Ext.direct.Manager#addProvider addProvider}. * *Router
* @@ -71467,7 +73191,7 @@ Ext.direct.Manager.addProvider({ * method for all requests. Alternatively, you can provide an {@link #api} configuration. This * allows you to specify a different remoting method for each CRUD action. * - * ## Paramaters + * ## Parameters * This proxy provides options to help configure which parameters will be sent to the server. * By specifying the {@link #paramsAsHash} option, it will send an object literal containing each * of the passed parameters. The {@link #paramOrder} option can be used to specify the order in which @@ -71561,9 +73285,6 @@ paramOrder: 'param1|param2|param' i = 0, len; - if (!fn) { - Ext.Error.raise('No direct function specified for this proxy'); - } if (operation.allowWrite()) { request = writer.write(request); @@ -71659,9 +73380,6 @@ paramOrder: 'param1|param2|param' **Note: Although not listed here, this class accepts all of the configuration options of * {@link Ext.data.reader.Json JsonReader} and {@link Ext.data.proxy.JsonP JsonPProxy}.
- * @constructor - * @param {Object} config * @xtype jsonpstore */ Ext.define('Ext.data.JsonPStore', { @@ -72602,47 +74323,41 @@ Ext.define('Ext.data.NodeInterface', { modelName = record.modelName, modelClass = mgr.getModel(modelName), idName = modelClass.prototype.idProperty, - instances = Ext.Array.filter(mgr.all.getArray(), function(item) { - return item.modelName == modelName; - }), - iln = instances.length, newFields = [], - i, instance, jln, j, newField; + i, newField, len; // Start by adding the NodeInterface methods to the Model's prototype modelClass.override(this.getPrototypeBody()); newFields = this.applyFields(modelClass, [ - {name: idName, type: 'string', defaultValue: null}, - {name: 'parentId', type: 'string', defaultValue: null}, - {name: 'index', type: 'int', defaultValue: null}, - {name: 'depth', type: 'int', defaultValue: 0}, - {name: 'expanded', type: 'bool', defaultValue: false, persist: false}, - {name: 'checked', type: 'auto', defaultValue: null}, - {name: 'leaf', type: 'bool', defaultValue: false, persist: false}, - {name: 'cls', type: 'string', defaultValue: null, persist: false}, - {name: 'iconCls', type: 'string', defaultValue: null, persist: false}, - {name: 'root', type: 'boolean', defaultValue: false, persist: false}, - {name: 'isLast', type: 'boolean', defaultValue: false, persist: false}, - {name: 'isFirst', type: 'boolean', defaultValue: false, persist: false}, - {name: 'allowDrop', type: 'boolean', defaultValue: true, persist: false}, - {name: 'allowDrag', type: 'boolean', defaultValue: true, persist: false}, - {name: 'loaded', type: 'boolean', defaultValue: false, persist: false}, - {name: 'loading', type: 'boolean', defaultValue: false, persist: false}, - {name: 'href', type: 'string', defaultValue: null, persist: false}, - {name: 'hrefTarget',type: 'string', defaultValue: null, persist: false}, - {name: 'qtip', type: 'string', defaultValue: null, persist: false}, - {name: 'qtitle', type: 'string', defaultValue: null, persist: false} + {name: idName, type: 'string', defaultValue: null}, + {name: 'parentId', type: 'string', defaultValue: null}, + {name: 'index', type: 'int', defaultValue: null}, + {name: 'depth', type: 'int', defaultValue: 0}, + {name: 'expanded', type: 'bool', defaultValue: false, persist: false}, + {name: 'expandable', type: 'bool', defaultValue: true, persist: false}, + {name: 'checked', type: 'auto', defaultValue: null}, + {name: 'leaf', type: 'bool', defaultValue: false, persist: false}, + {name: 'cls', type: 'string', defaultValue: null, persist: false}, + {name: 'iconCls', type: 'string', defaultValue: null, persist: false}, + {name: 'root', type: 'boolean', defaultValue: false, persist: false}, + {name: 'isLast', type: 'boolean', defaultValue: false, persist: false}, + {name: 'isFirst', type: 'boolean', defaultValue: false, persist: false}, + {name: 'allowDrop', type: 'boolean', defaultValue: true, persist: false}, + {name: 'allowDrag', type: 'boolean', defaultValue: true, persist: false}, + {name: 'loaded', type: 'boolean', defaultValue: false, persist: false}, + {name: 'loading', type: 'boolean', defaultValue: false, persist: false}, + {name: 'href', type: 'string', defaultValue: null, persist: false}, + {name: 'hrefTarget', type: 'string', defaultValue: null, persist: false}, + {name: 'qtip', type: 'string', defaultValue: null, persist: false}, + {name: 'qtitle', type: 'string', defaultValue: null, persist: false} ]); - jln = newFields.length; - // Set default values to all instances already out there - for (i = 0; i < iln; i++) { - instance = instances[i]; - for (j = 0; j < jln; j++) { - newField = newFields[j]; - if (instance.get(newField.name) === undefined) { - instance.data[newField.name] = newField.defaultValue; - } + len = newFields.length; + // Set default values + for (i = 0; i < len; ++i) { + newField = newFields[i]; + if (record.get(newField.name) === undefined) { + record.data[newField.name] = newField.defaultValue; } } } @@ -72759,9 +74474,10 @@ Ext.define('Ext.data.NodeInterface', { "beforecollapse", /** - * @event beforecollapse - * Fires before this node is collapsed. - * @param {Node} this The collapsing node + * @event sort + * Fires when this node's childNodes are sorted. + * @param {Node} this This node. + * @param {Array} The childNodes of this node. */ "sort" ]); @@ -72904,7 +74620,12 @@ Ext.define('Ext.data.NodeInterface', { * @return {Boolean} */ isExpandable : function() { - return this.get('expandable') || this.hasChildNodes(); + var me = this; + + if (me.get('expandable')) { + return !(me.isLeaf() || (me.isLoaded() && !me.hasChildNodes())); + } + return false; }, /** @@ -73011,7 +74732,7 @@ Ext.define('Ext.data.NodeInterface', { } // remove it from childNodes collection - me.childNodes.splice(index, 1); + Ext.Array.erase(me.childNodes, index, 1); // update child refs if (me.firstChild == node) { @@ -73097,7 +74818,8 @@ Ext.define('Ext.data.NodeInterface', { * 2) When destroy on the tree is called * 3) For destroying child nodes on a node */ - var me = this; + var me = this, + options = me.destroyOptions; if (silent === true) { me.clear(true); @@ -73105,11 +74827,13 @@ Ext.define('Ext.data.NodeInterface', { n.destroy(true); }); me.childNodes = null; + delete me.destroyOptions; + me.callOverridden([options]); } else { + me.destroyOptions = silent; + // overridden method will be called, since remove will end up calling destroy(true); me.remove(true); } - - me.callOverridden(); }, /** @@ -73158,7 +74882,7 @@ Ext.define('Ext.data.NodeInterface', { me.setFirstChild(node); } - me.childNodes.splice(refIndex, 0, node); + Ext.Array.splice(me.childNodes, refIndex, 0, node); node.parentNode = me; node.nextSibling = refNode; @@ -73514,7 +75238,7 @@ Ext.define('Ext.data.NodeInterface', { // whether we have to asynchronously load the children from the server // first. Thats why we pass a callback function to the event that the // store can call once it has loaded and parsed all the children. - me.fireEvent('beforeexpand', me, function(records) { + me.fireEvent('beforeexpand', me, function() { me.set('expanded', true); me.fireEvent('expand', me, me.childNodes, false); @@ -73566,15 +75290,14 @@ Ext.define('Ext.data.NodeInterface', { nodes[i].expand(recursive, function () { expanding--; if (callback && !expanding) { - Ext.callback(callback, scope || me, me.childNodes); + Ext.callback(callback, scope || me, [me.childNodes]); } }); } } if (!expanding && callback) { - Ext.callback(callback, scope || me, me.childNodes); - } + Ext.callback(callback, scope || me, [me.childNodes]); } }, /** @@ -73590,7 +75313,7 @@ Ext.define('Ext.data.NodeInterface', { if (!me.isLeaf()) { // Now we check if this record is already collapsing or collapsed if (!me.collapsing && me.isExpanded()) { - me.fireEvent('beforecollapse', me, function(records) { + me.fireEvent('beforecollapse', me, function() { me.set('expanded', false); me.fireEvent('collapse', me, me.childNodes, false); @@ -73610,7 +75333,7 @@ Ext.define('Ext.data.NodeInterface', { } // If it's not then we fire the callback right away else { - Ext.callback(callback, scope || me, me.childNodes); + Ext.callback(callback, scope || me, [me.childNodes]); } }, @@ -73635,14 +75358,14 @@ Ext.define('Ext.data.NodeInterface', { nodes[i].collapse(recursive, function () { collapsing--; if (callback && !collapsing) { - Ext.callback(callback, scope || me, me.childNodes); + Ext.callback(callback, scope || me, [me.childNodes]); } }); } } if (!collapsing && callback) { - Ext.callback(callback, scope || me, me.childNodes); + Ext.callback(callback, scope || me, [me.childNodes]); } } }; @@ -73689,10 +75412,6 @@ Ext.define('Ext.data.NodeStore', { config = config || {}; Ext.apply(me, config); - if (Ext.isDefined(me.proxy)) { - Ext.Error.raise("A NodeStore cannot be bound to a proxy. Instead bind it to a record " + - "decorated with the NodeInterface by setting the node config."); - } config.proxy = {type: 'proxy'}; me.callParent([config]); @@ -73903,8 +75622,6 @@ Ext.define('Ext.data.NodeStore', { * All this class does is standardize the representation of a Request as used by any ServerProxy subclass, * it does not contain any actual logic or perform the request itself. * - * @constructor - * @param {Object} config Optional config object */ Ext.define('Ext.data.Request', { /** @@ -73927,6 +75644,10 @@ Ext.define('Ext.data.Request', { */ url: undefined, + /** + * Creates the Request object. + * @param {Object} config (optional) Config object. + */ constructor: function(config) { Ext.apply(this, config); } @@ -73942,8 +75663,6 @@ Ext.define('Ext.data.Request', { * centralized fashion. In general this class is not used directly, rather used internally * by other parts of the framework. * - * @constructor - * @param {Node} root (optional) The root node */ Ext.define('Ext.data.Tree', { alias: 'data.tree', @@ -73957,7 +75676,11 @@ Ext.define('Ext.data.Tree', { * @type Node */ root: null, - + + /** + * Creates new Tree object. + * @param {Node} root (optional) The root node + */ constructor: function(root) { var me = this; @@ -74220,21 +75943,20 @@ Ext.define('Ext.data.Tree', { } }); /** - * @class Ext.data.TreeStore - * @extends Ext.data.AbstractStore - * * The TreeStore is a store implementation that is backed by by an {@link Ext.data.Tree}. * It provides convenience methods for loading nodes, as well as the ability to use * the hierarchical tree structure combined with a store. This class is generally used * in conjunction with {@link Ext.tree.Panel}. This class also relays many events from * the Tree for convenience. * - * ## Using Models + * # Using Models + * * If no Model is specified, an implicit model will be created that implements {@link Ext.data.NodeInterface}. * The standard Tree fields will also be copied onto the Model for maintaining their state. * - * ## Reading Nested Data - * For the tree to read nested data, the {@link Ext.data.Reader} must be configured with a root property, + * # Reading Nested Data + * + * For the tree to read nested data, the {@link Ext.data.reader.Reader} must be configured with a root property, * so the reader can find nested data for each node. If a root is not specified, it will default to * 'children'. */ @@ -74244,14 +75966,33 @@ Ext.define('Ext.data.TreeStore', { requires: ['Ext.data.Tree', 'Ext.data.NodeInterface', 'Ext.data.NodeStore'], /** - * @cfg {Boolean} clearOnLoad (optional) Default to true. Remove previously existing - * child nodes before loading. + * @cfg {Ext.data.Model/Ext.data.NodeInterface/Object} root + * The root node for this store. For example: + * + * root: { + * expanded: true, + * text: "My Root", + * children: [ + * { text: "Child 1", leaf: true }, + * { text: "Child 2", expanded: true, children: [ + * { text: "GrandChild", leaf: true } + * ] } + * ] + * } + * + * Setting the `root` config option is the same as calling {@link #setRootNode}. + */ + + /** + * @cfg {Boolean} clearOnLoad + * Remove previously existing child nodes before loading. Default to true. */ clearOnLoad : true, /** - * @cfg {String} nodeParam The name of the parameter sent to the server which contains - * the identifier of the node. Defaults to 'node'. + * @cfg {String} nodeParam + * The name of the parameter sent to the server which contains the identifier of the node. + * Defaults to 'node'. */ nodeParam: 'node', @@ -74268,7 +76009,8 @@ Ext.define('Ext.data.TreeStore', { defaultRootProperty: 'children', /** - * @cfg {Boolean} folderSort Set to true to automatically prepend a leaf sorter (defaults to undefined) + * @cfg {Boolean} folderSort + * Set to true to automatically prepend a leaf sorter. Defaults to `undefined`. */ folderSort: false, @@ -74276,7 +76018,6 @@ Ext.define('Ext.data.TreeStore', { var me = this, root, fields; - config = Ext.apply({}, config); @@ -74293,23 +76034,6 @@ Ext.define('Ext.data.TreeStore', { // We create our data tree. me.tree = Ext.create('Ext.data.Tree'); - - me.tree.on({ - scope: me, - remove: me.onNodeRemove, - beforeexpand: me.onBeforeNodeExpand, - beforecollapse: me.onBeforeNodeCollapse, - append: me.onNodeAdded, - insert: me.onNodeAdded - }); - - me.onBeforeSort(); - - root = me.root; - if (root) { - delete me.root; - me.setRootNode(root); - } me.relayEvents(me.tree, [ /** @@ -74433,6 +76157,25 @@ Ext.define('Ext.data.TreeStore', { */ "rootchange" ]); + + me.tree.on({ + scope: me, + remove: me.onNodeRemove, + // this event must follow the relay to beforeitemexpand to allow users to + // cancel the expand: + beforeexpand: me.onBeforeNodeExpand, + beforecollapse: me.onBeforeNodeCollapse, + append: me.onNodeAdded, + insert: me.onNodeAdded + }); + + me.onBeforeSort(); + + root = me.root; + if (root) { + delete me.root; + me.setRootNode(root); + } me.addEvents( /** @@ -74561,8 +76304,8 @@ Ext.define('Ext.data.TreeStore', { }, /** - * Sets the root node for this store - * @param {Ext.data.Model/Ext.data.NodeInterface} root + * Sets the root node for this store. See also the {@link #root} config option. + * @param {Ext.data.Model/Ext.data.NodeInterface/Object} root * @return {Ext.data.NodeInterface} The new root */ setRootNode: function(root) { @@ -74698,7 +76441,7 @@ Ext.define('Ext.data.TreeStore', { }, /** - * Create any new records when a write is returned from the server. + * Creates any new records when a write is returned from the server. * @private * @param {Array} records The array of new records * @param {Ext.data.Operation} operation The operation that just completed @@ -74714,7 +76457,7 @@ Ext.define('Ext.data.TreeStore', { original, index; - /** + /* * Loop over each record returned from the server. Assume they are * returned in order of how they were sent. If we find a matching * record, replace it with the newly created one. @@ -74737,7 +76480,7 @@ Ext.define('Ext.data.TreeStore', { }, /** - * Update any records when a write is returned from the server. + * Updates any records when a write is returned from the server. * @private * @param {Array} records The array of updated records * @param {Ext.data.Operation} operation The operation that just completed @@ -74768,7 +76511,7 @@ Ext.define('Ext.data.TreeStore', { }, /** - * Remove any records when a write is returned from the server. + * Removes any records when a write is returned from the server. * @private * @param {Array} records The array of removed records * @param {Ext.data.Operation} operation The operation that just completed @@ -74782,7 +76525,7 @@ Ext.define('Ext.data.TreeStore', { // inherit docs removeAll: function() { - this.getRootNode().destroy(); + this.getRootNode().destroy(true); this.fireEvent('clear', this); }, @@ -74856,8 +76599,6 @@ var store = new Ext.data.XmlStore({ * An object literal of this form could also be used as the {@link #data} config option. *Note: Although not listed here, this class accepts all of the configuration options of * {@link Ext.data.reader.Xml XmlReader}.
- * @constructor - * @param {Object} config * @xtype xmlstore */ Ext.define('Ext.data.XmlStore', { @@ -74901,7 +76642,6 @@ Ext.define('Ext.data.proxy.Client', { * from the client side storage, as well as removing any supporting data (such as lists of record IDs) */ clear: function() { - Ext.Error.raise("The Ext.data.proxy.Client subclass that you are using has not defined a 'clear' function. See src/data/ClientProxy.js for details."); } }); /** @@ -75248,10 +76988,6 @@ Ext.define('Ext.data.proxy.JsonP', { *WebStorageProxy is simply a superclass for the {@link Ext.data.proxy.LocalStorage localStorage} and * {@link Ext.data.proxy.SessionStorage sessionStorage} proxies. It uses the new HTML5 key/value client-side storage * objects to save {@link Ext.data.Model model instances} for offline use.
- * - * @constructor - * Creates the proxy, throws an error if local storage is not supported in the current browser - * @param {Object} config Optional config object */ Ext.define('Ext.data.proxy.WebStorage', { extend: 'Ext.data.proxy.Client', @@ -75263,7 +76999,8 @@ Ext.define('Ext.data.proxy.WebStorage', { id: undefined, /** - * @ignore + * Creates the proxy, throws an error if local storage is not supported in the current browser + * @param {Object} config (optional) Config object. */ constructor: function(config) { this.callParent(arguments); @@ -75275,16 +77012,10 @@ Ext.define('Ext.data.proxy.WebStorage', { */ this.cache = {}; - if (this.getStorageObject() === undefined) { - Ext.Error.raise("Local Storage is not supported in this browser, please use another type of data proxy"); - } //if an id is not given, try to use the store's id instead this.id = this.id || (this.store ? this.store.storeId : undefined); - if (this.id === undefined) { - Ext.Error.raise("No unique id was provided to the local storage proxy. See Ext.data.proxy.LocalStorage documentation for details"); - } this.initialize(); }, @@ -75636,7 +77367,6 @@ Ext.define('Ext.data.proxy.WebStorage', { * @return {Object} The storage object */ getStorageObject: function() { - Ext.Error.raise("The getStorageObject function has not been defined in your Ext.data.proxy.WebStorage subclass"); } }); /** @@ -76283,6 +78013,10 @@ Ext.define('Ext.data.reader.Xml', { alternateClassName: 'Ext.data.XmlReader', alias : 'reader.xml', + /** + * @cfg {String} record The DomQuery path to the repeated element which contains record information. + */ + /** * @private * Creates a function to return some particular key of data from a response. The totalProperty and @@ -76290,58 +78024,33 @@ Ext.define('Ext.data.reader.Xml', { * @param {String} key * @return {Function} */ - - /** - * @cfg {String} record The DomQuery path to the repeated element which contains record information. - */ - - createAccessor: function() { - var selectValue = function(expr, root){ - var node = Ext.DomQuery.selectNode(expr, root), - val; - - - - }; - - return function(expr) { - var me = this; - - if (Ext.isEmpty(expr)) { - return Ext.emptyFn; - } - - if (Ext.isFunction(expr)) { - return expr; - } - - return function(root) { - var node = Ext.DomQuery.selectNode(expr, root), - val = me.getNodeValue(node); - - return Ext.isEmpty(val) ? null : val; - }; + createAccessor: function(expr) { + var me = this; + + if (Ext.isEmpty(expr)) { + return Ext.emptyFn; + } + + if (Ext.isFunction(expr)) { + return expr; + } + + return function(root) { + return me.getNodeValue(Ext.DomQuery.selectNode(expr, root)); }; - }(), + }, getNodeValue: function(node) { - var val; if (node && node.firstChild) { - val = node.firstChild.nodeValue; + return node.firstChild.nodeValue; } - return val || null; + return undefined; }, //inherit docs getResponseData: function(response) { var xml = response.responseXML; - if (!xml) { - Ext.Error.raise({ - response: response, - msg: 'XML data not found in the response' - }); - } return xml; }, @@ -76384,9 +78093,6 @@ Ext.define('Ext.data.reader.Xml', { extractData: function(root) { var recordName = this.record; - if (!recordName) { - Ext.Error.raise('Record is a required parameter'); - } if (recordName != root.nodeName) { root = Ext.DomQuery.select(recordName, root); @@ -76427,13 +78133,17 @@ Ext.define('Ext.data.reader.Xml', { return this.callParent([doc]); } }); - /** * @author Ed Spencer * @class Ext.data.writer.Xml * @extends Ext.data.writer.Writer - * - *Writer that outputs model data in XML format
+ +This class is used to write {@link Ext.data.Model} data to the server in an XML format. +The {@link #documentRoot} property is used to specify the root element in the XML document. +The {@link #record} option is used to specify the element name for each record that will make +up the XML document. + + * @markdown */ Ext.define('Ext.data.writer.Xml', { @@ -76519,9 +78229,6 @@ Ext.define('Ext.data.writer.Xml', { * created after some kind of interaction with the server. * The event class is essentially just a data structure * to hold a direct response. - * - * @constructor - * @param {Object} config The config object */ Ext.define('Ext.direct.Event', { @@ -76534,7 +78241,11 @@ Ext.define('Ext.direct.Event', { /* End Definitions */ status: true, - + + /** + * Creates new Event. + * @param {Object} config (optional) Config object. + */ constructor: function(config) { Ext.apply(this, config); }, @@ -76679,11 +78390,13 @@ p.disconnect(); /** * Abstract methods for subclasses to implement. + * @method */ connect: Ext.emptyFn, /** * Abstract methods for subclasses to implement. + * @method */ disconnect: Ext.emptyFn }); @@ -76887,7 +78600,6 @@ Ext.define('Ext.direct.PollingProvider', { }); me.fireEvent('connect', me); } else if (!url) { - Ext.Error.raise('Error initializing PollingProvider, no url configured.'); } }, @@ -77008,8 +78720,6 @@ Ext.define('Ext.direct.RemotingMethod', { * @class Ext.direct.Transaction * @extends Object *Supporting Class for Ext.Direct (not intended to be used directly).
- * @constructor - * @param {Object} config */ Ext.define('Ext.direct.Transaction', { @@ -77023,7 +78733,11 @@ Ext.define('Ext.direct.Transaction', { }, /* End Definitions */ - + + /** + * Creates new Transaction. + * @param {Object} config (optional) Config object. + */ constructor: function(config){ var me = this; @@ -77137,7 +78851,7 @@ TestAction.multiply( /** * @cfg {String} url - * Required. The url to connect to the {@link Ext.direct.Manager} server-side router. + * Required. The url to connect to the {@link Ext.direct.Manager} server-side router. */ /** @@ -77268,7 +78982,6 @@ TestAction.multiply( me.connected = true; me.fireEvent('connect', me); } else if(!me.url) { - Ext.Error.raise('Error initializing RemotingProvider, no url configured.'); } }, @@ -77830,7 +79543,8 @@ Ext.define('Ext.draw.SpriteDD', { * A Sprite is an object rendered in a Drawing surface. There are different options and types of sprites. * The configuration of a Sprite is an object with the following properties: * - * - **type** - (String) The type of the sprite. Possible options are 'circle', 'path', 'rect', 'text', 'square'. + * - **type** - (String) The type of the sprite. Possible options are 'circle', 'path', 'rect', 'text', 'square', 'image'. + * - **group** - (String/Array) The group that this sprite belongs to, or an array of groups. Only relevant when added to a {@link Ext.draw.Surface}. * - **width** - (Number) Used in rectangle sprites, the width of the rectangle. * - **height** - (Number) Used in rectangle sprites, the height of the rectangle. * - **size** - (Number) Used in square sprites, the dimension of the square. @@ -77844,9 +79558,12 @@ Ext.define('Ext.draw.SpriteDD', { * - **stroke-width** - (Number) The width of the stroke. * - **font** - (String) Used with text type sprites. The full font description. Uses the same syntax as the CSS `font` parameter. * - **text** - (String) Used with text type sprites. The text itself. + * - **translate** - (Object) Defines a translation for the Sprite. There's more information on this property below. + * - **rotate** - (Object) Defines a rotation for the Sprite. There's more information on this property below. + * - **scale** - (Object) Defines a scaling for the Sprite. There's more information on this property below. * - * Additionally there are three transform objects that can be set with `setAttributes` which are `translate`, `rotate` and - * `scale`. + * + * ## Translation * * For translate, the configuration object contains x and y attributes that indicate where to * translate the object. For example: @@ -77857,6 +79574,9 @@ Ext.define('Ext.draw.SpriteDD', { * y: 10 * } * }, true); + * + * + * ## Rotation * * For rotation, the configuration object contains x and y attributes for the center of the rotation (which are optional), * and a `degrees` attribute that specifies the rotation in degrees. For example: @@ -77866,6 +79586,21 @@ Ext.define('Ext.draw.SpriteDD', { * degrees: 90 * } * }, true); + * + * That example will create a 90 degrees rotation using the centroid of the Sprite as center of rotation, whereas: + * + * sprite.setAttributes({ + * rotate: { + * x: 0, + * y: 0, + * degrees: 90 + * } + * }, true); + * + * will create a rotation around the `(0, 0)` axis. + * + * + * ## Scaling * * For scaling, the configuration object contains x and y attributes for the x-axis and y-axis scaling. For example: * @@ -77876,6 +79611,22 @@ Ext.define('Ext.draw.SpriteDD', { * } * }, true); * + * You can also specify the center of scaling by adding `cx` and `cy` as properties: + * + * sprite.setAttributes({ + * scale: { + * cx: 0, + * cy: 0, + * x: 10, + * y: 3 + * } + * }, true); + * + * That last example will scale a sprite taking as centers of scaling the `(0, 0)` coordinate. + * + * + * ## Creating and adding a Sprite to a Surface + * * Sprites can be created with a reference to a {@link Ext.draw.Surface} * * var drawComponent = Ext.create('Ext.draw.Component', options here...); @@ -77912,6 +79663,68 @@ Ext.define('Ext.draw.SpriteDD', { * }); */ Ext.define('Ext.draw.Sprite', { + + /** + * @cfg {String} type The type of the sprite. Possible options are 'circle', 'path', 'rect', 'text', 'square', 'image' + */ + + /** + * @cfg {Number} width Used in rectangle sprites, the width of the rectangle + */ + + /** + * @cfg {Number} height Used in rectangle sprites, the height of the rectangle + */ + + /** + * @cfg {Number} size Used in square sprites, the dimension of the square + */ + + /** + * @cfg {Number} radius Used in circle sprites, the radius of the circle + */ + + /** + * @cfg {Number} x The position along the x-axis + */ + + /** + * @cfg {Number} y The position along the y-axis + */ + + /** + * @cfg {Array} path Used in path sprites, the path of the sprite written in SVG-like path syntax + */ + + /** + * @cfg {Number} opacity The opacity of the sprite + */ + + /** + * @cfg {String} fill The fill color + */ + + /** + * @cfg {String} stroke The stroke color + */ + + /** + * @cfg {Number} stroke-width The width of the stroke + */ + + /** + * @cfg {String} font Used with text type sprites. The full font description. Uses the same syntax as the CSS font parameter + */ + + /** + * @cfg {String} text Used with text type sprites. The text itself + */ + + /** + * @cfg {String/Array} group The group that this sprite belongs to, or an array of groups. Only relevant when added to a + * {@link Ext.draw.Surface} + */ + /* Begin Definitions */ mixins: { @@ -78013,7 +79826,7 @@ Ext.define('Ext.draw.Sprite', { me.draggable = true; //create element if it doesn't exist. if (!me.el) { - me.surface.createSprite(me); + me.surface.createSpriteElement(me); } me.dd = Ext.create('Ext.draw.SpriteDD', me, Ext.isBoolean(me.draggable) ? null : me.draggable); me.on('beforedestroy', me.dd.destroy, me.dd); @@ -78036,6 +79849,7 @@ Ext.define('Ext.draw.Sprite', { spriteAttrs = me.attr, attr, i, translate, translation, rotate, rotation, scale, scaling; + attrs = Ext.apply({}, attrs); for (attr in custom) { if (attrs.hasOwnProperty(attr) && typeof custom[attr] == "function") { Ext.apply(attrs, custom[attr].apply(me, [].concat(attrs[attr]))); @@ -78253,6 +80067,8 @@ Ext.define('Ext.draw.engine.Svg', { strokeOpacity: "stroke-opacity", strokeLinejoin: "stroke-linejoin" }, + + parsers: {}, minDefaults: { circle: { @@ -78661,6 +80477,12 @@ Ext.define('Ext.draw.engine.Svg', { el = sprite.el, group = sprite.group, sattr = sprite.attr, + parsers = me.parsers, + //Safari does not handle linear gradients correctly in quirksmode + //ref: https://bugs.webkit.org/show_bug.cgi?id=41952 + //ref: EXTJSIV-1472 + gradientsMap = me.gradientsMap || {}, + safariFix = Ext.isSafari && !Ext.isStrict, groups, i, ln, attrs, font, key, style, name, rect; if (group) { @@ -78675,8 +80497,8 @@ Ext.define('Ext.draw.engine.Svg', { attrs = me.scrubAttrs(sprite) || {}; // if (sprite.dirtyPath) { - sprite.bbox.plain = 0; - sprite.bbox.transform = 0; + sprite.bbox.plain = 0; + sprite.bbox.transform = 0; if (sprite.type == "circle" || sprite.type == "ellipse") { attrs.cx = attrs.cx || attrs.x; attrs.cy = attrs.cy || attrs.y; @@ -78685,10 +80507,13 @@ Ext.define('Ext.draw.engine.Svg', { attrs.rx = attrs.ry = attrs.r; } else if (sprite.type == "path" && attrs.d) { - attrs.d = Ext.draw.Draw.pathToAbsolute(attrs.d); + attrs.d = Ext.draw.Draw.pathToString(Ext.draw.Draw.pathToAbsolute(attrs.d)); } sprite.dirtyPath = false; // } + // else { + // delete attrs.d; + // } if (attrs['clip-rect']) { me.setClip(sprite, attrs); @@ -78709,9 +80534,22 @@ Ext.define('Ext.draw.engine.Svg', { } for (key in attrs) { if (attrs.hasOwnProperty(key) && attrs[key] != null) { - el.dom.setAttribute(key, String(attrs[key])); + //Safari does not handle linear gradients correctly in quirksmode + //ref: https://bugs.webkit.org/show_bug.cgi?id=41952 + //ref: EXTJSIV-1472 + //if we're Safari in QuirksMode and we're applying some color attribute and the value of that + //attribute is a reference to a gradient then assign a plain color to that value instead of the gradient. + if (safariFix && ('color|stroke|fill'.indexOf(key) > -1) && (attrs[key] in gradientsMap)) { + attrs[key] = gradientsMap[attrs[key]]; + } + if (key in parsers) { + el.dom.setAttribute(key, parsers[key](attrs[key], sprite, me)); + } else { + el.dom.setAttribute(key, attrs[key]); + } } } + if (sprite.type == 'text') { me.tuneText(sprite, attrs); } @@ -78789,40 +80627,49 @@ Ext.define('Ext.draw.engine.Svg', { addGradient: function(gradient) { gradient = Ext.draw.Draw.parseGradient(gradient); - var ln = gradient.stops.length, + var me = this, + ln = gradient.stops.length, vector = gradient.vector, - gradientEl, - stop, - stopEl, - i; - if (gradient.type == "linear") { - gradientEl = this.createSvgElement("linearGradient"); - gradientEl.setAttribute("x1", vector[0]); - gradientEl.setAttribute("y1", vector[1]); - gradientEl.setAttribute("x2", vector[2]); - gradientEl.setAttribute("y2", vector[3]); - } - else { - gradientEl = this.createSvgElement("radialGradient"); - gradientEl.setAttribute("cx", gradient.centerX); - gradientEl.setAttribute("cy", gradient.centerY); - gradientEl.setAttribute("r", gradient.radius); - if (Ext.isNumber(gradient.focalX) && Ext.isNumber(gradient.focalY)) { - gradientEl.setAttribute("fx", gradient.focalX); - gradientEl.setAttribute("fy", gradient.focalY); + //Safari does not handle linear gradients correctly in quirksmode + //ref: https://bugs.webkit.org/show_bug.cgi?id=41952 + //ref: EXTJSIV-1472 + usePlain = Ext.isSafari && !Ext.isStrict, + gradientEl, stop, stopEl, i, gradientsMap; + + gradientsMap = me.gradientsMap || {}; + + if (!usePlain) { + if (gradient.type == "linear") { + gradientEl = me.createSvgElement("linearGradient"); + gradientEl.setAttribute("x1", vector[0]); + gradientEl.setAttribute("y1", vector[1]); + gradientEl.setAttribute("x2", vector[2]); + gradientEl.setAttribute("y2", vector[3]); } - } - gradientEl.id = gradient.id; - this.getDefs().appendChild(gradientEl); - - for (i = 0; i < ln; i++) { - stop = gradient.stops[i]; - stopEl = this.createSvgElement("stop"); - stopEl.setAttribute("offset", stop.offset + "%"); - stopEl.setAttribute("stop-color", stop.color); - stopEl.setAttribute("stop-opacity",stop.opacity); - gradientEl.appendChild(stopEl); + else { + gradientEl = me.createSvgElement("radialGradient"); + gradientEl.setAttribute("cx", gradient.centerX); + gradientEl.setAttribute("cy", gradient.centerY); + gradientEl.setAttribute("r", gradient.radius); + if (Ext.isNumber(gradient.focalX) && Ext.isNumber(gradient.focalY)) { + gradientEl.setAttribute("fx", gradient.focalX); + gradientEl.setAttribute("fy", gradient.focalY); + } + } + gradientEl.id = gradient.id; + me.getDefs().appendChild(gradientEl); + for (i = 0; i < ln; i++) { + stop = gradient.stops[i]; + stopEl = me.createSvgElement("stop"); + stopEl.setAttribute("offset", stop.offset + "%"); + stopEl.setAttribute("stop-color", stop.color); + stopEl.setAttribute("stop-opacity",stop.opacity); + gradientEl.appendChild(stopEl); + } + } else { + gradientsMap['url(#' + gradient.id + ')'] = gradient.stops[0].color; } + me.gradientsMap = gradientsMap; }, /** @@ -78876,7 +80723,7 @@ Ext.define('Ext.draw.engine.Svg', { cls = cls.replace(me.trimRe, ''); idx = Ext.Array.indexOf(elClasses, cls); if (idx != -1) { - elClasses.splice(idx, 1); + Ext.Array.erase(elClasses, idx, 1); } } } @@ -79489,64 +81336,77 @@ Ext.define('Ext.draw.engine.Vml', { }, setSize: function(width, height) { - var me = this, - viewBox = me.viewBox, - scaleX, scaleY, items, i, len; + var me = this; width = width || me.width; height = height || me.height; me.width = width; me.height = height; - if (!me.el) { - return; - } + if (me.el) { + // Size outer div + if (width != undefined) { + me.el.setWidth(width); + } + if (height != undefined) { + me.el.setHeight(height); + } - // Size outer div - if (width != undefined) { - me.el.setWidth(width); - } - if (height != undefined) { - me.el.setHeight(height); + // Handle viewBox sizing + me.applyViewBox(); + + me.callParent(arguments); } + }, + + setViewBox: function(x, y, width, height) { + this.callParent(arguments); + this.viewBox = { + x: x, + y: y, + width: width, + height: height + }; + this.applyViewBox(); + }, + + /** + * @private Using the current viewBox property and the surface's width and height, calculate the + * appropriate viewBoxShift that will be applied as a persistent transform to all sprites. + */ + applyViewBox: function() { + var me = this, + viewBox = me.viewBox, + width = me.width, + height = me.height, + viewBoxX, viewBoxY, viewBoxWidth, viewBoxHeight, + relativeHeight, relativeWidth, size; - // Handle viewBox sizing if (viewBox && (width || height)) { - var viewBoxX = viewBox.x, - viewBoxY = viewBox.y, - viewBoxWidth = viewBox.width, - viewBoxHeight = viewBox.height, - relativeHeight = height / viewBoxHeight, - relativeWidth = width / viewBoxWidth, - size; + viewBoxX = viewBox.x; + viewBoxY = viewBox.y; + viewBoxWidth = viewBox.width; + viewBoxHeight = viewBox.height; + relativeHeight = height / viewBoxHeight; + relativeWidth = width / viewBoxWidth; + if (viewBoxWidth * relativeHeight < width) { viewBoxX -= (width - viewBoxWidth * relativeHeight) / 2 / relativeHeight; } if (viewBoxHeight * relativeWidth < height) { viewBoxY -= (height - viewBoxHeight * relativeWidth) / 2 / relativeWidth; } + size = 1 / Math.max(viewBoxWidth / width, viewBoxHeight / height); - // Scale and translate group + me.viewBoxShift = { dx: -viewBoxX, dy: -viewBoxY, scale: size }; - items = me.items.items; - for (i = 0, len = items.length; i < len; i++) { - me.transform(items[i]); - } + me.items.each(function(item) { + me.transform(item); + }); } - this.callParent(arguments); - }, - - setViewBox: function(x, y, width, height) { - this.callParent(arguments); - this.viewBox = { - x: x, - y: y, - width: width, - height: height - }; }, onAdd: function(item) { @@ -79947,7 +81807,7 @@ Ext.define('Ext.layout.container.AbstractFit', { layout:'fit', items: { title: 'Inner Panel', - html: 'This is the inner panel content
', + html: 'This is the inner panel content', bodyPadding: 20, border: false }, @@ -79982,43 +81842,51 @@ Ext.define('Ext.layout.container.Fit', { setItemBox : function(item, box) { var me = this; if (item && box.height > 0) { - if (me.isManaged('width') === true) { + if (!me.owner.isFixedWidth()) { box.width = undefined; } - if (me.isManaged('height') === true) { + if (!me.owner.isFixedHeight()) { box.height = undefined; } me.setItemSize(item, box.width, box.height); } + }, + + configureItem: function(item) { + + // Card layout only controls dimensions which IT has controlled. + // That calculation has to be determined at run time by examining the ownerCt's isFixedWidth()/isFixedHeight() methods + item.layoutManagedHeight = 0; + item.layoutManagedWidth = 0; + + this.callParent(arguments); } }); /** - * @class Ext.layout.container.AbstractCard - * @extends Ext.layout.container.Fit - *This layout manages multiple child Components, each is fit to the Container, where only a single child Component + * This layout manages multiple child Components, each is fit to the Container, where only a single child Component * can be visible at any given time. This layout style is most commonly used for wizards, tab implementations, etc. * This class is intended to be extended or created via the layout:'card' {@link Ext.container.Container#layout} config, - * and should generally not need to be created directly via the new keyword.
- *The CardLayout's focal method is {@link #setActiveItem}. Since only one panel is displayed at a time, + * and should generally not need to be created directly via the new keyword. + * + * The CardLayout's focal method is {@link #setActiveItem}. Since only one panel is displayed at a time, * the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of * the next panel to display. The layout itself does not provide a user interface for handling this navigation, - * so that functionality must be provided by the developer.
- *Containers that are configured with a card layout will have a method setActiveItem dynamically added to it. - *
- var p = new Ext.panel.Panel({
- fullscreen: true,
- layout: 'card',
- items: [{
- html: 'Card 1'
- },{
- html: 'Card 2'
- }]
- });
- p.setActiveItem(1);
- Function which can be overridden which returns the data object passed to this * DataView's {@link #tpl template} to render the whole DataView.
@@ -81561,12 +83506,13 @@ Ext.define('Ext.view.AbstractView', { collectData : function(records, startIndex){ var r = [], i = 0, - len = records.length; + len = records.length, + record; for(; i < len; i++){ - r[r.length] = this.prepareData(records[i].data, startIndex + i, records[i]); + record = records[i]; + r[r.length] = this.prepareData(record[record.persistenceProperty], startIndex + i, record); } - return r; }, @@ -81581,11 +83527,9 @@ Ext.define('Ext.view.AbstractView', { onUpdate : function(ds, record){ var me = this, index = me.store.indexOf(record), - original, node; if (index > -1){ - original = me.all.elements[index]; node = me.bufferRender([record], index)[0]; me.all.replaceElement(index, node, true); @@ -81603,12 +83547,12 @@ Ext.define('Ext.view.AbstractView', { onAdd : function(ds, records, index) { var me = this, nodes; - + if (me.all.getCount() === 0) { me.refresh(); return; } - + nodes = me.bufferRender(records, index); me.doAdd(nodes, records, index); @@ -81618,21 +83562,22 @@ Ext.define('Ext.view.AbstractView', { }, doAdd: function(nodes, records, index) { - var n, a = this.all.elements; - if (index < this.all.getCount()) { - n = this.all.item(index).insertSibling(nodes, 'before', true); - a.splice.apply(a, [index, 0].concat(nodes)); - } + var all = this.all; + + if (index < all.getCount()) { + all.item(index).insertSibling(nodes, 'before', true); + } else { - n = this.all.last().insertSibling(nodes, 'after', true); - a.push.apply(a, nodes); - } + all.last().insertSibling(nodes, 'after', true); + } + + Ext.Array.insert(all.elements, index, nodes); }, - + // private onRemove : function(ds, record, index) { var me = this; - + me.doRemove(record, index); me.updateIndexes(index); if (me.store.getCount() === 0){ @@ -81640,7 +83585,7 @@ Ext.define('Ext.view.AbstractView', { } me.fireEvent('itemremove', record, index); }, - + doRemove: function(record, index) { this.all.removeElement(index, true); }, @@ -81682,11 +83627,11 @@ Ext.define('Ext.view.AbstractView', { */ bindStore : function(store, initial) { var me = this; - + if (!initial && me.store) { if (store !== me.store && me.store.autoDestroy) { me.store.destroy(); - } + } else { me.mun(me.store, { scope: me, @@ -81718,12 +83663,12 @@ Ext.define('Ext.view.AbstractView', { me.loadMask.bindStore(store); } } - + me.store = store; // Bind the store to our selection model me.getSelectionModel().bind(store); - - if (store) { + + if (store && (!initial || store.getCount())) { me.refresh(true); } }, @@ -81746,7 +83691,7 @@ Ext.define('Ext.view.AbstractView', { findItemByChild: function(node){ return Ext.fly(node).findParent(this.getItemSelector(), this.getTargetEl()); }, - + /** * Returns the template node by the Ext.EventObject or null if it is not found. * @param {Ext.EventObject} e @@ -81794,13 +83739,13 @@ Ext.define('Ext.view.AbstractView', { /** * Gets a record from a node * @param {Element/HTMLElement} node The node to evaluate - * + * * @return {Record} record The {@link Ext.data.Model} object */ getRecord: function(node){ return this.store.data.getByKey(Ext.getDom(node).viewRecordId); }, - + /** * Returns true if the passed node is selected, else false. @@ -81812,7 +83757,7 @@ Ext.define('Ext.view.AbstractView', { var r = this.getRecord(node); return this.selModel.isSelected(r); }, - + /** * Selects a record instance by record instance or index. * @param {Ext.data.Model/Index} records An array of records or an index @@ -81848,7 +83793,7 @@ Ext.define('Ext.view.AbstractView', { } return nodeInfo; }, - + /** * @private */ @@ -81856,16 +83801,16 @@ Ext.define('Ext.view.AbstractView', { var ns = this.all.elements, ln = ns.length, i = 0; - + for (; i < ln; i++) { if (ns[i].viewRecordId === record.internalId) { return ns[i]; } } - + return null; }, - + /** * Gets a range nodes. * @param {Number} start (optional) The index of the first node in the range @@ -81907,7 +83852,7 @@ Ext.define('Ext.view.AbstractView', { onDestroy : function() { var me = this; - + me.all.clear(); me.callParent(); me.bindStore(null); @@ -81925,7 +83870,7 @@ Ext.define('Ext.view.AbstractView', { var node = this.getNode(record); Ext.fly(node).removeCls(this.selectedItemCls); }, - + getItemSelector: function() { return this.itemSelector; } @@ -81951,37 +83896,45 @@ Ext.define('Ext.view.AbstractView', { * True to enable multiselection by clicking on multiple items without requiring the user to hold Shift or Ctrl, * false to force the user to hold Ctrl or Shift to select more than on item (defaults to false). */ - + /** * Gets the number of selected nodes. * @return {Number} The node count */ getSelectionCount : function(){ - console.warn("DataView: getSelectionCount will be removed, please interact with the Ext.selection.DataViewModel"); + if (Ext.global.console) { + Ext.global.console.warn("DataView: getSelectionCount will be removed, please interact with the Ext.selection.DataViewModel"); + } return this.selModel.getSelection().length; }, - + /** * Gets an array of the selected records * @return {Array} An array of {@link Ext.data.Model} objects */ getSelectedRecords : function(){ - console.warn("DataView: getSelectedRecords will be removed, please interact with the Ext.selection.DataViewModel"); + if (Ext.global.console) { + Ext.global.console.warn("DataView: getSelectedRecords will be removed, please interact with the Ext.selection.DataViewModel"); + } return this.selModel.getSelection(); }, - + select: function(records, keepExisting, supressEvents) { - console.warn("DataView: select will be removed, please access select through a DataView's SelectionModel, ie: view.getSelectionModel().select()"); + if (Ext.global.console) { + Ext.global.console.warn("DataView: select will be removed, please access select through a DataView's SelectionModel, ie: view.getSelectionModel().select()"); + } var sm = this.getSelectionModel(); return sm.select.apply(sm, arguments); }, - + clearSelections: function() { - console.warn("DataView: clearSelections will be removed, please access deselectAll through DataView's SelectionModel, ie: view.getSelectionModel().deselectAll()"); + if (Ext.global.console) { + Ext.global.console.warn("DataView: clearSelections will be removed, please access deselectAll through DataView's SelectionModel, ie: view.getSelectionModel().deselectAll()"); + } var sm = this.getSelectionModel(); return sm.deselectAll(); } - }); + }); }); }); @@ -82043,8 +83996,6 @@ var btn = panel.getComponent('myAction'); var aRef = btn.baseAction; aRef.setText('New text'); - * @constructor - * @param {Object} config The configuration options */ Ext.define('Ext.Action', { @@ -82088,6 +84039,10 @@ Ext.define('Ext.Action', { *{@link #handler} is executed. Defaults to the browser window.
*/
+ /**
+ * Creates new Action.
+ * @param {Object} config Config object.
+ */
constructor : function(config){
this.initialConfig = config;
this.itemId = config.itemId = (config.itemId || config.id || Ext.id());
@@ -82216,9 +84171,12 @@ Ext.define('Ext.Action', {
// private
callEach : function(fnName, args){
- var cs = this.items;
- for(var i = 0, len = cs.length; i < len; i++){
- cs[i][fnName].apply(cs[i], args);
+ var items = this.items,
+ i = 0,
+ len = items.length;
+
+ for(; i < len; i++){
+ items[i][fnName].apply(items[i], args);
}
},
@@ -82230,7 +84188,7 @@ Ext.define('Ext.Action', {
// private
removeComponent : function(comp){
- this.items.remove(comp);
+ Ext.Array.remove(this.items, comp);
},
/**
@@ -82329,10 +84287,6 @@ editor.startEdit(el); // The value of the field will be taken as the innerHTML o
*
* {@img Ext.Editor/Ext.Editor.png Ext.Editor component}
*
- * @constructor
- * Create a new Editor
- * @param {Object} config The config object
- * @xtype editor
*/
Ext.define('Ext.Editor', {
@@ -82806,6 +84760,9 @@ Ext.define('Ext.Img', {
};
},
+ // null out this function, we can't set any html inside the image
+ initRenderTpl: Ext.emptyFn,
+
/**
* Updates the {@link #src} of the image
*/
@@ -82845,9 +84802,6 @@ Ext.define('Ext.Img', {
* 'offsets' : The Component will be hidden by absolutely positioning it out of the visible area of the document. This
* is useful when a hidden Component must maintain measurable dimensions. Hiding using display results
* in a Component having zero dimensions.
- Ext.create('Ext.button.Cycle', {
- showText: true,
- prependText: 'View as ',
- renderTo: Ext.getBody(),
- menu: {
- id: 'view-type-menu',
- items: [{
- text:'text only',
- iconCls:'view-text',
- checked:true
- },{
- text:'HTML',
- iconCls:'view-html'
- }]
- },
- changeHandler:function(cycleBtn, activeItem){
- Ext.Msg.alert('Change View', activeItem.text);
- }
- });
+Ext.create('Ext.button.Cycle', {
+ showText: true,
+ prependText: 'View as ',
+ renderTo: Ext.getBody(),
+ menu: {
+ id: 'view-type-menu',
+ items: [{
+ text:'text only',
+ iconCls:'view-text',
+ checked:true
+ },{
+ text:'HTML',
+ iconCls:'view-html'
+ }]
+ },
+ changeHandler:function(cycleBtn, activeItem){
+ Ext.Msg.alert('Change View', activeItem.text);
+ }
+});
A {@link #} delegate may be provided which may be either the element to use as the mousedown target * or a {@link Ext.DomQuery} selector to activate multiple mousedown targets.
- * @constructor Create a new ComponentTracker - * @param {object} comp The Component to provide dragging for. - * @param {object} config The config object */ Ext.define('Ext.util.ComponentDragger', { @@ -86930,13 +88879,18 @@ Ext.define('Ext.util.ComponentDragger', { /** * @cfg {Boolean} constrainDelegate - * Specify astrue to constrain the drag handles within the {@link constrainTo} region.
+ * Specify as true to constrain the drag handles within the {@link #constrainTo} region.
*/
extend: 'Ext.dd.DragTracker',
autoStart: 500,
+ /**
+ * Creates new ComponentDragger.
+ * @param {object} comp The Component to provide dragging for.
+ * @param {object} config (optional) Config object
+ */
constructor: function(comp, config) {
this.comp = comp;
this.initialConstrainTo = config.constrainTo;
@@ -87004,7 +88958,7 @@ Ext.define('Ext.util.ComponentDragger', {
comp = (me.proxy && !me.comp.liveDrag) ? me.proxy : me.comp,
offset = me.getOffset(me.constrain || me.constrainDelegate ? 'dragTarget' : null);
- comp.setPosition.apply(comp, [me.startPosition[0] + offset[0], me.startPosition[1] + offset[1]]);
+ comp.setPosition(me.startPosition[0] + offset[0], me.startPosition[1] + offset[1]);
},
onEnd: function(e) {
@@ -87364,6 +89318,11 @@ Ext.define("Ext.form.Labelable", {
* Sets the active error message to the given string. This replaces the entire error message
* contents with the given string. Also see {@link #setActiveErrors} which accepts an Array of
* messages and formats them according to the {@link #activeErrorsTpl}.
+ *
+ * Note that this only updates the error message element's text and attributes, you'll have
+ * to call doComponentLayout to actually update the field's layout to match. If the field extends
+ * {@link Ext.form.field.Base} you should call {@link Ext.form.field.Base#markInvalid markInvalid} instead.
+ *
* @param {String} msg The error message
*/
setActiveError: function(msg) {
@@ -87385,6 +89344,11 @@ Ext.define("Ext.form.Labelable", {
* Set the active error message to an Array of error messages. The messages are formatted into
* a single message string using the {@link #activeErrorsTpl}. Also see {@link #setActiveError}
* which allows setting the entire error contents with a single string.
+ *
+ * Note that this only updates the error message element's text and attributes, you'll have
+ * to call doComponentLayout to actually update the field's layout to match. If the field extends
+ * {@link Ext.form.field.Base} you should call {@link Ext.form.field.Base#markInvalid markInvalid} instead.
+ *
* @param {Array} errors The error messages
*/
setActiveErrors: function(errors) {
@@ -87394,7 +89358,11 @@ Ext.define("Ext.form.Labelable", {
},
/**
- * Clears the active error.
+ * Clears the active error message(s).
+ *
+ * Note that this only clears the error message element's text and attributes, you'll have
+ * to call doComponentLayout to actually update the field's layout to match. If the field extends
+ * {@link Ext.form.field.Base} you should call {@link Ext.form.field.Base#clearInvalid clearInvalid} instead.
*/
unsetActiveError: function() {
delete this.activeError;
@@ -87845,6 +89813,7 @@ Ext.define('Ext.form.field.Field', {
* will not prevent submission of forms submitted with the {@link Ext.form.action.Submit#clientValidation}
* option set.
* @param {String/Array} errors The error message(s) for the field.
+ * @method
*/
markInvalid: Ext.emptyFn,
@@ -87855,6 +89824,7 @@ Ext.define('Ext.form.field.Field', {
* return true if the value does not pass validation. So simply clearing a field's errors
* will not necessarily allow submission of forms submitted with the {@link Ext.form.action.Submit#clientValidation}
* option set.
+ * @method
*/
clearInvalid: Ext.emptyFn
@@ -87916,6 +89886,7 @@ Ext.define('Ext.layout.component.field.Field', {
autoHeight: autoHeight,
width: autoWidth ? owner.getBodyNaturalWidth() : width, //always give a pixel width
height: height,
+ setOuterWidth: false, //whether the outer el width should be set to the calculated width
// insets for the bodyEl from each side of the component layout area
insets: {
@@ -87953,9 +89924,9 @@ Ext.define('Ext.layout.component.field.Field', {
// perform sizing of the elements based on the final dimensions and insets
if (autoWidth && autoHeight) {
// Don't use setTargetSize if auto-sized, so the calculated size is not reused next time
- me.setElementSize(owner.el, info.width, info.height);
+ me.setElementSize(owner.el, (info.setOuterWidth ? info.width : undef), info.height);
} else {
- me.setTargetSize(info.width, info.height);
+ me.setTargetSize((!autoWidth || info.setOuterWidth ? info.width : undef), info.height);
}
me.sizeBody(info);
@@ -87993,7 +89964,7 @@ Ext.define('Ext.layout.component.field.Field', {
/**
* Return the set of strategy functions from the {@link #labelStrategies labelStrategies collection}
- * that is appropriate for the field's {@link Ext.form.field.Field#labelAlign labelAlign} config.
+ * that is appropriate for the field's {@link Ext.form.Labelable#labelAlign labelAlign} config.
*/
getLabelStrategy: function() {
var me = this,
@@ -88004,7 +89975,7 @@ Ext.define('Ext.layout.component.field.Field', {
/**
* Return the set of strategy functions from the {@link #errorStrategies errorStrategies collection}
- * that is appropriate for the field's {@link Ext.form.field.Field#msgTarget msgTarget} config.
+ * that is appropriate for the field's {@link Ext.form.Labelable#msgTarget msgTarget} config.
*/
getErrorStrategy: function() {
var me = this,
@@ -88020,7 +89991,7 @@ Ext.define('Ext.layout.component.field.Field', {
/**
* Collection of named strategies for laying out and adjusting labels to accommodate error messages.
- * An appropriate one will be chosen based on the owner field's {@link Ext.form.field.Field#labelAlign} config.
+ * An appropriate one will be chosen based on the owner field's {@link Ext.form.Labelable#labelAlign} config.
*/
labelStrategies: (function() {
var applyIf = Ext.applyIf,
@@ -88045,6 +90016,8 @@ Ext.define('Ext.layout.component.field.Field', {
if (info.autoWidth) {
info.width += (!owner.labelEl ? 0 : owner.labelWidth + owner.labelPad);
}
+ // Must set outer width to prevent field from wrapping below floated label
+ info.setOuterWidth = true;
},
adjustHorizInsets: function(owner, info) {
if (owner.labelEl) {
@@ -88098,7 +90071,7 @@ Ext.define('Ext.layout.component.field.Field', {
/**
* Collection of named strategies for laying out and adjusting insets to accommodate error messages.
- * An appropriate one will be chosen based on the owner field's {@link Ext.form.field.Field#msgTarget} config.
+ * An appropriate one will be chosen based on the owner field's {@link Ext.form.Labelable#msgTarget} config.
*/
errorStrategies: (function() {
function setDisplayed(el, displayed) {
@@ -88512,39 +90485,44 @@ Ext.define('Ext.layout.component.field.TextArea', {
/**
* @class Ext.layout.container.Anchor
* @extends Ext.layout.container.Container
- * This is a layout that enables anchoring of contained elements relative to the container's dimensions. + * + * This is a layout that enables anchoring of contained elements relative to the container's dimensions. * If the container is resized, all anchored items are automatically rerendered according to their - * {@link #anchor} rules.
- *This class is intended to be extended or created via the layout: 'anchor' {@link Ext.layout.container.AbstractContainer#layout} + * {@link #anchor} rules. + * + * This class is intended to be extended or created via the layout: 'anchor' {@link Ext.layout.container.AbstractContainer#layout} * config, and should generally not need to be created directly via the new keyword.
- *AnchorLayout does not have any direct config options (other than inherited ones). By default, + * + * AnchorLayout does not have any direct config options (other than inherited ones). By default, * AnchorLayout will calculate anchor measurements based on the size of the container itself. However, the * container using the AnchorLayout can supply an anchoring-specific config property of anchorSize. * If anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating * anchor measurements based on it instead, allowing the container to be sized independently of the anchoring * logic if necessary. + * * {@img Ext.layout.container.Anchor/Ext.layout.container.Anchor.png Ext.layout.container.Anchor container layout} + * * For example: - Ext.create('Ext.Panel', { - width: 500, - height: 400, - title: "AnchorLayout Panel", - layout: 'anchor', - renderTo: Ext.getBody(), - items: [{ - xtype: 'panel', - title: '75% Width and 20% Height', - anchor: '75% 20%' - },{ - xtype: 'panel', - title: 'Offset -300 Width & -200 Height', - anchor: '-300 -200' - },{ - xtype: 'panel', - title: 'Mixed Offset and Percent', - anchor: '-250 20%' - }] - }); + * Ext.create('Ext.Panel', { + * width: 500, + * height: 400, + * title: "AnchorLayout Panel", + * layout: 'anchor', + * renderTo: Ext.getBody(), + * items: [{ + * xtype: 'panel', + * title: '75% Width and 20% Height', + * anchor: '75% 20%' + * },{ + * xtype: 'panel', + * title: 'Offset -300 Width & -200 Height', + * anchor: '-300 -200' + * },{ + * xtype: 'panel', + * title: 'Mixed Offset and Percent', + * anchor: '-250 20%' + * }] + * }); */ Ext.define('Ext.layout.container.Anchor', { @@ -88609,9 +90587,7 @@ anchor: '-50 75%' /** * @cfg {String} defaultAnchor - * - * default anchor for all child container items applied if no anchor or specific width is set on the child item. Defaults to '100%'. - * + * Default anchor for all child container items applied if no anchor or specific width is set on the child item. Defaults to '100%'. */ defaultAnchor: '100%', @@ -88631,8 +90607,8 @@ anchor: '-50 75%' components = me.getVisibleItems(owner), len = components.length, boxes = [], - box, newTargetSize, anchorWidth, anchorHeight, component, anchorSpec, calcWidth, calcHeight, - anchorsArray, anchor, i, el; + box, newTargetSize, component, anchorSpec, calcWidth, calcHeight, + i, el, cleaner; if (ownerWidth < 20 && ownerHeight < 20) { return; @@ -88648,47 +90624,28 @@ anchor: '-50 75%' }); } - // find the container anchoring size - if (owner.anchorSize) { - if (typeof owner.anchorSize == 'number') { - anchorWidth = owner.anchorSize; - } - else { - anchorWidth = owner.anchorSize.width; - anchorHeight = owner.anchorSize.height; - } - } - else { - anchorWidth = owner.initialConfig.width; - anchorHeight = owner.initialConfig.height; - } - // Work around WebKit RightMargin bug. We're going to inline-block all the children only ONCE and remove it when we're done if (!Ext.supports.RightMargin) { + cleaner = Ext.core.Element.getRightMarginFixCleaner(target); target.addCls(Ext.baseCSSPrefix + 'inline-children'); } for (i = 0; i < len; i++) { component = components[i]; el = component.el; - anchor = component.anchor; - - if (!component.anchor && component.items && !Ext.isNumber(component.width) && !(Ext.isIE6 && Ext.isStrict)) { - component.anchor = anchor = me.defaultAnchor; - } - if (anchor) { - anchorSpec = component.anchorSpec; - // cache all anchor values - if (!anchorSpec) { - anchorsArray = anchor.split(' '); - component.anchorSpec = anchorSpec = { - right: me.parseAnchor(anchorsArray[0], component.initialConfig.width, anchorWidth), - bottom: me.parseAnchor(anchorsArray[1], component.initialConfig.height, anchorHeight) - }; + anchorSpec = component.anchorSpec; + if (anchorSpec) { + if (anchorSpec.right) { + calcWidth = me.adjustWidthAnchor(anchorSpec.right(ownerWidth) - el.getMargin('lr'), component); + } else { + calcWidth = undefined; + } + if (anchorSpec.bottom) { + calcHeight = me.adjustHeightAnchor(anchorSpec.bottom(ownerHeight) - el.getMargin('tb'), component); + } else { + calcHeight = undefined; } - calcWidth = anchorSpec.right ? me.adjustWidthAnchor(anchorSpec.right(ownerWidth) - el.getMargin('lr'), component) : undefined; - calcHeight = anchorSpec.bottom ? me.adjustHeightAnchor(anchorSpec.bottom(ownerHeight) - el.getMargin('tb'), component) : undefined; boxes.push({ component: component, @@ -88707,6 +90664,7 @@ anchor: '-50 75%' // Work around WebKit RightMargin bug. We're going to inline-block all the children only ONCE and remove it when we're done if (!Ext.supports.RightMargin) { target.removeCls(Ext.baseCSSPrefix + 'inline-children'); + cleaner(); } for (i = 0; i < len; i++) { @@ -88764,6 +90722,60 @@ anchor: '-50 75%' // private adjustHeightAnchor: function(value, comp) { return value; + }, + + configureItem: function(item) { + var me = this, + owner = me.owner, + anchor= item.anchor, + anchorsArray, + anchorSpec, + anchorWidth, + anchorHeight; + + if (!item.anchor && item.items && !Ext.isNumber(item.width) && !(Ext.isIE6 && Ext.isStrict)) { + item.anchor = anchor = me.defaultAnchor; + } + + // find the container anchoring size + if (owner.anchorSize) { + if (typeof owner.anchorSize == 'number') { + anchorWidth = owner.anchorSize; + } + else { + anchorWidth = owner.anchorSize.width; + anchorHeight = owner.anchorSize.height; + } + } + else { + anchorWidth = owner.initialConfig.width; + anchorHeight = owner.initialConfig.height; + } + + if (anchor) { + // cache all anchor values + anchorsArray = anchor.split(' '); + item.anchorSpec = anchorSpec = { + right: me.parseAnchor(anchorsArray[0], item.initialConfig.width, anchorWidth), + bottom: me.parseAnchor(anchorsArray[1], item.initialConfig.height, anchorHeight) + }; + + if (anchorSpec.right) { + item.layoutManagedWidth = 1; + } else { + item.layoutManagedWidth = 2; + } + + if (anchorSpec.bottom) { + item.layoutManagedHeight = 1; + } else { + item.layoutManagedHeight = 2; + } + } else { + item.layoutManagedWidth = 2; + item.layoutManagedHeight = 2; + } + this.callParent(arguments); } }); @@ -88911,9 +90923,6 @@ Ext.create('Ext.window.Window', { } }).show(); - * @constructor - * @param {Object} config The config object - * @xtype window */ Ext.define('Ext.window.Window', { extend: 'Ext.panel.Panel', @@ -89238,7 +91247,15 @@ Ext.define('Ext.window.Window', { if (me.closable) { keyMap = me.getKeyMap(); keyMap.on(27, me.onEsc, me); - keyMap.disable(); + + //if (hidden) { ? would be consistent w/before/afterShow... + keyMap.disable(); + //} + } + + if (!hidden) { + me.syncMonitorWindowResize(); + me.doConstrain(); } }, @@ -89255,33 +91272,40 @@ Ext.define('Ext.window.Window', { if (!me.header) { me.updateHeader(true); } + + /* + * Check the header here again. If for whatever reason it wasn't created in + * updateHeader (preventHeader) then we'll just ignore the rest since the + * header acts as the drag handle. + */ + if (me.header) { + ddConfig = Ext.applyIf({ + el: me.el, + delegate: '#' + me.header.id + }, me.draggable); - ddConfig = Ext.applyIf({ - el: me.el, - delegate: '#' + me.header.id - }, me.draggable); + // Add extra configs if Window is specified to be constrained + if (me.constrain || me.constrainHeader) { + ddConfig.constrain = me.constrain; + ddConfig.constrainDelegate = me.constrainHeader; + ddConfig.constrainTo = me.constrainTo || me.container; + } - // Add extra configs if Window is specified to be constrained - if (me.constrain || me.constrainHeader) { - ddConfig.constrain = me.constrain; - ddConfig.constrainDelegate = me.constrainHeader; - ddConfig.constrainTo = me.constrainTo || me.container; + /** + *
If this Window is configured {@link #draggable}, this property will contain + * an instance of {@link Ext.util.ComponentDragger} (A subclass of {@link Ext.dd.DragTracker DragTracker}) + * which handles dragging the Window's DOM Element, and constraining according to the {@link #constrain} + * and {@link #constrainHeader} .
+ *This has implementations of onBeforeStart, onDrag and onEnd
+ * which perform the dragging action. If extra logic is needed at these points, use
+ * {@link Ext.Function#createInterceptor createInterceptor} or {@link Ext.Function#createSequence createSequence} to
+ * augment the existing implementations.
If this Window is configured {@link #draggable}, this property will contain - * an instance of {@link Ext.util.ComponentDragger} (A subclass of {@link Ext.dd.DragTracker DragTracker}) - * which handles dragging the Window's DOM Element, and constraining according to the {@link #constrain} - * and {@link #constrainHeader} .
- *This has implementations of onBeforeStart, onDrag and onEnd
- * which perform the dragging action. If extra logic is needed at these points, use
- * {@link Ext.Function#createInterceptor createInterceptor} or {@link Ext.Function#createSequence createSequence} to
- * augment the existing implementations.
A {@link Ext.form.FieldContainer field container} which has a specialized layout for arranging + * A {@link Ext.form.FieldContainer field container} which has a specialized layout for arranging * {@link Ext.form.field.Checkbox} controls into columns, and provides convenience {@link Ext.form.field.Field} methods * for {@link #getValue getting}, {@link #setValue setting}, and {@link #validate validating} the group - * of checkboxes as a whole.
- *Validation: Individual checkbox fields themselves have no default validation behavior, but + * of checkboxes as a whole. + * + * # Validation + * + * Individual checkbox fields themselves have no default validation behavior, but * sometimes you want to require a user to select at least one of a group of checkboxes. CheckboxGroup - * allows this by setting the config {@link #allowBlank}:false; when the user does not check at + * allows this by setting the config `{@link #allowBlank}:false`; when the user does not check at * least one of the checkboxes, the entire group will be highlighted as invalid and the - * {@link #blankText error message} will be displayed according to the {@link #msgTarget} config.
- *Layout: The default layout for CheckboxGroup makes it easy to arrange the checkboxes into + * {@link #blankText error message} will be displayed according to the {@link #msgTarget} config. + * + * # Layout + * + * The default layout for CheckboxGroup makes it easy to arrange the checkboxes into * columns; see the {@link #columns} and {@link #vertical} config documentation for details. You may also * use a completely different layout by setting the {@link #layout} to one of the other supported layout * types; for instance you may wish to use a custom arrangement of hbox and vbox containers. In that case - * the checkbox components at any depth will still be managed by the CheckboxGroup's validation.
- * {@img Ext.form.RadioGroup/Ext.form.RadioGroup.png Ext.form.RadioGroup component} - *Example usage:
- *
- Ext.create('Ext.form.Panel', {
- title: 'RadioGroup Example',
- width: 300,
- height: 125,
- bodyPadding: 10,
- renderTo: Ext.getBody(),
- items:[{
- xtype: 'radiogroup',
- fieldLabel: 'Two Columns',
- // Arrange radio buttons into two columns, distributed vertically
- columns: 2,
- vertical: true,
- items: [
- {boxLabel: 'Item 1', name: 'rb', inputValue: '1'},
- {boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true},
- {boxLabel: 'Item 3', name: 'rb', inputValue: '3'},
- {boxLabel: 'Item 4', name: 'rb', inputValue: '4'},
- {boxLabel: 'Item 5', name: 'rb', inputValue: '5'},
- {boxLabel: 'Item 6', name: 'rb', inputValue: '6'}
- ]
- }]
- });
- * A {@link Ext.form.FieldContainer field container} which has a specialized layout for arranging - * {@link Ext.form.field.Radio} controls into columns, and provides convenience {@link Ext.form.field.Field} methods - * for {@link #getValue getting}, {@link #setValue setting}, and {@link #validate validating} the group - * of radio buttons as a whole.
- *Validation: Individual radio buttons themselves have no default validation behavior, but + * A {@link Ext.form.FieldContainer field container} which has a specialized layout for arranging + * {@link Ext.form.field.Radio} controls into columns, and provides convenience {@link Ext.form.field.Field} + * methods for {@link #getValue getting}, {@link #setValue setting}, and {@link #validate validating} the + * group of radio buttons as a whole. + * + * # Validation + * + * Individual radio buttons themselves have no default validation behavior, but * sometimes you want to require a user to select one of a group of radios. RadioGroup - * allows this by setting the config {@link #allowBlank}:false; when the user does not check at + * allows this by setting the config `{@link #allowBlank}:false`; when the user does not check at * one of the radio buttons, the entire group will be highlighted as invalid and the * {@link #blankText error message} will be displayed according to the {@link #msgTarget} config.
- *Layout: The default layout for RadioGroup makes it easy to arrange the radio buttons into + * + * # Layout + * + * The default layout for RadioGroup makes it easy to arrange the radio buttons into * columns; see the {@link #columns} and {@link #vertical} config documentation for details. You may also * use a completely different layout by setting the {@link #layout} to one of the other supported layout * types; for instance you may wish to use a custom arrangement of hbox and vbox containers. In that case - * the Radio components at any depth will still be managed by the RadioGroup's validation.
- *Example usage:
- *
-var myRadioGroup = new Ext.form.RadioGroup({
- id: 'myGroup',
- xtype: 'radiogroup',
- fieldLabel: 'Single Column',
- // Arrange radio buttons into three columns, distributed vertically
- columns: 3,
- vertical: true,
- items: [
- {boxLabel: 'Item 1', name: 'rb', inputValue: '1'},
- {boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true},
- {boxLabel: 'Item 3', name: 'rb', inputValue: '3'}
- {boxLabel: 'Item 4', name: 'rb', inputValue: '4'}
- {boxLabel: 'Item 5', name: 'rb', inputValue: '5'}
- {boxLabel: 'Item 6', name: 'rb', inputValue: '6'}
- ]
-});
- * The example below binds a DataView to a {@link Ext.data.Store} and renders it into an {@link Ext.panel.Panel}.
+ * The example below binds a DataView to a {@link Ext.data.Store} and renders it into an {@link Ext.panel.Panel}. + * * {@img Ext.DataView/Ext.DataView.png Ext.DataView component} - *
- Ext.regModel('Image', {
- Fields: [
- {name:'src', type:'string'},
- {name:'caption', type:'string'}
- ]
- });
-
- Ext.create('Ext.data.Store', {
- id:'imagesStore',
- model: 'Image',
- data: [
- {src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts'},
- {src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data'},
- {src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme'},
- {src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned'}
- ]
- });
-
- var imageTpl = new Ext.XTemplate(
- '',
- '',
- '
',
- '
{caption}',
- '',
- ' '
- );
-
- Ext.create('Ext.DataView', {
- store: Ext.data.StoreManager.lookup('imagesStore'),
- tpl: imageTpl,
- itemSelector: 'div.thumb-wrap',
- emptyText: 'No images available',
- renderTo: Ext.getBody()
- });
- *
- Ext.define('Ext.ux.CustomTrigger', {
- extend: 'Ext.form.field.Trigger',
- alias: 'widget.customtrigger',
-
- // override onTriggerClick
- onTriggerClick: function() {
- Ext.Msg.alert('Status', 'You clicked my trigger!');
- }
- });
+Ext.define('Ext.ux.CustomTrigger', {
+ extend: 'Ext.form.field.Trigger',
+ alias: 'widget.customtrigger',
- Ext.create('Ext.form.FormPanel', {
- title: 'Form with TriggerField',
- bodyPadding: 5,
- width: 350,
- renderTo: Ext.getBody(),
- items:[{
- xtype: 'customtrigger',
- fieldLabel: 'Sample Trigger',
- emptyText: 'click the trigger',
- }]
- });
+ // override onTriggerClick
+ onTriggerClick: function() {
+ Ext.Msg.alert('Status', 'You clicked my trigger!');
+ }
+});
+
+Ext.create('Ext.form.FormPanel', {
+ title: 'Form with TriggerField',
+ bodyPadding: 5,
+ width: 350,
+ renderTo: Ext.getBody(),
+ items:[{
+ xtype: 'customtrigger',
+ fieldLabel: 'Sample Trigger',
+ emptyText: 'click the trigger',
+ }]
+});
However, in general you will most likely want to use Trigger as the base class for a reusable component. @@ -96341,7 +98403,6 @@ Ext.define('Ext.toolbar.TextItem', { * Create a new Trigger field. * @param {Object} config Configuration options (valid {@Ext.form.field.Text} config options will also be applied * to the base Text field) - * @xtype triggerfield */ Ext.define('Ext.form.field.Trigger', { extend:'Ext.form.field.Text', @@ -96726,10 +98787,6 @@ Ext.define('Ext.form.field.Trigger', { * a specific picker field implementation. Subclasses must implement the {@link #createPicker} method * to create a picker component appropriate for the field.
* - * @xtype pickerfield - * @constructor - * Create a new picker field - * @param {Object} config */ Ext.define('Ext.form.field.Picker', { extend: 'Ext.form.field.Trigger', @@ -96862,7 +98919,7 @@ Ext.define('Ext.form.field.Picker', { mousedown: collapseIf, scope: me }); - + Ext.EventManager.onWindowResize(me.alignPicker, me); me.fireEvent('expand', me); me.onExpand(); } @@ -96920,7 +98977,7 @@ Ext.define('Ext.form.field.Picker', { // remove event listeners doc.un('mousewheel', collapseIf, me); doc.un('mousedown', collapseIf, me); - + Ext.EventManager.removeResizeListener(me.alignPicker, me); me.fireEvent('collapse', me); me.onCollapse(); } @@ -96984,6 +99041,7 @@ Ext.define('Ext.form.field.Picker', { onDestroy : function(){ var me = this; + Ext.EventManager.removeResizeListener(me.alignPicker, me); Ext.destroy(me.picker, me.keyNav); me.callParent(); } @@ -97043,10 +99101,6 @@ Ext.define('Ext.form.field.Picker', { *By default, pressing the up and down arrow keys will also trigger the onSpinUp and onSpinDown methods; * to prevent this, set {@link #keyNavEnabled} = false.
* - * @constructor - * Creates a new Spinner field - * @param {Object} config Configuration options - * @xtype spinnerfield */ Ext.define('Ext.form.field.Spinner', { extend: 'Ext.form.field.Trigger', @@ -97361,11 +99415,7 @@ and mouse wheel handlers set `{@link #keyNavEnabled keyNavEnabled}:false` and }); - * @constructor - * Creates a new Number field - * @param {Object} config Configuration options * - * @xtype numberfield * @markdown * @docauthor Jason Johnston- ' + me.getInnerTpl(me.displayField) + ' ', - '
- ' + me.getInnerTpl(me.displayField) + ' ', + '