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': '.'
@@ -6914,30 +7154,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) {
@@ -6951,7 +7191,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}
*/
@@ -6964,16 +7205,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
* @method
- * @markdown
*/
setPath: flexSetter(function(name, path) {
this.config.paths[name] = path;
@@ -6982,32 +7221,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 = '',
@@ -7085,7 +7323,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++;
@@ -7093,7 +7331,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;
@@ -7227,15 +7465,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;
@@ -7252,12 +7491,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;
@@ -7267,13 +7509,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 = {},
@@ -7384,48 +7628,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("', '") + "'"
- });
- }
},
/**
@@ -7435,13 +7638,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
- });
},
/**
@@ -7497,10 +7693,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) {
@@ -7539,36 +7735,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 = [],
@@ -7632,46 +7841,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++) {
@@ -7714,6 +7883,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 = [],
@@ -7792,7 +7978,7 @@ If a console is available (that supports the `console.dir` function) you'll see
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.
@@ -7943,7 +8129,6 @@ error to the browser, otherwise the error will be thrown and execution will halt
name: 'Ext.Error',
/**
- * @constructor
* @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.
@@ -7989,81 +8174,22 @@ a particular error instance, if you want to provide a custom description that wi
* slip silently under the radar. It cannot live in Ext.Error.raise since there are times
* where exceptions are handled in a try/catch.
*/
-(function () {
- var prevOnError, timer, errors = 0,
- extraordinarilyBad = /(out of stack)|(too much recursion)|(stack overflow)|(out of memory)/i,
- win = Ext.global;
-
- if (typeof window === 'undefined') {
- return; // build system or some such environment...
- }
-
- // This method is called to notify the user of the current error status.
- function notify () {
- var counters = Ext.log.counters,
- supports = Ext.supports,
- hasOnError = supports && supports.WindowOnError; // TODO - timing
- // Put log counters to the status bar (for most browsers):
- if (counters && (counters.error + counters.warn + counters.info + counters.log)) {
- var msg = [ 'Logged Errors:',counters.error, 'Warnings:',counters.warn,
- 'Info:',counters.info, 'Log:',counters.log].join(' ');
- if (errors) {
- msg = '*** Errors: ' + errors + ' - ' + msg;
- } else if (counters.error) {
- msg = '*** ' + msg;
- }
- win.status = msg;
- }
- // Display an alert on the first error:
- if (!Ext.isDefined(Ext.Error.notify)) {
- Ext.Error.notify = Ext.isIE6 || Ext.isIE7; // TODO - timing
- }
- if (Ext.Error.notify && (hasOnError ? errors : (counters && counters.error))) {
- Ext.Error.notify = false;
- if (timer) {
- win.clearInterval(timer); // ticks can queue up so stop...
- timer = null;
- }
-
- alert('Unhandled error on page: See console or log');
- poll();
- }
- }
+/*
- // Sets up polling loop. This is the only way to know about errors in some browsers
- // (Opera/Safari) and is the only way to update the status bar for warnings and other
- // non-errors.
- function poll () {
- timer = win.setInterval(notify, 1000);
- }
+This file is part of Ext JS 4
- // window.onerror is ideal (esp in IE) because you get full context. This is harmless
- // otherwise (never called) which is good because you cannot feature detect it.
- prevOnError = win.onerror || Ext.emptyFn;
- win.onerror = function (message) {
- ++errors;
+Copyright (c) 2011 Sencha Inc
- if (!extraordinarilyBad.test(message)) {
- // too much recursion + our alert right now = crash IE
- // our polling loop will pick it up even if we don't alert now
- notify();
- }
-
- return prevOnError.apply(this, arguments);
- };
- poll();
-})();
+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.
-/*
-Ext JS - JavaScript Library
-Copyright (c) 2006-2011, Sencha Inc.
-All rights reserved.
-licensing@sencha.com
*/
/**
* @class Ext.JSON
@@ -8215,7 +8341,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
});
}
};
@@ -8304,15 +8430,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;
},
@@ -8401,6 +8535,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
@@ -8489,7 +8629,7 @@ 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
@@ -8497,7 +8637,7 @@ window.undefined = window.undefined;
document.execCommand("BackgroundImageCache", false, true);
} catch(e) {}
- Ext.setVersion('extjs', '4.0.1');
+ 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
@@ -8770,7 +8910,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;
@@ -8828,53 +8968,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');
- }
-});
- *
// change height and width to 100x100 pixels
@@ -16002,7 +16058,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;
},
@@ -16063,13 +16119,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);
};
@@ -16117,7 +16166,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.
*/
@@ -16198,13 +16247,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);
@@ -16296,7 +16338,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;
}
@@ -16656,7 +16698,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;
}
@@ -16665,24 +16707,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 || {};
@@ -16720,7 +16744,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;
}
@@ -16764,7 +16788,7 @@ Ext.EventManager = {
}
// remove listener from cache
- cache.splice(i, 1);
+ Ext.Array.erase(cache, i, 1);
}
}
},
@@ -16825,7 +16849,7 @@ Ext.EventManager = {
* @return {Function} the wrapper function
*/
createListenerWrap : function(dom, ename, fn, scope, options) {
- options = !Ext.isObject(options) ? {} : options;
+ options = options || {};
var f, gen;
@@ -16906,6 +16930,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] = []);
},
@@ -16917,6 +16945,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 = {});
},
@@ -17209,7 +17240,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;
@@ -17513,6 +17544,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
@@ -17727,19 +17806,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;
},
/**
@@ -17929,7 +18057,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 };
@@ -18057,7 +18185,6 @@ Ext.getBody().on('click', function(e,t){
}
function cannotInject (target, srcEvent) {
- // TODO log something
}
return function (target) {
@@ -18733,11 +18860,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();
@@ -18755,11 +18877,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];
@@ -18794,14 +18911,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];
@@ -20006,7 +20115,7 @@ Ext.apply(Ext.CompositeElementLite.prototype, {
Ext.removeNode(el);
}
}
- els.splice(val, 1);
+ Ext.Array.erase(els, val, 1);
}
});
return this;
@@ -20107,14 +20216,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);
};
@@ -20134,49 +20235,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:
- *
-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('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 */
@@ -20185,7 +20292,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
*/
@@ -20194,13 +20302,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) {
@@ -20208,22 +20317,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) {
@@ -20242,36 +20350,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,
@@ -20294,23 +20404,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)) {
@@ -20336,14 +20446,14 @@ 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,
@@ -20351,7 +20461,7 @@ new Ext.panel.Panel({
length,
i;
- if (Ext.isObject(ename)) {
+ if (typeof ename !== 'string') {
options = ename;
for (ename in options) {
if (options.hasOwnProperty(ename)) {
@@ -20371,9 +20481,12 @@ new Ext.panel.Panel({
},
/**
- *
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.
@@ -20391,84 +20504,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)) {
@@ -20492,9 +20641,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,
@@ -20502,7 +20653,7 @@ myGridPanel.on({
event,
options;
- if (Ext.isObject(ename)) {
+ if (typeof ename !== 'string') {
options = ename;
for (ename in options) {
if (options.hasOwnProperty(ename)) {
@@ -20541,12 +20692,6 @@ myGridPanel.on({
this.clearManagedListeners();
},
- purgeListeners : function() {
- if (Ext.global.console) {
- Ext.global.console.warn('Observable: purgeListeners has been deprecated. Please use clearListeners.');
- }
- return this.clearListeners.apply(this, arguments);
- },
/**
* Removes all managed listeners for this object.
@@ -20579,21 +20724,23 @@ myGridPanel.on({
}
},
- purgeManagedListeners : function() {
- if (Ext.global.console) {
- Ext.global.console.warn('Observable: purgeManagedListeners has been deprecated. Please use clearManagedListeners.');
- }
- return this.clearManagedListeners.apply(this, arguments);
- },
/**
* Adds the specified events to the list of events which this Observable may fire.
- * @param {Object/String} 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,
@@ -20616,6 +20763,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
*/
@@ -20625,9 +20773,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;
@@ -20637,9 +20786,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,
@@ -20655,9 +20805,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 || '';
@@ -20689,41 +20841,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;
@@ -20742,28 +20898,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'
});
@@ -20863,13 +21022,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;
}
}
@@ -21094,7 +21253,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.
@@ -21269,10 +21428,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
@@ -21467,8 +21628,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', {
@@ -21482,8 +21641,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(
/**
@@ -21521,6 +21687,10 @@ Ext.define('Ext.util.HashMap', {
me.mixins.observable.constructor.call(me, config);
me.clear(true);
+
+ if (keyFn) {
+ me.getKey = keyFn;
+ }
},
/**
@@ -21551,7 +21721,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.
*/
@@ -21909,7 +22078,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,
@@ -21960,7 +22128,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,
@@ -22075,78 +22242,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,
@@ -22425,15 +22587,20 @@ 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
*/
query: function(selector, root) {
@@ -22472,8 +22639,8 @@ 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
*/
@@ -22565,10 +22732,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] + '"');
- }
}
}
@@ -22627,8 +22790,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 @@ -23794,7 +24041,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 @@ -23823,18 +24070,18 @@ Ext.state.Manager.setProvider(new Ext.state.CookieProvider({ *
See {@link #stateful} for an explanation of saving and
* restoring object state.
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', { @@ -26679,6 +26916,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}).
@@ -26726,7 +26964,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}.
*/ @@ -26738,6 +26977,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 @@ -26921,14 +27180,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 @@ -27140,8 +27399,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. @@ -27149,9 +27408,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; @@ -27307,7 +27570,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 @@ -27317,6 +27580,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); @@ -27337,18 +27603,87 @@ and a property `descEl` referencing the `div` Element which contains the descrip 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) { @@ -27513,7 +27848,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; @@ -27548,7 +27882,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. @@ -27563,14 +27899,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(); @@ -27580,10 +27909,8 @@ and a property `descEl` referencing the `div` Element which contains the descrip } me.applyRenderSelectors(); - + me.rendered = true; - - me.setUI(me.ui); }, // @private @@ -27600,7 +27927,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'); @@ -27624,6 +27951,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. */ @@ -28719,12 +29118,12 @@ alert(t.getXTypes()); // alerts 'component/field/textfield' return me; }, - + // @private onEnable: function() { if (this.maskOnDisable) { this.el.unmask(); - } + } }, // @private @@ -28733,7 +29132,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. @@ -28814,12 +29213,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; @@ -28863,18 +29256,21 @@ 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); }, - + // 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) { @@ -29012,13 +29408,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; } @@ -29042,11 +29464,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; }, @@ -29056,26 +29478,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; @@ -29099,9 +29546,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); }, @@ -29111,14 +29558,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 @@ -29308,15 +29756,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); @@ -29344,7 +29792,7 @@ alert(t.getXTypes()); // alerts 'component/field/textfield' } } }, - + /** * Determines whether this component is the descendant of a particular container. * @param {Ext.Container} container @@ -29367,51 +29815,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 @@ -29850,12 +30308,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; @@ -30119,9 +30571,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); @@ -30459,8 +30922,6 @@ Ext.onReady(function(){ }); * * - * @constructor - * @param {Object} config Optional config object */ Ext.define('Ext.data.Association', { /** @@ -30506,13 +30967,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); @@ -30523,12 +30987,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; @@ -30736,9 +31194,6 @@ 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); }; }); @@ -30871,21 +31326,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. * * @docauthor Ed Spencer - * @constructor */ Ext.define('Ext.app.Controller', { - /** - * @cfg {String} 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\./); @@ -30925,6 +31380,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); @@ -31007,22 +31466,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); } @@ -31218,8 +31720,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', { /** @@ -31313,7 +31813,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 || {}); }, @@ -31555,9 +32059,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', { /** @@ -31590,6 +32091,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); @@ -31621,9 +32126,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', @@ -31669,6 +32171,10 @@ new Ext.data.writer.Writer({ */ nameProperty: 'name', + /** + * Creates new Writer. + * @param {Object} config (optional) Config object. + */ constructor: function(config) { Ext.apply(this, config); }, @@ -31814,8 +32320,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() { @@ -31886,8 +32394,8 @@ Ext.define('Ext.util.Floating', { me.setPosition(xy); } }, - - + + /** * Gets the x/y offsets to constrain this float * @private @@ -31897,7 +32405,7 @@ Ext.define('Ext.util.Floating', { getConstrainVector: function(constrainTo){ var me = this, el; - + if (me.constrain || me.constrainHeader) { el = me.constrainHeader ? me.header.el : me.el; constrainTo = constrainTo || (me.floatParent && me.floatParent.getTargetEl()) || me.container; @@ -32025,13 +32533,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 @@ -32052,37 +32553,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 @@ -32134,7 +32604,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', { @@ -32620,14 +33089,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; @@ -32898,14 +33369,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(); @@ -33156,6 +33628,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; @@ -33176,11 +33650,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 @@ -33256,19 +33735,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: { @@ -33280,7 +33756,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, @@ -33305,9 +33781,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({ @@ -33325,10 +33801,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, @@ -33395,10 +33870,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); @@ -33856,9 +34331,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); }, @@ -33900,9 +34372,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', { @@ -33928,7 +34397,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 || {}); }, @@ -34180,20 +34654,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(); @@ -34544,9 +35020,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. */ @@ -34568,7 +35041,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) @@ -34607,7 +35080,7 @@ Ext.define('Ext.draw.Color', { /** * Get the RGB values. - * @return {Array} + * @return {[Number]} */ getRGB: function() { var me = this; @@ -34616,7 +35089,7 @@ Ext.define('Ext.draw.Color', { /** * Get the equivalent HSL components of the color. - * @return {Array} + * @return {[Number]} */ getHSL: function() { var me = this, @@ -34691,9 +35164,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)) { @@ -34726,8 +35202,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, @@ -34773,10 +35252,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 = [], @@ -34841,12 +35323,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(); @@ -35023,14 +35507,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 @@ -35284,6 +35770,8 @@ Ext.define('Ext.layout.component.AbstractDock', { }, bodyBox: {} }; + // Clear isAutoDock flag + delete layout.isAutoDock; Ext.applyIf(info, me.getTargetInfo()); @@ -35329,6 +35817,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 @@ -35562,6 +36052,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, @@ -35592,33 +36083,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); @@ -35837,6 +36338,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); @@ -35855,6 +36363,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 @@ -35904,7 +36536,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; + }; } } } @@ -36379,7 +37013,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, @@ -36609,8 +37243,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'], @@ -36661,6 +37293,10 @@ Ext.define('Ext.data.reader.Reader', { isReader: true, + /** + * Creates new Reader. + * @param {Object} config (optional) Config object. + */ constructor: function(config) { var me = this; @@ -36927,7 +37563,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"); }, /** @@ -37261,9 +37896,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; }, @@ -37403,7 +38035,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 @@ -37454,9 +38085,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', @@ -37506,6 +38134,10 @@ Ext.define('Ext.data.proxy.Proxy', { isProxy: true, + /** + * Creates the Proxy + * @param {Object} config (optional) Config object. + */ constructor: function(config) { config = config || {}; @@ -37807,30 +38439,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 :
@@ -39823,7 +40466,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 */
@@ -40320,9 +40965,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 @@ -40711,7 +41356,6 @@ alert(t.getXType()); // alerts 'textfield' /** * @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.
*/ @@ -40761,11 +41405,6 @@ Ext.define('Ext.layout.container.Container', { } }, - afterLayout: function() { - this.owner.afterLayout(arguments); - this.callParent(arguments); - }, - /** * @protected * Returns all items that are rendered @@ -40853,8 +41492,6 @@ Ext.define('Ext.layout.container.Auto', { type: 'autocontainer', - fixedLayout: false, - bindToOwnerCtComponent: true, // @private @@ -40881,6 +41518,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); } }); /** @@ -41214,7 +41863,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(); @@ -41223,7 +41872,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) { @@ -41371,9 +42020,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); @@ -41491,9 +42137,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); @@ -41556,9 +42199,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; }, @@ -41911,8 +42556,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', @@ -41966,9 +42609,6 @@ Ext.define('Ext.container.Container', { * renderTo: Ext.getBody() * }); * - * @constructor - * Creates a new Fill - * @xtype tbfill */ Ext.define('Ext.toolbar.Fill', { extend: 'Ext.Component', @@ -41982,10 +42622,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', @@ -42020,9 +42656,6 @@ Ext.define('Ext.toolbar.Item', { * renderTo: Ext.getBody() * }); * - * @constructor - * Creates a new Separator - * @xtype tbseparator */ Ext.define('Ext.toolbar.Separator', { extend: 'Ext.toolbar.Item', @@ -42246,11 +42879,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: @@ -42369,10 +43002,6 @@ Example usage: } }); - * @constructor - * Create a new button - * @param {Object} config The config object - * @xtype button * @markdown * @docauthor Robert DouganautoLoadparams 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.' + ' tabIndex="{tabIndex}" role="link">' + - '{text}' + + '' + + '{text}' + + '' + + '' + '' + '' + '' + @@ -42593,7 +43225,10 @@ Ext.define('Ext.button.Button', { // the autocomplete="off" is required to prevent Firefox from remembering // the button's disabled state between page reloads. ' ' + '' , @@ -42841,7 +43476,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) { @@ -43007,11 +43643,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; @@ -43840,7 +44476,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 @@ -43904,8 +44539,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. + *tabIndex="{tabIndex}" role="button" autocomplete="off">' + - '{text}' + + '' + + '{text}' + + '' + + '' + '' + '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', { @@ -43917,10 +44553,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); @@ -43928,8 +44563,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); @@ -43939,11 +44575,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; @@ -44207,7 +44843,7 @@ Ext.define('Ext.util.Region', { }, /** - * Copy a new instance + * Create a copy of this Region. * @return {Ext.util.Region} */ copy: function() { @@ -44217,7 +44853,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; @@ -44229,7 +44865,7 @@ Ext.define('Ext.util.Region', { return this; }, - /** + /* * Dump this to an eye-friendly string, great for debugging * @return {String} */ @@ -44237,7 +44873,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. @@ -45710,8 +46345,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, @@ -45760,11 +46393,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 }; }, @@ -45821,6 +46455,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', @@ -46046,7 +46682,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); } @@ -46139,7 +46775,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; } @@ -46522,7 +47158,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 @@ -46612,7 +47262,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 @@ -47036,10 +47700,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) { @@ -47665,7 +48333,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', { @@ -47926,7 +48592,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, @@ -47940,7 +48606,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. @@ -47955,6 +48621,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. @@ -47975,12 +48671,12 @@ var panel = new Ext.panel.Panel({ }] }); */ - + border: true, initComponent : function() { var me = this; - + me.addEvents( /** * @event bodyresize @@ -47999,17 +48695,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(); }, @@ -48017,7 +48713,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) { @@ -48091,9 +48787,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 @@ -48102,7 +48798,7 @@ var panel = new Ext.panel.Panel({ var me = this, cls = '', bodyCls = me.bodyCls; - + if (bodyCls) { Ext.each(bodyCls, function(v) { cls += " " + v; @@ -48111,7 +48807,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 @@ -48157,6 +48853,9 @@ var panel = new Ext.panel.Panel({ item.onAdded(me, i); me.onDockedAdd(item); } + + // 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(); } @@ -48187,7 +48886,7 @@ var panel = new Ext.panel.Panel({ var me = this, layout, hasLayout; - + if (!me.dockedItems.contains(item)) { return item; } @@ -48210,8 +48909,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(); } @@ -48225,9 +48927,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) { @@ -48240,7 +48940,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)) { @@ -48248,57 +48947,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; + } } }, @@ -48314,7 +49079,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]; @@ -48322,11 +49087,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(){ @@ -48340,7 +49105,7 @@ var panel = new Ext.panel.Panel({ } this.callParent(); }, - + setBorder: function(border) { var me = this; me.border = (border !== undefined) ? border : true; @@ -48353,7 +49118,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', @@ -48439,6 +49203,7 @@ Ext.define('Ext.panel.Header', { ariaRole : 'heading', focusable: false, viewBox: false, + flex : 1, autoSize: true, margins: '5 0 0 0', items: [ me.textConfig ], @@ -48457,6 +49222,7 @@ Ext.define('Ext.panel.Header', { xtype : 'component', ariaRole : 'heading', focusable: false, + flex : 1, renderTpl : ['{title}'], renderData: { title: me.title, @@ -48470,14 +49236,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(); @@ -48526,36 +49284,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) { @@ -48565,12 +49377,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) { @@ -49121,7 +49947,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__ @@ -49219,8 +50045,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 */ @@ -49525,8 +50354,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 */ @@ -49638,11 +50471,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 */ @@ -49736,12 +50569,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; } @@ -49971,9 +50804,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]; @@ -49997,15 +50830,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]; @@ -50406,27 +51239,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. @@ -50627,23 +51528,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; @@ -51040,8 +51943,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', @@ -51389,52 +52296,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); @@ -51556,8 +52469,7 @@ Ext.define('Ext.dd.DragDrop', { locked: false, /** - * Lock this instance - * @method lock + * Locks this instance */ lock: function() { this.locked = true; @@ -51572,8 +52484,7 @@ Ext.define('Ext.dd.DragDrop', { moveOnly: false, /** - * Unlock this instace - * @method unlock + * Unlocks this instace */ unlock: function() { this.locked = false; @@ -51705,17 +52616,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) { }, @@ -51723,7 +52632,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 */ @@ -51731,7 +52639,6 @@ Ext.define('Ext.dd.DragDrop', { /** * Code that executes immediately before the onDrag event - * @method b4Drag * @private */ b4Drag: function(e) { }, @@ -51739,7 +52646,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 */ }, @@ -51747,9 +52653,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. */ @@ -51757,7 +52662,6 @@ Ext.define('Ext.dd.DragDrop', { /** * Code that executes immediately before the onDragOver event - * @method b4DragOver * @private */ b4DragOver: function(e) { }, @@ -51765,7 +52669,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 @@ -51775,16 +52678,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. */ @@ -51792,7 +52693,6 @@ Ext.define('Ext.dd.DragDrop', { /** * Code that executes immediately before the onDragDrop event - * @method b4DragDrop * @private */ b4DragDrop: function(e) { }, @@ -51800,9 +52700,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. */ @@ -51811,43 +52710,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 */ }, @@ -51855,13 +52748,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: { @@ -51873,27 +52765,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){ @@ -51930,7 +52822,6 @@ Ext.define('Ext.dd.DragDrop', { /** * Returns a reference to the linked element - * @method getEl * @return {HTMLElement} the html element */ getEl: function() { @@ -51945,7 +52836,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() { @@ -51955,10 +52845,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); @@ -51969,13 +52858,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 || {}; @@ -52019,7 +52906,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() { @@ -52034,7 +52920,6 @@ Ext.define('Ext.dd.DragDrop', { /** * Executed when the linked element is available - * @method handleOnAvailable * @private */ handleOnAvailable: function() { @@ -52043,13 +52928,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 @@ -52068,7 +52952,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 */ @@ -52096,7 +52979,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 */ @@ -52109,11 +52991,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; @@ -52121,9 +53002,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]) { @@ -52136,8 +53016,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; @@ -52150,8 +53029,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) { @@ -52165,8 +53043,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") { @@ -52179,8 +53056,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); @@ -52195,8 +53071,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() { @@ -52204,8 +53079,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 @@ -52252,7 +53126,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(); @@ -52263,7 +53137,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") { @@ -52274,8 +53148,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); @@ -52283,8 +53156,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(); @@ -52294,8 +53166,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") { @@ -52306,8 +53177,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) { @@ -52320,9 +53190,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) { @@ -52347,9 +53216,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) { @@ -52376,9 +53244,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) { @@ -52408,13 +53275,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; @@ -52430,7 +53295,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; @@ -52440,7 +53304,6 @@ Ext.define('Ext.dd.DragDrop', { /** * Clears any tick interval defined for this instance - * @method clearTicks */ clearTicks: function() { this.xTicks = null; @@ -52453,7 +53316,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 @@ -52472,8 +53334,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() { @@ -52507,7 +53368,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 @@ -52540,7 +53400,6 @@ Ext.define('Ext.dd.DragDrop', { /** * toString method - * @method toString * @return {string} string representation of the dd obj */ toString: function() { @@ -52548,6 +53407,7 @@ Ext.define('Ext.dd.DragDrop', { } }); + /* * This is a derivative of the similarly named class in the YUI Library. * The original license: @@ -52562,17 +53422,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); @@ -52875,6 +53736,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 @@ -52883,14 +53745,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', @@ -52898,13 +53752,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); @@ -53078,9 +53941,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', @@ -53120,6 +53980,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){ @@ -53621,9 +54487,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', @@ -53633,7 +54496,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', @@ -53722,13 +54586,13 @@ Ext.define('Ext.panel.Panel', { * clicking the expand button to see it again (defaults to true). */ 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 @@ -53843,36 +54707,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 @@ -54046,7 +54972,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: [ @@ -54058,6 +54984,7 @@ is equivalent to dockedItems: [{ xtype: 'toolbar', dock: 'bottom', + ui: 'footer', defaults: {minWidth: {@link #minButtonWidth}}, items: [ { xtype: 'component', flex: 1 }, @@ -54078,7 +55005,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' } @@ -54089,6 +55016,7 @@ is equivalent to dockedItems: [{ xtype: 'toolbar', dock: 'bottom', + ui: 'footer', defaults: {minWidth: {@link #minButtonWidth}}, items: [ { xtype: 'component', flex: 1 }, @@ -54102,7 +55030,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 @@ -54118,12 +55046,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; } @@ -54132,19 +55055,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 */ @@ -54158,19 +55081,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 */ @@ -54263,35 +55186,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, @@ -54380,7 +55291,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 @@ -54528,13 +55439,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); } @@ -54593,10 +55504,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; @@ -54604,10 +55523,6 @@ each of the buttons in the fbar. if (animate) { me.animate(anim); } else { - // EXTJSIV-1937 (would like to use setCalculateSize) - // save width/height here, expand puts them back - me.uncollapsedSize = { width: me.width, height: me.height }; - me.setSize(anim.to.width, anim.to.height); if (Ext.isDefined(anim.to.left) || Ext.isDefined(anim.to.top)) { me.setPosition(anim.to.left, anim.to.top); @@ -54622,8 +55537,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++) { @@ -54643,6 +55557,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); @@ -54665,29 +55586,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; } - // EXTJSIV-1937 (would like to use setCalculateSize) - if (this.uncollapsedSize) { - Ext.Object.each(this.uncollapsedSize, function (name, value) { - if (Ext.isDefined(value)) { - this[name] = value; - } else { - delete this[name]; - } - }, this); - delete this.uncollapsedSize; - } - - 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) { @@ -54804,7 +55713,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); } @@ -54819,6 +55728,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. @@ -54832,7 +55749,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) { @@ -55056,9 +55975,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', { @@ -55115,6 +56031,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. + *
+ * - {@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', @@ -55188,9 +56121,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 @@ -55203,7 +56133,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', @@ -55212,7 +56142,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 @@ -55224,15 +56154,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') + '"'); * } @@ -55242,32 +56200,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 @@ -55288,8 +56241,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. */ /** @@ -55328,48 +56281,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 @@ -55559,9 +56499,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); } @@ -55874,9 +56811,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', { @@ -56269,13 +57203,6 @@ Ext.define('Ext.tip.QuickTipManager', function() { if (autoRender !== false) { tipConfig.renderTo = document.body; - if (tipConfig.renderTo.tagName != 'BODY') { // e.g., == 'FRAMESET' - Ext.Error.raise({ - sourceClass: 'Ext.tip.QuickTipManager', - sourceMethod: 'init', - msg: 'Cannot init QuickTipManager: no document body' - }); - } } tip = Ext.create(className || 'Ext.tip.QuickTip', tipConfig); @@ -56433,11 +57360,10 @@ Ext.define('Ext.tip.QuickTipManager', function() { * 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). * * @docauthor Ed Spencer - * @constructor */ Ext.define('Ext.app.Application', { extend: 'Ext.app.Controller', @@ -56484,6 +57410,10 @@ Ext.define('Ext.app.Application', { */ autoCreateViewport: false, + /** + * Creates new Application. + * @param {Object} config (optional) Config object. + */ constructor: function(config) { config = config || {}; Ext.apply(this, config); @@ -56616,7 +57546,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', { @@ -57071,7 +58001,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', { @@ -57105,7 +58038,6 @@ Ext.define('Ext.chart.theme.Theme', { return; } } - Ext.Error.raise('No theme found named "' + theme + '"'); } } }, @@ -57351,9 +58283,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; @@ -57541,7 +58476,7 @@ Ext.define('Ext.chart.Mask', { * * Handles panning and zooming capabilities. * - * @ignore + * Used as mixin by Ext.chart.Chart. */ Ext.define('Ext.chart.Navigation', { @@ -57699,9 +58634,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 @@ -57723,7 +58655,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: * @@ -57744,73 +58676,82 @@ Ext.define('Ext.chart.Shape', { * } * }); * - * ## Example + * # Example * - * drawComponent.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', - * radius: 10, - * x: 10, - * y: 10, - * group: 'rectangles' - * }, - * { - * type: 'rect', - * radius: 10, - * x: 50, - * y: 50, - * group: 'rectangles' - * }, - * { - * type: 'rect', - * radius: 10, - * x: 100, - * y: 100, - * group: 'rectangles' - * } - * ]); - * + * 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 - * my circles = surface.getGroup('circles'); - * my rectangles = surface.getGroup('rectangles'); - * + * circles = surface.getGroup('circles'); + * rectangles = surface.getGroup('rectangles'); + * * // Animate the circles down * circles.animate({ * duration: 1000, - * translate: { - * y: 200 + * to: { + * translate: { + * y: 200 + * } * } * }); - * + * * // Animate the rectangles across * rectangles.animate({ * duration: 1000, - * translate: { - * x: 200 + * to: { + * translate: { + * x: 200 + * } * } * }); */ @@ -57829,11 +58770,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 - *-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); - } - } - }); -}); - *['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']; @@ -57896,22 +58838,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 || {}; @@ -57963,10 +58910,10 @@ 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, @@ -57976,10 +58923,10 @@ 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, @@ -57989,10 +58936,10 @@ 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 @@ -58063,7 +59010,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. * @@ -58138,7 +59085,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 @@ -58147,32 +59094,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: * @@ -58184,7 +59131,7 @@ Ext.define('Ext.draw.Surface', { * y: 100 * }); * - */ + */ add: function() { var args = Array.prototype.slice.call(arguments), sprite, @@ -58212,7 +59159,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. @@ -58259,15 +59206,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 @@ -58286,12 +59233,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. */ @@ -58459,8 +59406,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}. */ @@ -58500,8 +59447,8 @@ 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 @@ -58795,7 +59742,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', { @@ -59084,7 +60030,6 @@ Ext.define('Ext.chart.LegendItem', { }); * - * @constructor */ Ext.define('Ext.chart.Legend', { @@ -59169,6 +60114,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) { @@ -59406,10 +60355,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 */ @@ -60134,7 +61080,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', { @@ -60183,10 +61129,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; @@ -60196,8 +61139,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) { @@ -60227,6 +61169,7 @@ Ext.define('Ext.chart.Highlight', { } sprite._from = from; sprite._to = to; + sprite._endStyle = to; } if (animate) { sprite._anim = Ext.create('Ext.fx.Anim', { @@ -60254,9 +61197,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]) { @@ -60278,6 +61219,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, @@ -60420,7 +61363,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, @@ -60430,14 +61372,12 @@ Ext.define('Ext.chart.Label', { group = me.labelsGroup, store = me.chart.store, len = store.getCount(), - ratio = items.length / len, - i, count, index, 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; @@ -60468,7 +61408,18 @@ Ext.define('Ext.chart.Label', { //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) { @@ -60490,9 +61441,11 @@ 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); @@ -60607,7 +61560,7 @@ Ext.define('Ext.chart.TipSurface', { /** * @class Ext.chart.Tip - * @ignore + * Provides tips for Ext.chart.series.Series. */ Ext.define('Ext.chart.Tip', { @@ -60692,7 +61645,7 @@ Ext.define('Ext.chart.Tip', { }); /** * @class Ext.chart.axis.Abstract - * @ignore + * Base class for all axis classes. */ Ext.define('Ext.chart.axis.Abstract', { @@ -60702,6 +61655,10 @@ Ext.define('Ext.chart.axis.Abstract', { /* End Definitions */ + /** + * Creates new Axis. + * @param {Object} config (optional) Config options. + */ constructor: function(config) { config = config || {}; @@ -60800,6 +61757,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. @@ -61921,7 +62919,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', { @@ -61938,22 +62935,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) { @@ -62251,11 +63246,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.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'], @@ -62958,6 +63951,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', { @@ -62969,7 +63967,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 */ @@ -63186,8 +64184,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', { @@ -65226,7 +66204,6 @@ Ext.define('Ext.data.JsonStore', { * 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', { @@ -65930,7 +66907,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', { @@ -67338,6 +68314,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)) { @@ -67346,6 +68323,7 @@ Ext.define('Ext.chart.series.Bar', { } else { if (height + offsetY > attr.height) { display = outside; + label.isOutside = true; } } x = attr.x + groupBarWidth / 2; @@ -67363,6 +68341,7 @@ Ext.define('Ext.chart.series.Bar', { else { if (width + offsetX > attr.width) { display = outside; + label.isOutside = true; } } x = display == insideStart ? @@ -67498,8 +68477,29 @@ 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(); } }); /** @@ -68226,12 +69226,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 @@ -68330,7 +69340,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"], @@ -68340,6 +69351,7 @@ Ext.define('Ext.chart.series.Line', { shadowBarAttr, xValues = [], yValues = [], + storeIndices = [], numericAxis = true, axisCount = 0, onbreak = false, @@ -68354,10 +69366,11 @@ Ext.define('Ext.chart.series.Line', { '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, count; + endLineStyle, type, props, firstMarker, count, smoothPath, renderPath; //if store is empty then there's nothing to draw. if (!store || !store.getCount()) { @@ -68437,7 +69450,7 @@ Ext.define('Ext.chart.series.Line', { // 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)) { + if (me.xField && !isNumber(minX)) { if (me.axis == 'bottom' || me.axis == 'top') { axis = Ext.create('Ext.chart.axis.Axis', { chart: chart, @@ -68456,7 +69469,7 @@ Ext.define('Ext.chart.series.Line', { } } - if (me.yField && !Ext.isNumber(minY)) { + if (me.yField && !isNumber(minY)) { if (me.axis == 'right' || me.axis == 'left') { axis = Ext.create('Ext.chart.axis.Axis', { chart: chart, @@ -68480,7 +69493,10 @@ Ext.define('Ext.chart.series.Line', { 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)) { @@ -68488,7 +69504,10 @@ 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) { @@ -68496,9 +69515,6 @@ Ext.define('Ext.chart.series.Line', { 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 @@ -68512,6 +69528,7 @@ Ext.define('Ext.chart.series.Line', { || (me.axis != 'left' && me.axis != 'right' && !numericAxis)) { yValue = i; } + storeIndices.push(i); xValues.push(xValue); yValues.push(yValue); }, me); @@ -68606,12 +69623,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; @@ -68621,19 +69639,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({ @@ -68666,7 +69688,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] @@ -68676,7 +69698,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 }); } @@ -68686,7 +69708,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 }); @@ -68710,12 +69732,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 } }); } } @@ -68725,7 +69747,7 @@ 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 || {}) }); } @@ -68749,7 +69771,7 @@ Ext.define('Ext.chart.series.Line', { } } } 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 }); @@ -68761,7 +69783,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); } } @@ -68789,7 +69811,11 @@ Ext.define('Ext.chart.series.Line', { } 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(); @@ -70128,7 +71154,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]; } }); @@ -70770,9 +71796,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 @@ -71362,58 +72385,47 @@ Ext.define('Ext.chart.theme.Base', { /** * @author Ed Spencer - * @class Ext.data.ArrayStore - * @extends Ext.data.Store - * @ignore * - *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 || {}; @@ -71458,8 +72470,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: { @@ -71515,6 +72525,10 @@ Ext.define('Ext.data.Batch', { */ pauseOnException: true, + /** + * Creates new Batch object. + * @param {Object} config (optional) Config object + */ constructor: function(config) { var me = this; @@ -71870,38 +72884,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; } @@ -71966,7 +72979,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
* @@ -72199,7 +73212,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 @@ -72293,9 +73306,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); @@ -72391,9 +73401,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', { @@ -73339,47 +74344,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; } } } @@ -73496,9 +74495,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" ]); @@ -73641,7 +74641,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; }, /** @@ -73748,7 +74753,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) { @@ -73898,7 +74903,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; @@ -74254,7 +75259,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); @@ -74306,15 +75311,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]); } }, /** @@ -74330,7 +75334,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); @@ -74350,7 +75354,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]); } }, @@ -74375,14 +75379,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]); } } }; @@ -74429,10 +75433,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]); @@ -74643,8 +75643,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', { /** @@ -74667,6 +75665,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); } @@ -74682,8 +75684,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', @@ -74697,7 +75697,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; @@ -74960,21 +75964,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'. */ @@ -74984,14 +75987,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', @@ -75008,7 +76030,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, @@ -75016,7 +76039,6 @@ Ext.define('Ext.data.TreeStore', { var me = this, root, fields; - config = Ext.apply({}, config); @@ -75033,23 +76055,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, [ /** @@ -75173,6 +76178,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( /** @@ -75301,8 +76325,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) { @@ -75438,7 +76462,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 @@ -75477,7 +76501,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 @@ -75508,7 +76532,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 @@ -75596,8 +76620,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', { @@ -75641,7 +76663,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."); } }); /** @@ -75988,10 +77009,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', @@ -76003,7 +77020,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); @@ -76015,16 +77033,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(); }, @@ -76376,7 +77388,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"); } }); /** @@ -77046,31 +78057,21 @@ Ext.define('Ext.data.reader.Xml', { } return function(root) { - var node = Ext.DomQuery.selectNode(expr, root), - val = me.getNodeValue(node); - - return Ext.isEmpty(val) ? null : val; + 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; }, @@ -77113,9 +78114,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); @@ -77156,7 +78154,6 @@ Ext.define('Ext.data.reader.Xml', { return this.callParent([doc]); } }); - /** * @author Ed Spencer * @class Ext.data.writer.Xml @@ -77253,9 +78250,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', { @@ -77268,7 +78262,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); }, @@ -77623,7 +78621,6 @@ Ext.define('Ext.direct.PollingProvider', { }); me.fireEvent('connect', me); } else if (!url) { - Ext.Error.raise('Error initializing PollingProvider, no url configured.'); } }, @@ -77744,8 +78741,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', { @@ -77759,7 +78754,11 @@ Ext.define('Ext.direct.Transaction', { }, /* End Definitions */ - + + /** + * Creates new Transaction. + * @param {Object} config (optional) Config object. + */ constructor: function(config){ var me = this; @@ -78004,7 +79003,6 @@ TestAction.multiply( me.connected = true; me.fireEvent('connect', me); } else if(!me.url) { - Ext.Error.raise('Error initializing RemotingProvider, no url configured.'); } }, @@ -78567,6 +79565,7 @@ Ext.define('Ext.draw.SpriteDD', { * 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', '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. @@ -78580,9 +79579,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: @@ -78593,6 +79595,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: @@ -78602,6 +79607,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: * @@ -78612,6 +79632,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...); @@ -78648,6 +79684,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: { @@ -78990,6 +80088,8 @@ Ext.define('Ext.draw.engine.Svg', { strokeOpacity: "stroke-opacity", strokeLinejoin: "stroke-linejoin" }, + + parsers: {}, minDefaults: { circle: { @@ -79398,6 +80498,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) { @@ -79423,7 +80529,6 @@ Ext.define('Ext.draw.engine.Svg', { } else if (sprite.type == "path" && attrs.d) { attrs.d = Ext.draw.Draw.pathToString(Ext.draw.Draw.pathToAbsolute(attrs.d)); - } sprite.dirtyPath = false; // } @@ -79450,9 +80555,22 @@ Ext.define('Ext.draw.engine.Svg', { } for (key in attrs) { if (attrs.hasOwnProperty(key) && attrs[key] != null) { - el.dom.setAttribute(key, 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); } @@ -79530,40 +80648,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; }, /** @@ -79617,7 +80744,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); } } } @@ -80230,64 +81357,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) { @@ -80723,43 +81863,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);
- {1}
Function which can be overridden which returns the data object passed to this * DataView's {@link #tpl template} to render the whole DataView.
@@ -82328,12 +83527,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; }, @@ -82348,11 +83548,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); @@ -82370,12 +83568,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); @@ -82385,21 +83583,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){ @@ -82407,7 +83606,7 @@ Ext.define('Ext.view.AbstractView', { } me.fireEvent('itemremove', record, index); }, - + doRemove: function(record, index) { this.all.removeElement(index, true); }, @@ -82449,11 +83648,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, @@ -82485,12 +83684,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); } }, @@ -82513,7 +83712,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 @@ -82561,13 +83760,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. @@ -82579,7 +83778,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 @@ -82615,7 +83814,7 @@ Ext.define('Ext.view.AbstractView', { } return nodeInfo; }, - + /** * @private */ @@ -82623,16 +83822,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 @@ -82674,7 +83873,7 @@ Ext.define('Ext.view.AbstractView', { onDestroy : function() { var me = this; - + me.all.clear(); me.callParent(); me.bindStore(null); @@ -82692,7 +83891,7 @@ Ext.define('Ext.view.AbstractView', { var node = this.getNode(record); Ext.fly(node).removeCls(this.selectedItemCls); }, - + getItemSelector: function() { return this.itemSelector; } @@ -82718,7 +83917,7 @@ 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 @@ -82729,7 +83928,7 @@ Ext.define('Ext.view.AbstractView', { } return this.selModel.getSelection().length; }, - + /** * Gets an array of the selected records * @return {Array} An array of {@link Ext.data.Model} objects @@ -82740,7 +83939,7 @@ Ext.define('Ext.view.AbstractView', { } return this.selModel.getSelection(); }, - + select: function(records, keepExisting, supressEvents) { 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()"); @@ -82748,7 +83947,7 @@ Ext.define('Ext.view.AbstractView', { var sm = this.getSelectionModel(); return sm.select.apply(sm, arguments); }, - + clearSelections: function() { if (Ext.global.console) { Ext.global.console.warn("DataView: clearSelections will be removed, please access deselectAll through DataView's SelectionModel, ie: view.getSelectionModel().deselectAll()"); @@ -82756,7 +83955,7 @@ Ext.define('Ext.view.AbstractView', { var sm = this.getSelectionModel(); return sm.deselectAll(); } - }); + }); }); }); @@ -82818,8 +84017,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', { @@ -82863,6 +84060,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());
@@ -83107,10 +84308,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', {
@@ -83626,9 +84823,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.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', { @@ -87721,13 +88900,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;
@@ -88155,6 +89339,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) {
@@ -88176,6 +89365,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) {
@@ -88185,7 +89379,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;
@@ -88787,7 +89985,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,
@@ -88798,7 +89996,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,
@@ -88814,7 +90012,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,
@@ -88894,7 +90092,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) {
@@ -89410,9 +90608,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%',
@@ -89432,8 +90628,8 @@ anchor: '-50 75%'
components = me.getVisibleItems(owner),
len = components.length,
boxes = [],
- box, newTargetSize, anchorWidth, anchorHeight, component, anchorSpec, calcWidth, calcHeight,
- anchorsArray, anchor, i, el, cleaner;
+ box, newTargetSize, component, anchorSpec, calcWidth, calcHeight,
+ i, el, cleaner;
if (ownerWidth < 20 && ownerHeight < 20) {
return;
@@ -89449,21 +90645,6 @@ 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);
@@ -89473,24 +90654,19 @@ anchor: '-50 75%'
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,
@@ -89567,6 +90743,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);
}
});
@@ -89714,9 +90944,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',
@@ -90187,8 +91414,18 @@ Ext.define('Ext.window.Window', {
// private
afterShow: function(animateTarget) {
- var me = this;
+ var me = this,
+ animating = animateTarget || me.animateTarget;
+
+ if (animating) {
+ /*
+ * If we're animating, constrain the positioning before calling the
+ * superclass, otherwise we'll be animating to the unconstrained
+ * window position.
+ */
+ me.doConstrain();
+ }
// Perform superclass's afterShow tasks
// Which might include animating a proxy from an animTarget
me.callParent(arguments);
@@ -90198,7 +91435,9 @@ Ext.define('Ext.window.Window', {
}
me.syncMonitorWindowResize();
- me.doConstrain();
+ if (!animating) {
+ me.doConstrain();
+ }
if (me.keyMap) {
me.keyMap.enable();
@@ -90494,11 +91733,7 @@ __Example usage:__
renderTo: Ext.getBody()
});
- * @constructor
- * Creates a new Field
- * @param {Object} config Configuration options
*
- * @xtype field
* @markdown
* @docauthor Jason Johnston 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'}
- ]
-});
- * 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', @@ -98220,11 +99436,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) + ' ', + '
triggerCls will be appended if specified.
* Defaults to 'x-form-arrow-trigger' for ComboBox.
*/
triggerCls: Ext.baseCSSPrefix + 'form-arrow-trigger',
/**
- * @cfg {Ext.data.Store/Array} store The data source to which this combo is bound (defaults to undefined).
+ * @cfg {Ext.data.Store/Array} store The data source to which this combo is bound (defaults to undefined).
* Acceptable values for this property are:
* -
*
- any {@link Ext.data.Store Store} subclass *
- an Array : Arrays will be converted to a {@link Ext.data.Store} internally,
* automatically generating {@link Ext.data.Field#name field names} to work with all data components.
* + * * {@img Ext.menu.DatePicker/Ext.menu.DatePicker.png Ext.menu.DatePicker component} + * * __Example Usage__ - var dateMenu = Ext.create('Ext.menu.DatePicker', { - handler: function(dp, date){ - Ext.Msg.alert('Date Selected', 'You choose {0}.', Ext.Date.format(date, 'M j, Y')); - - } - }); - - Ext.create('Ext.menu.Menu', { - width: 100, - height: 90, - floating: false, // usually you want this set to True (default) - renderTo: Ext.getBody(), // usually rendered by it's containing component - items: [{ - text: 'choose a date', - menu: dateMenu - },{ - iconCls: 'add16', - text: 'icon item' - },{ - text: 'regular item' - }] - }); - - * @xtype datemenu + * + * var dateMenu = Ext.create('Ext.menu.DatePicker', { + * handler: function(dp, date){ + * Ext.Msg.alert('Date Selected', 'You choose {0}.', Ext.Date.format(date, 'M j, Y')); + * } + * }); + * + * Ext.create('Ext.menu.Menu', { + * width: 100, + * height: 90, + * floating: false, // usually you want this set to True (default) + * renderTo: Ext.getBody(), // usually rendered by it's containing component + * items: [{ + * text: 'choose a date', + * menu: dateMenu + * },{ + * iconCls: 'add16', + * text: 'icon item' + * },{ + * text: 'regular item' + * }] + * }); + * * @author Nicolas Ferrero */ Ext.define('Ext.menu.DatePicker', { @@ -120368,6 +121883,8 @@ Ext.define('Ext.menu.Menu', { Ext.apply(me, { showSeparator: false, plain: true, + border: false, + bodyPadding: 0, // remove the body padding from the datepicker menu item so it looks like 3.3 items: Ext.applyIf({ cls: Ext.baseCSSPrefix + 'menu-date-item', id: me.pickerId, @@ -120434,7 +121951,6 @@ __Example Usage__ }); * @markdown - * @xtype tool */ Ext.define('Ext.panel.Tool', { extend: 'Ext.Component', @@ -120520,37 +122036,6 @@ Ext.define('Ext.panel.Tool', { 'click' ); - var types = [ - 'close', - 'collapse', - 'down', - 'expand', - 'gear', - 'help', - 'left', - 'maximize', - 'minimize', - 'minus', - 'move', - 'next', - 'pin', - 'plus', - 'prev', - 'print', - 'refresh', - 'resize', - 'restore', - 'right', - 'save', - 'search', - 'toggle', - 'unpin', - 'up' - ]; - - if (me.id && Ext.Array.indexOf(types, me.id) > -1 && Ext.global.console) { - Ext.global.console.warn('When specifying a tool you should use the type option, the id can conflict now that tool is a Component'); - } me.type = me.type || me.id; @@ -120787,6 +122272,18 @@ Ext.define('Ext.resizer.Resizer', { */ width : null, + /** + * @cfg {Number} heightIncrement The increment to snap the height resize in pixels. + * Defaults to
-
- *
- 1-dimensional array : (e.g., ['Foo','Bar'])+ *- *
- 1-dimensional array : (e.g.,
- *['Foo','Bar'])* A 1-dimensional array will automatically be expanded (each array item will be used for both the combo * {@link #valueField} and {@link #displayField})- 2-dimensional array : (e.g., [['f','Foo'],['b','Bar']])
+ *- 2-dimensional array : (e.g.,
[['f','Foo'],['b','Bar']])* For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo * {@link #valueField}, while the value at index 1 is assumed to be the combo {@link #displayField}. *See also {@link #queryMode}.
+ *See also
*/ /** * @cfg {Boolean} multiSelect - * If set to true, allows the combo field to hold more than one value at a time, and allows selecting + * If set to{@link #queryMode}.true, allows the combo field to hold more than one value at a time, and allows selecting * multiple items from the dropdown list. The combo's text field will show all selected values separated by - * the {@link #delimiter}. (Defaults to false.) + * the {@link #delimiter}. (Defaults tofalse.) */ multiSelect: false, /** * @cfg {String} delimiter * The character(s) used to separate the {@link #displayField display values} of multiple selected items - * when {@link #multiSelect} = true. Defaults to ', '. + * when{@link #multiSelect} = true. Defaults to', '. */ delimiter: ', ', /** * @cfg {String} displayField The underlying {@link Ext.data.Field#name data field name} to bind to this * ComboBox (defaults to 'text'). - *See also {@link #valueField}.
+ *See also
*/ displayField: 'text', @@ -99403,16 +100621,16 @@ Ext.define('Ext.form.field.ComboBox', { * @required * The underlying {@link Ext.data.Field#name data value name} to bind to this ComboBox (defaults to match * the value of the {@link #displayField} config). - *{@link #valueField}.Note: use of a valueField requires the user to make a selection in order for a value to be - * mapped. See also {@link #displayField}.
+ *Note: use of a
*/ /** * @cfg {String} triggerAction The action to execute when the trigger is clicked. *valueFieldrequires the user to make a selection in order for a value to be + * mapped. See also{@link #displayField}.*-
- *
- 'all' : Default
- *
{@link #doQuery run the query} specified by the {@link #allQuery} config option
- * - 'query' : + *
'all': Default + *{@link #doQuery run the query} specified by the
{@link #allQuery}config option
+ * 'query': *{@link #doQuery run the query} using the {@link Ext.form.field.Base#getRawValue raw value}.
*
See also
@@ -99426,22 +100644,26 @@ Ext.define('Ext.form.field.ComboBox', { allQuery: '', /** - * @cfg {String} queryParam Name of the query ({@link Ext.data.proxy.Proxy#extraParam extraParam} name for the store) - * as it will be passed on the querystring (defaults to 'query'). If explicitly set to a falsey value it will - * not be send. + * @cfg {String} queryParam Name of the parameter used by the Store to pass the typed string when the ComboBox is configured with + *{@link #queryParam}.{@link #queryMode}: 'remote'(defaults to'query'). If explicitly set to a falsy value it will + * not be sent. */ queryParam: 'query', /** * @cfg {String} queryMode - * The mode for queries. Acceptable values are: + * The mode in which the ComboBox uses the configured Store. Acceptable values are: *+ * * {@img Ext.menu.ColorPicker/Ext.menu.ColorPicker.png Ext.menu.ColorPicker component} + * * __Example Usage__ - var colorPicker = Ext.create('Ext.menu.ColorPicker', { - value: '000000' - }); - - Ext.create('Ext.menu.Menu', { - width: 100, - height: 90, - floating: false, // usually you want this set to True (default) - renderTo: Ext.getBody(), // usually rendered by it's containing component - items: [{ - text: 'choose a color', - menu: colorPicker - },{ - iconCls: 'add16', - text: 'icon item' - },{ - text: 'regular item' - }] - }); - - * @xtype colormenu + * + * var colorPicker = Ext.create('Ext.menu.ColorPicker', { + * value: '000000' + * }); + * + * Ext.create('Ext.menu.Menu', { + * width: 100, + * height: 90, + * floating: false, // usually you want this set to True (default) + * renderTo: Ext.getBody(), // usually rendered by it's containing component + * items: [{ + * text: 'choose a color', + * menu: colorPicker + * },{ + * iconCls: 'add16', + * text: 'icon item' + * },{ + * text: 'regular item' + * }] + * }); + * * @author Nicolas Ferrero */ Ext.define('Ext.menu.ColorPicker', { @@ -120292,32 +121806,33 @@ Ext.define('Ext.menu.Menu', { * Applying {@link Ext.picker.Date DatePicker} configuration settings to * this will not affect the DatePicker's configuration.-
- *
- 'remote' : Default
- *
Automatically loads the {@link #store} the first time the trigger - * is clicked. If you do not want the store to be automatically loaded the first time the trigger is - * clicked, set to 'local' and manually load the store. To force a requery of the store - * every time the trigger is clicked see {@link #lastQuery}.
- * - 'local' : + *
'remote': Default + *In
+ *queryMode: 'remote', the ComboBox loads its Store dynamically based upon user interaction.This is typically used for "autocomplete" type inputs, and after the user finishes typing, the Store is {@link Ext.data.Store#load load}ed.
+ *A parameter containing the typed string is sent in the load request. The default parameter name for the input string is
+ *query, but this + * can be configured using the {@link #queryParam} config.In
+ *queryMode: 'remote', the Store may be configured with{@link Ext.data.Store#remoteFilter remoteFilter}: true, + * and further filters may be programatically added to the Store which are then passed with every load request which allows the server + * to further refine the returned dataset.Typically, in an autocomplete situation, {@link #hideTrigger} is configured
truebecause it has no meaning for autocomplete.
+ * 'local': *ComboBox loads local data
*
* To make sure the filter in the store is not cleared the first time the ComboBox trigger is used - * configure the combo with lastQuery=''. Example use: + * configure the combo withvar combo = new Ext.form.field.ComboBox({ @@ -99467,28 +100689,28 @@ var combo = new Ext.form.field.ComboBox({ queryCaching: true, /** - * @cfg {Number} pageSize If greater than 0, a {@link Ext.toolbar.Paging} is displayed in the + * @cfg {Number} pageSize If greater than0, a {@link Ext.toolbar.Paging} is displayed in the * footer of the dropdown list and the {@link #doQuery filter queries} will execute with page start and - * {@link Ext.toolbar.Paging#pageSize limit} parameters. Only applies when {@link #queryMode} = 'remote' - * (defaults to 0). + * {@link Ext.toolbar.Paging#pageSize limit} parameters. Only applies when{@link #queryMode} = 'remote'+ * (defaults to0). */ pageSize: 0, /** * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and - * sending the query to filter the dropdown list (defaults to 500 if {@link #queryMode} = 'remote' - * or 10 if {@link #queryMode} = 'local') + * sending the query to filter the dropdown list (defaults to500if{@link #queryMode} = 'remote'+ * or10if{@link #queryMode} = 'local') */ /** * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and - * {@link #typeAhead} activate (defaults to 4 if {@link #queryMode} = 'remote' or 0 if - * {@link #queryMode} = 'local', does not apply if {@link Ext.form.field.Trigger#editable editable} = false). + * {@link #typeAhead} activate (defaults to4if{@link #queryMode} = 'remote'or0if + *{@link #queryMode} = 'local', does not apply if{@link Ext.form.field.Trigger#editable editable} = false). */ /** - * @cfg {Boolean} autoSelect true to automatically highlight the first result gathered by the data store - * in the dropdown list when it is opened. (Defaults to true). A false value would cause nothing in the + * @cfg {Boolean} autoSelecttrueto automatically highlight the first result gathered by the data store + * in the dropdown list when it is opened. (Defaults totrue). A false value would cause nothing in the * list to be highlighted automatically, so the user would have to manually highlight an item before pressing * the enter or {@link #selectOnTab tab} key to select it (unless the value of ({@link #typeAhead}) were true), * or use the mouse to select a value. @@ -99496,27 +100718,27 @@ var combo = new Ext.form.field.ComboBox({ autoSelect: true, /** - * @cfg {Boolean} typeAhead true to populate and autoselect the remainder of the text being + * @cfg {Boolean} typeAheadtrueto populate and autoselect the remainder of the text being * typed after a configurable delay ({@link #typeAheadDelay}) if it matches a known value (defaults - * to false) + * tofalse) */ typeAhead: false, /** * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed - * if {@link #typeAhead} = true (defaults to 250) + * if{@link #typeAhead} = true(defaults to250) */ typeAheadDelay: 250, /** * @cfg {Boolean} selectOnTab - * Whether the Tab key should select the currently highlighted item. Defaults to true. + * Whether the Tab key should select the currently highlighted item. Defaults totrue. */ selectOnTab: true, /** - * @cfg {Boolean} forceSelection true to restrict the selected value to one of the values in the list, - * false to allow the user to set arbitrary text into the field (defaults to false) + * @cfg {Boolean} forceSelectiontrueto restrict the selected value to one of the values in the list, + *falseto allow the user to set arbitrary text into the field (defaults tofalse) */ forceSelection: false, @@ -99543,7 +100765,7 @@ var combo = new Ext.form.field.ComboBox({ }); *lastQuery=''. Example use: *var combo = new Ext.form.field.ComboBox({ ... @@ -99571,7 +100793,7 @@ var combo = new Ext.form.field.ComboBox({ /** * @cfg {Mixed} transform - * The id, DOM node or {@link Ext.core.Element} of an existing HTML <select> element to + * The id, DOM node or {@link Ext.core.Element} of an existing HTML<select>element to * convert into a ComboBox. The target select's options will be used to build the options in the ComboBox * dropdown; a configured {@link #store} will take precedence over this. */ @@ -99586,13 +100808,13 @@ var combo = new Ext.form.field.ComboBox({ *- {@link Ext.view.BoundList#emptyText} - defaults to empty string
*- {@link Ext.view.BoundList#getInnerTpl} - defaults to the template defined in BoundList
*- {@link Ext.view.BoundList#itemSelector} - defaults to the value defined in BoundList
- *- {@link Ext.view.BoundList#loadingText} - defaults to 'Loading...'
- *- {@link Ext.view.BoundList#minWidth} - defaults to 70
- *- {@link Ext.view.BoundList#maxWidth} - defaults to undefined
- *- {@link Ext.view.BoundList#maxHeight} - defaults to 300
- *- {@link Ext.view.BoundList#resizable} - defaults to false
- *- {@link Ext.view.BoundList#shadow} - defaults to 'sides'
- *- {@link Ext.view.BoundList#width} - defaults to undefined (automatically set to the width + *
- {@link Ext.view.BoundList#loadingText} - defaults to
+ *'Loading...'- {@link Ext.view.BoundList#minWidth} - defaults to
+ *70- {@link Ext.view.BoundList#maxWidth} - defaults to
+ *undefined- {@link Ext.view.BoundList#maxHeight} - defaults to
+ *300- {@link Ext.view.BoundList#resizable} - defaults to
+ *false- {@link Ext.view.BoundList#shadow} - defaults to
+ *'sides'- {@link Ext.view.BoundList#width} - defaults to
*undefined(automatically set to the width * of the ComboBox field if {@link #matchFieldWidth} is true)
trueto force the query to execute even if there are currently fewer + * characters in the field than the minimum specified by the{@link #minChars}config option. It + * also clears any filter previously saved in the current store (defaults tofalse) * @return {Boolean} true if the query was permitted to run, false if it was cancelled by a {@link #beforequery} handler. */ doQuery: function(queryString, forceAll) { @@ -99873,12 +101083,19 @@ var combo = new Ext.form.field.ComboBox({ // make sure they aren't querying the same thing if (!me.queryCaching || me.lastQuery !== queryString) { me.lastQuery = queryString; - store.clearFilter(!forceAll); + if (isLocalMode) { - if (!forceAll) { + // forceAll means no filtering - show whole dataset. + if (forceAll) { + store.clearFilter(); + } else { + // Clear filter, but supress event so that the BoundList is not immediately updated. + store.clearFilter(true); store.filter(me.displayField, queryString); } } else { + // In queryMode: 'remote', we assume Store filters are added by the developer as remote filters, + // and these are automatically passed as params with every load call, so we do *not* call clearFilter. store.load({ params: me.getParams(queryString) }); @@ -99907,11 +101124,11 @@ var combo = new Ext.form.field.ComboBox({ var p = {}, pageSize = this.pageSize, param = this.queryParam; - + if (param) { p[param] = queryString; } - + if (pageSize) { p.start = 0; p.limit = pageSize; @@ -99980,7 +101197,7 @@ var combo = new Ext.form.field.ComboBox({ me.doQueryTask.delay(me.queryDelay); } } - + if (me.enableKeyEvents) { me.callParent(arguments); } @@ -99991,7 +101208,7 @@ var combo = new Ext.form.field.ComboBox({ me.callParent(); /* - * Setup keyboard handling. If enableKeyEvents is true, we already have + * Setup keyboard handling. If enableKeyEvents is true, we already have * a listener on the inputEl for keyup, so don't create a second. */ if (!me.enableKeyEvents) { @@ -100014,7 +101231,8 @@ var combo = new Ext.form.field.ComboBox({ store: me.store, displayField: me.displayField, focusOnToFront: false, - pageSize: me.pageSize + pageSize: me.pageSize, + tpl: me.tpl }, me.listConfig, me.defaultListConfig); picker = me.picker = Ext.create('Ext.view.BoundList', opts); @@ -100025,10 +101243,7 @@ var combo = new Ext.form.field.ComboBox({ scope: me }); - me.mon(picker.getSelectionModel(), { - selectionChange: me.onListSelectionChange, - scope: me - }); + me.mon(picker.getSelectionModel(), 'selectionchange', me.onListSelectionChange, me); return picker; }, @@ -100037,7 +101252,7 @@ var combo = new Ext.form.field.ComboBox({ this.alignPicker(); this.syncSelection(); }, - + onItemClick: function(picker, record){ /* * If we're doing single selection, the selection change events won't fire when @@ -100047,25 +101262,34 @@ var combo = new Ext.form.field.ComboBox({ lastSelection = me.lastSelection, valueField = me.valueField, selected; - + if (!me.multiSelect && lastSelection) { selected = lastSelection[0]; - if (record.get(valueField) === selected.get(valueField)) { + if (selected && (record.get(valueField) === selected.get(valueField))) { me.collapse(); } - } + } }, onListSelectionChange: function(list, selectedRecords) { - var me = this; + var me = this, + isMulti = me.multiSelect, + hasRecords = selectedRecords.length > 0; // Only react to selection if it is not called from setValue, and if our list is // expanded (ignores changes to the selection model triggered elsewhere) if (!me.ignoreSelection && me.isExpanded) { - if (!me.multiSelect) { + if (!isMulti) { Ext.defer(me.collapse, 1, me); } - me.setValue(selectedRecords, false); - if (selectedRecords.length > 0) { + /* + * Only set the value here if we're in multi selection mode or we have + * a selection. Otherwise setValue will be called with an empty value + * which will cause the change event to fire twice. + */ + if (isMulti || hasRecords) { + me.setValue(selectedRecords, false); + } + if (hasRecords) { me.fireEvent('select', me, selectedRecords); } me.inputEl.focus(); @@ -100317,11 +101541,6 @@ var combo = new Ext.form.field.ComboBox({ * @extends Ext.Component *A month picker component. This class is used by the {@link Ext.picker.Date DatePicker} class * to allow browsing and selection of year/months combinations.
- * @constructor - * Create a new MonthPicker - * @param {Object} config The config object - * @xtype monthpicker - * @private */ Ext.define('Ext.picker.Month', { extend: 'Ext.Component', @@ -100380,11 +101599,10 @@ Ext.define('Ext.picker.Month', { /** * @cfg {Date/Array} value The default value to set. See {#setValue setValue} */ - - width: 175, - - height: 195, - + width: 178, + + // used when attached to date picker which isnt showing buttons + smallCls: Ext.baseCSSPrefix + 'monthpicker-small', // private totalYears: 10, @@ -100452,7 +101670,9 @@ Ext.define('Ext.picker.Month', { */ 'yeardblclick' ); - + if (me.small) { + me.addCls(me.smallCls); + } me.setValue(me.value); me.activeYear = me.getYear(new Date().getFullYear() - 4, -4); this.callParent(); @@ -100776,11 +101996,6 @@ Ext.define('Ext.picker.Month', { }); * {@img Ext.picker.Date/Ext.picker.Date.png Ext.picker.Date component} * - * @constructor - * Create a new DatePicker - * @param {Object} config The config object - * - * @xtype datepicker */ Ext.define('Ext.picker.Date', { extend: 'Ext.Component', @@ -101392,6 +102607,7 @@ Ext.define('Ext.picker.Date', { renderTo: me.el, floating: true, shadow: false, + small: me.showToday === false, listeners: { scope: me, cancelclick: me.onCancelClick, @@ -101812,11 +103028,7 @@ configurations; the first one matches the configured `format` while the second m }] }); - * @constructor - * Create a new Date field - * @param {Object} config * - * @xtype datefield * @markdown * @docauthor Jason JohnstonSubmitting the above form will result in three values sent to the server: *
* - * @constructor - * Create a new Hidden field. - * @param {Object} config Configuration options - * - * @xtype hiddenfield */ Ext.define('Ext.form.field.Hidden', { extend:'Ext.form.field.Base', @@ -102749,11 +103946,6 @@ cp.on('select', function(picker, selColor){ * {@img Ext.picker.Color/Ext.picker.Color.png Ext.picker.Color component} * - * @constructor - * Create a new ColorPicker - * @param {Object} config The config object - * - * @xtype colorpicker */ Ext.define('Ext.picker.Color', { extend: 'Ext.Component', @@ -103028,10 +104220,6 @@ Ext.define('Ext.layout.component.field.HtmlEditor', { * } * }); * - * @constructor - * Create a new HtmlEditor - * @param {Object} config - * @xtype htmleditor */ Ext.define('Ext.form.field.HtmlEditor', { extend:'Ext.Component', @@ -103451,7 +104639,7 @@ Ext.define('Ext.form.field.HtmlEditor', { getDocMarkup: function() { var me = this, h = me.iframeEl.getHeight() - me.iframePad * 2; - return Ext.String.format('', me.iframePad, h); + return Ext.String.format('', me.iframePad, h); }, // private @@ -104470,10 +105658,6 @@ __Example usage:__ }); - * @constructor - * Creates a new Radio - * @param {Object} config Configuration options - * @xtype radio * @docauthor Robert Dougantext_field=value+from+text+field&hidden_field_1=value+from+hidden+field&
hidden_field_2=value+from+submit+call', + '', + '' + ], + initComponent: function() { var me = this, dock = me.dock, cls = Ext.baseCSSPrefix + 'scroller-vertical', - sizeProp = 'width', - // Subtracting 2px would give us a perfect fit of the scroller - // however, some browsers wont allow us to scroll content thats not - // visible, therefore we use 1px. - // Note: This 1px offset matches code in Ext.grid.ColumnLayout when - // reserving room for the scrollbar - scrollbarWidth = Ext.getScrollBarWidth() + (Ext.isIE ? 1 : -1); + sizeProp = 'width'; me.offsets = {bottom: 0}; + me.scrollProp = 'scrollTop'; + me.vertical = true; if (dock === 'top' || dock === 'bottom') { cls = Ext.baseCSSPrefix + 'scroller-horizontal'; sizeProp = 'height'; + me.scrollProp = 'scrollLeft'; + me.vertical = false; + me.weight += 5; } - me[sizeProp] = scrollbarWidth; - + + me[sizeProp] = me.scrollerSize = Ext.getScrollbarSize()[sizeProp]; + me.cls += (' ' + cls); - + Ext.applyIf(me.renderSelectors, { - stretchEl: '.' + Ext.baseCSSPrefix + 'stretcher' + stretchEl: '.' + Ext.baseCSSPrefix + 'stretcher', + scrollEl: '.' + Ext.baseCSSPrefix + 'scroller-ct' }); me.callParent(); }, - - + + initRenderData: function () { + var me = this, + ret = me.callParent(arguments) || {}; + + ret.baseId = me.id; + + return ret; + }, + afterRender: function() { var me = this; me.callParent(); - me.ownerCt.on('afterlayout', me.onOwnerAfterLayout, me); - me.mon(me.el, 'scroll', me.onElScroll, me); + + me.mon(me.scrollEl, 'scroll', me.onElScroll, me); Ext.cache[me.el.id].skipGarbageCollection = true; }, - + + onAdded: function(container) { + // Capture the controlling grid Panel so that we can use it even when we are undocked, and don't have an ownerCt + this.ownerGrid = container; + this.callParent(arguments); + }, + getSizeCalculation: function() { - var owner = this.getPanel(), - dock = this.dock, - elDom = this.el.dom, + var me = this, + owner = me.getPanel(), width = 1, height = 1, view, tbl; - - if (dock === 'top' || dock === 'bottom') { + + if (!me.vertical) { // TODO: Must gravitate to a single region.. // Horizontal scrolling only scrolls virtualized region var items = owner.query('tableview'), center = items[1] || items[0]; - + if (!center) { return false; } @@ -106216,25 +107439,23 @@ Ext.define('Ext.grid.Scroller', { // are zero rows in the grid/tree. We read the width from the // headerCt instead. width = center.headerCt.getFullWidth(); - + if (Ext.isIEQuirks) { width--; } - // Account for the 1px removed in Scroller. - width--; - } else { + } else { view = owner.down('tableview:not([lockableInjected])'); - if (!view) { + if (!view || !view.el) { return false; } - tbl = view.el; + tbl = view.el.child('table', true); if (!tbl) { return false; } - + // needs to also account for header and scroller (if still in picture) // should calculate from headerCt. - height = tbl.dom.scrollHeight; + height = tbl.offsetHeight; } if (isNaN(width)) { width = 1; @@ -106247,34 +107468,88 @@ Ext.define('Ext.grid.Scroller', { height: height }; }, - + invalidate: function(firstPass) { - if (!this.stretchEl || !this.ownerCt) { + var me = this, + stretchEl = me.stretchEl; + + if (!stretchEl || !me.ownerCt) { return; } - var size = this.getSizeCalculation(), - elDom = this.el.dom; + + var size = me.getSizeCalculation(), + scrollEl = me.scrollEl, + elDom = scrollEl.dom, + reservedSpace = me.reservedSpace, + pos, + extra = 5; + if (size) { - this.stretchEl.setSize(size); - + stretchEl.setSize(size); + + size = me.el.getSize(true); + + if (me.vertical) { + size.width += extra; + size.height -= reservedSpace; + pos = 'left'; + } else { + size.width -= reservedSpace; + size.height += extra; + pos = 'top'; + } + + scrollEl.setSize(size); + elDom.style[pos] = (-extra) + 'px'; + // BrowserBug: IE7 // This makes the scroller enabled, when initially rendering. elDom.scrollTop = elDom.scrollTop; } }, - onOwnerAfterLayout: function(owner, layout) { + afterComponentLayout: function() { + this.callParent(arguments); this.invalidate(); }, + restoreScrollPos: function () { + var me = this, + el = this.scrollEl, + elDom = el && el.dom; + + if (me._scrollPos !== null && elDom) { + elDom[me.scrollProp] = me._scrollPos; + me._scrollPos = null; + } + }, + + setReservedSpace: function (reservedSpace) { + var me = this; + if (me.reservedSpace !== reservedSpace) { + me.reservedSpace = reservedSpace; + me.invalidate(); + } + }, + + saveScrollPos: function () { + var me = this, + el = this.scrollEl, + elDom = el && el.dom; + + me._scrollPos = elDom ? elDom[me.scrollProp] : null; + }, + /** * Sets the scrollTop and constrains the value between 0 and max. * @param {Number} scrollTop * @return {Number} The resulting scrollTop value after being constrained */ setScrollTop: function(scrollTop) { - if (this.el) { - var elDom = this.el.dom; + var el = this.scrollEl, + elDom = el && el.dom; + + if (elDom) { return elDom.scrollTop = Ext.Number.constrain(scrollTop, 0, elDom.scrollHeight - elDom.clientHeight); } }, @@ -106285,8 +107560,10 @@ Ext.define('Ext.grid.Scroller', { * @return {Number} The resulting scrollLeft value after being constrained */ setScrollLeft: function(scrollLeft) { - if (this.el) { - var elDom = this.el.dom; + var el = this.scrollEl, + elDom = el && el.dom; + + if (elDom) { return elDom.scrollLeft = Ext.Number.constrain(scrollLeft, 0, elDom.scrollWidth - elDom.clientWidth); } }, @@ -106297,8 +107574,10 @@ Ext.define('Ext.grid.Scroller', { * @return {Number} The resulting scrollTop value */ scrollByDeltaY: function(delta) { - if (this.el) { - var elDom = this.el.dom; + var el = this.scrollEl, + elDom = el && el.dom; + + if (elDom) { return this.setScrollTop(elDom.scrollTop + delta); } }, @@ -106309,20 +107588,22 @@ Ext.define('Ext.grid.Scroller', { * @return {Number} The resulting scrollLeft value */ scrollByDeltaX: function(delta) { - if (this.el) { - var elDom = this.el.dom; + var el = this.scrollEl, + elDom = el && el.dom; + + if (elDom) { return this.setScrollLeft(elDom.scrollLeft + delta); } }, - - + + /** * Scroll to the top. */ scrollToTop : function(){ this.setScrollTop(0); }, - + // synchronize the scroller with the bound gridviews onElScroll: function(event, target) { this.fireEvent('bodyscroll', event, target); @@ -106360,20 +107641,20 @@ Ext.define('Ext.grid.PagingScroller', { * when scrolling up between records 0 and 34 and when scrolling down between records 65 and 99. */ percentageFromEdge: 0.35, - + /** * @cfg {Number} scrollToLoadBuffer This is the time in milliseconds to buffer load requests * when scrolling the PagingScrollbar. */ scrollToLoadBuffer: 200, - + activePrefetch: true, - + chunkSize: 50, snapIncrement: 25, - + syncScroll: true, - + initComponent: function() { var me = this, ds = me.store; @@ -106381,8 +107662,7 @@ Ext.define('Ext.grid.PagingScroller', { ds.on('guaranteedrange', this.onGuaranteedRange, this); this.callParent(arguments); }, - - + onGuaranteedRange: function(range, start, end) { var me = this, ds = me.store, @@ -106391,7 +107671,7 @@ Ext.define('Ext.grid.PagingScroller', { if (range.length && me.visibleStart < range[0].index) { return; } - + ds.loadRecords(range); if (!me.firstLoad) { @@ -106406,19 +107686,19 @@ Ext.define('Ext.grid.PagingScroller', { me.syncTo(); } }, - + syncTo: function() { var me = this, pnl = me.getPanel(), store = pnl.store, - scrollerElDom = this.el.dom, + scrollerElDom = this.scrollEl.dom, rowOffset = me.visibleStart - store.guaranteedStart, scrollBy = rowOffset * me.rowHeight, scrollHeight = scrollerElDom.scrollHeight, clientHeight = scrollerElDom.clientHeight, scrollTop = scrollerElDom.scrollTop, useMaximum; - + // BrowserBug: clientHeight reports 0 in IE9 StrictMode // Instead we are using offsetHeight and hardcoding borders if (Ext.isIE9 && Ext.isStrict) { @@ -106426,16 +107706,16 @@ Ext.define('Ext.grid.PagingScroller', { } // This should always be zero or greater than zero but staying - // safe and less than 0 we'll scroll to the bottom. + // safe and less than 0 we'll scroll to the bottom. useMaximum = (scrollHeight - clientHeight - scrollTop <= 0); this.setViewScrollTop(scrollBy, useMaximum); }, - + getPageData : function(){ var panel = this.getPanel(), store = panel.store, totalCount = store.getTotalCount(); - + return { total : totalCount, currentPage : store.currentPage, @@ -106444,7 +107724,7 @@ Ext.define('Ext.grid.PagingScroller', { toRecord: Math.min(store.currentPage * store.pageSize, totalCount) }; }, - + onElScroll: function(e, t) { var me = this, panel = me.getPanel(), @@ -106471,8 +107751,7 @@ Ext.define('Ext.grid.PagingScroller', { me.visibleStart = visibleStart; me.visibleEnd = visibleEnd; - - + me.syncScroll = true; if (totalCount >= pageSize) { // end of request was past what the total is, grab from the end back a pageSize @@ -106501,29 +107780,29 @@ Ext.define('Ext.grid.PagingScroller', { store.prefetchPage(nextPage); } } - - + if (me.syncScroll) { me.syncTo(); } }, - + getSizeCalculation: function() { // Use the direct ownerCt here rather than the scrollerOwner // because we are calculating widths/heights. - var owner = this.ownerCt, + var owner = this.ownerGrid, view = owner.getView(), store = this.store, dock = this.dock, elDom = this.el.dom, width = 1, height = 1; - + if (!this.rowHeight) { this.rowHeight = view.el.down(view.getItemSelector()).getHeight(false, true); } - height = store.getTotalCount() * this.rowHeight; + // If the Store is *locally* filtered, use the filtered count from getCount. + height = store[(!store.remoteFilter && store.isFiltered()) ? 'getCount' : 'getTotalCount']() * this.rowHeight; if (isNaN(width)) { width = 1; @@ -106536,7 +107815,7 @@ Ext.define('Ext.grid.PagingScroller', { height: height }; }, - + attemptLoad: function(start, end) { var me = this; if (!me.loadTask) { @@ -106544,18 +107823,18 @@ Ext.define('Ext.grid.PagingScroller', { } me.loadTask.delay(me.scrollToLoadBuffer, me.doAttemptLoad, me, [start, end]); }, - + cancelLoad: function() { if (this.loadTask) { this.loadTask.cancel(); } }, - + doAttemptLoad: function(start, end) { var store = this.getPanel().store; store.guaranteeRange(start, end); }, - + setViewScrollTop: function(scrollTop, useMax) { var owner = this.getPanel(), items = owner.query('tableview'), @@ -106566,12 +107845,12 @@ Ext.define('Ext.grid.PagingScroller', { calcScrollTop, maxScrollTop, scrollerElDom = this.el.dom; - + owner.virtualScrollTop = scrollTop; - + center = items[1] || items[0]; centerEl = center.el.dom; - + maxScrollTop = ((owner.store.pageSize * this.rowHeight) - centerEl.clientHeight); calcScrollTop = (scrollTop % ((owner.store.pageSize * this.rowHeight) + 1)); if (useMax) { @@ -106587,15 +107866,11 @@ Ext.define('Ext.grid.PagingScroller', { } } }); - - /** * @class Ext.panel.Table * @extends Ext.panel.Panel - * @xtype tablepanel - * @private * @author Nicolas Ferrero - * TablePanel is a private class and the basis of both TreePanel and GridPanel. + * TablePanel is the basis of both TreePanel and GridPanel. * * TablePanel aggregates: * @@ -106663,9 +107938,15 @@ Ext.define('Ext.panel.Table', { * Specify astrueto hide the headers. */ + /** + * @cfg {Boolean} deferRowRenderDefaults to
+ *trueto enable deferred row rendering.This allows the GridView to execute a refresh quickly, with the expensive update of the row + * structure deferred so that layouts with GridPanels appear, and lay out more quickly.
+ */ + /** * @cfg {Boolean} sortableColumns - * Defaults to true. Set to false to disable column sorting via clicking the + * Defaults totrue. Set tofalseto disable column sorting via clicking the * header and via the Sorting menu items. */ sortableColumns: true, @@ -106681,21 +107962,26 @@ Ext.define('Ext.panel.Table', { scrollerOwner: true, invalidateScrollerOnRefresh: true, - + + /** + * @cfg {Boolean} enableColumnMove + * Defaults totrue. Set tofalseto disable column dragging within this grid. + */ enableColumnMove: true, + + /** + * @cfg {Boolean} enableColumnResize + * Defaults totrue. Set tofalseto disable column resizing within this grid. + */ enableColumnResize: true, + /** + * @cfg {Boolean} enableColumnHide + * Defaults totrue. Set tofalseto disable column hiding within this grid. + */ + enableColumnHide: true, initComponent: function() { - if (!this.viewType) { - Ext.Error.raise("You must specify a viewType config."); - } - if (!this.store) { - Ext.Error.raise("You must specify a store config"); - } - if (this.headers) { - Ext.Error.raise("The headers config is not supported. Please specify columns instead."); - } var me = this, scroll = me.scroll, @@ -106706,10 +107992,14 @@ Ext.define('Ext.panel.Table', { view, border = me.border; - // Set our determinScrollbars method to reference a buffered call to determinScrollbars which fires on a 30ms buffer. - me.determineScrollbars = Ext.Function.createBuffered(me.determineScrollbars, 30); - me.invalidateScroller = Ext.Function.createBuffered(me.invalidateScroller, 30); - me.injectView = Ext.Function.createBuffered(me.injectView, 30); + // We cannot buffer this because that will wait for the 30msec from afterLayout (or what + // ever event triggers it) and we may be in the middle of an animation; that is a bad + // time to injectView because it causes a layout (by calling add on the container). A + // throttled func will be called immediately on first call and then block subsequent + // (rapid fire) calls for 30msec before allowing another call to go through. Similar + // results, but the action moves from the trailing edge of the interval to the leading + // edge. + me.injectView = Ext.Function.createThrottled(me.injectView, 30, me); if (me.hideHeaders) { border = false; @@ -106733,6 +108023,7 @@ Ext.define('Ext.panel.Table', { sortable: me.sortableColumns, enableColumnMove: me.enableColumnMove, enableColumnResize: me.enableColumnResize, + enableColumnHide: me.enableColumnHide, border: border }); me.columns = headerCtCfg.items; @@ -106747,6 +108038,12 @@ Ext.define('Ext.panel.Table', { me.store = Ext.data.StoreManager.lookup(me.store); me.addEvents( + /** + * @event reconfigure + * Fires after a reconfigure + * @param {Ext.panel.Table} this + */ + 'reconfigure', /** * @event scrollerhide * Fires when a scroller is hidden @@ -106809,13 +108106,7 @@ Ext.define('Ext.panel.Table', { } if (vertical) { - me.verticalScroller = me.verticalScroller || {}; - Ext.applyIf(me.verticalScroller, { - dock: me.verticalScrollDock, - xtype: me.verticalScrollerType, - store: me.store - }); - me.verticalScroller = Ext.ComponentManager.create(me.verticalScroller); + me.verticalScroller = Ext.ComponentManager.create(me.initVerticalScroller()); me.mon(me.verticalScroller, { bodyscroll: me.onVerticalScroll, scope: me @@ -106823,12 +108114,7 @@ Ext.define('Ext.panel.Table', { } if (horizontal) { - me.horizontalScroller = Ext.ComponentManager.create({ - xtype: 'gridscroller', - section: me, - dock: 'bottom', - store: me.store - }); + me.horizontalScroller = Ext.ComponentManager.create(me.initHorizontalScroller()); me.mon(me.horizontalScroller, { bodyscroll: me.onHorizontalScroll, scope: me @@ -106853,12 +108139,7 @@ Ext.define('Ext.panel.Table', { scope: me }); me.mon(view, { - refresh: { - fn: this.onViewRefresh, - scope: me, - buffer: 50 - }, - itemupdate: me.onViewItemUpdate, + refresh: me.onViewRefresh, scope: me }); this.relayEvents(view, [ @@ -107127,21 +108408,72 @@ Ext.define('Ext.panel.Table', { this.callParent(); }, - getState: function(){ - var state = { - columns: [] - }, - sorter = this.store.sorters.first(); - - this.headerCt.items.each(function(header){ - state.columns.push({ - id: header.headerId, - width: header.flex ? undefined : header.width, - hidden: header.hidden, - sortable: header.sortable - }); + /** + * Returns the horizontal scroller config. + */ + initHorizontalScroller: function () { + var me = this, + ret = { + xtype: 'gridscroller', + dock: 'bottom', + section: me, + store: me.store + }; + + return ret; + }, + + /** + * Returns the vertical scroller config. + */ + initVerticalScroller: function () { + var me = this, + ret = me.verticalScroller || {}; + + Ext.applyIf(ret, { + xtype: me.verticalScrollerType, + dock: me.verticalScrollDock, + store: me.store }); + return ret; + }, + + getState: function(){ + var state = this.callParent(), + sorter = this.store.sorters.first(), + headers = this.headerCt.items.items, + header, + len = headers.length, + i = 0; + + state.columns = []; + for (; i < len; i++) { + header = headers[i]; + state.columns[i] = { + id: header.headerId + }; + + // We only store state which has changed from the initial state. + // So that current software settings do not override future software settings. + // Only user-changed state should be saved. + if (header.hidden !== (header.initialConfig.hidden||header.self.prototype.hidden)) { + state.columns[i].hidden = header.hidden; + } + if (header.sortable !== header.initialConfig.sortable) { + state.columns[i].sortable = header.sortable; + } + if (header.flex) { + if (header.flex !== header.initialConfig.flex) { + state.columns[i].flex = header.flex; + } + } else { + if (header.width !== header.initialConfig.width) { + state.columns[i].width = header.width; + } + } + } + if (sorter) { state.sort = { property: sorter.property, @@ -107163,6 +108495,12 @@ Ext.define('Ext.panel.Table', { headerState, header; + headerCt.suspendLayout = true; + + // Ensure superclass has applied *its* state. + // AbstractComponent saves dimensions (and anchor/flex) plus collapsed state. + this.callParent(arguments); + for (; i < length; ++i) { headerState = headers[i]; header = headerCt.down('gridcolumn[headerId=' + headerState.id + ']'); @@ -107170,17 +108508,32 @@ Ext.define('Ext.panel.Table', { if (i !== index) { headerCt.moveHeader(index, i); } - header.sortable = headerState.sortable; - if (Ext.isDefined(headerState.width)) { + + // Only state properties which were saved should be restored. + // (Only user-changed properties were saved by getState) + if (Ext.isDefined(headerState.hidden)) { + header.hidden = headerState.hidden; + } + if (Ext.isDefined(headerState.sortable)) { + header.sortable = headerState.sortable; + } + if (Ext.isDefined(headerState.flex)) { + delete header.width; + header.flex = headerState.flex; + } else if (Ext.isDefined(headerState.width)) { delete header.flex; + header.minWidth = headerState.width; if (header.rendered) { header.setWidth(headerState.width); } else { - header.minWidth = header.width = headerState.width; + header.width = headerState.width; } } - header.hidden = headerState.hidden; } + headerCt.suspendLayout = false; + + // After setting width and flexes while layout is suspended, column Container's Container layout needs running. + headerCt.doLayout(); if (sorter) { if (store.remoteSort) { @@ -107214,6 +108567,7 @@ Ext.define('Ext.panel.Table', { if (!me.view) { sm = me.getSelectionModel(); me.view = me.createComponent(Ext.apply({}, me.viewConfig, { + deferRowRender: me.deferRowRender, xtype: me.viewType, store: me.store, headerCt: me.headerCt, @@ -107258,17 +108612,11 @@ Ext.define('Ext.panel.Table', { scroller.scrollByDeltaX(distance); } }, - - afterLayout: function() { - this.callParent(arguments); - this.injectView(); - }, - /** * @private * Called after this Component has achieved its correct initial size, after all layouts have done their thing. - * This is so we can add the View only after the initial size is known. This method is buffered 30ms. + * This is so we can add the View only after the initial size is known. This method is throttled 30ms. */ injectView: function() { if (!this.hasView && !this.collapsed) { @@ -107278,18 +108626,33 @@ Ext.define('Ext.panel.Table', { me.hasView = true; me.add(view); - // hijack the view el's scroll method - view.el.scroll = Ext.Function.bind(me.elScroll, me); - // We use to listen to document.body wheel events, but that's a - // little much. We scope just to the view now. - me.mon(view.el, { - mousewheel: me.onMouseWheel, - scope: me - }); + function viewReady () { + // hijack the view el's scroll method + view.el.scroll = Ext.Function.bind(me.elScroll, me); + // We use to listen to document.body wheel events, but that's a + // little much. We scope just to the view now. + me.mon(view.el, { + mousewheel: me.onMouseWheel, + scope: me + }); + if (!me.height) { + me.doComponentLayout(); + } + } + + if (view.rendered) { + viewReady(); + } else { + view.on({ + afterrender: viewReady, + single: true + }); + } } }, afterExpand: function() { + // TODO - this is *not* called when part of an accordion! this.callParent(arguments); if (!this.hasView) { this.injectView(); @@ -107321,50 +108684,105 @@ Ext.define('Ext.panel.Table', { */ determineScrollbars: function() { var me = this, - viewElDom, - centerScrollWidth, - centerClientWidth, + box, + tableEl, + scrollWidth, + clientWidth, scrollHeight, - clientHeight; - - if (!me.collapsed && me.view && me.view.el) { - viewElDom = me.view.el.dom; - //centerScrollWidth = viewElDom.scrollWidth; - centerScrollWidth = me.headerCt.getFullWidth(); - /** - * clientWidth often returns 0 in IE resulting in an - * infinity result, here we use offsetWidth bc there are - * no possible scrollbars and we don't care about margins - */ - centerClientWidth = viewElDom.offsetWidth; - if (me.verticalScroller && me.verticalScroller.el) { - scrollHeight = me.verticalScroller.getSizeCalculation().height; + clientHeight, + verticalScroller = me.verticalScroller, + horizontalScroller = me.horizontalScroller, + curScrollbars = (verticalScroller && verticalScroller.ownerCt === me ? 1 : 0) | + (horizontalScroller && horizontalScroller.ownerCt === me ? 2 : 0), + reqScrollbars = 0; // 1 = vertical, 2 = horizontal, 3 = both + + // If we are not collapsed, and the view has been rendered AND filled, then we can determine scrollbars + if (!me.collapsed && me.view && me.view.el && me.view.el.dom.firstChild) { + + // Calculate maximum, *scrollbarless* space which the view has available. + // It will be the Fit Layout's calculated size, plus the widths of any currently shown scrollbars + box = me.layout.getLayoutTargetSize(); + clientWidth = box.width + ((curScrollbars & 1) ? verticalScroller.width : 0); + clientHeight = box.height + ((curScrollbars & 2) ? horizontalScroller.height : 0); + + // Calculate the width of the scrolling block + // There will never be a horizontal scrollbar if all columns are flexed. + + scrollWidth = (me.headerCt.query('[flex]').length && !me.headerCt.layout.tooNarrow) ? 0 : me.headerCt.getFullWidth(); + + // Calculate the height of the scrolling block + if (verticalScroller && verticalScroller.el) { + scrollHeight = verticalScroller.getSizeCalculation().height; } else { - scrollHeight = viewElDom.scrollHeight; + tableEl = me.view.el.child('table', true); + scrollHeight = tableEl ? tableEl.offsetHeight : 0; } - clientHeight = viewElDom.clientHeight; + // View is too high. + // Definitely need a vertical scrollbar + if (scrollHeight > clientHeight) { + reqScrollbars = 1; - me.suspendLayout = true; - me.scrollbarChanged = false; - if (!me.collapsed && scrollHeight > clientHeight) { - me.showVerticalScroller(); - } else { - me.hideVerticalScroller(); + // But if scrollable block width goes into the zone required by the vertical scrollbar, we'll also need a horizontal + if (horizontalScroller && ((clientWidth - scrollWidth) < verticalScroller.width)) { + reqScrollbars = 3; + } } - if (!me.collapsed && centerScrollWidth > (centerClientWidth + Ext.getScrollBarWidth() - 2)) { - me.showHorizontalScroller(); - } else { - me.hideHorizontalScroller(); + // View height fits. But we stil may need a horizontal scrollbar, and this might necessitate a vertical one. + else { + // View is too wide. + // Definitely need a horizontal scrollbar + if (scrollWidth > clientWidth) { + reqScrollbars = 2; + + // But if scrollable block height goes into the zone required by the horizontal scrollbar, we'll also need a vertical + if (verticalScroller && ((clientHeight - scrollHeight) < horizontalScroller.height)) { + reqScrollbars = 3; + } + } } - me.suspendLayout = false; - if (me.scrollbarChanged) { - me.doComponentLayout(); + + // If scrollbar requirements have changed, change 'em... + if (reqScrollbars !== curScrollbars) { + + // Suspend component layout while we add/remove the docked scrollers + me.suspendLayout = true; + if (reqScrollbars & 1) { + me.showVerticalScroller(); + } else { + me.hideVerticalScroller(); + } + if (reqScrollbars & 2) { + me.showHorizontalScroller(); + } else { + me.hideHorizontalScroller(); + } + me.suspendLayout = false; + + // After docked scrollers are correctly configured, lay out the Component. + // Set a flag so that afterComponentLayout does not recurse back into here. + me.changingScrollBars = true; + me.doComponentLayout(me.getWidth(), me.getHeight(), false, me.ownerCt); + me.changingScrollBars = false; } } }, + afterComponentLayout: function() { + var me = this; + me.callParent(arguments); + + // Insert the View the first time the Panel has a Component layout performed. + me.injectView(); + + // Avoid recursion + if (!me.changingScrollBars) { + me.determineScrollbars(); + } + me.invalidateScroller(); + }, + onHeaderResize: function() { if (this.view && this.view.rendered) { this.determineScrollbars(); @@ -107372,6 +108790,28 @@ Ext.define('Ext.panel.Table', { } }, + afterCollapse: function() { + var me = this; + if (me.verticalScroller) { + me.verticalScroller.saveScrollPos(); + } + if (me.horizontalScroller) { + me.horizontalScroller.saveScrollPos(); + } + me.callParent(arguments); + }, + + afterExpand: function() { + var me = this; + me.callParent(arguments); + if (me.verticalScroller) { + me.verticalScroller.restoreScrollPos(); + } + if (me.horizontalScroller) { + me.horizontalScroller.restoreScrollPos(); + } + }, + /** * Hide the verticalScroller and remove the horizontalScrollerPresentCls. */ @@ -107379,8 +108819,7 @@ Ext.define('Ext.panel.Table', { var me = this; if (me.horizontalScroller && me.horizontalScroller.ownerCt === me) { - me.scrollbarChanged = true; - me.verticalScroller.offsets.bottom = 0; + me.verticalScroller.setReservedSpace(0); me.removeDocked(me.horizontalScroller, false); me.removeCls(me.horizontalScrollerPresentCls); me.fireEvent('scrollerhide', me.horizontalScroller, 'horizontal'); @@ -107395,10 +108834,9 @@ Ext.define('Ext.panel.Table', { var me = this; if (me.verticalScroller) { - me.verticalScroller.offsets.bottom = Ext.getScrollBarWidth() - 2; + me.verticalScroller.setReservedSpace(Ext.getScrollbarSize().height - 1); } if (me.horizontalScroller && me.horizontalScroller.ownerCt !== me) { - me.scrollbarChanged = true; me.addDocked(me.horizontalScroller); me.addCls(me.horizontalScrollerPresentCls); me.fireEvent('scrollershow', me.horizontalScroller, 'horizontal'); @@ -107409,16 +108847,10 @@ Ext.define('Ext.panel.Table', { * Hide the verticalScroller and remove the verticalScrollerPresentCls. */ hideVerticalScroller: function() { - var me = this, - headerCt = me.headerCt; + var me = this; - // only trigger a layout when reserveOffset is changing - if (headerCt && headerCt.layout.reserveOffset) { - headerCt.layout.reserveOffset = false; - headerCt.doLayout(); - } + me.setHeaderReserveOffset(false); if (me.verticalScroller && me.verticalScroller.ownerCt === me) { - me.scrollbarChanged = true; me.removeDocked(me.verticalScroller, false); me.removeCls(me.verticalScrollerPresentCls); me.fireEvent('scrollerhide', me.verticalScroller, 'vertical'); @@ -107429,22 +108861,27 @@ Ext.define('Ext.panel.Table', { * Show the verticalScroller and add the verticalScrollerPresentCls. */ showVerticalScroller: function() { - var me = this, - headerCt = me.headerCt; + var me = this; - // only trigger a layout when reserveOffset is changing - if (headerCt && !headerCt.layout.reserveOffset) { - headerCt.layout.reserveOffset = true; - headerCt.doLayout(); - } + me.setHeaderReserveOffset(true); if (me.verticalScroller && me.verticalScroller.ownerCt !== me) { - me.scrollbarChanged = true; me.addDocked(me.verticalScroller); me.addCls(me.verticalScrollerPresentCls); me.fireEvent('scrollershow', me.verticalScroller, 'vertical'); } }, + setHeaderReserveOffset: function (reserveOffset) { + var headerCt = this.headerCt, + layout = headerCt.layout; + + // only trigger a layout when reserveOffset is changing + if (layout && layout.reserveOffset !== reserveOffset) { + layout.reserveOffset = reserveOffset; + headerCt.doLayout(); + } + }, + /** * Invalides scrollers that are present and forces a recalculation. * (Not related to showing/hiding the scrollers) @@ -107486,11 +108923,12 @@ Ext.define('Ext.panel.Table', { onMouseWheel: function(e) { var me = this, - browserEvent = e.browserEvent, vertScroller = me.getVerticalScroller(), horizScroller = me.getHorizontalScroller(), - scrollDelta = me.scrollDelta, - deltaY, deltaX, + scrollDelta = me.scrollDelta / -5, + deltas = e.getWheelDeltas(), + deltaX = scrollDelta * deltas.x, + deltaY = scrollDelta * deltas.y, vertScrollerEl, horizScrollerEl, vertScrollerElDom, horizScrollerElDom, horizontalCanScrollLeft, horizontalCanScrollRight, @@ -107498,7 +108936,7 @@ Ext.define('Ext.panel.Table', { // calculate whether or not both scrollbars can scroll right/left and up/down if (horizScroller) { - horizScrollerEl = horizScroller.el; + horizScrollerEl = horizScroller.scrollEl; if (horizScrollerEl) { horizScrollerElDom = horizScrollerEl.dom; horizontalCanScrollRight = horizScrollerElDom.scrollLeft !== horizScrollerElDom.scrollWidth - horizScrollerElDom.clientWidth; @@ -107506,7 +108944,7 @@ Ext.define('Ext.panel.Table', { } } if (vertScroller) { - vertScrollerEl = vertScroller.el; + vertScrollerEl = vertScroller.scrollEl; if (vertScrollerEl) { vertScrollerElDom = vertScrollerEl.dom; verticalCanScrollDown = vertScrollerElDom.scrollTop !== vertScrollerElDom.scrollHeight - vertScrollerElDom.clientHeight; @@ -107514,19 +108952,6 @@ Ext.define('Ext.panel.Table', { } } - // Webkit Horizontal Axis - if (browserEvent.wheelDeltaX || browserEvent.wheelDeltaY) { - deltaX = -browserEvent.wheelDeltaX / 120 * scrollDelta / 3; - deltaY = -browserEvent.wheelDeltaY / 120 * scrollDelta / 3; - } else { - // Gecko Horizontal Axis - if (browserEvent.axis && browserEvent.axis === 1) { - deltaX = -(scrollDelta * e.getWheelDelta()) / 3; - } else { - deltaY = -(scrollDelta * e.getWheelDelta() / 3); - } - } - if (horizScroller) { if ((deltaX < 0 && horizontalCanScrollLeft) || (deltaX > 0 && horizontalCanScrollRight)) { e.stopEvent(); @@ -107536,7 +108961,7 @@ Ext.define('Ext.panel.Table', { if (vertScroller) { if ((deltaY < 0 && verticalCanScrollUp) || (deltaY > 0 && verticalCanScrollDown)) { e.stopEvent(); - vertScroller.scrollByDeltaY(deltaY); + vertScroller.scrollByDeltaY(deltaY); } } }, @@ -107546,69 +108971,12 @@ Ext.define('Ext.panel.Table', { * Determine and invalidate scrollers on view refresh */ onViewRefresh: function() { - if (Ext.isIE) { - this.syncCellHeight(); - } this.determineScrollbars(); if (this.invalidateScrollerOnRefresh) { this.invalidateScroller(); } }, - onViewItemUpdate: function(record, index, tr) { - if (Ext.isIE) { - this.syncCellHeight([tr]); - } - }, - - // BrowserBug: IE will not stretch the td to fit the height of the entire - // tr, so manually sync cellheights on refresh and when an item has been - // updated. - syncCellHeight: function(trs) { - var me = this, - i = 0, - tds, - j, tdsLn, - tr, td, - trsLn, - rowHeights = [], - cellHeights, - cellClsSelector = ('.' + Ext.baseCSSPrefix + 'grid-cell'); - - trs = trs || me.view.getNodes(); - - trsLn = trs.length; - // Reading loop - for (; i < trsLn; i++) { - tr = trs[i]; - tds = Ext.fly(tr).query(cellClsSelector); - tdsLn = tds.length; - cellHeights = []; - for (j = 0; j < tdsLn; j++) { - td = tds[j]; - cellHeights.push(td.clientHeight); - } - rowHeights.push(Ext.Array.max(cellHeights)); - } - - // Setting loop - for (i = 0; i < trsLn; i++) { - tr = trs[i]; - tdsLn = tr.childNodes.length; - for (j = 0; j < tdsLn; j++) { - td = Ext.fly(tr.childNodes[j]); - if (rowHeights[i]) { - if (td.is(cellClsSelector)) { - td.setHeight(rowHeights[i]); - } else { - td.down(cellClsSelector).setHeight(rowHeights[i]); - } - } - - } - } - }, - /** * Sets the scrollTop of the TablePanel. * @param {Number} deltaY @@ -107622,7 +108990,6 @@ Ext.define('Ext.panel.Table', { if (verticalScroller) { verticalScroller.setScrollTop(top); } - }, getScrollerOwner: function() { @@ -107638,21 +109005,23 @@ Ext.define('Ext.panel.Table', { * @param {Number} deltaY */ scrollByDeltaY: function(deltaY) { - var rootCmp = this.getScrollerOwner(), - scrollerRight; - scrollerRight = rootCmp.down('gridscroller[dock=' + this.verticalScrollDock + ']'); - if (scrollerRight) { - scrollerRight.scrollByDeltaY(deltaY); + var verticalScroller = this.getVerticalScroller(); + + if (verticalScroller) { + verticalScroller.scrollByDeltaY(deltaY); } }, - /** * Scrolls the TablePanel by deltaX * @param {Number} deltaY */ scrollByDeltaX: function(deltaX) { - this.horizontalScroller.scrollByDeltaX(deltaX); + var horizontalScroller = this.getVerticalScroller(); + + if (horizontalScroller) { + horizontalScroller.scrollByDeltaX(deltaX); + } }, /** @@ -107714,7 +109083,9 @@ Ext.define('Ext.panel.Table', { } if (!this.selModel.hasRelaySetup) { - this.relayEvents(this.selModel, ['selectionchange', 'select', 'deselect']); + this.relayEvents(this.selModel, [ + 'selectionchange', 'beforeselect', 'beforedeselect', 'select', 'deselect' + ]); this.selModel.hasRelaySetup = true; } @@ -107740,21 +109111,9 @@ Ext.define('Ext.panel.Table', { onHorizontalScroll: function(event, target) { var owner = this.getScrollerOwner(), items = owner.query('tableview'), - i = 0, - len = items.length, - center, - centerEl, - centerScrollWidth, - centerClientWidth, - width; + center = items[1] || items[0]; - center = items[1] || items[0]; - centerEl = center.el.dom; - centerScrollWidth = centerEl.scrollWidth; - centerClientWidth = centerEl.offsetWidth; - width = this.horizontalScroller.getWidth(); - - centerEl.scrollLeft = target.scrollLeft; + center.el.dom.scrollLeft = target.scrollLeft; this.headerCt.el.dom.scrollLeft = target.scrollLeft; }, @@ -107771,31 +109130,37 @@ Ext.define('Ext.panel.Table', { me.getView().bindStore(store); }, + /** + * Reconfigure the table with a new store/column. + * Either the store or the column can be ommitted if you don't wish to change them. + * @param {Ext.data.Store} store The new store. + * @param {Array} columns An array of column configs + */ reconfigure: function(store, columns) { - var me = this; + var me = this, + headerCt = me.headerCt; if (me.lockable) { me.reconfigureLockable(store, columns); - return; - } - - if (columns) { - me.headerCt.removeAll(); - me.headerCt.add(columns); - } - if (store) { - store = Ext.StoreManager.lookup(store); - me.bindStore(store); } else { - me.getView().refresh(); + headerCt.suspendLayout = true; + headerCt.removeAll(); + if (columns) { + headerCt.add(columns); + } else { + headerCt.doLayout(); + } + if (store) { + store = Ext.StoreManager.lookup(store); + me.bindStore(store); + } else { + me.getView().refresh(); + } + if (columns) { + me.forceComponentLayout(); + } } - }, - - afterComponentLayout: function() { - var me = this; - me.callParent(arguments); - me.determineScrollbars(); - me.invalidateScroller(); + me.fireEvent('reconfigure', me); } }); /** @@ -107806,7 +109171,7 @@ This class encapsulates the user interface for a tabular data set. It acts as a centralized manager for controlling the various interface elements of the view. This includes handling events, such as row and cell level based DOM events. It also reacts to events from the underlying {@link Ext.selection.Model} -to provide visual feedback to the user. +to provide visual feedback to the user. This class does not provide ways to manipulate the underlying data of the configured {@link Ext.data.Store}. @@ -107816,7 +109181,6 @@ to be used directly. * @markdown * @abstract - * @xtype tableview * @author Nicolas Ferrero */ Ext.define('Ext.view.Table', { @@ -107889,7 +109253,16 @@ viewConfig: { initComponent: function() { var me = this; - + + if (me.deferRowRender !== false) { + me.refresh = function() { + delete me.refresh; + setTimeout(function() { + me.refresh(); + }, 0); + }; + } + me.scrollState = {}; me.selModel.view = me; me.headerCt.view = me; @@ -107915,7 +109288,7 @@ viewConfig: { // scroll to top of the grid when store loads onStoreLoad: function(){ var me = this; - + if (me.invalidateScrollerOnRefresh) { if (Ext.isGecko) { if (!me.scrollToTopTask) { @@ -107930,7 +109303,7 @@ viewConfig: { // scroll the view to the top scrollToTop: Ext.emptyFn, - + /** * Add a listener to the main view element. It will be destroyed with the view. * @private @@ -107940,16 +109313,16 @@ viewConfig: { element: 'el' }); }, - + /** * Get the columns used for generating a template via TableChunker. * See {@link Ext.grid.header.Container#getGridColumns}. * @private */ getGridColumns: function() { - return this.headerCt.getGridColumns(); + return this.headerCt.getGridColumns(); }, - + /** * Get a leaf level header by index regardless of what the nesting * structure is. @@ -107959,7 +109332,7 @@ viewConfig: { getHeaderAtIndex: function(index) { return this.headerCt.getHeaderAtIndex(index); }, - + /** * Get the cell (td) for a particular record and column. * @param {Ext.data.Model} record @@ -107992,7 +109365,7 @@ viewConfig: { i = 0, features, len; - + me.features = me.features || []; features = me.features; len = features.length; @@ -108028,7 +109401,7 @@ viewConfig: { afterRender: function() { var me = this; - + me.callParent(); me.mon(me.el, { scroll: me.fireBodyScroll, @@ -108086,29 +109459,11 @@ viewConfig: { jln = preppedRecords.length; // process row classes, rowParams has been deprecated and has been moved - // to the individual features that implement the behavior. + // to the individual features that implement the behavior. if (this.getRowClass) { for (; j < jln; j++) { rowParams = {}; preppedRecords[j]['rowCls'] = this.getRowClass(records[j], j, rowParams, this.store); - if (rowParams.alt) { - Ext.Error.raise("The getRowClass alt property is no longer supported."); - } - if (rowParams.tstyle) { - Ext.Error.raise("The getRowClass tstyle property is no longer supported."); - } - if (rowParams.cells) { - Ext.Error.raise("The getRowClass cells property is no longer supported."); - } - if (rowParams.body) { - Ext.Error.raise("The getRowClass body property is no longer supported. Use the getAdditionalData method of the rowbody feature."); - } - if (rowParams.bodyStyle) { - Ext.Error.raise("The getRowClass bodyStyle property is no longer supported."); - } - if (rowParams.cols) { - Ext.Error.raise("The getRowClass cols property is no longer supported."); - } } } // currently only one feature may implement collectData. This is to modify @@ -108134,11 +109489,21 @@ viewConfig: { onHeaderResize: function(header, w, suppressFocus) { var me = this, el = me.el; + if (el) { me.saveScrollState(); // Grab the col and set the width, css // class is generated in TableChunker. // Select composites because there may be several chunks. + + // IE6 and IE7 bug. + // Setting the width of the first TD does not work - ends up with a 1 pixel discrepancy. + // We need to increment the passed with in this case. + if (Ext.isIE6 || Ext.isIE7) { + if (header.el.hasCls(Ext.baseCSSPrefix + 'column-header-first')) { + w += 1; + } + } el.select('.' + Ext.baseCSSPrefix + 'grid-col-resizer-'+header.id).setWidth(w); el.select('.' + Ext.baseCSSPrefix + 'grid-table-resizer').setWidth(me.headerCt.getFullWidth()); me.restoreScrollState(); @@ -108183,7 +109548,7 @@ viewConfig: { setNewTemplate: function() { var me = this, columns = me.headerCt.getColumnsForTpl(true); - + me.tpl = me.getTableChunker().getTableTpl({ columns: columns, features: me.features @@ -108229,31 +109594,31 @@ viewConfig: { // GridSelectionModel invokes onRowDeselect as selection changes onRowDeselect : function(rowIdx) { var me = this; - + me.removeRowCls(rowIdx, me.selectedItemCls); me.removeRowCls(rowIdx, me.focusedItemCls); }, - + onCellSelect: function(position) { var cell = this.getCellByPosition(position); if (cell) { cell.addCls(this.selectedCellCls); } }, - + onCellDeselect: function(position) { var cell = this.getCellByPosition(position); if (cell) { cell.removeCls(this.selectedCellCls); } - + }, - + onCellFocus: function(position) { //var cell = this.getCellByPosition(position); this.focusCell(position); }, - + getCellByPosition: function(position) { var row = position.row, column = position.column, @@ -108262,7 +109627,7 @@ viewConfig: { header = this.headerCt.getHeaderAtIndex(column), cellSelector, cell = false; - + if (header && node) { cellSelector = header.getCellSelector(); cell = Ext.fly(node).down(cellSelector); @@ -108289,7 +109654,7 @@ viewConfig: { /** * Focus a particular row and bring it into view. Will fire the rowfocus event. - * @cfg {Mixed} An HTMLElement template node, index of a template node, the + * @param {Mixed} rowIdx An HTMLElement template node, index of a template node, the * id of a template node or the record associated with the node. */ focusRow: function(rowIdx) { @@ -108301,7 +109666,7 @@ viewConfig: { rowRegion, elRegion, record; - + if (row && el) { elRegion = el.getRegion(); rowRegion = Ext.fly(row).getRegion(); @@ -108411,23 +109776,10 @@ viewConfig: { * Refresh the grid view. * Saves and restores the scroll state, generates a new template, stripes rows * and invalidates the scrollers. - * @param {Boolean} firstPass This is a private flag for internal use only. */ - refresh: function(firstPass) { - var me = this, - table; - - //this.saveScrollState(); - me.setNewTemplate(); - - me.callParent(arguments); - - //this.restoreScrollState(); - - if (me.rendered && !firstPass) { - // give focus back to gridview - //me.el.focus(); - } + refresh: function() { + this.setNewTemplate(); + this.callParent(arguments); }, processItemEvent: function(record, row, rowIndex, e) { @@ -108460,7 +109812,7 @@ viewConfig: { } return !( - // We are adding cell and feature events + // We are adding cell and feature events (me['onBeforeCell' + map[type]](cell, cellIndex, record, row, rowIndex, e) === false) || (me.fireEvent('beforecell' + type, me, cell, cellIndex, record, row, rowIndex, e) === false) || (me['onCell' + map[type]](cell, cellIndex, record, row, rowIndex, e) === false) || @@ -108494,7 +109846,7 @@ viewConfig: { // fireEvent signature beforeArgs = feature.getFireEventArgs('before' + prefix + type, me, featureTarget, e); args = feature.getFireEventArgs(prefix + type, me, featureTarget, e); - + if ( // before view event (me.fireEvent.apply(me, beforeArgs) === false) || @@ -108532,9 +109884,11 @@ viewConfig: { * @private */ expandToFit: function(header) { - var maxWidth = this.getMaxContentWidth(header); - delete header.flex; - header.setWidth(maxWidth); + if (header) { + var maxWidth = this.getMaxContentWidth(header); + delete header.flex; + header.setWidth(maxWidth); + } }, /** @@ -109929,14 +111283,11 @@ Ext.define('Ext.grid.RowEditor', { /** * @class Ext.grid.header.Container * @extends Ext.container.Container - * @private * * Container which holds headers and is docked at the top or bottom of a TablePanel. * The HeaderContainer drives resizing/moving/hiding of columns within the TableView. * As headers are hidden, moved or resized the headercontainer is responsible for * triggering changes within the view. - * - * @xtype headercontainer */ Ext.define('Ext.grid.header.Container', { extend: 'Ext.container.Container', @@ -110000,10 +111351,10 @@ Ext.define('Ext.grid.header.Container', { * items for every header. */ sortable: true, - + initComponent: function() { var me = this; - + me.headerCounter = 0; me.plugins = me.plugins || []; @@ -110017,7 +111368,7 @@ Ext.define('Ext.grid.header.Container', { me.reorderer = Ext.create('Ext.grid.plugin.HeaderReorderer'); if (!me.enableColumnResize) { me.resizer.disable(); - } + } if (!me.enableColumnMove) { me.reorderer.disable(); } @@ -110168,7 +111519,7 @@ Ext.define('Ext.grid.header.Container', { firstHeaderEl.addCls(me.firstHeaderCls); me.pastFirstHeaderEl = firstHeaderEl; } - + lastHeaderEl = topHeaders[topHeaders.length - 1].el; if (lastHeaderEl !== me.pastLastHeaderEl) { if (me.pastLastHeaderEl) { @@ -110179,7 +111530,7 @@ Ext.define('Ext.grid.header.Container', { } } } - + }, onHeaderShow: function(header) { @@ -110295,6 +111646,10 @@ Ext.define('Ext.grid.header.Container', { for (i = 0; i < len; i++) { itemToDisable = itemsToDisable[i]; if (!Ext.Array.contains(me.disabledMenuItems, itemToDisable)) { + + // If we only want to disable check change: it might be a disabled item, so enable it prior to + // setting its correct disablement level. + itemToDisable.disabled = false; itemToDisable[itemToDisable.menu ? 'disableCheckChange' : 'disable'](); me.disabledMenuItems.push(itemToDisable); } @@ -110402,6 +111757,7 @@ Ext.define('Ext.grid.header.Container', { if (!me.menu) { me.menu = Ext.create('Ext.menu.Menu', { + hideOnParentHide: false, // Persists when owning ColumnHeader is hidden items: me.getMenuItems(), listeners: { deactivate: me.onMenuDeactivate, @@ -110421,15 +111777,11 @@ Ext.define('Ext.grid.header.Container', { */ getMenuItems: function() { var me = this, - menuItems = [{ - itemId: 'columnItem', - text: me.columnsText, - cls: Ext.baseCSSPrefix + 'cols-icon', - menu: me.getColumnMenu(me) - }]; + menuItems = [], + hideableColumns = me.enableColumnHide ? me.getColumnMenu(me) : null; if (me.sortable) { - menuItems.unshift({ + menuItems = [{ itemId: 'ascItem', text: me.sortAscText, cls: 'xg-hmenu-sort-asc', @@ -110441,7 +111793,15 @@ Ext.define('Ext.grid.header.Container', { cls: 'xg-hmenu-sort-desc', handler: me.onSortDescClick, scope: me - },'-'); + }]; + }; + if (hideableColumns && hideableColumns.length) { + menuItems.push('-', { + itemId: 'columnItem', + text: me.columnsText, + cls: Ext.baseCSSPrefix + 'cols-icon', + menu: hideableColumns + }); } return menuItems; }, @@ -110519,14 +111879,27 @@ Ext.define('Ext.grid.header.Container', { headers = this.getGridColumns(flushCache), headersLn = headers.length, i = 0, - header; + header, + width; for (; i < headersLn; i++) { header = headers[i]; + + if (header.hidden) { + width = 0; + } else { + width = header.getDesiredWidth(); + // IE6 and IE7 bug. + // Setting the width of the first TD does not work - ends up with a 1 pixel discrepancy. + // We need to increment the passed with in this case. + if ((i == 0) && (Ext.isIE6 || Ext.isIE7)) { + width += 1; + } + } cols.push({ dataIndex: header.dataIndex, align: header.align, - width: header.hidden ? 0 : header.getDesiredWidth(), + width: width, id: header.id, cls: header.tdCls, columnId: header.getItemId() @@ -110586,7 +111959,7 @@ Ext.define('Ext.grid.header.Container', { }, /** - * Returns an array of the visible columns in the grid. This goes down to the lowest column header + * Returns an array of the visible columns in the grid. This goes down to the lowest column header * level, and does not return grouped headers which contain sub headers. * @param {Boolean} refreshCache If omitted, the cached set of columns will be returned. Pass true to refresh the cache. * @returns {Array} @@ -110668,7 +112041,7 @@ Ext.define('Ext.grid.header.Container', { if (typeof renderer === "string") { header.renderer = renderer = Ext.util.Format[renderer]; } - + if (typeof renderer === "function") { value = renderer.call( header.scope || this.ownerCt, @@ -110684,14 +112057,8 @@ Ext.define('Ext.grid.header.Container', { ); } - if (metaData.css) { - // This warning attribute is used by the compat layer - obj.cssWarning = true; - metaData.tdCls = metaData.css; - delete metaData.css; - } - - obj[headerId+'-modified'] = record.modified[header.dataIndex] ? Ext.baseCSSPrefix + 'grid-dirty-cell' : ''; + + obj[headerId+'-modified'] = record.isModified(header.dataIndex) ? Ext.baseCSSPrefix + 'grid-dirty-cell' : ''; obj[headerId+'-tdCls'] = metaData.tdCls; obj[headerId+'-tdAttr'] = metaData.tdAttr; obj[headerId+'-style'] = metaData.style; @@ -110713,13 +112080,13 @@ Ext.define('Ext.grid.header.Container', { /** * @class Ext.grid.column.Column * @extends Ext.grid.header.Container - * + * * This class specifies the definition for a column inside a {@link Ext.grid.Panel}. It encompasses * both the grid header configuration as well as displaying data within the grid itself. If the * {@link #columns} configuration is specified, this column will become a column group and can * container other columns inside. In general, this class will not be created directly, rather * an array of column configurations will be passed to the grid: - * + * * {@img Ext.grid.column.Column/Ext.grid.column.Column.png Ext.grid.column.Column grid column} * * ## Code @@ -110732,38 +112099,38 @@ Ext.define('Ext.grid.header.Container', { * {firstname:"Dwight", lastname:"Schrute", senority:2, dep:"Sales", hired:"04/01/2004"}, * {firstname:"Jim", lastname:"Halpert", senority:3, dep:"Sales", hired:"02/22/2006"}, * {firstname:"Kevin", lastname:"Malone", senority:4, dep:"Accounting", hired:"06/10/2007"}, - * {firstname:"Angela", lastname:"Martin", senority:5, dep:"Accounting", hired:"10/21/2008"} + * {firstname:"Angela", lastname:"Martin", senority:5, dep:"Accounting", hired:"10/21/2008"} * ] * }); - * + * * Ext.create('Ext.grid.Panel', { * title: 'Column Demo', * store: Ext.data.StoreManager.lookup('employeeStore'), * columns: [ * {text: 'First Name', dataIndex:'firstname'}, * {text: 'Last Name', dataIndex:'lastname'}, - * {text: 'Hired Month', dataIndex:'hired', xtype:'datecolumn', format:'M'}, + * {text: 'Hired Month', dataIndex:'hired', xtype:'datecolumn', format:'M'}, * {text: 'Deparment (Yrs)', xtype:'templatecolumn', tpl:'{dep} ({senority})'} * ], * width: 400, * renderTo: Ext.getBody() * }); - * + * * ## Convenience Subclasses * There are several column subclasses that provide default rendering for various data types * * - {@link Ext.grid.column.Action}: Renders icons that can respond to click events inline - * - {@link Ext.grid.column.Boolean}: Renders for boolean values + * - {@link Ext.grid.column.Boolean}: Renders for boolean values * - {@link Ext.grid.column.Date}: Renders for date values * - {@link Ext.grid.column.Number}: Renders for numeric values - * - {@link Ext.grid.column.Template}: Renders a value using an {@link Ext.XTemplate} using the record data - * + * - {@link Ext.grid.column.Template}: Renders a value using an {@link Ext.XTemplate} using the record data + * * ## Setting Sizes * The columns are laid out by a {@link Ext.layout.container.HBox} layout, so a column can either * be given an explicit width value or a flex configuration. If no width is specified the grid will * automatically the size the column to 100px. For column groups, the size is calculated by measuring * the width of the child columns, so a width option should not be specified in that case. - * + * * ## Header Options * - {@link #text}: Sets the header text for the column * - {@link #sortable}: Specifies whether the column can be sorted by clicking the header or using the column menu @@ -110771,12 +112138,10 @@ Ext.define('Ext.grid.header.Container', { * - {@link #menuDisabled}: Disables the column header menu * - {@link #draggable}: Specifies whether the column header can be reordered by dragging * - {@link #groupable}: Specifies whether the grid can be grouped by the column dataIndex. See also {@link Ext.grid.feature.Grouping} - * + * * ## Data Options * - {@link #dataIndex}: The dataIndex is the field in the underlying {@link Ext.data.Store} to use as the value for the column. * - {@link #renderer}: Allows the underlying store value to be transformed before being displayed in the grid - * - * @xtype gridcolumn */ Ext.define('Ext.grid.column.Column', { extend: 'Ext.grid.header.Container', @@ -110830,14 +112195,22 @@ Ext.define('Ext.grid.column.Column', { * Whether local/remote sorting is used is specified in{@link Ext.data.Store#remoteSort}. */ sortable: true, - + /** * @cfg {Boolean} groupable Optional. If the grid uses a {@link Ext.grid.feature.Grouping}, this option * may be used to disable the header menu item to group by the column selected. By default, * the header menu group option is enabled. Set to false to disable (but still show) the * group option in the header menu for the column. */ + + /** + * @cfg {Boolean} fixed Prevents the column from being resizable + */ + /** + * @cfg {Boolean} resizable This config has no effect on a grid column, please see {@link #fixed} instead. + */ + /** * @cfg {Boolean} hideable Optional. Specify as false to prevent the user from hiding this column * (defaults to true). @@ -110851,7 +112224,7 @@ Ext.define('Ext.grid.column.Column', { menuDisabled: false, /** - * @cfg {Function} renderer + * @method *A renderer is an 'interceptor' method which can be used transform data (value, appearance, etc.) before it * is rendered. Example:
*
- * @constructor - * @param {Object} config The configuration options */ Ext.define('Ext.grid.RowNumberer', { extend: 'Ext.grid.column.Column', @@ -111521,9 +112902,12 @@ Ext.define('Ext.view.DropZone', { // Fire an event through the client DataView. Lock this DropZone during the event processing so that // its data does not become corrupted by processing mouse events. fireViewEvent: function() { - this.lock(); - var result = this.view.fireEvent.apply(this.view, arguments); - this.unlock(); + var me = this, + result; + + me.lock(); + result = me.view.fireEvent.apply(me.view, arguments); + me.unlock(); return result; }, @@ -111634,41 +113018,46 @@ Ext.define('Ext.view.DropZone', { // The mouse is over a View node onNodeOver: function(node, dragZone, e, data) { - if (!Ext.Array.contains(data.records, this.view.getRecord(node))) { - this.positionIndicator(node, data, e); + var me = this; + + if (!Ext.Array.contains(data.records, me.view.getRecord(node))) { + me.positionIndicator(node, data, e); } - return this.valid ? this.dropAllowed : this.dropNotAllowed; + return me.valid ? me.dropAllowed : me.dropNotAllowed; }, // Moved out of the DropZone without dropping. // Remove drop position indicator notifyOut: function(node, dragZone, e, data) { - this.callParent(arguments); - delete this.overRecord; - delete this.currentPosition; - if (this.indicator) { - this.indicator.hide(); + var me = this; + + me.callParent(arguments); + delete me.overRecord; + delete me.currentPosition; + if (me.indicator) { + me.indicator.hide(); } }, // The mouse is past the end of all nodes (or there are no nodes) onContainerOver : function(dd, e, data) { - var v = this.view, - c = v.store.getCount(); + var me = this, + view = me.view, + count = view.store.getCount(); // There are records, so position after the last one - if (c) { - this.positionIndicator(v.getNode(c - 1), data, e); + if (count) { + me.positionIndicator(view.getNode(count - 1), data, e); } // No records, position the indicator at the top else { - delete this.overRecord; - delete this.currentPosition; - this.getIndicator().setWidth(Ext.fly(v.el).getWidth()).showAt(0, 0); - this.valid = true; + delete me.overRecord; + delete me.currentPosition; + me.getIndicator().setWidth(Ext.fly(view.el).getWidth()).showAt(0, 0); + me.valid = true; } - return this.dropAllowed; + return me.dropAllowed; }, onContainerDrop : function(dd, e, data) { @@ -111680,7 +113069,7 @@ Ext.define('Ext.view.DropZone', { dropped = false, // Create a closure to perform the operation which the event handler may use. - // Users may now return{ @@ -110914,7 +112287,7 @@ Ext.define('Ext.grid.column.Column', { var me = this, i, len; - + if (Ext.isDefined(me.header)) { me.text = me.header; delete me.header; @@ -110940,12 +112313,6 @@ Ext.define('Ext.grid.column.Column', { if (Ext.isDefined(me.columns)) { me.isGroupHeader = true; - if (me.dataIndex) { - Ext.Error.raise('Ext.grid.column.Column: Group header may not accept a dataIndex'); - } - if ((me.width && me.width !== Ext.grid.header.Container.prototype.defaultWidth) || me.flex) { - Ext.Error.raise('Ext.grid.column.Column: Group header does not support setting explicit widths or flexs. The group header width is calculated by the sum of its children.'); - } // The headers become child items me.items = me.columns; @@ -110956,9 +112323,6 @@ Ext.define('Ext.grid.column.Column', { // Acquire initial width from sub headers for (i = 0, len = me.items.length; i < len; i++) { me.width += me.items[i].width || Ext.grid.header.Container.prototype.defaultWidth; - if (me.items[i].flex) { - Ext.Error.raise('Ext.grid.column.Column: items of a grouped header do not support flexed values. Each item must explicitly define its width.'); - } } me.minWidth = me.width; @@ -110990,7 +112354,7 @@ Ext.define('Ext.grid.column.Column', { initRenderData: function() { var me = this; - + Ext.applyIf(me.renderData, { text: me.text, menuDisabled: me.menuDisabled @@ -110998,12 +112362,15 @@ Ext.define('Ext.grid.column.Column', { return me.callParent(arguments); }, - // note that this should invalidate the menu cache + /** + * Sets the header text for this Column. + * @param text The header to display on this Column. + */ setText: function(text) { this.text = text; if (this.rendered) { this.textEl.update(text); - } + } }, // Find the topmost HeaderContainer: An ancestor which is NOT a Header. @@ -111033,7 +112400,7 @@ Ext.define('Ext.grid.column.Column', { dblclick: me.onElDblClick, scope: me }); - + // BrowserBug: Ie8 Strict Mode, this will break the focus for this browser, // must be fixed when focus management will be implemented. if (!Ext.isIE8 || !Ext.isStrict) { @@ -111064,22 +112431,38 @@ Ext.define('Ext.grid.column.Column', { siblings, len, i, oldWidth = me.getWidth(), - newWidth = 0; + newWidth = 0, + readyForSizing = true, + hidden, + sibling; if (width !== oldWidth) { // Bubble size changes upwards to group headers if (headerCt.isGroupHeader) { - siblings = headerCt.items.items; len = siblings.length; - // Size the owning group to the size of its sub headers - if (siblings[len - 1].rendered) { - - for (i = 0; i < len; i++) { - newWidth += (siblings[i] === me) ? width : siblings[i].getWidth(); + /* + * setSize will be called for each column as it's rendered + * so we want to wait until all sub columns have been rendered + * before we try and calculate the size of the outer container. + * We also take into account hidden columns, because they won't + * be rendered, but we'll still need to make the calculation. + */ + for (i = 0; i < len; i++) { + sibling = siblings[i]; + hidden = sibling.hidden; + if (!sibling.rendered && !hidden) { + readyForSizing = false; + break; + } + if (!hidden) { + newWidth += (sibling === me) ? width : sibling.getWidth(); } + } + + if (readyForSizing) { headerCt.minWidth = newWidth; headerCt.setWidth(newWidth); } @@ -111158,7 +112541,7 @@ Ext.define('Ext.grid.column.Column', { /** * @private - * Double click + * Double click * @param e * @param t */ @@ -111207,7 +112590,7 @@ Ext.define('Ext.grid.column.Column', { var me = this, idx, nextIdx; - + if (me.sortable) { idx = Ext.Array.indexOf(me.possibleSortStates, me.sortState); @@ -111400,7 +112783,7 @@ Ext.define('Ext.grid.column.Column', { isOnRightEdge: function(e) { return (this.el.getRight() - e.getXY()[0] <= this.handleWidth); } - + /** * Retrieves the editing field for editing associated with this header. Returns false if there * is no field associated with the Header the method will return false. If the @@ -111413,8 +112796,8 @@ Ext.define('Ext.grid.column.Column', { */ // intentionally omit getEditor and setEditor definitions bc we applyIf into columns // when the editing plugin is injected - - + + /** * Sets the form field to be used for editing. Note: This method only has an implementation * if an Editing plugin has been enabled on the grid. @@ -111437,8 +112820,6 @@ columns: [ {text: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ] *0from the beforedrop handler, and perform any kind + // Users may now returnfalsefrom the beforedrop handler, and perform any kind // of asynchronous processing such as an Ext.Msg.confirm, or an Ajax request, // and complete the drop gesture at some point in the future by calling this function. processDrop = function () { @@ -111689,23 +113078,18 @@ Ext.define('Ext.view.DropZone', { dropped = true; me.fireViewEvent('drop', node, data, me.overRecord, me.currentPosition); }, - performOperation; + performOperation = false; if (me.valid) { performOperation = me.fireViewEvent('beforedrop', node, data, me.overRecord, me.currentPosition, processDrop); - if (performOperation === 0) { - return; - } else if (performOperation !== false) { + if (performOperation !== false) { // If the processDrop function was called in the event handler, do not do it again. if (!dropped) { processDrop(); } - } else { - return false; } - } else { - return false; } + return performOperation; } }); @@ -111738,7 +113122,9 @@ Ext.define('Ext.grid.ViewDropZone', { } index = store.indexOf(record); - if (position == 'after') { + + // 'after', or undefined (meaning a drop at index -1 on an empty View)... + if (position !== 'before') { index++; } store.insert(index, data.records); @@ -111797,7 +113183,6 @@ Ext.define('Ext.grid.ViewDropZone', { * }); *The action column can be at any index in the columns array, and a grid can have any number of * action columns.
- * @xtype actioncolumn */ Ext.define('Ext.grid.column.Action', { extend: 'Ext.grid.column.Column', @@ -111913,7 +113298,7 @@ Ext.define('Ext.grid.column.Action', { meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell'; for (i = 0; i < l; i++) { item = items[i]; - v += ''; @@ -112009,8 +113394,6 @@ Ext.define('Ext.grid.column.Action', { * width: 400, * renderTo: Ext.getBody() * }); - * - * @xtype booleancolumn */ Ext.define('Ext.grid.column.Boolean', { extend: 'Ext.grid.column.Column', @@ -112095,8 +113478,6 @@ Ext.define('Ext.grid.column.Boolean', { * width: 450, * renderTo: Ext.getBody() * }); - * - * @xtype datecolumn */ Ext.define('Ext.grid.column.Date', { extend: 'Ext.grid.column.Column', @@ -112106,7 +113487,7 @@ Ext.define('Ext.grid.column.Date', { /** * @cfg {String} format - * A formatting string as used by {@link Date#format Date.format} to format a Date for this Column. + * A formatting string as used by {@link Ext.Date#format} to format a Date for this Column. * This defaults to the default date from {@link Ext.Date#defaultFormat} which itself my be overridden * in a locale file. */ @@ -112155,8 +113536,6 @@ Ext.define('Ext.grid.column.Date', { * width: 400, * renderTo: Ext.getBody() * }); - * - * @xtype numbercolumn */ Ext.define('Ext.grid.column.Number', { extend: 'Ext.grid.column.Column', @@ -112211,7 +113590,6 @@ Ext.define('Ext.grid.column.Number', { * }); * * @markdown - * @xtype templatecolumn */ Ext.define('Ext.grid.column.Template', { extend: 'Ext.grid.column.Column', @@ -112317,7 +113695,7 @@ Ext.define('Ext.grid.feature.Feature', { * Abstract method to be overriden when a feature should add additional * arguments to its event signature. By default the event will fire: * - view - The underlying Ext.view.Table - * - featureTarget - The matched element by the defined {@link eventSelector} + * - featureTarget - The matched element by the defined {@link #eventSelector} * * The method must also return the eventName as the first index of the array * to be passed to fireEvent. @@ -112386,11 +113764,10 @@ Ext.define('Ext.grid.feature.Feature', { }); /** - * A small abstract class that contains the shared behaviour for any summary - * calculations to be used in the grid. * @class Ext.grid.feature.AbstractSummary * @extends Ext.grid.feature.Feature - * @ignore + * A small abstract class that contains the shared behaviour for any summary + * calculations to be used in the grid. */ Ext.define('Ext.grid.feature.AbstractSummary', { @@ -112464,7 +113841,7 @@ Ext.define('Ext.grid.feature.AbstractSummary', { */ getColumnValue: function(column, summaryData){ var comp = Ext.getCmp(column.id), - value = summaryData[column.dataIndex], + value = summaryData[column.id], renderer = comp.summaryRenderer; if (renderer) { @@ -113284,6 +114661,7 @@ Ext.define('Ext.grid.feature.GroupingSummary', { reader = store.proxy.reader, groups = me.summaryGroups, columns = me.view.headerCt.getColumnsForTpl(), + remote, i, length, fieldData, @@ -113306,8 +114684,7 @@ Ext.define('Ext.grid.feature.GroupingSummary', { reader.root = me.remoteRoot; reader.buildExtractors(true); Ext.Array.each(reader.getRoot(reader.rawData), function(value) { - data[value[groupField]] = value; - data[value[groupField]]._remote = true; + remoteData[value[groupField]] = value; }); // restore initial reader configuration reader.root = root; @@ -113320,8 +114697,15 @@ Ext.define('Ext.grid.feature.GroupingSummary', { for (key in fieldData) { if (fieldData.hasOwnProperty(key)) { - if (!data[key]._remote) { - data[key][comp.dataIndex] = fieldData[key]; + data[key][comp.id] = fieldData[key]; + } + } + + for (key in remoteData) { + if (remoteData.hasOwnProperty(key)) { + remote = remoteData[key][comp.dataIndex]; + if (remote !== undefined) { + data[key][comp.id] = remote; } } } @@ -113644,7 +115028,7 @@ Ext.define('Ext.grid.feature.Summary', { for (i = 0, length = columns.length; i < length; ++i) { comp = Ext.getCmp(columns[i].id); - data[comp.dataIndex] = me.getSummary(store, comp.summaryType, comp.dataIndex, false); + data[comp.id] = me.getSummary(store, comp.summaryType, comp.dataIndex, false); } return data; } @@ -114035,7 +115419,8 @@ Ext.define('Ext.grid.plugin.Editing', { me.grid = grid; me.view = grid.view; me.initEvents(); - me.initFieldAccessors(me.view.getGridColumns()); + me.mon(grid, 'reconfigure', me.onReconfigure, me); + me.onReconfigure(); grid.relayEvents(me, ['beforeedit', 'edit', 'validateedit']); // Marks the grid as editable, so that the SelectionModel @@ -114043,6 +115428,14 @@ Ext.define('Ext.grid.plugin.Editing', { grid.isEditable = true; grid.editingPlugin = grid.view.editingPlugin = me; }, + + /** + * Fires after the grid is reconfigured + * @private + */ + onReconfigure: function(){ + this.initFieldAccessors(this.view.getGridColumns()); + }, /** * @private @@ -114367,7 +115760,7 @@ Ext.define('Ext.grid.plugin.Editing', { Ext.define('Ext.grid.plugin.CellEditing', { alias: 'plugin.cellediting', extend: 'Ext.grid.plugin.Editing', - requires: ['Ext.grid.CellEditor'], + requires: ['Ext.grid.CellEditor', 'Ext.util.DelayedTask'], constructor: function() { /** @@ -114450,6 +115843,12 @@ grid.on('validateedit', function(e) { this.editors = Ext.create('Ext.util.MixedCollection', false, function(editor) { return editor.editorId; }); + this.editTask = Ext.create('Ext.util.DelayedTask'); + }, + + onReconfigure: function(){ + this.editors.clear(); + this.callParent(); }, /** @@ -114458,6 +115857,7 @@ grid.on('validateedit', function(e) { */ destroy: function() { var me = this; + me.editTask.cancel(); me.editors.each(Ext.destroy, Ext); me.editors.clear(); me.callParent(arguments); @@ -114526,13 +115926,13 @@ grid.on('validateedit', function(e) { me.setActiveColumn(columnHeader); // Defer, so we have some time between view scroll to sync up the editor - Ext.defer(ed.startEdit, 15, ed, [me.getCell(record, columnHeader), value]); + me.editTask.delay(15, ed.startEdit, ed, [me.getCell(record, columnHeader), value]); } else { // BrowserBug: WebKit & IE refuse to focus the element, rather // it will focus it and then immediately focus the body. This // temporary hack works for Webkit and IE6. IE7 and 8 are still // broken - me.grid.getView().el.focus((Ext.isWebKit || Ext.isIE) ? 10 : false); + me.grid.getView().getEl(columnHeader).focus((Ext.isWebKit || Ext.isIE) ? 10 : false); } }, @@ -114571,7 +115971,7 @@ grid.on('validateedit', function(e) { getEditor: function(record, column) { var me = this, editors = me.editors, - editorId = column.itemId || column.id, + editorId = column.getItemId(), editor = editors.getByKey(editorId); if (editor) { @@ -114648,7 +116048,7 @@ grid.on('validateedit', function(e) { me.context.record.set(dataIndex, value); // Restore focus back to the view's element. } else { - grid.getView().el.focus(); + grid.getView().getEl(activeColumn).focus(); } me.context.value = value; me.fireEvent('edit', me, me.context); @@ -114663,7 +116063,7 @@ grid.on('validateedit', function(e) { cancelEdit: function() { var me = this, activeEd = me.getActiveEditor(), - viewEl = me.grid.getView().el; + viewEl = me.grid.getView().getEl(me.getActiveColumn()); me.setActiveEditor(null); me.setActiveColumn(null); @@ -114999,7 +116399,7 @@ Ext.define('Ext.grid.plugin.HeaderResizer', { resizeHeader = resizeHeader[resizeHeader.length - 1]; } - if (resizeHeader && !resizeHeader.fixed) { + if (resizeHeader && !(resizeHeader.fixed || this.disabled)) { this.activeHd = resizeHeader; overHeader.el.dom.style.cursor = this.eResizeCursor; } @@ -115577,14 +116977,11 @@ var grid = new Ext.grid.property.Grid({ } }); - * @constructor - * @param {Object} config The grid config object - * @xtype propertygrid */ Ext.define('Ext.grid.property.Grid', { extend: 'Ext.grid.Panel', - + alias: 'widget.propertygrid', alternateClassName: 'Ext.grid.PropertyGrid', @@ -115678,6 +117075,11 @@ var grid = Ext.create('Ext.grid.property.Grid', { */ nameField: 'name', + /** + * @cfg {Number} nameColumnWidth + * Optional. Specify the width for the name column. The value column will take any remaining space. Defaults to 115. + */ + // private config overrides enableColumnMove: false, columnLines: true, @@ -115700,7 +117102,7 @@ var grid = Ext.create('Ext.grid.property.Grid', { // Inject a startEdit which always edits the value column startEdit: function(record, column) { // Maintainer: Do not change this 'this' to 'me'! It is the CellEditing object's own scope. - Ext.grid.plugin.CellEditing.prototype.startEdit.call(this, record, me.headerCt.child('#' + me.valueField)); + return this.self.prototype.startEdit.call(this, record, me.headerCt.child('#' + me.valueField)); } })); @@ -115709,8 +117111,8 @@ var grid = Ext.create('Ext.grid.property.Grid', { onCellSelect: function(position) { if (position.column != 1) { position.column = 1; - Ext.selection.CellModel.prototype.onCellSelect.call(this, position); } + return this.self.prototype.onCellSelect.call(this, position); } }; me.customRenderers = me.customRenderers || {}; @@ -115728,7 +117130,7 @@ var grid = Ext.create('Ext.grid.property.Grid', { /** * @event beforepropertychange * Fires before a property value changes. Handlers can return false to cancel the property change - * (this will internally call {@link Ext.data.Record#reject} on the property's record). + * (this will internally call {@link Ext.data.Model#reject} on the property's record). * @param {Object} source The source data object for the grid (corresponds to the same object passed in * as the {@link #source} config property). * @param {String} recordId The record's id in the data store @@ -115764,7 +117166,7 @@ var grid = Ext.create('Ext.grid.property.Grid', { }; // Track changes to the data so we can fire our events. - this.store.on('update', me.onUpdate, me); + me.store.on('update', me.onUpdate, me); }, // private @@ -115805,7 +117207,7 @@ var grid = Ext.create('Ext.grid.property.Grid', { // returns the correct editor type for the property type, or a custom one keyed by the property name getCellEditor : function(record, column) { var me = this, - propName = record.get(me.nameField), + propName = record.get(me.nameField), val = record.get(me.valueField), editor = me.customEditors[propName]; @@ -115919,15 +117321,14 @@ grid.setSource({ * @class Ext.grid.property.HeaderContainer * @extends Ext.grid.header.Container * A custom HeaderContainer for the {@link Ext.grid.property.Grid}. Generally it should not need to be used directly. - * @constructor - * @param {Ext.grid.property.Grid} grid The grid this store will be bound to - * @param {Object} source The source data config object */ Ext.define('Ext.grid.property.HeaderContainer', { extend: 'Ext.grid.header.Container', alternateClassName: 'Ext.grid.PropertyColumnModel', + + nameWidth: 115, // private - strings used for locale support nameText : 'Name', @@ -115938,27 +117339,31 @@ Ext.define('Ext.grid.property.HeaderContainer', { // private nameColumnCls: Ext.baseCSSPrefix + 'grid-property-name', - - constructor : function(grid, store) { - this.grid = grid; - this.store = store; - this.callParent([{ + /** + * Creates new HeaderContainer. + * @param {Ext.grid.property.Grid} grid The grid this store will be bound to + * @param {Object} source The source data config object + */ + constructor : function(grid, store) { + var me = this; + + me.grid = grid; + me.store = store; + me.callParent([{ items: [{ - header: this.nameText, - width: 115, + header: me.nameText, + width: grid.nameColumnWidth || me.nameWidth, sortable: true, dataIndex: grid.nameField, - renderer: Ext.Function.bind(this.renderProp, this), + renderer: Ext.Function.bind(me.renderProp, me), itemId: grid.nameField, menuDisabled :true, - tdCls: this.nameColumnCls + tdCls: me.nameColumnCls }, { - header: this.valueText, - renderer: Ext.Function.bind(this.renderCell, this), - getEditor: function(record) { - return grid.getCellEditor(record, this); - }, + header: me.valueText, + renderer: Ext.Function.bind(me.renderCell, me), + getEditor: Ext.Function.bind(me.getCellEditor, me), flex: 1, fixed: true, dataIndex: grid.valueField, @@ -115967,6 +117372,10 @@ Ext.define('Ext.grid.property.HeaderContainer', { }] }]); }, + + getCellEditor: function(record){ + return this.grid.getCellEditor(record, this); + }, // private // Render a property name cell @@ -115978,16 +117387,16 @@ Ext.define('Ext.grid.property.HeaderContainer', { // Render a property value cell renderCell : function(val, meta, rec) { var me = this, - renderer = this.grid.customRenderers[rec.get(me.grid.nameField)], + renderer = me.grid.customRenderers[rec.get(me.grid.nameField)], result = val; if (renderer) { - return renderer.apply(this, arguments); + return renderer.apply(me, arguments); } if (Ext.isDate(val)) { - result = this.renderDate(val); + result = me.renderDate(val); } else if (Ext.isBoolean(val)) { - result = this.renderBool(val); + result = me.renderBool(val); } return Ext.util.Format.htmlEncode(result); }, @@ -116050,9 +117459,6 @@ Ext.define('Ext.grid.property.Property', { * A custom {@link Ext.data.Store} for the {@link Ext.grid.property.Grid}. This class handles the mapping * between the custom data source objects supported by the grid and the {@link Ext.grid.property.Property} format * used by the {@link Ext.data.Store} base class. - * @constructor - * @param {Ext.grid.Grid} grid The grid this store will be bound to - * @param {Object} source The source data config object */ Ext.define('Ext.grid.property.Store', { @@ -116062,6 +117468,11 @@ Ext.define('Ext.grid.property.Store', { uses: ['Ext.data.reader.Reader', 'Ext.data.proxy.Proxy', 'Ext.data.ResultSet', 'Ext.grid.property.Property'], + /** + * Creates new property store. + * @param {Ext.grid.Grid} grid The grid this store will be bound to + * @param {Object} source The source data config object + */ constructor : function(grid, source){ var me = this; @@ -116159,7 +117570,7 @@ Ext.define('Ext.grid.property.Store', { // only create if specified. me.source[prop] = value; rec = new Ext.grid.property.Property({name: prop, value: value}, prop); - me.store.add(rec); + me.add(rec); } }, @@ -116167,7 +117578,7 @@ Ext.define('Ext.grid.property.Store', { remove : function(prop) { var rec = this.getRec(prop); if (rec) { - store.remove(rec); + this.callParent([rec]); delete this.source[prop]; } }, @@ -116507,7 +117918,7 @@ Ext.define('Ext.layout.container.Accordion', { extend: 'Ext.layout.container.VBox', alias: ['layout.accordion'], alternateClassName: 'Ext.layout.AccordionLayout', - + align: 'stretch', /** @@ -116585,7 +117996,7 @@ Ext.define('Ext.layout.container.Accordion', { me.callParent(arguments); if (me.fill) { - if (!me.owner.el.dom.style.height) { + if (!me.owner.el.dom.style.height || !me.getLayoutTargetSize().height) { return false; } } else { @@ -116624,7 +118035,6 @@ Ext.define('Ext.layout.container.Accordion', { delete comp.hideHeader; comp.collapsible = true; comp.title = comp.title || ' '; - comp.setBorder(false); // Set initial sizes comp.width = targetSize.width; @@ -116637,12 +118047,19 @@ Ext.define('Ext.layout.container.Accordion', { comp.collapsed = true; } // Otherwise expand the first item with collapsed explicitly configured as false - else if (comp.collapsed === false) { + else if (comp.hasOwnProperty('collapsed') && comp.collapsed === false) { comp.flex = 1; me.expandedItem = i; } else { comp.collapsed = true; } + // If we are fitting, then intercept expand/collapse requests. + me.owner.mon(comp, { + show: me.onComponentShow, + beforeexpand: me.onComponentExpand, + beforecollapse: me.onComponentCollapse, + scope: me + }); } else { delete comp.flex; comp.animCollapse = me.initialAnimate; @@ -116661,10 +118078,10 @@ Ext.define('Ext.layout.container.Accordion', { comp.flex = 1; } } - + // Render all Panels. me.callParent(arguments); - + // Postprocess rendered Panels. ln = renderedPanels.length; for (i = 0; i < ln; i++) { @@ -116675,24 +118092,13 @@ Ext.define('Ext.layout.container.Accordion', { comp.header.addCls(Ext.baseCSSPrefix + 'accordion-hd'); comp.body.addCls(Ext.baseCSSPrefix + 'accordion-body'); - - // If we are fitting, then intercept expand/collapse requests. - if (me.fill) { - me.owner.mon(comp, { - show: me.onComponentShow, - beforeexpand: me.onComponentExpand, - beforecollapse: me.onComponentCollapse, - scope: me - }); - } } }, onLayout: function() { var me = this; - - me.updatePanelClasses(); - + + if (me.fill) { me.callParent(arguments); } else { @@ -116710,24 +118116,27 @@ Ext.define('Ext.layout.container.Accordion', { } } } - + me.updatePanelClasses(); + return me; }, - + updatePanelClasses: function() { var children = this.getLayoutItems(), ln = children.length, siblingCollapsed = true, i, child; - + for (i = 0; i < ln; i++) { child = children[i]; - if (!siblingCollapsed) { - child.header.addCls(Ext.baseCSSPrefix + 'accordion-hd-sibling-expanded'); + + if (siblingCollapsed) { + child.header.removeCls(Ext.baseCSSPrefix + 'accordion-hd-sibling-expanded'); } else { - child.header.removeCls(Ext.baseCSSPrefix + 'accordion-hd-sibling-expanded'); + child.header.addCls(Ext.baseCSSPrefix + 'accordion-hd-sibling-expanded'); } + if (i + 1 == ln && child.collapsed) { child.header.addCls(Ext.baseCSSPrefix + 'accordion-hd-last-collapsed'); } @@ -116756,7 +118165,7 @@ Ext.define('Ext.layout.container.Accordion', { me.setCollapsed(comp); } } - + me.animate = me.initialAnimate; me.layout(); me.animate = false; @@ -116778,7 +118187,7 @@ Ext.define('Ext.layout.container.Accordion', { if (expanded.length === 1 && expanded[0] === comp) { me.setExpanded(toExpand); } - + me.animate = me.initialAnimate; me.layout(); me.animate = false; @@ -116862,8 +118271,6 @@ Ext.define('Ext.layout.container.Accordion', { * The Splitter will then call that sibling Panel's {@link Ext.panel.Panel#collapse collapse} or {@link Ext.panel.Panel#expand expand} method * to perform the appropriate operation (depending on the sibling collapse state). To create the mini-collapse tool but take care * of collapsing yourself, configure the splitter with
{@link #performCollapse} false. - * - * @xtype splitter */ Ext.define('Ext.resizer.Splitter', { extend: 'Ext.Component', @@ -116876,7 +118283,7 @@ Ext.define('Ext.resizer.Splitter', { ], baseCls: Ext.baseCSSPrefix + 'splitter', - collapsedCls: Ext.baseCSSPrefix + 'splitter-collapsed', + collapsedClsInternal: Ext.baseCSSPrefix + 'splitter-collapsed', /** * @cfg {Boolean} collapsible @@ -116910,6 +118317,11 @@ Ext.define('Ext.resizer.Splitter', { * that the splitter is between. */ defaultSplitMax: 1000, + + /** + * @cfg {String} collapsedCls + * A class to add to the splitter when it is collapsed. See {@link #collapsible}. + */ width: 5, height: 5, @@ -116994,15 +118406,17 @@ Ext.define('Ext.resizer.Splitter', { }, getCollapseTarget: function() { - return this.collapseTarget.isComponent ? this.collapseTarget : this.collapseTarget == 'prev' ? this.previousSibling() : this.nextSibling(); + var me = this; + + return me.collapseTarget.isComponent ? me.collapseTarget : me.collapseTarget == 'prev' ? me.previousSibling() : me.nextSibling(); }, onTargetCollapse: function(target) { - this.el.addCls(this.collapsedCls); + this.el.addCls([this.collapsedClsInternal, this.collapsedCls]); }, onTargetExpand: function(target) { - this.el.removeCls(this.collapsedCls); + this.el.removeCls([this.collapsedClsInternal, this.collapsedCls]); }, toggleTargetCmp: function(e, t) { @@ -117112,8 +118526,6 @@ Ext.define('Ext.layout.container.Border', { bindToOwnerCtContainer: true, - fixedLayout: false, - percentageRe: /(\d+)%/, slideDirection: { @@ -117172,11 +118584,17 @@ Ext.define('Ext.layout.container.Border', { }, renderItems: function(items, target) { - Ext.Error.raise('This should not be called'); }, renderItem: function(item) { - Ext.Error.raise('This should not be called'); + }, + + /* + * Gathers items for a layout operation. Injected into child Box layouts through configuration. + * We must not include child items which are floated over the layout (are primed with a slide out animation) + */ + getVisibleItems: function() { + return Ext.ComponentQuery.query(':not([slideOutAnim])', this.callParent(arguments)); }, initializeBorderLayout: function() { @@ -117215,9 +118633,6 @@ Ext.define('Ext.layout.container.Border', { me.setupState(comp); } } - if (!regions.center) { - Ext.Error.raise("You must specify a center region when defining a BorderLayout."); - } comp = regions.center; if (!comp.flex) { comp.flex = 1; @@ -117267,7 +118682,8 @@ Ext.define('Ext.layout.container.Border', { maintainFlex: true, layout: { type: 'hbox', - align: 'stretch' + align: 'stretch', + getVisibleItems: me.getVisibleItems } })); hBoxItems.push(regions.center); @@ -117321,7 +118737,8 @@ Ext.define('Ext.layout.container.Border', { el: me.getTarget(), layout: Ext.applyIf({ type: 'vbox', - align: 'stretch' + align: 'stretch', + getVisibleItems: me.getVisibleItems }, me.initialConfig) }); me.createItems(me.shadowContainer, vBoxItems); @@ -117468,6 +118885,7 @@ Ext.define('Ext.layout.container.Border', { // Mini collapse means that the splitter is the placeholder Component if (comp.collapseMode == 'mini') { comp.placeholder = resizer; + resizer.collapsedCls = comp.collapsedCls; } // Arrange to hide/show a region's associated splitter when the region is hidden/shown @@ -117480,7 +118898,7 @@ Ext.define('Ext.layout.container.Border', { }, // Private - // Propogates the min/maxHeight values from the inner hbox items to its container. + // Propagates the min/maxHeight values from the inner hbox items to its container. fixHeightConstraints: function () { var me = this, ct = me.embeddedContainer, @@ -117569,7 +118987,7 @@ Ext.define('Ext.layout.container.Border', { baseCls: comp.baseCls + '-header', ui: comp.ui, indicateDrag: comp.draggable, - cls: Ext.baseCSSPrefix + 'region-collapsed-placeholder ' + Ext.baseCSSPrefix + 'region-collapsed-' + comp.collapseDirection + '-placeholder', + cls: Ext.baseCSSPrefix + 'region-collapsed-placeholder ' + Ext.baseCSSPrefix + 'region-collapsed-' + comp.collapseDirection + '-placeholder ' + comp.collapsedCls, listeners: comp.floatable ? { click: { fn: function(e) { @@ -118089,72 +119507,84 @@ Ext.define('Ext.layout.container.Border', { /** * @class Ext.layout.container.Card * @extends Ext.layout.container.AbstractCard - *This layout manages multiple child Components, each fitted 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, - * 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.
- *In the following example, a simplistic wizard setup is demonstrated. A button bar is added - * to the footer of the containing panel to provide navigation buttons. The buttons will be handled by a - * common navigation routine -- for this example, the implementation of that routine has been ommitted since - * it can be any type of custom logic. Note that other uses of a CardLayout (like a tab control) would require a - * completely different implementation. For serious implementations, a better approach would be to extend - * CardLayout to provide the custom functionality needed. - * {@img Ext.layout.container.Card/Ext.layout.container.Card.png Ext.layout.container.Card container layout} - * Example usage:
- *
- */ + * + * This layout manages multiple child Components, each fitted 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, + * 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. + * + * In the following example, a simplistic wizard setup is demonstrated. A button bar is added + * to the footer of the containing panel to provide navigation buttons. The buttons will be handled by a + * common navigation routine. Note that other uses of a CardLayout (like a tab control) would require a + * completely different implementation. For serious implementations, a better approach would be to extend + * CardLayout to provide the custom functionality needed. + * + * {@img Ext.layout.container.Card/Ext.layout.container.Card.png Ext.layout.container.Card container layout} + * + * Example usage: + * + * var navigate = function(panel, direction){ + * // This routine could contain business logic required to manage the navigation steps. + * // It would call setActiveItem as needed, manage navigation button state, handle any + * // branching logic that might be required, handle alternate actions like cancellation + * // or finalization, etc. A complete wizard implementation could get pretty + * // sophisticated depending on the complexity required, and should probably be + * // done as a subclass of CardLayout in a real-world implementation. + * var layout = panel.getLayout(); + * layout[direction](); + * Ext.getCmp('move-prev').setDisabled(!layout.getPrev()); + * Ext.getCmp('move-next').setDisabled(!layout.getNext()); + * }; + * + * Ext.create('Ext.panel.Panel', { + * title: 'Example Wizard', + * width: 300, + * height: 200, + * layout: 'card', + * activeItem: 0, // make sure the active item is set on the container config! + * bodyStyle: 'padding:15px', + * defaults: { + * // applied to each contained panel + * border: false + * }, + * // just an example of one possible navigation scheme, using buttons + * bbar: [ + * { + * id: 'move-prev', + * text: 'Back', + * handler: function(btn) { + * navigate(btn.up("panel"), "prev"); + * }, + * disabled: true + * }, + * '->', // greedy spacer so that the buttons are aligned to each side + * { + * id: 'move-next', + * text: 'Next', + * handler: function(btn) { + * navigate(btn.up("panel"), "next"); + * } + * } + * ], + * // the panels (or "cards") within the layout + * items: [{ + * id: 'card-0', + * html: '- var navHandler = function(direction){ - // This routine could contain business logic required to manage the navigation steps. - // It would call setActiveItem as needed, manage navigation button state, handle any - // branching logic that might be required, handle alternate actions like cancellation - // or finalization, etc. A complete wizard implementation could get pretty - // sophisticated depending on the complexity required, and should probably be - // done as a subclass of CardLayout in a real-world implementation. - }; - - Ext.create('Ext.panel.Panel', { - title: 'Example Wizard', - width: 300, - height: 200, - layout: 'card', - activeItem: 0, // make sure the active item is set on the container config! - bodyStyle: 'padding:15px', - defaults: { - // applied to each contained panel - border:false - }, - // just an example of one possible navigation scheme, using buttons - bbar: [ - { - id: 'move-prev', - text: 'Back', - handler: navHandler(this, [-1]), - disabled: true - }, - '->', // greedy spacer so that the buttons are aligned to each side - { - id: 'move-next', - text: 'Next', - handler: navHandler(this, [1]) - }], - // the panels (or "cards") within the layout - items: [{ - id: 'card-0', - html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>' - },{ - id: 'card-1', - html: '<p>Step 2 of 3</p>' - },{ - id: 'card-2', - html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>' - }], - renderTo: Ext.getBody() - }); -Welcome to the Wizard!
Step 1 of 3
' + * },{ + * id: 'card-1', + * html: 'Step 2 of 3
' + * },{ + * id: 'card-2', + * html: 'Congratulations!
Step 3 of 3 - Complete
' + * }], + * renderTo: Ext.getBody() + * }); + */ Ext.define('Ext.layout.container.Card', { /* Begin Definitions */ @@ -118166,15 +119596,32 @@ Ext.define('Ext.layout.container.Card', { /* End Definitions */ + /** + * Makes the given card active. + * + * var card1 = Ext.create('Ext.panel.Panel', {itemId: 'card-1'}); + * var card2 = Ext.create('Ext.panel.Panel', {itemId: 'card-2'}); + * var panel = Ext.create('Ext.panel.Panel', { + * layout: 'card', + * activeItem: 0, + * items: [card1, card2] + * }); + * // These are all equivalent + * panel.getLayout().setActiveItem(card2); + * panel.getLayout().setActiveItem('card-2'); + * panel.getLayout().setActiveItem(1); + * + * @param {Ext.Component/Number/String} newCard The component, component {@link Ext.Component#id id}, + * {@link Ext.Component#itemId itemId}, or index of component. + * @return {Ext.Component} the activated component or false when nothing activated. + * False is returned also when trying to activate an already active card. + */ setActiveItem: function(newCard) { var me = this, owner = me.owner, oldCard = me.activeItem, newIndex; - // Block upward layouts until we are done. - me.layoutBusy = true; - newCard = me.parseActiveItem(newCard); newIndex = owner.items.indexOf(newCard); @@ -118196,22 +119643,22 @@ Ext.define('Ext.layout.container.Card', { // Fire the beforeactivate and beforedeactivate events on the cards if (newCard.fireEvent('beforeactivate', newCard, oldCard) === false) { - me.layoutBusy = false; return false; } if (oldCard && oldCard.fireEvent('beforedeactivate', oldCard, newCard) === false) { - me.layoutBusy = false; return false; } // If the card hasnt been sized yet, do it now - if (!me.sizeAllCards) { - me.setItemBox(newCard, me.getTargetBox()); - } - else { + if (me.sizeAllCards) { // onLayout calls setItemBox me.onLayout(); } + else { + me.setItemBox(newCard, me.getTargetBox()); + } + + me.owner.suspendLayout = true; if (oldCard) { if (me.hideInactive) { @@ -118221,26 +119668,29 @@ Ext.define('Ext.layout.container.Card', { } // Make sure the new card is shown + me.owner.suspendLayout = false; if (newCard.hidden) { newCard.show(); + } else { + me.onLayout(); } newCard.fireEvent('activate', newCard, oldCard); - me.layoutBusy = false; - - if (!me.sizeAllCards) { - if (!owner.componentLayout.layoutBusy) { - me.onLayout(); - } - } return newCard; } - - me.layoutBusy = false; return false; - } -}); + }, + + 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.Column * @extends Ext.layout.container.Auto @@ -118424,6 +119874,16 @@ Ext.define('Ext.layout.container.Column', { } } delete me.adjustmentPass; + }, + + configureItem: function(item) { + if (item.columnWidth) { + item.layoutManagedWidth = 1; + } else { + item.layoutManagedWidth = 2; + } + item.layoutManagedHeight = 2; + this.callParent(arguments); } }); /** @@ -118540,6 +120000,18 @@ Ext.define('Ext.layout.container.Table', { */ tableAttrs:null, + /** + * @cfg {Object} trAttrs + *An object containing properties which are added to the {@link Ext.core.DomHelper DomHelper} specification + * used to create the layout's <tr> elements. + */ + + /** + * @cfg {Object} tdAttrs + *
An object containing properties which are added to the {@link Ext.core.DomHelper DomHelper} specification + * used to create the layout's <td> elements. + */ + /** * @private * Iterates over all passed items, ensuring they are rendered in a cell in the proper @@ -118568,6 +120040,9 @@ Ext.define('Ext.layout.container.Table', { trEl = rows[rowIdx]; if (!trEl) { trEl = tbody.insertRow(rowIdx); + if (this.trAttrs) { + trEl.set(this.trAttrs); + } } // If no cell present, create and insert one @@ -118586,6 +120061,9 @@ Ext.define('Ext.layout.container.Table', { } // Set the cell properties + if (this.tdAttrs) { + tdEl.set(this.tdAttrs); + } tdEl.set({ colSpan: item.colspan || 1, rowSpan: item.rowspan || 1, @@ -118667,9 +120145,11 @@ Ext.define('Ext.layout.container.Table', { }); // Increment - rowspans[colIdx] = item.rowspan || 1; - colIdx += item.colspan || 1; - cellIdx++; + for (j = item.colspan || 1; j; --j) { + rowspans[colIdx] = item.rowspan || 1; + ++colIdx; + } + ++cellIdx; } return cells; @@ -118712,37 +120192,36 @@ Ext.define('Ext.layout.container.Table', { /** * @class Ext.menu.Item * @extends Ext.Component - + * * A base class for all menu items that require menu-related functionality such as click handling, * sub-menus, icons, etc. + * * {@img Ext.menu.Menu/Ext.menu.Menu.png Ext.menu.Menu component} -__Example Usage:__ - Ext.create('Ext.menu.Menu', { - width: 100, - height: 100, - floating: false, // usually you want this set to True (default) - renderTo: Ext.getBody(), // usually rendered by it's containing component - items: [{ - text: 'icon item', - iconCls: 'add16' - },{ - text: 'text item', - },{ - text: 'plain item', - plain: true - }] - }); - - * @xtype menuitem - * @markdown - * @constructor - * @param {Object} config The config object + * + * __Example Usage:__ + * + * Ext.create('Ext.menu.Menu', { + * width: 100, + * height: 100, + * floating: false, // usually you want this set to True (default) + * renderTo: Ext.getBody(), // usually rendered by it's containing component + * items: [{ + * text: 'icon item', + * iconCls: 'add16' + * },{ + * text: 'text item', + * },{ + * text: 'plain item', + * plain: true + * }] + * }); + * */ Ext.define('Ext.menu.Item', { extend: 'Ext.Component', alias: 'widget.menuitem', alternateClassName: 'Ext.menu.TextItem', - + /** * @property {Boolean} activated * Whether or not this item is currently activated @@ -118755,19 +120234,19 @@ Ext.define('Ext.menu.Item', { * @markdown */ activeCls: Ext.baseCSSPrefix + 'menu-item-active', - + /** * @cfg {String} ariaRole @hide */ ariaRole: 'menuitem', - + /** * @cfg {Boolean} canActivate * Whether or not this menu item can be activated when focused/mouseovered. Defaults to `true`. * @markdown */ canActivate: true, - + /** * @cfg {Number} clickHideDelay * The delay in milliseconds to wait before hiding the menu after clicking the menu item. @@ -118775,13 +120254,13 @@ Ext.define('Ext.menu.Item', { * @markdown */ clickHideDelay: 1, - + /** * @cfg {Boolean} destroyMenu * Whether or not to destroy any associated sub-menu when this item is destroyed. Defaults to `true`. */ destroyMenu: true, - + /** * @cfg {String} disabledCls * The CSS class added to the menu item when the item is disabled. @@ -118789,40 +120268,40 @@ Ext.define('Ext.menu.Item', { * @markdown */ disabledCls: Ext.baseCSSPrefix + 'menu-item-disabled', - + /** * @cfg {String} href * The href attribute to use for the underlying anchor link. Defaults to `#`. * @markdown */ - + /** * @cfg {String} hrefTarget * The target attribute to use for the underlying anchor link. Defaults to `undefined`. * @markdown */ - + /** * @cfg {Boolean} hideOnClick * Whether to not to hide the owning menu when this item is clicked. Defaults to `true`. * @markdown */ hideOnClick: true, - + /** * @cfg {String} icon * The path to an icon to display in this item. Defaults to `Ext.BLANK_IMAGE_URL`. * @markdown */ - + /** * @cfg {String} iconCls * A CSS class that specifies a `background-image` to use as the icon for this item. Defaults to `undefined`. * @markdown */ - + isMenuItem: true, - + /** * @cfg {Mixed} menu * Either an instance of {@link Ext.menu.Menu} or a config object for an {@link Ext.menu.Menu} @@ -118830,7 +120309,7 @@ Ext.define('Ext.menu.Item', { * @markdown * @property {Ext.menu.Menu} menu The sub-menu associated with this item, if one was configured. */ - + /** * @cfg {String} menuAlign * The default {@link Ext.core.Element#getAlignToXY Ext.Element.getAlignToXY} anchor position value for this @@ -118838,27 +120317,27 @@ Ext.define('Ext.menu.Item', { * @markdown */ menuAlign: 'tl-tr?', - + /** * @cfg {Number} menuExpandDelay * The delay in milliseconds before this item's sub-menu expands after this item is moused over. Defaults to `200`. * @markdown */ menuExpandDelay: 200, - + /** * @cfg {Number} menuHideDelay * The delay in milliseconds before this item's sub-menu hides after this item is moused out. Defaults to `200`. * @markdown */ menuHideDelay: 200, - + /** * @cfg {Boolean} plain * Whether or not this item is plain text/html with no icon or visual activation. Defaults to `false`. * @markdown */ - + renderTpl: [ '
', '{text}', @@ -118873,18 +120352,18 @@ Ext.define('Ext.menu.Item', { '', ' ' ], - + maskOnDisable: false, - + /** * @cfg {String} text * The text/html to display in this item. Defaults to `undefined`. * @markdown */ - + activate: function() { var me = this; - + if (!me.activated && me.canActivate && me.rendered && !me.isDisabled() && me.isVisible()) { me.el.addCls(me.activeCls); me.focus(); @@ -118892,15 +120371,15 @@ Ext.define('Ext.menu.Item', { me.fireEvent('activate', me); } }, - + blur: function() { this.$focused = false; this.callParent(arguments); }, - + deactivate: function() { var me = this; - + if (me.activated) { me.el.removeCls(me.activeCls); me.blur(); @@ -118909,10 +120388,10 @@ Ext.define('Ext.menu.Item', { me.fireEvent('deactivate', me); } }, - + deferExpandMenu: function() { var me = this; - + if (!me.menu.rendered || !me.menu.isVisible()) { me.parentMenu.activeChild = me.menu; me.menu.parentItem = me; @@ -118920,20 +120399,20 @@ Ext.define('Ext.menu.Item', { me.menu.showBy(me, me.menuAlign); } }, - + deferHideMenu: function() { if (this.menu.isVisible()) { this.menu.hide(); } }, - + deferHideParentMenus: function() { Ext.menu.Manager.hideAll(); }, - + expandMenu: function(delay) { var me = this; - + if (me.menu) { clearTimeout(me.hideMenuTimer); if (delay === 0) { @@ -118943,37 +120422,37 @@ Ext.define('Ext.menu.Item', { } } }, - + focus: function() { this.$focused = true; this.callParent(arguments); }, - + getRefItems: function(deep){ var menu = this.menu, items; - + if (menu) { items = menu.getRefItems(deep); items.unshift(menu); - } - return items || []; + } + return items || []; }, - + hideMenu: function(delay) { var me = this; - + if (me.menu) { clearTimeout(me.expandMenuTimer); me.hideMenuTimer = Ext.defer(me.deferHideMenu, Ext.isNumber(delay) ? delay : me.menuHideDelay, me); } }, - + initComponent: function() { var me = this, prefix = Ext.baseCSSPrefix, cls = [prefix + 'menu-item']; - + me.addEvents( /** * @event activate @@ -118981,7 +120460,7 @@ Ext.define('Ext.menu.Item', { * @param {Ext.menu.Item} item The activated item */ 'activate', - + /** * @event click * Fires when this item is clicked @@ -118989,7 +120468,7 @@ Ext.define('Ext.menu.Item', { * @param {Ext.EventObject} e The underyling {@link Ext.EventObject}. */ 'click', - + /** * @event deactivate * Fires when this tiem is deactivated @@ -118997,54 +120476,54 @@ Ext.define('Ext.menu.Item', { */ 'deactivate' ); - + if (me.plain) { cls.push(prefix + 'menu-item-plain'); } - + if (me.cls) { cls.push(me.cls); } - + me.cls = cls.join(' '); - + if (me.menu) { me.menu = Ext.menu.Manager.get(me.menu); } - + me.callParent(arguments); }, - + onClick: function(e) { var me = this; - + if (!me.href) { e.stopEvent(); } - + if (me.disabled) { return; } - + if (me.hideOnClick) { me.deferHideParentMenusTimer = Ext.defer(me.deferHideParentMenus, me.clickHideDelay, me); } - + Ext.callback(me.handler, me.scope || me, [me, e]); me.fireEvent('click', me, e); - + if (!me.hideOnClick) { me.focus(); } }, - + onDestroy: function() { var me = this; - + clearTimeout(me.expandMenuTimer); clearTimeout(me.hideMenuTimer); clearTimeout(me.deferHideParentMenusTimer); - + if (me.menu) { delete me.menu.parentItem; delete me.menu.parentMenu; @@ -119055,31 +120534,31 @@ Ext.define('Ext.menu.Item', { } me.callParent(arguments); }, - + onRender: function(ct, pos) { var me = this, prefix = '.' + Ext.baseCSSPrefix; - + Ext.applyIf(me.renderData, { href: me.href || '#', hrefTarget: me.hrefTarget, icon: me.icon || Ext.BLANK_IMAGE_URL, - iconCls: me.iconCls, + iconCls: me.iconCls + (me.checkChangeDisabled ? ' ' + me.disabledCls : ''), menu: Ext.isDefined(me.menu), plain: me.plain, text: me.text }); - + Ext.applyIf(me.renderSelectors, { itemEl: prefix + 'menu-item-link', iconEl: prefix + 'menu-item-icon', textEl: prefix + 'menu-item-text', arrowEl: prefix + 'menu-item-arrow' }); - + me.callParent(arguments); }, - + /** * Sets the {@link #click} handler of this item * @param {Function} fn The handler function @@ -119089,86 +120568,75 @@ Ext.define('Ext.menu.Item', { this.handler = fn || null; this.scope = scope; }, - + /** * Sets the {@link #iconCls} of this item * @param {String} iconCls The CSS class to set to {@link #iconCls} */ setIconCls: function(iconCls) { var me = this; - + if (me.iconEl) { if (me.iconCls) { me.iconEl.removeCls(me.iconCls); } - + if (iconCls) { me.iconEl.addCls(iconCls); } } - + me.iconCls = iconCls; }, - + /** * Sets the {@link #text} of this item * @param {String} text The {@link #text} */ setText: function(text) { var me = this, - el = me.textEl || me.el, - newWidth; - - if (text && el) { - el.update(text); - - if (me.textEl) { - // Resize the menu to fit the text - newWidth = me.textEl.getWidth() + me.iconEl.getWidth() + 25 + (me.arrowEl ? me.arrowEl.getWidth() : 0); - if (newWidth > me.itemEl.getWidth()) { - me.parentMenu.setWidth(newWidth); - } - } - } else if (el) { - el.update(''); - } - + el = me.textEl || me.el; + me.text = text; + + if (me.rendered) { + el.update(text || ''); + // cannot just call doComponentLayout due to stretchmax + me.ownerCt.redoComponentLayout(); + } } }); /** * @class Ext.menu.CheckItem * @extends Ext.menu.Item - -A menu item that contains a togglable checkbox by default, but that can also be a part of a radio group. -{@img Ext.menu.CheckItem/Ext.menu.CheckItem.png Ext.menu.CheckItem component} -__Example Usage__ - Ext.create('Ext.menu.Menu', { - width: 100, - height: 110, - floating: false, // usually you want this set to True (default) - renderTo: Ext.getBody(), // usually rendered by it's containing component - items: [{ - xtype: 'menucheckitem', - text: 'select all' - },{ - xtype: 'menucheckitem', - text: 'select specific', - },{ - iconCls: 'add16', - text: 'icon item' - },{ - text: 'regular item' - }] - }); - - * @xtype menucheckitem - * @markdown - * @constructor - * @param {Object} config The config object + * + * A menu item that contains a togglable checkbox by default, but that can also be a part of a radio group. + * + * {@img Ext.menu.CheckItem/Ext.menu.CheckItem.png Ext.menu.CheckItem component} + * + * __Example Usage__ + * + * Ext.create('Ext.menu.Menu', { + * width: 100, + * height: 110, + * floating: false, // usually you want this set to True (default) + * renderTo: Ext.getBody(), // usually rendered by it's containing component + * items: [{ + * xtype: 'menucheckitem', + * text: 'select all' + * },{ + * xtype: 'menucheckitem', + * text: 'select specific', + * },{ + * iconCls: 'add16', + * text: 'icon item' + * },{ + * text: 'regular item' + * }] + * }); + * */ - Ext.define('Ext.menu.CheckItem', { extend: 'Ext.menu.Item', alias: 'widget.menucheckitem', @@ -119252,7 +120720,9 @@ Ext.define('Ext.menu.CheckItem', { disableCheckChange: function() { var me = this; - me.iconEl.addCls(me.disabledCls); + if (me.iconEl) { + me.iconEl.addCls(me.disabledCls); + } me.checkChangeDisabled = true; }, @@ -119459,10 +120929,7 @@ Ext.define('Ext.menu.KeyNav', { * }] * }); * - * @xtype menuseparator * @markdown - * @constructor - * @param {Object} config The config object */ Ext.define('Ext.menu.Separator', { extend: 'Ext.menu.Item', @@ -119572,44 +121039,44 @@ Ext.define('Ext.menu.Separator', { * specify `{@link Ext.menu.Item#iconCls iconCls}: 'no-icon'` _or_ `{@link Ext.menu.Item#indent indent}: true`. * This reserves a space for an icon, and indents the Component in line with the other menu items. * See {@link Ext.form.field.ComboBox}.{@link Ext.form.field.ComboBox#getListParent getListParent} for an example. - + * * By default, Menus are absolutely positioned, floating Components. By configuring a Menu with `{@link #floating}:false`, * a Menu may be used as a child of a {@link Ext.container.Container Container}. + * * {@img Ext.menu.Item/Ext.menu.Item.png Ext.menu.Item component} -__Example Usage__ - Ext.create('Ext.menu.Menu', { - width: 100, - height: 100, - margin: '0 0 10 0', - floating: false, // usually you want this set to True (default) - renderTo: Ext.getBody(), // usually rendered by it's containing component - items: [{ - text: 'regular item 1' - },{ - text: 'regular item 2' - },{ - text: 'regular item 3' - }] - }); - - Ext.create('Ext.menu.Menu', { - width: 100, - height: 100, - plain: true, - floating: false, // usually you want this set to True (default) - renderTo: Ext.getBody(), // usually rendered by it's containing component - items: [{ - text: 'plain item 1' - },{ - text: 'plain item 2' - },{ - text: 'plain item 3' - }] - }); - * @xtype menu - * @markdown - * @constructor - * @param {Object} config The config object + * + *__Example Usage__ + * + * Ext.create('Ext.menu.Menu', { + * width: 100, + * height: 100, + * margin: '0 0 10 0', + * floating: false, // usually you want this set to True (default) + * renderTo: Ext.getBody(), // usually rendered by it's containing component + * items: [{ + * text: 'regular item 1' + * },{ + * text: 'regular item 2' + * },{ + * text: 'regular item 3' + * }] + * }); + * + * Ext.create('Ext.menu.Menu', { + * width: 100, + * height: 100, + * plain: true, + * floating: false, // usually you want this set to True (default) + * renderTo: Ext.getBody(), // usually rendered by it's containing component + * items: [{ + * text: 'plain item 1' + * },{ + * text: 'plain item 2' + * },{ + * text: 'plain item 3' + * }] + * }); + * */ Ext.define('Ext.menu.Menu', { extend: 'Ext.panel.Panel', @@ -119660,9 +121127,9 @@ Ext.define('Ext.menu.Menu', { /** * @cfg {Boolean} @hide - * Menu performs its own size changing constraining, so ensure Component's constraining is not applied + * Menus are constrained to the document body by default */ - constrain: false, + constrain: true, /** * @cfg {Boolean} hidden @@ -119672,6 +121139,8 @@ Ext.define('Ext.menu.Menu', { */ hidden: true, + hideMode: 'visibility', + /** * @cfg {Boolean} ignoreParentClicks * True to ignore clicks on any item in this menu that is a parent item (displays a submenu) @@ -119889,6 +121358,47 @@ Ext.define('Ext.menu.Menu', { } }, + clearStretch: function () { + // the vbox/stretchmax will set the el sizes and subsequent layouts will not + // reconsider them unless we clear the dimensions on the el's here: + if (this.rendered) { + this.items.each(function (item) { + // each menuItem component needs to layout again, so clear its cache + if (item.componentLayout) { + delete item.componentLayout.lastComponentSize; + } + if (item.el) { + item.el.setWidth(null); + } + }); + } + }, + + onAdd: function () { + var me = this; + + me.clearStretch(); + me.callParent(arguments); + + if (Ext.isIE6 || Ext.isIE7) { + // TODO - why does this need to be done (and not ok to do now)? + Ext.Function.defer(me.doComponentLayout, 10, me); + } + }, + + onRemove: function () { + this.clearStretch(); + this.callParent(arguments); + + }, + + redoComponentLayout: function () { + if (this.rendered) { + this.clearStretch(); + this.doComponentLayout(); + } + }, + // inherit docs getFocusEl: function() { return this.focusEl; @@ -120091,7 +121601,9 @@ Ext.define('Ext.menu.Menu', { if (me.floating && cmp) { me.layout.autoSize = true; - me.show(); + + // show off-screen first so that we can calc position without causing a visual jump + me.doAutoRender(); // Component or Element cmp = cmp.el || cmp; @@ -120156,7 +121668,7 @@ Ext.define('Ext.menu.Menu', { me.iconSepEl.setHeight(me.layout.getRenderTarget().dom.scrollHeight); } } - vector = me.getConstrainVector(); + vector = me.getConstrainVector(me.el.dom.parentNode); if (vector) { me.setPosition(me.getPosition()[0] + vector[0]); } @@ -120175,29 +121687,31 @@ Ext.define('Ext.menu.Menu', { * Applying {@link Ext.picker.Color ColorPicker} configuration settings to * this will not affect the ColorPicker's configuration. *
* - 1-dimensional array : (e.g.,
0. + */ + heightIncrement : 0, + + /** + * @cfg {Number} widthIncrement The increment to snap the width resize in pixels + * Defaults to0. + */ + widthIncrement : 0, + /** * @cfg {Number} minHeight The minimum height for the element (defaults to 20) */ @@ -120976,6 +122473,8 @@ Ext.define('Ext.resizer.Resizer', { delegate: '.' + me.handleCls, dynamic: me.dynamic, preserveRatio: me.preserveRatio, + heightIncrement: me.heightIncrement, + widthIncrement: me.widthIncrement, minHeight: me.minHeight, maxHeight: me.maxHeight, minWidth: me.minWidth, @@ -121128,11 +122627,11 @@ Ext.define('Ext.resizer.Resizer', { var me = this, handle; if (Ext.isIE6) { - handle = me.east; + handle = me.east; if (handle) { handle.setHeight(me.el.getHeight()); } - handle = me.west; + handle = me.west; if (handle) { handle.setHeight(me.el.getHeight()); } @@ -121144,6 +122643,8 @@ Ext.define('Ext.resizer.Resizer', { /** * @class Ext.resizer.ResizeTracker * @extends Ext.dd.DragTracker + * Private utility class for Ext.resizer.Resizer. + * @private */ Ext.define('Ext.resizer.ResizeTracker', { extend: 'Ext.dd.DragTracker', @@ -121247,6 +122748,8 @@ Ext.define('Ext.resizer.ResizeTracker', { ratio, widthAdjust = 0, heightAdjust = 0, + snappedWidth, + snappedHeight, adjustX = 0, adjustY = 0, dragRatio, @@ -121311,16 +122814,49 @@ Ext.define('Ext.resizer.ResizeTracker', { y: box.y + adjustY }; + // Snap value between stops according to configured increments + snappedWidth = Ext.Number.snap(newBox.width, me.widthIncrement); + snappedHeight = Ext.Number.snap(newBox.height, me.heightIncrement); + if (snappedWidth != newBox.width || snappedHeight != newBox.height){ + switch (region) { + case 'northeast': + newBox.y -= snappedHeight - newBox.height; + break; + case 'north': + newBox.y -= snappedHeight - newBox.height; + break; + case 'southwest': + newBox.x -= snappedWidth - newBox.width; + break; + case 'west': + newBox.x -= snappedWidth - newBox.width; + break; + case 'northwest': + newBox.x -= snappedWidth - newBox.width; + newBox.y -= snappedHeight - newBox.height; + } + newBox.width = snappedWidth; + newBox.height = snappedHeight; + } + // out of bounds if (newBox.width < me.minWidth || newBox.width > me.maxWidth) { newBox.width = Ext.Number.constrain(newBox.width, me.minWidth, me.maxWidth); - newBox.x = me.lastX || newBox.x; + + // Re-adjust the X position if we were dragging the west side + if (adjustX) { + newBox.x = box.x + (box.width - newBox.width); + } } else { me.lastX = newBox.x; } if (newBox.height < me.minHeight || newBox.height > me.maxHeight) { newBox.height = Ext.Number.constrain(newBox.height, me.minHeight, me.maxHeight); - newBox.y = me.lastY || newBox.y; + + // Re-adjust the Y position if we were dragging the north side + if (adjustY) { + newBox.y = box.y + (box.height - newBox.height); + } } else { me.lastY = newBox.y; } @@ -121439,12 +122975,27 @@ Ext.define('Ext.resizer.SplitterTracker', { onBeforeStart: function(e) { var me = this, prevCmp = me.getPrevCmp(), - nextCmp = me.getNextCmp(); + nextCmp = me.getNextCmp(), + collapseEl = me.getSplitter().collapseEl, + overlay; + + if (collapseEl && (e.getTarget() === me.getSplitter().collapseEl.dom)) { + return false; + } // SplitterTracker is disabled if any of its adjacents are collapsed. if (nextCmp.collapsed || prevCmp.collapsed) { return false; } + + overlay = me.overlay = Ext.getBody().createChild({ + cls: me.overlayCls, + html: ' ' + }); + overlay.unselectable(); + overlay.setSize(Ext.core.Element.getViewWidth(true), Ext.core.Element.getViewHeight(true)); + overlay.show(); + // store boxes of previous and next me.prevBox = prevCmp.getEl().getBox(); me.nextBox = nextCmp.getEl().getBox(); @@ -121453,17 +123004,8 @@ Ext.define('Ext.resizer.SplitterTracker', { // We move the splitter el. Add the proxy class. onStart: function(e) { - var splitter = this.getSplitter(), - overlay; - + var splitter = this.getSplitter(); splitter.addCls(splitter.baseCls + '-active'); - overlay = this.overlay = Ext.getBody().createChild({ - cls: this.overlayCls, - html: ' ' - }); - overlay.unselectable(); - overlay.setSize(Ext.core.Element.getViewWidth(true), Ext.core.Element.getViewHeight(true)); - overlay.show(); }, // calculate the constrain Region in which the splitter el may be moved. @@ -121575,16 +123117,26 @@ Ext.define('Ext.resizer.SplitterTracker', { layout.onLayout(); }, + // Cleans up the overlay (if we have one) and calls the base. This cannot be done in + // onEnd, because onEnd is only called if a drag is detected but the overlay is created + // regardless (by onBeforeStart). + endDrag: function () { + var me = this; + + if (me.overlay) { + me.overlay.remove(); + delete me.overlay; + } + + me.callParent(arguments); // this calls onEnd + }, + // perform the resize and remove the proxy class from the splitter el onEnd: function(e) { var me = this, splitter = me.getSplitter(); splitter.removeCls(splitter.baseCls + '-active'); - if (me.overlay) { - me.overlay.remove(); - delete me.overlay; - } me.performResize(); }, @@ -121832,7 +123384,7 @@ Ext.define('Ext.selection.CellModel', { /** * @class Ext.selection.RowModel * @extends Ext.selection.Model - * + * * Implement row based navigation via keyboard. * * Must synchronize across grid sections @@ -121841,23 +123393,43 @@ Ext.define('Ext.selection.RowModel', { extend: 'Ext.selection.Model', alias: 'selection.rowmodel', requires: ['Ext.util.KeyNav'], - + /** * @private * Number of pixels to scroll to the left/right when pressing * left/right keys. */ deltaScroll: 5, - + /** * @cfg {Boolean} enableKeyNav - * + * * Turns on/off keyboard navigation within the grid. Defaults to true. */ enableKeyNav: true, - + constructor: function(){ this.addEvents( + /** + * @event beforedeselect + * Fired before a record is deselected. If any listener returns false, the + * deselection is cancelled. + * @param {Ext.selection.RowSelectionModel} this + * @param {Ext.data.Model} record The deselected record + * @param {Number} index The row index deselected + */ + 'beforedeselect', + + /** + * @event beforeselect + * Fired before a record is selected. If any listener returns false, the + * selection is cancelled. + * @param {Ext.selection.RowSelectionModel} this + * @param {Ext.data.Model} record The selected record + * @param {Number} index The row index selected + */ + 'beforeselect', + /** * @event deselect * Fired after a record is deselected @@ -121866,7 +123438,7 @@ Ext.define('Ext.selection.RowModel', { * @param {Number} index The row index deselected */ 'deselect', - + /** * @event select * Fired after a record is selected @@ -121876,12 +123448,12 @@ Ext.define('Ext.selection.RowModel', { */ 'select' ); - this.callParent(arguments); + this.callParent(arguments); }, bindComponent: function(view) { var me = this; - + me.views = me.views || []; me.views.push(view); me.bind(view.getStore(), true); @@ -121898,7 +123470,7 @@ Ext.define('Ext.selection.RowModel', { initKeyNav: function(view) { var me = this; - + if (!view.rendered) { view.on('render', Ext.Function.bind(me.initKeyNav, me, [view], 0), me, {single: true}); return; @@ -121946,7 +123518,7 @@ Ext.define('Ext.selection.RowModel', { onKeyEnd: function(e, t) { var me = this, last = me.store.getAt(me.store.getCount() - 1); - + if (last) { if (e.shiftKey) { me.selectRange(last, me.lastFocused || 0); @@ -121963,7 +123535,7 @@ Ext.define('Ext.selection.RowModel', { onKeyHome: function(e, t) { var me = this, first = me.store.getAt(0); - + if (first) { if (e.shiftKey) { me.selectRange(first, me.lastFocused || 0); @@ -121984,7 +123556,7 @@ Ext.define('Ext.selection.RowModel', { prevIdx, prevRecord, currRec; - + if (rowsVisible) { selIdx = me.lastFocused ? me.store.indexOf(me.lastFocused) : 0; prevIdx = selIdx - rowsVisible; @@ -122014,7 +123586,7 @@ Ext.define('Ext.selection.RowModel', { nextIdx, nextRecord, currRec; - + if (rowsVisible) { selIdx = me.lastFocused ? me.store.indexOf(me.lastFocused) : 0; nextIdx = selIdx + rowsVisible; @@ -122044,7 +123616,7 @@ Ext.define('Ext.selection.RowModel', { e.stopEvent(); var me = this, record = me.lastFocused; - + if (record) { if (me.isSelected(record)) { me.doDeselect(record, false); @@ -122063,7 +123635,7 @@ Ext.define('Ext.selection.RowModel', { view = me.views[0], idx = me.store.indexOf(me.lastFocused), record; - + if (idx > 0) { // needs to be the filtered count as thats what // will be visible. @@ -122088,7 +123660,7 @@ Ext.define('Ext.selection.RowModel', { // There was no lastFocused record, and the user has pressed up // Ignore?? //else if (this.selected.getCount() == 0) { - // + // // this.doSelect(record); // //view.focusRow(idx - 1); //} @@ -122102,7 +123674,7 @@ Ext.define('Ext.selection.RowModel', { view = me.views[0], idx = me.store.indexOf(me.lastFocused), record; - + // needs to be the filtered count as thats what // will be visible. if (idx + 1 < me.store.getCount()) { @@ -122128,21 +123700,21 @@ Ext.define('Ext.selection.RowModel', { } } }, - + scrollByDeltaX: function(delta) { var view = this.views[0], section = view.up(), hScroll = section.horizontalScroller; - + if (hScroll) { hScroll.scrollByDeltaX(delta); } }, - + onKeyLeft: function(e, t) { this.scrollByDeltaX(-this.deltaScroll); }, - + onKeyRight: function(e, t) { this.scrollByDeltaX(this.deltaScroll); }, @@ -122156,26 +123728,29 @@ Ext.define('Ext.selection.RowModel', { // Allow the GridView to update the UI by // adding/removing a CSS class from the row. - onSelectChange: function(record, isSelected, suppressEvent) { + onSelectChange: function(record, isSelected, suppressEvent, commitFn) { var me = this, views = me.views, viewsLn = views.length, store = me.store, rowIdx = store.indexOf(record), + eventName = isSelected ? 'select' : 'deselect', i = 0; - - for (; i < viewsLn; i++) { - if (isSelected) { - views[i].onRowSelect(rowIdx, suppressEvent); - if (!suppressEvent) { - me.fireEvent('select', me, record, rowIdx); - } - } else { - views[i].onRowDeselect(rowIdx, suppressEvent); - if (!suppressEvent) { - me.fireEvent('deselect', me, record, rowIdx); + + if ((suppressEvent || me.fireEvent('before' + eventName, me, record, rowIdx)) !== false && + commitFn() !== false) { + + for (; i < viewsLn; i++) { + if (isSelected) { + views[i].onRowSelect(rowIdx, suppressEvent); + } else { + views[i].onRowDeselect(rowIdx, suppressEvent); } } + + if (!suppressEvent) { + me.fireEvent(eventName, me, record, rowIdx); + } } }, @@ -122187,7 +123762,7 @@ Ext.define('Ext.selection.RowModel', { store = this.store, rowIdx, i = 0; - + if (oldFocused) { rowIdx = store.indexOf(oldFocused); if (rowIdx != -1) { @@ -122206,7 +123781,7 @@ Ext.define('Ext.selection.RowModel', { } } }, - + onEditorTab: function(editingPlugin, e) { var me = this, view = me.views[0], @@ -122215,12 +123790,12 @@ Ext.define('Ext.selection.RowModel', { position = view.getPosition(record, header), direction = e.shiftKey ? 'left' : 'right', newPosition = view.walkCells(position, direction, e, this.preventWrap); - + if (newPosition) { editingPlugin.startEditByPosition(newPosition); } }, - + selectByPosition: function(position) { var record = this.store.getAt(position.row); this.select(record); @@ -122379,8 +123954,9 @@ Ext.define('Ext.selection.CheckboxModel', { * Synchronize header checker value as selection changes. * @private */ - onSelectChange: function(record, isSelected) { - this.callParent([record, isSelected]); + onSelectChange: function() { + this.callParent(arguments); + // check to see if all records are selected var hdSelectStatus = this.selected.getCount() === this.store.getCount(); this.toggleUiHeader(hdSelectStatus); @@ -122471,7 +124047,6 @@ Ext.define('Ext.selection.TreeModel', { }); /** - * @private * @class Ext.slider.Thumb * @extends Ext.Base * @private @@ -122488,9 +124063,12 @@ Ext.define('Ext.slider.Thumb', { */ topZIndex: 10000, /** - * @constructor * @cfg {Ext.slider.MultiSlider} slider The Slider to render to (required) */ + /** + * Creates new slider thumb. + * @param {Object} config (optional) Config object. + */ constructor: function(config) { var me = this; @@ -122752,7 +124330,6 @@ Ext.define('Ext.slider.Thumb', { } }); - * @xtype slidertip */ Ext.define('Ext.slider.Tip', { extend: 'Ext.tip.Tip', @@ -122803,7 +124380,7 @@ Ext.define('Ext.slider.Tip', { * @class Ext.slider.Multi * @extends Ext.form.field.Base *Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis - * clicking and animation. Can be added as an item to any container. In addition, + * clicking and animation. Can be added as an item to any container. In addition, * {@img Ext.slider.Multi/Ext.slider.Multi.png Ext.slider.Multi component} *
Example usage:
* Sliders can be created with more than one thumb handle by passing an array of values instead of a single one: @@ -122818,9 +124395,8 @@ Ext.define('Ext.slider.Tip', { //this defaults to true, setting to false allows the thumbs to pass each other {@link #constrainThumbs}: false, renderTo: Ext.getBody() - }); + }); - * @xtype multislider */ Ext.define('Ext.slider.Multi', { extend: 'Ext.form.field.Base', @@ -122960,7 +124536,7 @@ Ext.define('Ext.slider.Multi', { var me = this, tipPlug, hasTip; - + /** * @property thumbs * @type Array @@ -123081,7 +124657,7 @@ Ext.define('Ext.slider.Multi', { var thumbs = this.thumbs, ln = thumbs.length, zIndex, thumb, i; - + for (i = 0; i < ln; i++) { thumb = thumbs[i]; @@ -123143,7 +124719,7 @@ Ext.define('Ext.slider.Multi', { */ initEvents : function() { var me = this; - + me.mon(me.el, { scope : me, mousedown: me.onMouseDown, @@ -123167,7 +124743,7 @@ Ext.define('Ext.slider.Multi', { thumbs = me.thumbs, len = thumbs.length, local; - + if (me.disabled) { return; } @@ -123193,7 +124769,7 @@ Ext.define('Ext.slider.Multi', { onClickChange : function(local) { var me = this, thumb, index; - + if (local.top > me.clickRange[0] && local.top < me.clickRange[1]) { //find the nearest thumb to the click event thumb = me.getNearest(local, 'left'); @@ -123254,13 +124830,13 @@ Ext.define('Ext.slider.Multi', { var me = this, k, val; - + if(me.disabled || me.thumbs.length !== 1) { e.preventDefault(); return; } k = e.getKey(); - + switch(k) { case e.UP: case e.RIGHT: @@ -123279,33 +124855,6 @@ Ext.define('Ext.slider.Multi', { } }, - /** - * @private - * If using snapping, this takes a desired new value and returns the closest snapped - * value to it - * @param {Number} value The unsnapped value - * @return {Number} The value of the nearest snap target - */ - doSnap : function(value) { - var newValue = value, - inc = this.increment, - m; - - if (!(inc && value)) { - return value; - } - m = value % inc; - if (m !== 0) { - newValue -= m; - if (m * 2 >= inc) { - newValue += inc; - } else if (m * 2 < -inc) { - newValue -= inc; - } - } - return Ext.Number.constrain(newValue, this.minValue, this.maxValue); - }, - // private afterRender : function() { var me = this, @@ -123314,7 +124863,7 @@ Ext.define('Ext.slider.Multi', { len = thumbs.length, thumb, v; - + me.callParent(arguments); for (; i < len; i++) { @@ -123352,8 +124901,8 @@ Ext.define('Ext.slider.Multi', { */ normalizeValue : function(v) { var me = this; - - v = me.doSnap(v); + + v = Ext.Number.snap(v, this.increment, this.minValue, this.maxValue); v = Ext.util.Format.round(v, me.decimalPrecision); v = Ext.Number.constrain(v, me.minValue, me.maxValue); return v; @@ -123370,7 +124919,7 @@ Ext.define('Ext.slider.Multi', { thumbs = me.thumbs, len = thumbs.length, t; - + me.minValue = val; me.inputEl.dom.setAttribute('aria-valuemin', val); @@ -123392,7 +124941,7 @@ Ext.define('Ext.slider.Multi', { thumbs = me.thumbs, len = thumbs.length, t; - + me.maxValue = val; me.inputEl.dom.setAttribute('aria-valuemax', val); @@ -123472,7 +125021,7 @@ Ext.define('Ext.slider.Multi', { thumb, el, xy; - + me.callParent(); for (; i < len; i++) { @@ -123506,7 +125055,7 @@ Ext.define('Ext.slider.Multi', { len = thumbs.length, thumb, el; - + this.callParent(); for (; i < len; i++) { @@ -123592,7 +125141,7 @@ Ext.define('Ext.slider.Multi', { // private beforeDestroy : function() { var me = this; - + Ext.destroyMembers(me.innerEl, me.endEl, me.focusEl); Ext.each(me.thumbs, function(thumb) { Ext.destroy(thumb); @@ -123647,7 +125196,6 @@ Ext.define('Ext.slider.Multi', { }); * The class Ext.slider.Single is aliased to Ext.Slider for backwards compatibility. - * @xtype slider */ Ext.define('Ext.slider.Single', { extend: 'Ext.slider.Multi', @@ -123698,8 +125246,6 @@ Ext.define('Ext.slider.Single', { *Represents a single Tab in a {@link Ext.tab.Panel TabPanel}. A Tab is simply a slightly customized {@link Ext.button.Button Button}, * styled to look like a tab. Tabs are optionally closable, and can also be disabled. 99% of the time you will not * need to create Tabs manually as the framework does so automatically when you use a {@link Ext.tab.Panel TabPanel}
- * - * @xtype tab */ Ext.define('Ext.tab.Tab', { extend: 'Ext.button.Button', @@ -123914,7 +125460,7 @@ Ext.define('Ext.tab.Tab', { tag: 'a', cls: me.baseCls + '-close-btn', href: '#', - html: me.closeText, + // html: me.closeText, // removed for EXTJSIV-1719, by rob@sencha.com title: me.closeText }).on('click', Ext.EventManager.preventDefault); // mon ??? } @@ -124035,8 +125581,6 @@ Ext.define('Ext.tab.Tab', { * @class Ext.tab.Bar * @extends Ext.panel.Header *TabBar is used internally by a {@link Ext.tab.Panel TabPanel} and wouldn't usually need to be created manually.
- * - * @xtype tabbar */ Ext.define('Ext.tab.Bar', { extend: 'Ext.panel.Header', @@ -124263,6 +125807,24 @@ configured header {@link Ext.panel.Panel#tools tools}. To display a header, embed the TabPanel in a {@link Ext.panel.Panel Panel} which uses `{@link Ext.container.Container#layout layout:'fit'}`. +__Controlling tabs:__ +Configuration options for the {@link Ext.tab.Tab} that represents the component can be passed in by specifying the tabConfig option: + + Ext.create('Ext.tab.Panel', { + width: 400, + height: 400, + renderTo: document.body, + items: [{ + title: 'Foo' + }, { + title: 'Bar', + tabConfig: { + title: 'Custom Title', + tooltip: 'A button tooltip' + } + }] + }); + __Examples:__ Here is a basic TabPanel rendered to the body. This also shows the useful configuration {@link #activeTab}, which allows you to set the active tab on render. @@ -124321,7 +125883,7 @@ Example usage: tabs.setActiveTab(users); }, 1000); -You can remove the background of the TabBar by setting the {@link #plain} property to `false`. +You can remove the background of the TabBar by setting the {@link #plain} property to `true`. Example usage: @@ -124498,9 +126060,6 @@ Example usage: }); * @extends Ext.Panel - * @constructor - * @param {Object} config The configuration options - * @xtype tabpanel * @markdown */ Ext.define('Ext.tab.Panel', { @@ -124689,16 +126248,22 @@ Ext.define('Ext.tab.Panel', { * Makes sure we have a Tab for each item added to the TabPanel */ onAdd: function(item, index) { - var me = this; - - item.tab = me.tabBar.insert(index, { - xtype: 'tab', - card: item, - disabled: item.disabled, - closable: item.closable, - hidden: item.hidden, - tabBar: me.tabBar - }); + var me = this, + cfg = item.tabConfig || {}, + defaultConfig = { + xtype: 'tab', + card: item, + disabled: item.disabled, + closable: item.closable, + hidden: item.hidden, + tabBar: me.tabBar + }; + + if (item.closeText) { + defaultConfig.closeText = item.closeText; + } + cfg = Ext.applyIf(cfg, defaultConfig); + item.tab = me.tabBar.insert(index, cfg); item.on({ scope : me, @@ -124848,9 +126413,6 @@ Ext.define('Ext.tab.Panel', { * renderTo: Ext.getBody() * }); * - * @constructor - * Creates a new Spacer - * @xtype tbspacer */ Ext.define('Ext.toolbar.Spacer', { extend: 'Ext.Component', @@ -124910,17 +126472,17 @@ Ext.define('Ext.tree.Column', { } } if (record.isLast()) { - if (record.isLeaf() || (record.isLoaded() && !record.hasChildNodes())) { - buf.unshift(format(imgText, (elbowPrefix + 'end'), Ext.BLANK_IMAGE_URL)); - } else { + if (record.isExpandable()) { buf.unshift(format(imgText, (elbowPrefix + 'end-plus ' + expanderCls), Ext.BLANK_IMAGE_URL)); + } else { + buf.unshift(format(imgText, (elbowPrefix + 'end'), Ext.BLANK_IMAGE_URL)); } } else { - if (record.isLeaf() || (record.isLoaded() && !record.hasChildNodes())) { - buf.unshift(format(imgText, (treePrefix + 'elbow'), Ext.BLANK_IMAGE_URL)); - } else { + if (record.isExpandable()) { buf.unshift(format(imgText, (elbowPrefix + 'plus ' + expanderCls), Ext.BLANK_IMAGE_URL)); + } else { + buf.unshift(format(imgText, (treePrefix + 'elbow'), Ext.BLANK_IMAGE_URL)); } } } else { @@ -125159,14 +126721,9 @@ Ext.define('Ext.tree.View', { // +1 because of the tr with th'es that is already there Ext.fly(children[relativeIndex + 1]).insertSibling(nodes, 'before', true); } - + // We also have to update the CompositeElementLite collection of the DataView - if (index < a.length) { - a.splice.apply(a, [index, 0].concat(nodes)); - } - else { - a.push.apply(a, nodes); - } + Ext.Array.insert(a, index, nodes); // If we were in an animation we need to now change the animation // because the targetEl just got higher. @@ -125441,38 +126998,30 @@ Ext.define('Ext.tree.View', { } }); /** - * @class Ext.tree.Panel - * @extends Ext.panel.Table - * * The TreePanel provides tree-structured UI representation of tree-structured data. * A TreePanel must be bound to a {@link Ext.data.TreeStore}. TreePanel's support - * multiple columns through the {@link columns} configuration. + * multiple columns through the {@link #columns} configuration. * * Simple TreePanel using inline data. * * {@img Ext.tree.Panel/Ext.tree.Panel1.png Ext.tree.Panel component} * - * ## Simple Tree Panel (no columns) + * Code: * * var store = Ext.create('Ext.data.TreeStore', { * root: { * expanded: true, - * text:"", - * user:"", - * status:"", * children: [ - * { text:"detention", leaf: true }, - * { text:"homework", expanded: true, - * children: [ - * { text:"book report", leaf: true }, - * { text:"alegrbra", leaf: true} - * ] - * }, - * { text: "buy lottery tickets", leaf:true } + * { text: "detention", leaf: true }, + * { text: "homework", expanded: true, children: [ + * { text: "book report", leaf: true }, + * { text: "alegrbra", leaf: true} + * ] }, + * { text: "buy lottery tickets", leaf: true } * ] * } * }); - * + * * Ext.create('Ext.tree.Panel', { * title: 'Simple Tree', * width: 200, @@ -125481,8 +127030,6 @@ Ext.define('Ext.tree.View', { * rootVisible: false, * renderTo: Ext.getBody() * }); - * - * @xtype treepanel */ Ext.define('Ext.tree.Panel', { extend: 'Ext.panel.Table', @@ -125493,19 +127040,21 @@ Ext.define('Ext.tree.Panel', { selType: 'treemodel', treeCls: Ext.baseCSSPrefix + 'tree-panel', - + + deferRowRender: false, + /** - * @cfg {Boolean} lines false to disable tree lines (defaults to true) + * @cfg {Boolean} lines False to disable tree lines. Defaults to true. */ lines: true, /** - * @cfg {Boolean} useArrows true to use Vista-style arrows in the tree (defaults to false) + * @cfg {Boolean} useArrows True to use Vista-style arrows in the tree. Defaults to false. */ useArrows: false, /** - * @cfg {Boolean} singleExpand true if only 1 node per branch may be expanded + * @cfg {Boolean} singleExpand True if only 1 node per branch may be expanded. Defaults to false. */ singleExpand: false, @@ -125515,23 +127064,37 @@ Ext.define('Ext.tree.Panel', { }, /** - * @cfg {Boolean} animate true to enable animated expand/collapse (defaults to the value of {@link Ext#enableFx Ext.enableFx}) + * @cfg {Boolean} animate True to enable animated expand/collapse. Defaults to the value of {@link Ext#enableFx}. */ /** - * @cfg {Boolean} rootVisible false to hide the root node (defaults to true) + * @cfg {Boolean} rootVisible False to hide the root node. Defaults to true. */ rootVisible: true, /** - * @cfg {Boolean} displayField The field inside the model that will be used as the node's text. (defaults to text) + * @cfg {Boolean} displayField The field inside the model that will be used as the node's text. Defaults to 'text'. */ displayField: 'text', /** - * @cfg {Boolean} root Allows you to not specify a store on this TreePanel. This is useful for creating a simple - * tree with preloaded data without having to specify a TreeStore and Model. A store and model will be created and - * root will be passed to that store. + * @cfg {Ext.data.Model/Ext.data.NodeInterface/Object} root + * Allows you to not specify a store on this TreePanel. This is useful for creating a simple tree with preloaded + * data without having to specify a TreeStore and Model. A store and model will be created and root will be passed + * to that store. For example: + * + * Ext.create('Ext.tree.Panel', { + * title: 'Simple Tree', + * root: { + * text: "Root node", + * expanded: true, + * children: [ + * { text: "Child 1", leaf: true }, + * { text: "Child 2", leaf: true } + * ] + * }, + * renderTo: Ext.getBody() + * }); */ root: null, @@ -125541,12 +127104,11 @@ Ext.define('Ext.tree.Panel', { lockedCfgCopy: ['displayField', 'root', 'singleExpand', 'useArrows', 'lines', 'rootVisible'], /** - * @cfg {Boolean} hideHeaders - * Specify astrueto hide the headers. + * @cfg {Boolean} hideHeaders True to hide the headers. Defaults to `undefined`. */ /** - * @cfg {Boolean} folderSort Set to true to automatically prepend a leaf sorter to the store (defaults to undefined) + * @cfg {Boolean} folderSort True to automatically prepend a leaf sorter to the store. Defaults to `undefined`. */ constructor: function(config) { @@ -125838,7 +127400,7 @@ Ext.define('Ext.tree.Panel', { * Expand the tree to the path of a particular node. * @param {String} path The path to expand. The path should include a leading separator. * @param {String} field (optional) The field to get the data from. Defaults to the model idProperty. - * @param {String} separator (optional) A separator to use. Defaults to '/'. + * @param {String} separator (optional) A separator to use. Defaults to `'/'`. * @param {Function} callback (optional) A function to execute when the expand finishes. The callback will be called with * (success, lastNode) where success is if the expand was successful and lastNode is the last node that was expanded. * @param {Object} scope (optional) The scope of the callback function @@ -125886,7 +127448,7 @@ Ext.define('Ext.tree.Panel', { * Expand the tree to the path of a particular node, then selecti t. * @param {String} path The path to select. The path should include a leading separator. * @param {String} field (optional) The field to get the data from. Defaults to the model idProperty. - * @param {String} separator (optional) A separator to use. Defaults to '/'. + * @param {String} separator (optional) A separator to use. Defaults to `'/'`. * @param {Function} callback (optional) A function to execute when the select finishes. The callback will be called with * (bSuccess, oLastNode) where bSuccess is if the select was successful and oLastNode is the last node that was expanded. * @param {Object} scope (optional) The scope of the callback function @@ -125902,7 +127464,7 @@ Ext.define('Ext.tree.Panel', { keys = path.split(separator); last = keys.pop(); - me.expandPath(keys.join('/'), field, separator, function(success, node){ + me.expandPath(keys.join(separator), field, separator, function(success, node){ var doSuccess = false; if (success && node) { node = node.findChild(field, last); @@ -125918,6 +127480,7 @@ Ext.define('Ext.tree.Panel', { }, me); } }); + /** * @class Ext.view.DragZone * @extends Ext.dd.DragZone @@ -125945,7 +127508,7 @@ Ext.define('Ext.view.DragZone', { // So a View's DragZone cannot use the View's main element because the DropZone must use that // because the DropZone may need to scroll on hover at a scrolling boundary, and it is the View's // main element which handles scrolling. - // We use the View's parent element to drag from. Ideally, we would use the internal structure, but that + // We use the View's parent element to drag from. Ideally, we would use the internal structure, but that // is transient; DataView's recreate the internal structure dynamically as data changes. // TODO: Ext 5.0 DragDrop must allow multiple DD objects to share the same element. me.callParent([me.view.el.dom.parentNode]); @@ -125965,6 +127528,12 @@ Ext.define('Ext.view.DragZone', { onItemMouseDown: function(view, record, item, index, e) { if (!this.isPreventDrag(e, record, item, index)) { this.handleMouseDown(e); + + // If we want to allow dragging of multi-selections, then veto the following handlers (which, in the absence of ctrlKey, would deselect) + // if the mousedowned record is selected + if (view.getSelectionModel().selectionMode == 'MULTI' && !e.ctrlKey && view.getSelectionModel().isSelected(record)) { + return false; + } } }, @@ -126005,7 +127574,7 @@ Ext.define('Ext.view.DragZone', { // Update the selection to match what would have been selected if the user had // done a full click on the target node rather than starting a drag from it if (!selectionModel.isSelected(record) || e.hasModifier()) { - selectionModel.selectWithEvent(record, e); + selectionModel.selectWithEvent(record, e, true); } data.records = selectionModel.getSelection(); @@ -126185,10 +127754,10 @@ Ext.define('Ext.tree.ViewDropZone', { } // Respect the allowDrop field on Tree nodes - if (position === 'append' && targetNode.get('allowDrop') == false) { + if (position === 'append' && targetNode.get('allowDrop') === false) { return false; } - else if (position != 'append' && targetNode.parentNode.get('allowDrop') == false) { + else if (position != 'append' && targetNode.parentNode.get('allowDrop') === false) { return false; } @@ -126217,6 +127786,7 @@ Ext.define('Ext.tree.ViewDropZone', { this.queueExpand(targetNode); } + if (this.isValidDropPoint(node, position, dragZone, e, data)) { this.valid = true; this.currentPosition = position; @@ -126225,24 +127795,26 @@ Ext.define('Ext.tree.ViewDropZone', { indicator.setWidth(Ext.fly(node).getWidth()); indicatorY = Ext.fly(node).getY() - Ext.fly(view.el).getY() - 1; + /* + * In the code below we show the proxy again. The reason for doing this is showing the indicator will + * call toFront, causing it to get a new z-index which can sometimes push the proxy behind it. We always + * want the proxy to be above, so calling show on the proxy will call toFront and bring it forward. + */ if (position == 'before') { returnCls = targetNode.isFirst() ? Ext.baseCSSPrefix + 'tree-drop-ok-above' : Ext.baseCSSPrefix + 'tree-drop-ok-between'; indicator.showAt(0, indicatorY); - indicator.toFront(); - } - else if (position == 'after') { + dragZone.proxy.show(); + } else if (position == 'after') { returnCls = targetNode.isLast() ? Ext.baseCSSPrefix + 'tree-drop-ok-below' : Ext.baseCSSPrefix + 'tree-drop-ok-between'; indicatorY += Ext.fly(node).getHeight(); indicator.showAt(0, indicatorY); - indicator.toFront(); - } - else { + dragZone.proxy.show(); + } else { returnCls = Ext.baseCSSPrefix + 'tree-drop-ok-append'; // @TODO: set a class on the parent folder node to be able to style it indicator.hide(); } - } - else { + } else { this.valid = false; } @@ -126329,7 +127901,9 @@ Ext.define('Ext.tree.ViewDropZone', { //FIXME: the check for n.firstChild is not a great solution here. Ideally the line should simply read //Ext.fly(n.firstChild) but this yields errors in IE6 and 7. See ticket EXTJSIV-1705 for more details Ext.Array.forEach(recordDomNodes, function(n) { - Ext.fly(n.firstChild ? n.firstChild : n).highlight(me.dropHighlightColor); + if (n) { + Ext.fly(n.firstChild ? n.firstChild : n).highlight(me.dropHighlightColor); + } }); } }; @@ -127118,7 +128692,7 @@ Ext.define('Ext.view.TableChunker', { '{[this.openTableWrap()]}', '', '', - '
', + ' ', ' ', ' ',', ' - 1-dimensional array : (e.g., ['Foo','Bar'])